Видеонаблюдение через браузер. Проверяем веб-камеру онлайн

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

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

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

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

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

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

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

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

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

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

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

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

http://ru.webcammictest.com/

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

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

http://webcamtest.ru/

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

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

http://toolster.ru/cam_checker

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

При покупке и установке вебкамеры (или просто в моменты её дисфункции) у нас может возникнуть потребность проверить качество работы данного девайса. Затрудняет реализацию подобной задачи отсутствие на стандартном компьютере специализированных программ для проверки вебкамеры, что вынуждает пользователя обращаться к возможностям таких продуктов как «Skype», «Paltalk» и подобных им. При этом в сети существуют инструменты, позволяющие легко и быстро выполнить проверку веб-камеры онлайн. В данном материале я расскажу о таких сервисах, а также поясню, как воспользоваться их функционалом.

Прежде чем выполнить проверку вебки онлайн следует убедиться, что она корректно подключена к соответствующему разъёму. Обычно это классический разъём USB на стационарном ПК, а также что для обслуживания камеры на компьютере установлены соответствующие драйвера. Без корректной реализации данных условий проверка вебкамеры обычно заканчивается неудачей.

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

Лучшие сервисы для тестирования веб-камеры

Рассмотрим список сервисов, которые позволят нам снять фото или видео с веб-камеры.

Webcammictest.com

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

Для работы с сервисом перейдите на него, после чего кликните на зелёную кнопку «Check my webcam» (или «Check a microphone» для проверки микрофона).

После этого ваш браузер запросит доступ к вашей камере.

При необходимости нажмите на стрелочку справа, выберите из списка устройств вашу веб-камеру, а затем нажмите на «Allow» (позволить) в данном окошке.

Откроется окно, в котором будет транслироваться изображение с вашей веб-камеры.

Вы можете сделать снимок с изображением экрана, нажав на «Take a snapshot» (сделать снимок), или проверить микрофон, нажав на «Check a microphone».

Нажав на «Check my webcam» вы получите возможность просмотреть изображение с вашей веб-камеры Webcamtest.ru

Данный сервис работает по схожему алгоритму с уже описанным мной сервисом webcammictest.com. Вы переходите на сайт webcamtest.ru , который в автоматическом режиме запрашивает у вас доступ к микрофону. Нажимаете на «Разрешить» и просматриваете изображение, полученное с веб-камеры.

Нажмите на «Разрешить» для предоставления ресурсу доступа к вашей веб-камере

Если изображение не появилось, то вы или некорректно подключили вашу веб-камеру к ПК, или не установили (или установили неправильно) драйвера, или у вас установлены неверные настройки для флеш-плеера. В последнем случае рекомендуется навести курсор на область видео, нажать правую клавишу мыши, и выбрать опцию «Параметры». Там кликните на опцию с изображением веб-камеры, нажмите на стрелочку, и выберите в списке вашу веб-камеру.

Toolster.net

Данный англоязычный сервис позволит вам одновременно проверить работоспособность веб-камеры и микрофона онлайн.

Работа с ним симметрична: вы переходите на ресурс toolster.net , жмёте на «Разрешить» (тем самым давая ресурсу доступ к вашей веб-камере и микрофону).

А затем просматриваете видео с вашей веб-камеры.

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

Если видео и звук будет корректно фиксироваться данным ресурсом, то вы увидите внизу надпись «Your webcam works fine!» (ваша веб-камера работает отлично).

Надпись «Your webcam works fine!» сигнализирует о нормальной работе вашего девайса Onlinemictest.com

Хотя англоязычный сервис onlinemictest.com предназначен в первую очередь для тестирования микрофона, он также позволит вам проверить работу веб-камеры онлайн. Работа с ним идентична другим сервисам данного плана – вы переходите на данный ресурс, жмёте на «Allow» для предоставления доступа к веб-камере, и наблюдаете справа на экране визуальный результат.

При этом особенностью данного сервиса является возможность демонстрации количества FPS (frame per second – кадров в секунду), число которых вы можете наблюдать на экране.

Ресурс «onlinemictest.com» позволяет видеть количество FPS с вашей веб-камеры Testmycam.net

И последний англоязычный сервис для теста веб-камеры онлайн, о котором я хочу рассказать – это testmycam.net . Кроме стандартной для таких сервисов процедуры демонстрации изображения с веб-камеры, данный сайт также позволяет поиграть в «Королевство кривых зеркал», всячески преломляя и мультиплицируя изображение с вашей вебки.

Для работы с ним перейдите на данный ресурс, и нажмите на «Разрешить».

Вы увидите изображение с вашей камеры, под ним кнопки «вправо» и «влево», текущий статус изображения (по умолчанию это «Normal»), и кнопку с изображением фотоаппарата (позволяет сделать снимок экрана).

Нажимая на вправо-влево вы можете видоизменять изображение с вашей вебкамеры.

Если какой-либо эффект вам понравиться, нажмите на кнопку с фотоаппаратом, и сохраните изображение к себе на ПК.

Заключение

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

Расширение (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

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

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

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

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

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

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

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

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

Друзья! Близятся те времена, когда почти все, для чего нужен был флеш в браузере, можно будет делать и без него. Не знаю как у вас, а у меня это вызывает кучу положительных эмоций. Одним из шагов на пути вытеснения 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

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