1Incrustar 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 tomó varios días de búsqueda para 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 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

Qué piensas? envíanos 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

Uno Comentario

gravatarThomas

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