0Incrustar una transmisión RTSP en vivo en una página web

Recientemente he estado trabajando en mi configuración inteligente y una de las cosas que quería configurar es una tableta con una interfaz web de pantalla táctil para administrar mi hogar inteligente. Uno de los primeros problemas que tuve que resolver fue cómo transmitir mi alimentación de CCTV a un navegador web ...

El problema

My CCTV cam­era, como muchos, solo proporciona una transmisión RTSP. No mod­ern web browsers sup­port RTSP.

La búsqueda y los requisitos.

Google just isn’t what it used to be and it took sev­er­al days of search­ing to find an accept­able solu­tion that met all of my require­ments…

  • I wanted some­thing that would work entirely off­line without any third party serv­ers involved.
  • I wanted some­thing that was com­pletely leg­ally free, idealmente de código abierto
  • I wanted some­thing that would­n’t transcode the video or audio as this would waste pro­cessing resources

La solución

Encontré un really use­ful guide which explained a way to do this with a bit of JavaS­cript and ffm­peg, both of which were read­ily avail­able for free.

To run ffm­peg I used the fol­low­ing com­mand, which I ran on win­dows as a ser­vice, cre­ated with 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

To embed the video I down­loaded the fol­low­ing css file and 2 archivos 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

Luego usé el código de la guía (with mod­i­fied paths to loc­al files) para insertar el video que funcionó de inmediato. ffm­peg is using around 0.2% cpu usage and a few mb of memory on the serv­er that hosts the web­site.

Una nota final, incase it mat­ters — I used the win64 stat­ic build of ffm­peg 4.2.2

Encontrado esto útil? Por favor, háganos saber dejando caer un comentario más abajo. Si desea suscribirse por favor utilice el enlace de suscripción en el menú en la parte superior derecha. También puede compartir esto con tus amigos mediante el uso de los enlaces sociales inferiores. Aclamaciones.

Deja una respuesta