Меню
ГлавнаяИгры

Видеонаблюдение через браузер. Почему же мы не видим повсеместного внедрения WebRTC

Меня часто спрашивают, как проверить веб-камеру на компьютере. Казалось бы, странный вопрос, но ничего странного в нём нет — это действительно не так просто сделать неопытному пользователю.

Дело в том, что если на компьютере не установлено ни одной программы, которая непосредственно работает с веб-камерой (например, Skype или Viber), то и включить её для проверки работоспособности практически негде.

Просто обычно в систему прописывается только драйвер камеры, для её работы, а он графического интерфейса не имеет.

Конечно, некоторые производители поставляют вместе с драйвером специальные утилиты, но во-первых — далеко не все, во-вторых — отдельная программа в системе для проверки (раз в сто лет) работоспособности веб-камеры? Ну не знаю, не знаю.

Как проверить веб-камеру программно

Если Вы планируете участвовать в видеочатах или общаться с друзьями и родственниками онлайн — установите соответствующие программы для общения. В подобных продуктах всегда есть пункт настройки веб-камеры, где можно легко проверить её работу.

Так случилось, что Вам не с кем общаться и надобности в подобных программах нет — не беда, есть другой способ проверить камеру программно.

Буквально вчера, я описывал замечательную бесплатную программу WebCam On-Off , которая повышает безопасность Вашего компьютера подключенного к сети Интернет и одновременно может проверить Вашу веб-камеру на работоспособность всего одним кликом.



Также, эта программа поможет тем пользователям, у которых нет подключения к сети Интернет (неужели ещё есть такие?).

Как проверить веб-камеру онлайн

Без установки в компьютер каких-либо программ проверить работу веб-камеры тоже можно — с помощью специальных сервисов в сети Интернет.

Подобных сайтов очень много — я опишу, в двух словах, первую тройку из выдачи поисковой системы.

http://ru.webcammictest.com/

…и всё — Вы увидите себя на экране (если конечно камера исправна). Ещё на этом сайте можно проверить микрофон — пункт меню «Проверить микрофон».

Кликните на «Воспроизведение» и начнёт транслироваться из динамиков душераздирающий звук, который будет сразу записываться микрофоном — прямая линия превратится в нервную кривую. Это означает, что микрофон чудно работает и исправен.

http://webcamtest.ru/

Тот же алгоритм действий — разрешаете доступ к камере и микрофону…

…и смотрите на себя любимого в мониторе. Тут тоже можно проверить встроенный микрофон…

http://toolster.ru/cam_checker

Снова разрешаем доступ к камере и получаем результат проверки…

Друзья! Близятся те времена, когда почти все, для чего нужен был флеш в браузере, можно будет делать и без него. Не знаю как у вас, а у меня это вызывает кучу положительных эмоций. Одним из шагов на пути вытеснения flash становится реализация в браузерах getUserMedia (Stream) javascript API. На данный момент Stream API для видеопотока реализовано в последних десктопных версиях Chrome и Opera. Firefox на подходе. Аудиопоток “coming soon”. Даже не знаю, ждать ли чего-то от IE .. по идее, он скорее умрет (..а он умрет), чем начнет догонять всех остальных.

Давайте взглянем на пример, а потом посмотрим, как это работает:

Давайте разберемся, как это работает.

Для начала нам понадобятся такие элементы, как:

  • video , в котором мы будем воспроизводить поточное видео с камеры пользователя
  • canvas , в который мы будем помещать кадры для сохранения
  • кнопка для захвата изображения
  • подсказка для юзера, который не понял, что вообще от него хотят.
    • JS navigator.getUserMedia({video:true}, // тип запрашиваемого стрима (может быть audio) function(stream) {/*callback в случае удачи*/}, function(){/*callback в случае отказа*/})

    Как видно, в случае удачи в callback вернется объект stream, на основе которого можно получить url видеопотока. Сделать это можно с помощью window.URL.createObjectURL(stream) , которая может быть вам знакома, если вы когда-либо использовали js file API.

    JS var url = window.URL.createObjectURL(stream);
    • передаем этот url объекту video
    • при нажатии на кнопку захватываем текущий кадр video в canvas
    • забираем data:url получившегося изображения из canvas
    • и все, готово! Можно делать с ним все, что угодно: отправить на сервер, отфильтровать, передать другу через сокет и тп. Подробнее про base64 и data:url формат можно почитать .
    Давайте рассмотрим код примера в начале статьи для наглядности

    Конечно, лучше и красивее создать все элементы (canvas, video, ..) динамически, но для наглядности и понимания давайте изначально расположим их статически на странице:

    HTML ▲ ▲ ▲ Разрешите использовать камеру ▲ ▲ ▲
    (Сверху текущей страницы) video canvas JS window.onload = function () { var canvas = document.getElementById("canvas"); var video = document.getElementById("video"); var button = document.getElementById("button"); var allow = document.getElementById("allow"); var context = canvas.getContext("2d"); var videoStreamUrl = false; // функция которая будет выполнена при нажатии на кнопку захвата кадра var captureMe = function () { if (!videoStreamUrl) alert("То-ли вы не нажали "разрешить" в верху окна, то-ли что-то не так с вашим видео стримом") // переворачиваем canvas зеркально по горизонтали (см. описание внизу статьи) context.translate(canvas.width, 0); context.scale(-1, 1); // отрисовываем на канвасе текущий кадр видео context.drawImage(video, 0, 0, video.width, video.height); // получаем data: url изображения c canvas var base64dataUrl = canvas.toDataURL("image/png"); context.setTransform(1, 0, 0, 1, 0, 0); // убираем все кастомные трансформации canvas // на этом этапе можно спокойно отправить base64dataUrl на сервер и сохранить его там как файл (ну или типа того) // но мы добавим эти тестовые снимки в наш пример: var img = new Image(); img.src = base64dataUrl; window.document.body.appendChild(img); } button.addEventListener("click", captureMe); // navigator.getUserMedia и window.URL.createObjectURL (смутные времена браузерных противоречий 2012) navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; window.URL.createObjectURL = window.URL.createObjectURL || window.URL.webkitCreateObjectURL || window.URL.mozCreateObjectURL || window.URL.msCreateObjectURL; // запрашиваем разрешение на доступ к поточному видео камеры navigator.getUserMedia({video: true}, function (stream) { // разрешение от пользователя получено // скрываем подсказку allow.style.display = "none"; // получаем url поточного видео videoStreamUrl = window.URL.createObjectURL(stream); // устанавливаем как источник для video video.src = videoStreamUrl; }, function () { console.log("что-то не так с видеостримом или пользователь запретил его использовать:P"); }); }; CSSЗеркальное отображение при съемке

    В примере выше мы делали захват изображений с зеркальным отображением по горизонтали. Зачем, спросите вы. Иногда можно встретить такие задачи. Это особенно актуально, когда вам нужно точно спозиционировать свое изображение по отношению к фрейму или окружающим предметам. Например, поместить свое лицо в заданную область для сканирования, совместить с предустановленной маской и т.п. В этом случае для пользователя будет удобнее, если изображение, получаемое с камеры, отображается на мониторе зеркально (по горизонтали).

    Как мы этого достигли:

    Во-первых, мы сделали css transform для video

    CSS video{ transform: scaleX(-1); -o-transform: scaleX(-1); -ms-transform: scaleX(-1); -moz-transform: scaleX(-1); -webkit-transform: scaleX(-1); }

    Во-вторых, повернули изображение на canvas таким же образом

    JS // переворачиваем canvas зеркально по горизонтали context.translate(canvas.width, 0); context.scale(-1, 1);

    Если вам не нужно зеркальное отображение, просто удалите эту часть js и css

    Удачи! Жду вопросов и поправок в комментариях.

    Расширение (extension) для браузера – это плагин, который устанавливается в браузер дополнительно и выполняет определенные функции (в браузере Opera расширения раньше назывались виджетами). Функции, выполняемые расширением, могут быть абсолютно разными - от перевода слов на любом открываемом сайте, различных развлечений и до полезных функций для веб-мастеров и seo-оптимизаторов.

    Удобство расширений заключается в том, что они находятся всегда под рукой, как правило, в правом углу Вашего браузера в виде красивых иконок 18х18 пикселов. Для того, чтобы выполнить то или иное действие, достаточно просто кликнуть один раз по нужному расширению – очень удобно! Расширения открываются в небольших окошках, что не мешает Вам просматривать Ваши любимые сайты. При клике мышкой вне окна расширения расширение закрывается, так же быстро, как и открылось.

    Разработчики браузеров предоставляют всю информацию по разработке и отладке расширений, так что любой, кто что-то понимает в веб-технологиях, сможет создать свое расширение. Также у каждого браузера имеется большое количество полезных расширений, которые можно скачать на официальных сайтах браузера.

    сайт предлагает Вам организовать видеонаблюдение через интернет с помощью расширения MyIPCam для браузеров Google Chrome, Mozilla Fifefox, Opera (поддерживается как Opera на движке Presto, так и новая Opera 15+ на движке Chromium) и Яндекс.Браузер. При установке нашего расширения Ваши IP-камеры будут доступны Вам сразу же, без регистрации на нашем сервисе. Расширение будет напрямую обращаться к Вашей IP-камере и получать картинку с нее.

    Преимуществ видеонаблюдения через расширение браузера много. Например, чтобы посмотреть Ваши IP-камеры, Вам не придется регистрироваться на различных сервисах видеонаблюдения. Все, что от Вас потребуется – выбрать в настройках расширения модель Ваших камер, ввести их IP-адреса или dns-имена, задать логин и пароль. И видеонаблюдение готово.

    Видеонаблюдение через расширение браузера - это самый оперативный способ просмотра Ваших IP-камер, если Вы читаете новости или работаете в интернете!

    Вы всего лишь нажимаете на иконке в правом верхнем углу, и в небольшом окошке открываются Ваши IP-камеры, начинается трансляция видео с них. Чтобы закрыть окошко расширения, достаточно лишь кликнуть вне окна расширения. Такой подход позволяет не только наиболее быстро и удобно просмотреть свои камеры, когда некогда отвлекаться на лишние телодвижения для просмотра обстановки дома, но и не мешает Вашей работе в интернете. Вы получите возможность не закрывать сайт и не переходить с сайта, который Вы просматриваете в данный момент.

    Необходимые условия для организации видеонаблюдения через расширение для браузеров:

    • IP-камеры должны быть доступны из интернета. Т.е. если Вы можете просмотреть свою камеру из любой точки, из офиса или из дома, то и через расширение это тоже возможно. Если Вы не знаете, как сделать IP-камеру доступной из интернета, читайте статью .
    • Возможно использование расширений и в локальных сетях. В этом случае в расширении указываются локальные IP-адреса Ваших камер (вида 192.168.X.X). Вы сможете просмотреть свои домашние камеры только, если Вы находитесь дома, офисные IP-камеры – если Вы находитесь в офисе. Недостаток – Вы не сможете просмотреть домашние IP-камеры, если находитесь, например, в офисе.
    Загрузите расширение MyIPCam прямо сейчас
    • Расширение MyIPCam для просмотра IP-камер через браузер Google Chrome и Яндекс.Браузер

      Расширение позволяет просматривать свои IP-камеры в популярных браузерах Google Chrome и Яндекс.Браузер. Для работы в настройках расширения необходимо выбрать модель камеры, задать адрес, логин и пароль доступа к IP-камере..

      Качайте расширение MyIPCam с официального сайта Интернет-магазина Chrome

    • Расширение MyIPCam для просмотра IP-камер через браузер Mozilla Firefox

      Расширение (Дополнение, add-on) позволяет просматривать свои IP-камеры в браузере Mozilla Firefox. Для работы в настройках расширения необходимо выбрать модель камеры, задать адрес, логин и пароль доступа к IP-камере..

      Качайте расширение MyIPCam с официального сайта Mozilla Firefox

    • Расширение MyIPCam для просмотра IP-камер через браузер Opera

      Расширение позволяет просматривать свои IP-камеры в браузере Opera. Для работы в настройках расширения необходимо выбрать модель камеры, задать адрес, логин и пароль доступа к IP-камере..

      Качайте расширение MyIPCam на официальном сайте Opera

    Предлагаем услугу! Разработка расширений для любого браузера с функционалом под Вас!

    Хотите быть в каждом браузере своих клиентов? Мы разработаем для Вас собственное расширение. Обращайтесь на и расширяйте свои возможности вместе с нами! Подробности .

    Чаще всего причиной неполадок вебки становится конфликт устройства с компьютерным ПО. Она может быть просто деактивирована в диспетчере устройств или заменена на другую в настройках используемой программы. Если есть полная уверенность в том, что все настроено корректно, можно попробовать проверить веб камеру онлайн с помощью специализированных сервисов.

    Как было отмечено, проблема появляется после того, как ПО начинает конфликтовать с подключенным девайсом. Это происходит из-за нарушения работы драйверов, устаревания приложения или поломки устройства.

    Совсем не обязательно искать еще один компьютер, чтобы сделать проверку камеры со звуком, необходимо просто открыть веб-обозреватель и воспользоваться услугами одного из перечисленных ниже сайтов, причем совершенно бесплатно.

    Мы рассмотрим самые популярные и функциональные, работоспособность которых была проверена многими пользователями.

    В первую очередь необходимо установить свежее обновление Флеш Плеера.

    Здесь вы легко сможете проверить онлайн свою веб камеру со звуком. В открывшемся окошке будет две кнопки – «Видео…», а также «Аудио сигнал». Именно они нам нужны. Под каждой из них имеется небольшая инструкция, позволяющая устранить неисправности, приводящие к некорректному отображению результатов.

    Если на мониторе ничего не появилось, то следует в активной области сделать правый клик мышкой и зайти в раздел «Камера» (либо «Микрофон») и найти в списке свое оборудование.


    Не забывайте разрешить доступ к устройствам. После проверки на экране появится ваше отображение. Если его нет, следует проверить корректность подключения вебки.

    Как проверить свою веб камеру онлайн с помощью Toolster?

    Отличный сервис с простым оформлением и достойным функционалом. С правой стороны находится шкала чувствительности микрофона, а снизу все данные об оборудовании. В основной области передается видео сигнал.


    Важно обновить Flash Плеер и разрешить доступ к подключениям. После проверки на экране ноутбука или компьютера, если все хорошо, появится надпись «Fine».

    Раньше данный сайт был только англоязычным, что отталкивало многих пользователей. В настоящее время открыт русскоязычный ресурс. Протестировать вебку можно на главной страничке сайта. Стоит отметить, что для проверки микрофона нужно нажать по ссылке .


    Если сервис запросит доступ к оборудованию, обязательно нужно его дать, в обратном случае ничего не получится.

    Через несколько секунд на черном дисплее должно появиться изображение, которое передается с веб камеры. Это означает, что оборудование исправно. В том случае, если вам необходимо определить качество передачи звука, необходимо нажать на ссылку и произнести несколько слов, если соответствующий график меняется, то с аудио устройством все хорошо.

    Этот инструмент позволяет быстро проверить онлайн вебку и микрофон . На первом шаге не проверяется Adobe Flash, в отличие от аналогов, результат будет виден сразу.

    Оформление простое и понятное, не нужно долго разбираться.

    Если вы не хотите пользоваться англоязычными сайтами, выбирайте те, что на русском. Онлайн проверка абсолютно бесплатна, не займет много времени. Вы можете выбрать любой из предложенных вариантов – результат будет одинаковым. Если изображение не появляется, проблема появилась в «железе». Можете попробовать обновить драйвера или использовать встроенные системные возможности.

    Для начала попытайтесь проверить веб камеру в режиме онлайн, но на крайний случай при необходимости попробуйте подключить оборудование к другому ПК. Удачи!

    В правом верхнем углу находим значок шестеренка он же «Сервис». Открываем вкладку «Свойства браузера». Выбираем раздел безопасность, выделаем значок «Интернет», кликаем на кнопку «Другой». В открывшемся меню настроек ищем строчки с Active X и включаем каждый сценарий, или ставим их в положение предлагать.

    Если все сделано верно, то при попадании на web интерфейс устройства, нам предложат пройти установку плагина, после которой можно будет осуществлять полноценную работу с Вашими видеокамерами.

    Настройка Google Chrom и Mozilla FireFox

    Возможность просмотра видеонаблюдения через другой сторонний браузер тоже имеется, но для этого необходимо установить специальное расширение IE Tab. Открываем значок «три точки» — настройки управление Google Chrome. Выбираем строку «Дополнительные инструменты» в выпадающем меню кликаем на расширения.

    В открывшемся окне «Расширения» в левом верхнем углу жмем на значок три черточки и находим «Магазин Сhrome».

    В окне поиска ищем необходимое нам расширение «IE TAB». Жмем установить.