0Incorporare 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

Credo che abbiamo perso qualcosa? Fateci sapere 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