2Вставить живой RTSP-поток в веб-страницу

Недавно я работал над настройкой своего умного дома, и одна из вещей, которую я хотел настроить, - это планшет с сенсорным веб-интерфейсом для управления моим умным домом.. Одной из первых проблем, которые мне пришлось взломать, было то, как транслировать мой канал видеонаблюдения в веб-браузер…

Проблема

Моя камера видеонаблюдения, как и многие, только обеспечивает поток RTSP. Ни один современный веб-браузер не поддерживает RTSP.

Поиск и требования

Google просто не тот, что был раньше, и потребовалось несколько дней поиска, чтобы найти приемлемое решение, отвечающее всем моим требованиям ...

• Я хотел что-то, что будет работать полностью в автономном режиме без участия сторонних серверов.
• Я хотел что-то абсолютно бесплатное, идеально открытый исходный код
• Я хотел что-то, что не перекодировало бы видео или аудио, поскольку это потратило бы впустую ресурсы обработки

Решение

Я обнаружил, действительно полезное руководство который объяснил способ сделать это с небольшим количеством JavaScript и ffmpeg, оба из которых были легко доступны бесплатно.

Для запуска ffmpeg я использовал следующую команду, который я запустил на windows в качестве службы, создан с NSSM ...
ffmpeg -i rtsp://your_rtsp_ip:port/path/to/file.stream -c:v copy -c:a copy -bufsize 1835k -pix_fmt yuv420p -flags -global_header -hls_time 10 -hls_list_size 6 -hls_wrap 10 -start_number 1 /var/www/html/video.m3u8

Чтобы встроить видео, я скачал следующий файл CSS и 2 JS файлы

• https://vjs.zencdn.net/7.2.3/video-js.css
• https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.14.1/videojs-contrib-hls.js
• https://vjs.zencdn.net/7.2.3/video.js

Затем я использовал код из руководства (с измененными путями к локальным файлам) вставлять видео, которое работало сразу. ffmpeg использует вокруг 0.2% использование процессора и несколько мегабайт памяти на сервере, на котором размещен веб-сайт.

Последнее замечание, если это имеет значение - я использовал win64 статическая сборка ffmpeg 4.2.2