2Incrustar 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

Mi camara CCTV, como muchos, solo proporciona una transmisión RTSP. Ningún navegador web moderno es compatible con RTSP.

La búsqueda y los requisitos.

Google ya no es lo que solía ser y me llevó varios días de búsqueda encontrar una solución aceptable que cumpliera con todos mis requisitos ...

  • Quería algo que funcionara completamente fuera de línea sin servidores de terceros involucrados.
  • Quería algo que fuera completamente legalmente libre, idealmente de código abierto
  • Quería algo que no transcodificara el video o el audio ya que esto desperdiciaría los recursos de procesamiento

La solución

Encontré un guía realmente útil que explicaba una forma de hacer esto con un poco de JavaScript y ffmpeg, los cuales estaban disponibles de forma gratuita.

Para ejecutar ffmpeg utilicé el siguiente comando, que ejecuté en Windows como un servicio, creado 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

Para insertar el video descargué el siguiente archivo CSS y 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 (con rutas modificadas a archivos locales) para insertar el video que funcionó de inmediato. ffmpeg está usando alrededor 0.2% uso de la CPU y algunos MB de memoria en el servidor que aloja el sitio web.

Una nota final, en caso de que importe, utilicé el Win64 construcción estática de ffmpeg 4.2.2

Deja una respuesta

2 Comments

JSjack paja

para su información, cromo (solo cromo hasta la fecha) puede leer directamente archivos .m3u8 y reproducir el video como lo haría con un mp4, etc..

Respuesta
TThomas

Hola,
estoy tratando de hacer lo mismo, pero parece que no puedo hacer que funcione correctamente
Seguí tus instrucciones, y el vinculado, pero parece que todavía tengo entre 20 y 30 segundos de retraso entre el feed en vivo y el feed publicado
alguna idea de lo que podría estar causando?

Respuesta