Добавление потока от IP-камеры на свой сайт
В настоящее время все активнее развивается область онлайн трансляций, а именно передача видео и аудио потока в реальном времени большому количеству пользователей (устройств) через сеть Интернет. Например, футбольный матч, хирургическая операция, презентация товара, все это может быть сюжетом для онлайн трансляции.
В качестве источников транслируемого сигнала могут выступать веб-камеры, IP-камеры, видеокамеры смартфонов, сетевые стримеры и медиа серверы. Просматривать трансляции можно как с компьютера, так и с мобильных устройств: смартфонов, планшетов. Далее будем рассматривать IP-камеру в качестве источника трансляции, как одно из наиболее доступных и распространенных решений.
Пользователь, желающий внедрить в свой сайт поток с IP-видеокамеры, должен выбрать способ организации онлайн-трансляции. При написании данной статьи для демонстрации я использовала IP-камеру Axis. Аналогичным образом можно использовать камеры других производителей.
Способ 1. Трансляция видео потока от IP-камеры напрямую
Это самый простой способ трансляции, так как для него требуется только IP-камера и подключение к сети, желательно (но не обязательно), со статическим IP-адресом. IP-адрес может быть как внешний, так и внутренний/локальный (в этом случае потребуется проброс портов на сетевом оборудовании). Для отображения онлайн потока на сайте, в код страницы необходимо добавить html-код плеера IP-камеры.
На примере камеры Axis P1425-LE последовательность шагов будет следующей:
1) Заходим на страницу Live-View видеокамеры:
2) Копируем html-код плеера к видео камере из исходного кода страницы камеры (нажать правой кнопкой мыши на изображении с камеры и выбрать пункт Inspect element):
3) В html-код вносим информацию об IP-адресе камеры в виде IP-address/далее html-код и убираем фрагмент кода «?timestamp=1436262599830», чтобы получать онлайн-поток, а не единичный скриншот (timestamp – это временная метка, формируемая камерой, указывающая на конкретный видео кадр в конкретный момент времени, то есть фактически это единичный скриншот кадра). Основной задачей данной манипуляции является получение адреса потока от камеры.
4) Полученную строку вставляем в код своего сайта в требуемое место расположения плеера. Пример моего сайта:
И результат:
Главными преимуществами данного способа являются: простота реализации, отсутствие дополнительных затрат. Однако, данный способ имеет следующие недостатки:
- получение онлайн потока в формате motion JPEG. Этот формат требователен к полосе пропускания и часто дает «подтормаживающее» изображение. Для получения потока, например, в формате H.264 может потребоваться установка на клиентское устройство дополнительного видео плеера (плагина для браузера), что не всегда удобно;
- из-за часто имеющихся ограничений по каналу подключения камеры, могут возникать существенные ограничения по количеству одновременных подключений;
- максимальное количество подключений ограничено производительностью процессора камеры (обычно это 4-6 вьюверов);
- как правило, для записи трансляции нужно использовать дополнительное ПО;
- ограниченная кроссплатформенность: для просмотра потока от видеокамеры может понадобиться установка дополнительного программного обеспечения, особенно актуально для мобильных устройств;
- низкий уровень безопасности: IP-адрес камеры доступен в исходном коде страницы.
Способ 2. Организация собственного медиа сервера
Медиа сервер предназначен для приема медиа потоков от различных источников или медиа файлов и раздачи их для просмотра на различные пользовательские платформы. Отличительной особенностью медиа серверов является поддержка источников различных форматов. Далее сигнал в требуемом формате по нужному протоколу передается на клиентские устройства.
Кроме основной функции по организации трансляции сигналов, медиа сервер может предоставлять дополнительный функционал: ограничение доступа к трансляции, размещение на сервере видео и аудио файлов и обеспечение доступа к ним, запись трансляций и прочее.
К наиболее популярным медиа серверам относятся:
Flash Media Server. Является коммерческим продуктом компании Adobe Systems. Существуют несколько версий данного продукта, которые отличаются между собой стоимостью, количеством одновременных подключений и собственно набором функционала. Есть и бесплатная версия для разработчиков с ограничением на максимальное число одновременных подключений, равным 10. Информация по установке, настройке и администрированию сервиса тут.
Wowza Streaming Engine. Бесплатная версия позволяет одновременно подключить 10 клиентов, коммерческая версия не имеет ограничений. Wowza поддерживает протоколы вещания RTP/RTSP и другие, что дает ему дополнительное преимущество по сравнению с другими медиа серверами. Также с помощью предоставляемого разработчиками API существует возможность самостоятельно создавать дополнительный функционал сервера. Информация по настройке IP-камер в Wowza тут.
Erlyvideo. Также существует две версии данного программного обеспечения – платная и бесплатная. Основной особенностью данного продукта является его модульность и масштабируемость. Широкий функционал сервера реализован на основе модулей, которые могут приобретаться по отдельности. Документация по настройке сервера тут.
Отдельно можно упомянуть два бесплатных проекта медиа серверов: nginx-rtmp и red5.
К несомненным преимуществам организации собственного медиа сервера относятся кроссплатформенность, неограниченная запись трансляций и практически неограниченное по сравнению с первым способом количество онлайн вьюеров. Но для того, чтобы установить и настроить медиа сервер необходимы соответствующие компетенции, мощные серверы для обслуживания большого количества посетителей и исходный бюджет. Поэтому для тех, кому при организации онлайн-трансляции нужны минимальные финансовые затраты, устойчивость к наплывам посетителей, подойдет третий способ.
Способ 3. Использование сервиса онлайн трансляций
В настоящее время все большую популярность приобретают сервисы онлайн-трансляций. Эти сервисы предоставляют функционал медиа сервера из облака.
Среди преимуществ использования сервисов онлайн-трансляций:
- устойчивость к большому количеству посетителей,
- простота создания и модерирования онлайн-трансляции,
- широкие возможности записи трансляций,
- богатая аналитика и дополнительные возможности.
Как правило, такие сервисы выносят дополнительный функционал в платные тарифы. При этом возможность вставки трансляции на свой сайт и кастомизации плеера тоже зачастую входит в платный пакет услуг.
В качестве примера я рассмотрю бесплатный сервис Lideo.
Работа с ним начинается со стандартной регистрации:
После регистрации пользователь получает доступ к полному функционалу сервиса. Это:
1) Организация трансляции от разных источников: IP-камеры, веб-камеры, видео камеры смартфонов, рабочий стол компьютера.
P.S. Следует отметить, что трансляции (потоки) создаются в специальных контейнерах, называемых Лидео. В одном Лидео может быть множество трансляций. Это удобно с точки зрения распределения трансляций по темам.
2) Ограничение доступа к Лидео с трансляциями, например, по паролю или по списку друзей.
3) Отсутствие ограничения на одновременное количество просмотров и количество транслируемых источников
4) Кроссплатформенность: не требует установки на устройство пользователя дополнительного программного обеспечения для просмотра трансляции.
5) Отсутствие ограничений на разрешение получаемого от видео камеры потока. Можно транслировать поток с разрешением вплоть до FullHD.
6) Отображение онлайн-трансляций на карте мира — очень наглядно и удобно.
7) Наличие функционала социальной сети. У каждого зарегистрированного пользователя есть стена, возможность формировать список друзей и вести с ними переписку в чате.
Но вернемся к задаче добавления на свой сайт трансляции от IP-камеры с помощью сервиса Lideo. Решается она за несколько шагов:
1) Нужно создать видео поток от IP-камеры:
2) Нажать «Поделиться/HTML-код», чтобы получить html-код для добавления на свой сайт. Сервис Lideo формирует html-код сам, дополнительных манипуляций с кодом и знания специфики его формирования не требуется.
3) Добавить сформированный html-код в свой сайт, например:
В итоге получаем:
Хочу еще раз отметить, что такой способ добавления потока от IP-камеры на собственный сайт делает его доступным большому количеству посетителей, позволяет просматривать трансляцию с различных устройств, повышает безопасность за счет сокрытия интерфейса IP-камеры.
