Добавление потока от IP-камеры на свой сайт

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

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

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

Способ 1. Трансляция видео потока от IP-камеры напрямую


Это самый простой способ трансляции, так как для него требуется только IP-камера и подключение к сети, желательно (но не обязательно), со статическим IP-адресом. IP-адрес может быть как внешний, так и внутренний/локальный (в этом случае потребуется проброс портов на сетевом оборудовании). Для отображения онлайн потока на сайте, в код страницы необходимо добавить html-код плеера IP-камеры.

На примере камеры Axis P1425-LE последовательность шагов будет следующей:

1) Заходим на страницу Live-View видеокамеры:

1f923e6b619e4d04a2461907fa5d386f.jpg

2) Копируем html-код плеера к видео камере из исходного кода страницы камеры (нажать правой кнопкой мыши на изображении с камеры и выбрать пункт Inspect element):

bb77a2507e0b4e50833afd620bc140f4.jpg

3) В html-код вносим информацию об IP-адресе камеры в виде IP-address/далее html-код и убираем фрагмент кода «?timestamp=1436262599830», чтобы получать онлайн-поток, а не единичный скриншот (timestamp – это временная метка, формируемая камерой, указывающая на конкретный видео кадр в конкретный момент времени, то есть фактически это единичный скриншот кадра). Основной задачей данной манипуляции является получение адреса потока от камеры.
4) Полученную строку вставляем в код своего сайта в требуемое место расположения плеера. Пример моего сайта:

b4dae5e3dfe14e59b752ffe157f72687.jpg

И результат:

83e18b4b6afb47289b92234f8c2eea33.jpg

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

  • получение онлайн потока в формате motion JPEG. Этот формат требователен к полосе пропускания и часто дает «подтормаживающее» изображение. Для получения потока, например, в формате H.264 может потребоваться установка на клиентское устройство дополнительного видео плеера (плагина для браузера), что не всегда удобно;
  • из-за часто имеющихся ограничений по каналу подключения камеры, могут возникать существенные ограничения по количеству одновременных подключений;
  • максимальное количество подключений ограничено производительностью процессора камеры (обычно это 4-6 вьюверов);
  • как правило, для записи трансляции нужно использовать дополнительное ПО;
  • ограниченная кроссплатформенность: для просмотра потока от видеокамеры может понадобиться установка дополнительного программного обеспечения, особенно актуально для мобильных устройств;
  • низкий уровень безопасности: IP-адрес камеры доступен в исходном коде страницы.


Способ 2. Организация собственного медиа сервера


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

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

К наиболее популярным медиа серверам относятся:

52b748573ea44af4828cde0693c8e9fa.jpgFlash Media Server. Является коммерческим продуктом компании Adobe Systems. Существуют несколько версий данного продукта, которые отличаются между собой стоимостью, количеством одновременных подключений и собственно набором функционала. Есть и бесплатная версия для разработчиков с ограничением на максимальное число одновременных подключений, равным 10. Информация по установке, настройке и администрированию сервиса тут.

7a7d9e7123f0480c90c6803048607f48.jpgWowza Streaming Engine. Бесплатная версия позволяет одновременно подключить 10 клиентов, коммерческая версия не имеет ограничений. Wowza поддерживает протоколы вещания RTP/RTSP и другие, что дает ему дополнительное преимущество по сравнению с другими медиа серверами. Также с помощью предоставляемого разработчиками API существует возможность самостоятельно создавать дополнительный функционал сервера. Информация по настройке IP-камер в Wowza тут.

4b1dd96f154549439b8b0085f2396f10.jpgErlyvideo. Также существует две версии данного программного обеспечения – платная и бесплатная. Основной особенностью данного продукта является его модульность и масштабируемость. Широкий функционал сервера реализован на основе модулей, которые могут приобретаться по отдельности. Документация по настройке сервера тут.
Отдельно можно упомянуть два бесплатных проекта медиа серверов: nginx-rtmp и red5.

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

Способ 3. Использование сервиса онлайн трансляций


В настоящее время все большую популярность приобретают сервисы онлайн-трансляций. Эти сервисы предоставляют функционал медиа сервера из облака.
Среди преимуществ использования сервисов онлайн-трансляций:

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


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

В качестве примера я рассмотрю бесплатный сервис Lideo.
Работа с ним начинается со стандартной регистрации:

edb40da13564423f93eaf900c7f9a1df.jpg

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

c389ea965c02464aaeea46da07c9119e.jpg

P.S. Следует отметить, что трансляции (потоки) создаются в специальных контейнерах, называемых Лидео. В одном Лидео может быть множество трансляций. Это удобно с точки зрения распределения трансляций по темам.

2) Ограничение доступа к Лидео с трансляциями, например, по паролю или по списку друзей.

95f2bd44fffb47f0befe4665cfc0afd0.jpg

3) Отсутствие ограничения на одновременное количество просмотров и количество транслируемых источников
4) Кроссплатформенность: не требует установки на устройство пользователя дополнительного программного обеспечения для просмотра трансляции.
5) Отсутствие ограничений на разрешение получаемого от видео камеры потока. Можно транслировать поток с разрешением вплоть до FullHD.
6) Отображение онлайн-трансляций на карте мира — очень наглядно и удобно.
a94eb52a87614f86b80d7512bf3b73b7.jpg
7) Наличие функционала социальной сети. У каждого зарегистрированного пользователя есть стена, возможность формировать список друзей и вести с ними переписку в чате.

d219e4093db040d3a3a8b12dcb58a55b.jpg

Но вернемся к задаче добавления на свой сайт трансляции от IP-камеры с помощью сервиса Lideo. Решается она за несколько шагов:
1) Нужно создать видео поток от IP-камеры:

594be0daa9f84c7cbc6783c712679eb0.jpg

2) Нажать «Поделиться/HTML-код», чтобы получить html-код для добавления на свой сайт. Сервис Lideo формирует html-код сам, дополнительных манипуляций с кодом и знания специфики его формирования не требуется.

3d444b14529b402bbc516e33346a8301.jpg

3) Добавить сформированный html-код в свой сайт, например:

b03fb57913fb494b8848403ce8cb5489.jpg

В итоге получаем:

4557972594c946da81b4baea403362b1.jpg

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

© Geektimes