Видеонаблюдение через браузер. Видеонаблюдение через расширения для браузеров Google Chrome, Opera, Mozilla Firefox и Яндекс.Браузер

17.03.2019

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

Дело в том, что если на компьютере не установлено ни одной программы, которая непосредственно работает с веб-камерой (например, 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

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

    При покупке и установке вебкамеры (или просто в моменты её дисфункции) у нас может возникнуть потребность проверить качество работы данного девайса. Затрудняет реализацию подобной задачи отсутствие на стандартном компьютере специализированных программ для проверки вебкамеры, что вынуждает пользователя обращаться к возможностям таких продуктов как «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»), и кнопку с изображением фотоаппарата (позволяет сделать снимок экрана).
  • Нажимая на вправо-влево вы можете видоизменять изображение с вашей вебкамеры.
  • Если какой-либо эффект вам понравиться, нажмите на кнопку с фотоаппаратом, и сохраните изображение к себе на ПК.

  • Заключение

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

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

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

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

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

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

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

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


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

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

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


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

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


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

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

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

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

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

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

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

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

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

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

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

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