Не подключается IP камера через браузер. Что делать? Транслируем видеопоток с IP-камеры с помощью WebRTC

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

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

Способ 1: Webcam&Mic Test

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

Способ 2: Webcamtest

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

Способ 3: Toolster

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

Способ 4: Online Mic Test

Сайт, в основном, направлен на проверку микрофона вашего компьютера, но имеет встроенную функцию теста веб-камеры. При этом, он не запрашивает разрешение на использование плагина Adobe Flash Player, а сразу начинает с анализа работы вебки.

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

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

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

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

Заключение

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

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

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

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

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

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

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

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

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

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

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

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

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

http://ru.webcammictest.com/

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

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

http://webcamtest.ru/

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

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

http://toolster.ru/cam_checker

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

Часто пользователи сталкиваются с проблемами в подключении ip-камер через интернет. Эта статья должна дать исчерпывающие ответы на все вопросы, которые могут возникнуть в процессе.

Подключение IP камеры через браузер

Подключить ip-камеру можно к большинству популярных веб-браузеров. Это сделать достаточно просто, если следовать инструкции. Ее можно применить к множеству браузеров, так как она довольно стандартна. Если отличия в подключении и будут, то незначительные. Данные советы по подключению подходят к таким браузерам как Mozilla Firefox, Google Chrome и Internet Explorer.

ВАЖНО! Что войти в веб-интерфейс, ip-камера и компьютер должны быть в одной сети. Для этого нужно поменять ip-адрес компьютера.

Например у ip-камеры ip-адрес 192.168.0.5, у компьютера ставим 192.168.0.11 с маской 255.255.255.0.

Описание следующих пунктов предполагает, что камера уже подключена к интернету.

Для начала нужно открыть настройки ip-камеры. Для этого вводим ее IP адрес в адресную строку браузера. Он обычно указан в инструкции к камере.

Далее переходим SETTING −> BASIC −> Network −> Information. Там узнаем, какой номер порта HTTP использует камера. Изначально должно стоять 80. Как правило, нет необходимости менять номер порта, но иногда провайдеры могут заблокировать его. В связи с этим номер бывает приходиться менять.

После того как поменяли номер переходи в другой раздел «Инициализировать». Он находится в базовых настройках в разделе «Система». Здесь мы перезагружаем камеру, чтобы новый номер порта начал действовать.

После того как ip-камера перезагрузилась, открываем видеокамеру так как указано в первом пункте на домашнем компьютере.

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

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

Что делать если не получается подключить камеру к Wi-Fi?

Проблемы с подключением камеры к Wi-Fi могут возникнуть по нескольким причинам. Самые популярные это:

У ip-камеры отсутствует настройка соединения с Wi-Fi. Часто неопытные пользователи просто подключают устройство, забывая о настройке. Однако камере нужно как минимум сообщить название сети и ее пароль.

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

Ip-камера не видит необходимую беспроводную сеть. Часто эта проблема выявляется еще во время настройки. Это может завесить от разных причин:

• Проблема с внешней антенной. Посмотрите все ли с ней в порядке, плотно ли она присоединена к оборудованию.
• Зона действия Wi-Fi не достает до видеокамеры. Проверти не находятся ли видеооборудование и роутер слишком далеко друг от друга и нет ли рядом приборов заглушающих сигнал.
• Ваш вай-фай работает в скрытом режиме и видеокамера его не видит. Если другое оборудование, которое не было подключено к вашему Wi-Fi, тоже ее не видят, значит, дело, скорее всего в этом.

Иногда проблема бывает в том, что вай-фай имеет сложный тип шифрования. Это значит, что в название сети и в ее пароле есть различные не латинские символы или ее имя слишком длинное. Это частая проблема, возникающая во время подключения к маршрутизаторам, у которых стандарт передачи Wi-Fi n-lite. Данные сложности могут возникнуть при подключении любого стороннего устройства к этой беспроводной сети. Решается все просто. Присвойте своему Wi-Fi более короткое имя или измените пароль. Чтобы с подключением точно не было проблем используйте исключительно латинские символы, установите короткое название сети и пароль.

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

• Откройте веб-интерфейс видеокамеры
• Откройте «Параметры сети», а затем «Сетевые настройки»
• Отмените прием IP от DHCP сервера
• Присвойте необходимый IP адрес, шлюз, DNS, Http порт, который стоит выставить 81, а маска подсети, как правило, выставляется автоматически.

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

• Запрет на подключение оборудования по MAC.
• Лимит на количество подключенных к этой сети устройств.
• Запрет на подключение оборудования по IP-адресам.
• И другие нетривиальные настройки.

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

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

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