1Incorporare 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 tutti i miei requisiti ...

  • 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 qualche 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

Ha ottenuto alcuni pensieri del proprio? Concedetevi sotto commentando! 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

Uno Commento

gravatarTommaso

Ciao,
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