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

Inviateci i vostri pensieri commentando qui sotto! Se si desidera iscriversi si prega di utilizzare il link iscriviti sul menu in alto a destra. È inoltre possibile condividere con i tuoi amici usando i link sottostanti sociali. Saluti.

lascia un commento

2 Commenti

gravatarJack Paglia

PER TUA INFORMAZIONE, cromo (solo cromo fino ad oggi) can dir­ectly read .m3u8 files and play the video just like it would an mp4 etc.

rispondere
gravatarTommaso

Hi there,
Sto cercando di fare lo stesso, ma non riesco a farlo funzionare correttamente
Ho seguito le tue istruzioni, e quello collegato, ma mi sembra di avere ancora 20-30 secondi di ritardo tra il feed dal vivo e il feed pubblicato
qualsiasi idea su cosa potrebbe causarlo?

rispondere