Пользователь
0,0
рейтинг
17 апреля 2013 в 15:56

Разработка → Live Video для сайта

Последнее время мне и моим коллегам часто задают вопрос «Как реализовать вещание живого видео с камеры на веб сайте ?». Многие, задающие этот вопрос, заблуждаются, считая, что это можно сделать только с помощью 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 – проблема? Абсолютно не проблема!
Что нам стоит АТС построить!

Удачного вам просмотра!
@vtverdohleb
карма
3,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (9)

  • 0
    windows 7 IE 10 ругается на не подписанный cab, chrome не может найти расширения. Я думаю не универсальное решение
    • 0
      К сожалению должен согласиться — недоработки есть, но я над этим работаю. Вопрос с IE вроде решил, с Firefox проблем нет, с Хромом буду разбираться.
      До того, как выложить статью, я проверил страничку на 2-х десятках компов — IE8,IE9,Firefox,Chrome везде работало чудесно. Но как-то не обратил внимание, что на всех стоит VLC Player. Хотя об этом ньюансе я в статье написал. В любом случае в самое ближайшее время все недочеты будут устранены.
      Что касается универсальности, как я написал в статье, абсолютно универсальной системы я не нашел. У всех имеются свои ньюансы. Если вы знаете что-то достаточно универсальное поделитесь, буду премного благодарен!
      • 0
        В Firefox в Linux есть подтормаживания, точнее идет нормально, а потом резко 2-3 сек как ускоренно. Т.е. шел человек нормально, а потом бац и появился церез пару метров.
        А вот в VLC напрямки работает нормально.

        Кстати, а какая задержка при показе видео?
        • 0
          Я от себя поднял pptp на центральный офис (в другом городе) и через него смотрел, как раз отслеживал на предмет подтормаживаний — ну может 2-3 за час, не чаще.
          Касаемо задержки — ну в районе 3-5сек.
        • 0
          Правкой конфига ffserver'a можно добиться задержки при показе видео не более 1сек, но я как-то к этому не стремился, для видео на сайте вряд ли это кому-то нужно.
  • +1
    www.longtailvideo.com/support/forums/jw-player/setup-issues-and-embedding/3117/http-streaming-with-vlc-jw-player-not-working/

    Как вариант использовать вот этот плеер, там есть возможности поддержки как flash так и http стриминга. Просто не каждый человек станет или имеет возможность установить VLC, а на мобильных гаджетах даже возможности такой нет.
    • 0
      Пробовал я JW Player. SWF кушает великолепно, а вот с MPEG4-TS какие-то бока. Может с системой связано, я под CentOS на Firefox'е проверял. Но в любом случае спасибо за совет, JW еще поковыряю, может чего не докрутил.
    • 0
      Насчет мобильных гаджетов я в статье упомянул, что у меня на планшете с Андроидом, при установленном VLC, видео на демо страничке показывается.
  • 0
    Добавил в Адд-Он вторую камеру, на демо-страничке включил звук

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