Pull to refresh

Live Video для сайта

Reading time5 min
Views32K
Последнее время мне и моим коллегам часто задают вопрос «Как реализовать вещание живого видео с камеры на веб сайте ?». Многие, задающие этот вопрос, заблуждаются, считая, что это можно сделать только с помощью IP-камер. Нет, такое делается и на базе недорогих USB-камер. Спецы, которые знают «как», часто имеют другое заблуждение – зачем платить за дорогую IP-камеру, когда все можно реализовать на USB-камерах за 20-30$? А допустим камеру нужно установить на улице, в другом конце здания, длинной 70м. Много ли вы знаете USB-камер с корпусом стандарта IP66 и рабочей температурой -20С? А какой длины может быть USB-кабель? Согласно Wiki максимальная длина USB-кабеля (в экране) не должна превышать 5м. А как подключить камеру на расстоянии 70м (и это по прямой, без учета изгибов кабелевода)? Можно через каждые 5м ставить usb-hub с питанием. А сколько в деньгах потянет стоимость usb-удлинителей и активных usb-hub’ов с организацией питания для них? Согласитесь, это окупит даже не одну IP-камеру. Кто-то скажет «Я поставлю, в непосредственной близости от камеры, комп в ITX исполнении и нет проблем». Да, это вариант, но в итоге стоимость «комп + USB-камера» выйдет, в лучшем случае, равной стоимости IP-камеры. А обслуживание, а бесперебойное питание? А если камеры разнесены на сотни метров, а то и на километры, например пляжи Крыма? IP-камера однозначно выигрывает!

Как же лучше «выкинуть» изображение камеры на сайт? Можно конечно отдавать изображение на пользователя прямо с IP-камеры. Но IP-камеры не рассчитаны на большое количество одновременных подключений и большинство из них после 5-6-го подключения начнут «умирать», вплоть до полного зависания. А если желающих посмотреть на пляж и море десятки, а то и сотни? Проблема решается при помощи медиасервера-посредника. Статей, описывающих такое решение достаточно много, например «Потоковое видео средствами ffserver & ffmpeg». Правда в этой статье описано решение для USB-камеры, но принцип работы подходит и для IP-камер. Но подобный подход требует хороших познаний в линуксе, а самое главное – высокопроизводительного, соответственно достаточно дорого, процессора. Простенький Intel Atom с задачей транскодирования real-time видео из M-JPEG в FLV, MPEG4 или H.264 вряд ли справится. А отдавать на сайт изображение в M-JPEG кодеке – это поток ~3-4Мбит/с при картинке 640х480 с 15 кадров/с. Какая исходящая пропускная способность канала потребуется, если смотреть будут десятки пользователей? Да и «прокачать» эти самые ~3-4Мбит/с не каждый пользователь в состоянии.
Есть простое решение – дополнение (Add-On) для сетевых накопителей D-Link DNS-325 & DNS-345 под названием Webcam. Все «инструменты» в нем имеются, достаточно будет произвести простейшие действия, которые я опишу ниже. Проверял только на IP-камерах D-Link, но по идее и с другими работать должно.
Начнем с установки Add-On’а. Брать тут http://dlink.ua/dns или тут http://dlink.vtverdohleb.org.ua/Add-On/.
Перейдите в раздел «Management / Application Management / Add Ons» и установите Add-On, соответствующий вашей модели накопителя.

image

Сообщения «Сторонний Add-On…» не пугайтесь, нажмите Yes.

image

После завершения установки запустите Add-On кнопкой Start, перейдите в раздел Applications и откройте веб-интерфейс Webcam.

image

image

Но предварительно вам потребуется настроить соответствующим образом IP-камеру. Для примера приведу настройку IP-камеры D-Link DCS-2310L. Зайдите в раздел «Setup / Audio and Video» и добавьте новый или измените существующий профиль.

image

Главное требование – кодек только MPEG4, с другими работать не будет. Остальные настройки на собственное усмотрение, но я бы рекомендовал следующее:
1. «Frame size & View window area» не более 800х600. Работать будет, но скорость видеопотока будет великовата для сайта.
2. «Maximum frame rate» не более 15 кадров/с, а лучше 4-7 кадров/с. Причина такая же, как и в п.1.
3. «Video quality», для данной модели камеры, лучше выбрать «Constant bit rate» 1М, а можно и меньше. Этот показатель лучше подбирать по визуальному восприятию получаемой картинки. Но, чем меньше, тем лучше.
Далее перейдите в раздел «Setup / Network Setup» и запомните название «RTSP / Access name for stream» для настроенного вами профиля. В моем случае профилю 2 соответствует «live2.sdp».

image

«Authentication & RTSP port» оставьте без изменений.
Вернемся к настройке Webcam. В поле «Cam IP» введите IP-адрес вашей камеры, в поле «RTSP name» соответствующий «RTSP / Access name for stream». Включите галочку «Audio», если требуется передача видео со звуком. Но я бы «Audio» включать не рекомендовал, так как это даст существенную нагрузку на процессор накопителя, а для сайта главное картинка, а не звук. Нажмите «Submit». Если, по какой-то причине, добавление завершилось ошибкой, справа от «Camera 1» высветится сообщение, например «Error: Bad IP or RTSP URL». Если все прошло удачно вы увидите следующее:

image

Если требуется изменить IP камеры, RTSP name или разрешение картинки, нужно будет нажать «Delete» и ввести параметры заново.
Если все ОК запустите вещание кнопкой «Start».

image

Вещание пошло, теперь нужно добавить html-код доступа к видео на страничку вашего сайта. Нажмите «Site code».

image

Предполагается, что ваш накопитель стоит внутри LAN-сети и не доступен извне. Поэтому в html-код подставляется внешний IP-адрес вашего маршрутизатора. Соответственно, что бы изображение увидели из Интернета, на маршрутизаторе нужно сделать «проброс порта» (Virtual Server или Port Forwarding). Протокол TCP, порт 8090. Как настраивается проброс рассказывать не буду, так как универсальной инструкции нет, у каждого производителя свой интерфейс настройки. К примеру так http://dlink.ru/ru/faq/246/1156.html
В итоге получаем такую картинку

image

Как это реально работает можно увидеть на демо-странице
http://dlink.vtverdohleb.org.ua/webcam.html
Правда не гарантирую, что страничка будет работать всегда, по каким-то, не зависящим от меня обстоятельствам, камеру возможно придется выключить. Но я постараюсь не выключать ее в течении месяца, после размещения статьи.
Возможные проблемы:
1. Вещание работает на базе vlc-mozilla-plugin. Поэтому картинки не будет, если на компьютере не стоит VLC Player. Но поиски в гугле какой-то абсолютно универсальной системы ничего не дали. К примеру у меня на планшете, после установки VLC Player, видео пошло, а сайты с SWF flash не показывает.
2. Исходящая пропускная способность вашего канала ниже, чем суммарный поток на всех желающих. Ну тут варианты – увеличивать исходящую скорость канала или «давить» скорость видео потока за счет уменьшения кадров/с и уменьшением «Video quality / Constant bit rate» с ухудшением качества картинки.
Увидеть кто смотрит и какая скорость потоков можно на странице статуса:
http://ip-адрес_накопителя:8090/

image

В следующей версии Webcam будет добавлена возможность работать с 5-ю камерами. Если у вас есть замечания и предложения по работе текущей версии просьба изложить их письменно на http://dlink.ua/dns или в комментариях на статью.

image

Предвосхищая комментарий «Да как же слабенький NAS может справиться с раздачей 5-ти камер на пару десятков пользователей?» привожу пример top

image

Как видите, вещание ffserver & ffmpeg потребляет всего 3% проца при 1-ой камере и 4-х пользователях на просмотре.
А вообще D-Link DNS-325 & DNS-345 очень удачные аппараты, умеющие все, что предлагают конкурирующие устройства и даже больше. Кое-что из их функционала я уже описывал в предыдущих статьях:
IPTV через Wi-Fi – проблема? Абсолютно не проблема!
Что нам стоит АТС построить!

Удачного вам просмотра!
Tags:
Hubs:
Total votes 11: ↑8 and ↓3+5
Comments9

Articles