2Incorporare un flusso RTSP live in una pagina Web

Di recente ho lavorato alla configurazione della mia smarthome e una delle cose che intendevo configurare è un tablet con un'interfaccia web touch-screen per gestire la mia smart home. Uno dei primi problemi che ho dovuto risolvere era come trasmettere il mio feed cctv a un browser Web ...

Il problema

La mia videocamera CCTV, come molti, fornisce solo un flusso RTSP. Nessun browser Web moderno supporta RTSP.

La ricerca e i requisiti

Google non è più quello di una volta e ci sono voluti diversi giorni di ricerca per trovare una soluzione accettabile che soddisfacesse tutte le mie esigenze ...

• Volevo qualcosa che avrebbe funzionato completamente offline senza server di terze parti coinvolti.
• Volevo qualcosa di completamente legalmente gratuito, idealmente open source
• Volevo qualcosa che non avrebbe transcodificato il video o l'audio poiché ciò avrebbe sprecato risorse di elaborazione

La soluzione

Ho trovato un guida davvero utile che ha spiegato un modo per farlo con un po 'di JavaScript e ffmpeg, entrambi erano prontamente disponibili gratuitamente.

Per eseguire ffmpeg ho usato il seguente comando, che ho eseguito su Windows come servizio, creato con 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

Per incorporare il video ho scaricato il seguente file css e 2 file 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

Ho quindi usato il codice della guida (con percorsi modificati ai file locali) per incorporare il video che ha funzionato immediatamente. ffmpeg sta usando around 0.2% utilizzo della CPU e pochi MB di memoria sul server che ospita il sito web.

Un'ultima nota, nel caso sia importante - ho usato il build statica win64 di ffmpeg 4.2.2