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

В качестве источников транслируемого сигнала могут выступать веб-камеры, 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-камеры.