Встраивание видео с камеры Hikvision на веб-страницу

Из заголовка понятно что надо сделать. Методом проб, ошибок и матюгов сделал. Вкратце опишу как.

Поскольку камера отдает видео по RTSP, по RTSP мы его и заберем. Быстрое гугление показало что у большинства Hikvision камер rtsp-видео доступно по такому урлу: rtsp://логин:пароль@IP_адрес:порт/ISAPI/Streaming/Channels/101

101, в данном случае указывает на камеру и поток. Хочешь знать больше? Читай мануал!

VLC, или иной медиаплеер какой-нибудь, умеет с rtsp работать, конечно же, но видео надо встроить на веб-страницу. А чтобы встроить и воспроизвести — придется соорудить приблуду, которая rtsp конвертонет в rtmp, который будет схаван плеером (у меня vgaplayer) и отображен на странице.

Почему vgaplayer? Что попалось и заработало, тем и воспользовался.

1. Конвертация RTSP в RTMP

Поскольку веб-страница сервится nginx’ом, то nginx’у и отдуваться.

Скачать нужно исходники, т.к. надо будет собрать nginx с rtmp-модулем. Счастливому пользователю FreeBSD, который лупонул make config в /usr/ports/www/nginx и увидел в опциях RTMP…

…обломаю радость. Это не тот RTMP который нужен.

Тот, который нужен, можно тянуть отсюда. Исходники nginx’а, думаю, всем понятно откуда брать.

В общем, ложим исходники модуля по соседству с исходниками самого nginx’а. Заходим в каталог с исходниками самого и конфигурим сборку:

./configure [....] --add-module=../nginx-rtmp-module/

Если все прошло хорошо, make install clean (главное, не прозевать [….] — я некисло так с префиксом наглупил)

Следующим шагом идет установка ffmpeg, если он еще не установлен. Для задачи хватает собранного добрыми людьми.

sudo pkg install ffmpeg

 

В nginx.conf, в самый низ (или в conf.d/твой-вхост.conf если надо) следует добавить кусок типа такого:

rtmp {
        server {
                listen 1935;
                chunk_size 4096;
                application live {
                        live on;
                        record off;
                        hls on;
                        hls_nested on;
                        hls_path /usr/local/nginx/html/hls/;
                        hls_fragment 3;
                        hls_playlist_length 60;
                        exec_pull /usr/local/bin/ffmpeg -i rtsp://логин:пароль@IP-адрес-камеры:rtsp-порт/ISAPI/Streaming/Channels/$name -vcodec copy -acodec copy -f flv rtmp://IP-адрес-сервака:1935/live/$name;
                }
        }
}

 

Не забывай: твой префикс может отличаться.

После этих изменений, ясен пень, следует рестартнуть nginx.

Видос будет доступен по rtmp://IP-адрес-сервака:1935/live/101

2. А как на счет встроить в веб-страницу?

Вариантов куча. Я остановился на самом простом: vgaplayer

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="99%">
  <param name="movie" value="vgaplayer.swf" />
  <param name="FlashVars" value="url=rtmp://IP-адрес-сервака:1935/live/101" />
  <embed src="vgaplayer.swf"
         width="100%" height="420"
         allowScriptAccess="sameDomain"
         allowFullScreen="true"
         type="application/x-shockwave-flash"
         FlashVars="url=rtmp://IP-адрес-сервака:1935/live/101"
         pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>

 

Флеш, понятное дело, в 2019 моветон. Но html5 вроде как в rtmp-поток так и не умеет до сих пор.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *