Меню
ГлавнаяТелефон

Транслируем видеопоток с IP-камеры с помощью WebRTC. Почему же мы не видим повсеместного внедрения WebRTC? Лучшие сервисы для тестирования веб-камеры

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

На это есть как минимум две причины:

1. По мере увеличения числа зрителей Ethernet-трансляции все больше будет ощущаться сперва нехватка толщины канала, а затем и ресурсов самой камеры.

2. Как уже упоминалось выше, IP камера является сервером. Но по каким протоколам она сможет отдать видео браузеру десктопа? Мобильному устройству? Скорее всего это будет HTTP стриминг, где видео фреймы или JPEG картинки передаются через HTTP. HTTP стриминг, как известно не совсем подходит для потокового видео реального времени, хотя хорошо зарекомендовал себя в on-Demand видео, где интерактивность потока и задержка не особо важны. В самом деле, если вы смотрите фильм, задержка видео в несколько секунд не сделает его хуже, если только вы не смотрите этот фильм одновременно с кем то еще. “О нет! Джэк убил её! - пишет Элис в чате Бобу спойлер за 10 секунд до трагической развязки”.

Или же это будет RTSP/RTP и H.264, в этом случае в браузере должен быть установлен плагин видеоплеера, такой как VLC или QuickTime. Такой плагин будет забирать и проигрывать видео, как и сам плеер. Но нам то ведь нужен настоящий браузерный стриминг без установки дополнительных костылей/плагинов.

Для начала поснифаем IP камеру чтобы узнать что именно отправляет этот девайс в сторону браузера. В качестве подопытного будет камера D-Link DCS 7010L:

Подробнее об установке и настройке камеры вы сможете прочесть ниже, а здесь мы просто посмотрим что она использует для видео стриминга. При попадании в админку камеры через web-интерфейс наблюдаем примерно такую картинку (пардоньте за пейзаж):

Картинка открывается во всех браузерах и равномерно подлагивает, примерно раз в секунду. Учитывая что и камера и лаптоп, на котором мы смотрим поток подключены к одному маршрутизатору, все должно быть плавно и красиво, но это не так. Похоже на HTTP. Запускаем Wireshark чтобы подтвердить свои догадки:

Здесь видим последовательность TCP фрагментов длиной 1514 байт

И завершающий HTTP 200 OK с длиной принятого JPEG:

Такой стриминг нам не нужен. Не плавный, дергает HTTP запросы. Сколько таких запросов в секунду выдержит камера? Есть основания полагать что на 10 зрителях и раньше камера благополучно загнется или начнет страшно глючить и выдавать слайды.

Если заглянуть в HTML страницы админки камеры, увидим вот такой интересный код:

If(browser_IE) DW(""); else { if(mpMode == 1) var RTSPName = g_RTSPName1; else if(mpMode == 2) var RTSPName = g_RTSPName2; else if(mpMode == 3) var RTSPName = g_RTSPName3; var o=""; if(g_isIPv6) //because ipv6 not support rtsp. var host = g_netip; else var host = g_host; o+=""; o+=""; o+=""; o+=""; o+=""; o+=""; //alert(o); DW(o); }

RTSP/RTP - это как раз то что нужно для правильного воспроизведения видео. Но будет ли это работать в браузере? - Нет. А вот если установить плагин QuickTime - все будет работать. Но мы-то делаем чисто-браузерный стриминг.

Здесь можно упомянуть еще Flash Player, который может через подходящий сервер типа Wowza получать RTMP поток, сконвертированный из RTSP, RTP, H.264. Но Flash Player, как известно тоже браузерный плагин, хотя несравненно более популярный чем VLC или QuickTime.

В данном случае, мы протестируем тот же RTSP/RTP re-streaming, но в качестве проигрывающего устройства будет использоваться WebRTC-совместимый браузер без всяких дополнительных браузерных плагинов и других костылей. Мы настроим сервер-ретранслятор, который заберет поток у IP-камеры и отдаст его в Интернет произвольному числу пользователей, использующих браузеры с поддержкой WebRTC.

Подключение IP-камеры Как уже упоминалось выше, для тестирования была выбрана простая IP-камера D-Link DCS-7010L. Ключевым критерием выбора здесь была поддержка устройством протокола RTSP, поскольку именно по нему наш сервер будет забирать видеопоток с камеры.

Камеру подключаем к маршрутизатору идущим в комплекте патч-кордом. После включения питания и подключения к маршрутизатору, камера взяла IP-адрес по DHCP, в нашем случае это был 192.168.1.34 (Если зайти в настройки маршрутизатора, вы увидите, что подключено устройство DCS 7010L - это она и есть). Самое время протестировать камеру.

Открываем указанный IP-адрес в браузере 192.168.1.34 , чтобы попасть в веб-интерфейс администратора камеры. По умолчанию пароль отсутствует.

Как видно, в админской панели видео с камеры транслируется исправно. При этом заметны периодические подлагивания. Это мы и будем фиксить с помощью WebRTC.

Настройка камеры Сначала в настройках камеры мы отключаем аутентификацию – в рамках тестирования будем отдавать поток всем, кто попросит. Для этого в веб-интерфейсе камеры заходим в настройки Setup – Network и выставляем значение опции Authentication в Disable .

Там же проверяем значение порта протокола RTSP, по умолчанию он равен 554. Формат отдаваемого видео определяется используемым профилем. В камере их можно задать до трех штук, мы воспользуемся первым, live1.sdp – по умолчанию он настроен на использование H.264 для видео и G.711 для аудио. Поменять настройки при необходимости можно в разделе Setup – Audio and Video .

Теперь можно проверить работу камеры через RTSP. Открываем VLC Player (можно любой другой, поддерживающий RTSP - QuickTime, Windows Media Player, RealPlayer и др.) и в диалоге Open URL задаем RTSP адрес камеры: rtsp://192.168.1.34/live1.sdp

Что ж, все работает, как и должно. Камера исправно воспроизводит видеопоток в плеере через протокол RTSP.

Кстати, поток воспроизводится достаточно плавно и без артефактов. Ждем того же и от WebRTC.

Установка сервера Итак, камера установлена, протестирована с десктопными плеерами и готова к вещанию через сервер. С помощью whatismyip.com определяем внешний IP-адрес камеры. В нашем случае это был 178.51.142.223. Осталось сказать роутеру, чтобы при обращении по RTSP на порт 554 входящие запросы передавались на IP-камеру.

Забиваем соответствующие настройки в маршрутизатор…

…и проверяем внешний IP адрес и RTSP порт с помощью telnet:

Telnet 178.51.142.223 554

Убедившись, что по данному порту идет ответ, приступаем к установке WebRTC сервера.

За хостинг будет отвечать виртуальный сервер на Centos 64 bit на Amazon EC2 .
Чтобы не иметь проблем с производительностью, выбрали m3.medium инстанс с одним VCPU:

Да, да, есть еще Linode и DigitalOcean, но в данном случае захотелось поамазонить.
Забегая вперед, напишу что в панели управления Amazon EC2 нужно добавить несколько правил(пробросить порты), без которых пример не будет работать. Это порты для WebRTC(SRTP, RTCP, ICE) трафика и порты для RTSP/RTP трафика. Если будете пробовать, в правилах Amazon должно быть нечто похожее для входящего трафика:

С DigitalOcean кстати все будет проще, достаточно открыть эти порты на firewall или заглушить последний. По последнему опыту эксплуатации инстансов DO, там пока еще выдают статический IP адрес и не заморачваются с NAT-ами, а значит и проброс портов, как в случае Амазона, не нужен.

В качестве серверного ПО, ретранслирующего RTSP/RTP поток в WebRTC будем использовать WebRTC Media & Broadcasting Server от Flashphoner . Стриминг сервер очень похож на Wowza , которая умеет отдавать RTSP/RTP поток на Flash. Единственное отличие в том, что этот поток будет отдан на WebRTC, а не на Flash. Т.е. между браузером и сервером пройдет честный DTLS, установится SRTP сессия и поток, закодированный в VP8 пойдет зрителю.

Для установки нам потребуется SSH-доступ.

Под спойлером – детальное описание выполненных команд

1. Скачали установочный архив сервера:
$wget flashphoner.com/downloads/builds/WCS/3.0/x8664/wcs3_video_vp8/FlashphonerMediaServerWebRTC-3.0/FlashphonerMediaServerWebRTC-3.0.868.tar.gz
2. Развернули:
$tar -xzf FlashphonerMediaServerWebRTC-3.0.868.tar.gz
3. Установили:
$cd FlashphonerMediaServerWebRTC-3.0.868
$./install.sh
В процессе установки ввели внешний IP адрес сервера: 54.186.112.111 и внутренний 172.31.20.65 (тот что Private IP).
4. Запустили сервер:
$service webcallserver start
5. Проверили логи:
$tail - f /usr/local/FlashphonerWebCallServer/logs/server_logs/flashphoner.log
6. Убедились, что сервер стартовал и готов к работе:
$ps aux | grep Flashphoner
7. Установили и запустили apache:
$yum install httpd
$service httpd start
8. Скачали web-файлы и расположили их в стандартной папке апача /var/www/html
cd /var/www/html
$wget github.com/flashphoner/flashphoner_client/archive/wcs_media_client.zip
$unzip webrtc_media_client.zip
9. Вписали IP адрес сервера в конфиг flashphoner.xml:
10. Остановили firewall.
$service iptables stop

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

Настройка сервера Напомним, что структура нашей WebRTC трансляции такова:

Установку основных элементов этой диаграммы мы уже произвели, осталось наладить «стрелочки» взаимодействий.

Связь между браузером и WebRTC сервером обеспечивает web-клиент, который есть на гитхабе :. Набор JS, CSS и HTML файлов просто закидывается в /var/www/html на этапе установки (см. выше под спойлером пункт 9).

Взаимодействие браузера и сервера настраивается в конфигурационном XML-файле flashphoner.xml. Туда нужно вписать IP-адрес сервера, чтобы web-клиент смог подключаться к WebRTC серверу по HTML5 Websockets (пункт 9 выше).

Настройка сервера на этом заканчивается, можно проверить его работу:

Открываем страницу web-клиента index.html в браузере(для этого на тот же сервер Амазон был установлен апач командой yum -y install httpd ):

54.186.112.111/wcs_media_client/?id=rtsp://webrtc-ipcam.ddns.net/live1.sdp

Здесь webrtc-ipcam.ddns.net - это бесплатный домен, полученный через сервер динамического DNS noip.com , который ссылается на наш внешний IP адрес. Маршрутизатору мы сказали перенаправлять RTSP запросы на 192.168.1.34 в соответствии с правилами трансляции сетевых адресов NAT (также см. выше).
Параметр id=rtsp://webrtc-ipcam.ddns.net/live1.sdp задает URL потока для воспроизведения. WebRTC сервер запросит потоки с камеры, обработает их и отдаст браузеру на воспроизведение по WebRTC. Возможно ваш роутер поддерживает DDNS. Если нет, то такая поддержка есть у самой IP камеры:

А так поддержка DDNS выглядит в самом роутере:

Теперь можно приступить к тестированию и оценить результаты.

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

В это время устанавливается соединение браузера с сервером по вебсокетам, далее сервер запрашивает IP камеру по RTSP, получает поток H.264 по RTP и транскодирует его в VP8 / SRTP - который в итоге воспроизводит WebRTC- браузер.

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

Убеждаемся что это действительно WebRTC. Вдруг наc обманули, и видео с IP камеры снова идет по HTTP? Не будем праздно лицезреть картинку, а проверим, что за трафик мы получаем на самом деле. Конечно же снова запускаем Wireshark и консоль отладки в Chrome. В консоли Chrome браузера можем наблюдать следующее:

На этот раз ничего не мелькает и не видно никаких картинок, передающихся по HTTP. Все что мы видим на этот раз - это Websocket фреймы и большинство из них относятся к типам ping/pong для поддержания Websocket-сессии. Интересные фреймы: connect, prepareRtspSession и onReadyToPlay - именно в таком порядке осуществляется установка подключения к серверу: сначала коннект по Websocket, а потом запрос потока на воспроизведение.

А вот что показывает chrome://webrtc-internals

По показаниям графиков, мы имеем битрейт с IP камеры 1Mbps. Исходящий трафик тоже есть, скорее всего это RTCP и ICE пакеты. RTT до Amazon сервера составляет около 300 миллисекунд.

Теперь заглянем в Wireshark, там отчетливо видно UDP трафик с IP адреса сервера. На картинке ниже пакеты по 1468 байт. Это и есть WebRTC. Точнее SRTP пакеты несущие VP8 видео фреймы, которые мы можем наблюдать на экране браузера. Кроме это проскакивают STUN запросы(самый нижний пакет на картинке) - это WebRTC ICE заботливо проверяет соединение.

Стоит также отметить сравнительно малую задержку (пинг до дата-центра составил порядка 250 мс) воспроизведения видео. WebRTC работает по SRTP/UDP, а это как ни крути наиболее быстрый способ доставки пакетов, в отличии от HTTP, RTMP и других TCP-подобных методов стриминга. Т.е. задержка, видимая глазом должна составлять RTT + время буферизации, декодирования и воспроизведения браузером. Визуально в данном случае так и есть - глаз почти не видит задержку, она менее 500 миллисекунд.

Следующий тест - подключение других зрителей. Удалось открыть 10 окон Chrome, и каждое из них показывало картинку. При этом сам Chrome начал немного тупить. При открытии 11-го окна на другом компьютере, воспроизведение оставалось плавным.

Про WebRTC на мобильных устройствах Как известно, WebRTC поддерживают Chrome и Firefox браузеры на платформе Android.
Проверим, будет ли там отображаться наша трансляция:

На картинке HTC телефон, в Firefox браузере отображается видео с камеры. Отличий в плавности воспроизведения от десктопа нет.

Заключение В результате нам удалось запустить WebRTC онлайн-трансляцию с IP-камеры на несколько браузеров с минимальными усилиями. Не потребовалось ни плясок с бубном, ни rocket-science – только базовые знания Linux и SSH-консоли.

Качество трансляции было на приемлемом уровне, а задержка воспроизведения была незаметна на глаз.

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

Почему же мы не видим повсеместного внедрения WebRTC? Главный тормоз, пожалуй, недостаток кодеков. WebRTC сообществу и вендорам следовало бы сделать усилие и ввести в WebRTC кодек H.264. Против VP8 сказать нечего, но зачем отказываться от миллионов совместимых девайсов и ПО, которые работают с H.264? Патенты, такие патенты…

На втором месте, не полная поддержка в браузерах. C IE и Safari, например вопрос остается открытым и там придется переходить на другой тип стриминга или использовать плагин типа webrtc4all.

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

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

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

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

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

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

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



Хотите узнать как ежемесячно зарабатывать от 50 тысяч в Интернете?
Посмотрите моё видео интервью с Игорем Крестининым
=>>

В большинстве программ и сервисов, созданных для общения между людьми, предусмотрена возможность видеосвязи. Для этого необходимо использовать .

При этом если на ноутбуке камера встроена изначально, то на стационарном компьютере, как правило, она отсутствует. В таком случае, для использования видеосвязи требуется дополнительная покупка и её установка.

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

Поэтому с подключением веб камеры, проблем не возникнет. Однако, хочется понять, как проверить камеру на компьютере, работает или нет. Именно об этом и пойдёт речь в данной статье.

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

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

К примеру, на операционной системе Windows XP, установка драйверов происходит автоматически, после чего можно зайти в меню «Пуск» и выбрать «Панель управления».

Затем найти из списка «Сканеры и камеры» и нажимаете на «USB видео устройство». После этого, если всё было установлено правильно, на мониторе появится изображение, передающееся с камеры.

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

Проверка видео устройства

В качестве примера, приведу наиболее распространённую в использовании , зайдите в «Инструменты».

В данном случае проверить камеру на работоспособность можно через раздел «Настройки» в пункте «Настройки видео».

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

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

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

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

К первому относится проверка с помощью меню «Пуск»:

  • В левом нижнем углу на экране нажать на «Пуск» и выбрать «Панель управления».
  • Выбираете «Оборудование и звук».
  • Нажимаете на «Диспетчер» и находите пункт «Устройства обработки изображений».
  • Нажимаете на камеру и правой кнопкой мыши кликаете на «Включить».
  • Последнее, что остаётся сделать, нажать на «Свойства» и перед вами должна появиться транслируемая картинка.

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

    Как проверить камеру на компьютере в Интернете

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

    Список сайтов где возможно проверить камеру онлайн:

  • testwebcam.com;
  • ru.webcammictest.com;
  • testcam.ru;
  • toolster.ru;
  • webcamtest.ru.

    • Зайдя на данные сайты, от вас требуется нажать на кнопку «проверить камеру» и разрешить доступ к вашей камере. Если всё в порядке, то вы сразу же увидите изображение с вашей камеры. Если есть проблемы, то вам об этом сообщат.

    Почему веб-камера не работает

    Может случиться так, что вы всё установили и при проверке соединения камера не заработала. Такие ситуации возможно по некоторым причинам:

  • При подключении USB-шнура, можно просто вставить его в разъём не до конца. Поэтому сразу проверьте этот момент;
  • Требуется установить дополнительные драйверы для корректной работы видео устройства. Для этого требуется скачать с сайта фирмы производителя дополнительные программы;
  • Шнур перетёрся. Соответственно придётся покупать новую веб-камеру;
  • Отключение в диспетчере устройств. Для этого через панель управления делаете разрешение на работу устройства;
  • Использование другим сервисом. Дело в том, что камера может работать только при использовании одного ресурса;
  • Браузер запрещает доступ видео устройства. Снять блокировку возможно нажав на окошко, где была предоставлена об этом информация.

    • Вот некоторые причины и способы их устранения, если устройство не работает.

    Дополнение

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

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

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

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

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

    P.S. Прикладываю скриншоты моих заработков в партнёрских программах. И напоминаю, что может каждый, даже новичок! Главное — правильно это делать, а значит, научиться у тех, кто уже зарабатывает, то есть, у профессионалов .

    Вы хотите узнать какие ошибки совершают новички?


    99% новичков совершают эти ошибки и терпят фиаско в бизнесе и заработке в интернет! Посмотрите, чтобы не повторить этих ошибок — «3 + 1 ОШИБКИ НОВИЧКА, УБИВАЮЩИХ РЕЗУЛЬТАТ» .

    Вам срочно нужны деньги?


    Скачайте бесплатно: «ТОП — 5 способов заработка в Интернете ». 5 лучших способов заработка в интернете, которые гарантированно принесут вам результат от 1 000 рублей в сутки и более.

    Здесь готовое решение для вашего бизнеса!


    А для тех, кто привык брать готовые решения, есть «Проект готовых решений для старта заработка в Интернет» . Узнайте, как начать свой бизнес в Интернете, даже самому «зеленому» новичку, без технических знаний, и даже без экспертности.

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

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

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