Crea tu propio pipeline de transmisión de vídeo en directo: una introducción a FFmpeg y MediaMTX

¿Alguna vez has querido ver transmisiones en directo de cámaras de seguridad o dispositivos IoT en un navegador web? Parece sencillo, pero en realidad es bastante engorroso cuando lo intentas.

¿Cuál es el problema?

Las cámaras IP transmiten mediante RTSP (Real Time Streaming Protocol), pero los navegadores no son compatibles con RTSP. Desde la década de 2010, por razones de seguridad, los navegadores eliminaron el soporte para RTSP. Es decir, la cámara y el navegador están “hablando idiomas distintos”.

Existen dos herramientas geniales para resolver este problema:

FFmpeg — El dios del procesamiento de vídeo. Es una herramienta versátil utilizada incluso en la cadena de codificación de VLC y Netflix.

MediaMTX — Un servidor de streaming ligero. Hace conversiones de RTSP a WebRTC, entre otras cosas.

Lo que tienes que hacer son 3 pasos

1. Transmitir un archivo de vídeo

Crea un archivo de configuración de MediaMTX (mediamtx.yml): yaml paths: test_video: source: publisher

Transmite el archivo por RTSP: bash ffmpeg -re -i your_video.mp4 -c:v libx264 -preset fast -c:a aac -f rtsp rtsp://localhost:8554/test_video

Puedes comprobarlo con VLC.

2. Transmitir una webcam en tiempo real

Añade a la configuración de MediaMTX: yaml paths: webcam: source: publisher

Windows: bash ffmpeg -f dshow -rtbufsize 100M -i video=“Integrated Webcam” -c:v libx264 -preset ultrafast -tune zerolatency -f rtsp rtsp://localhost:8554/webcam

Mac: bash ffmpeg -f avfoundation -framerate 30 -video_size 1280x720 -i “0” -c:v libx264 -preset ultrafast -tune zerolatency -f rtsp rtsp://localhost:8554/webcam

Linux: bash ffmpeg -f v4l2 -i /dev/video0 -c:v libx264 -preset ultrafast -tune zerolatency -c:a aac -f rtsp rtsp://localhost:8554/webcam

3. Verlo en el navegador (magia WebRTC)

Aquí es donde empieza lo interesante. Habilita WebRTC en MediaMTX:

yaml webrtc: yes webrtcAddress: :8889 webrtcEncryption: no webrtcAllowOrigin: ‘*’ webrtcLocalUDPAddress: :8189 webrtcIPsFromInterfaces: yes

paths: test_video: source: publisher webcam: source: publisher

Abre http://localhost:8889/ en el navegador; RTSP se convertirá automáticamente a WebRTC y aparecerá en el navegador. Así de fácil.

Flujo de datos

1. Cámara → fotogramas en crudo
2. FFmpeg → codificación H.264 → transmisión RTSP
3. MediaMTX → recibe RTSP
4. Navegador → solicita WebRTC
5. MediaMTX → conversión automática → transmisión WebRTC
6. Navegador → reproducción en tiempo real

La conversión se realiza sin recodificación, así que es eficiente. Incluso los sistemas a gran escala de Netflix funcionan bajo el mismo principio.

¿Cuál es el siguiente paso?

La configuración actual es de nivel demo. Para producción faltan cosas como:

• Sin autenticación
• Solo en localhost
• No compatible con cámaras IP reales
• Sin gestión de errores

En la Parte 2, añadiremos seguridad, conexión a cámaras IP reales y adaptación para entornos de producción.