Creación de transmisión de vídeo en tiempo real: desde cero hasta la visualización en el navegador

El problema del que nadie habla

Probablemente te hayas dado cuenta de que las transmisiones de cámaras de seguridad, webcams en directo y streams de dispositivos IoT nunca "funcionan sin más" en la web. Hay una razón para esa frustración.

Aquí está el problema principal: la mayoría de las cámaras y equipos de vídeo profesionales transmiten usando RTSP (Real Time Streaming Protocol), pero los navegadores web simplemente no lo soportan. Esto se convirtió en una decisión de seguridad entre 2010 y 2015 cuando los navegadores eliminaron el soporte para RTSP. De repente, mostrar una transmisión en directo en una página web se convirtió en una pequeña pesadilla de ingeniería.

¿La solución? Dos herramientas trabajando en conjunto: FFmpeg (la legendaria navaja suiza del vídeo) y MediaMTX (una pasarela de streaming ligera). Juntas, traducen entre lo que entienden las cámaras (RTSP) y lo que entienden los navegadores (WebRTC). Netflix utiliza pipelines similares. Probablemente tu sistema de seguridad local también.

Qué hace realmente cada herramienta

FFmpeg: La bestia del procesamiento de vídeo

FFmpeg es la herramienta de vídeo más potente que nunca has configurado. Se encarga de lo aburrido:

• Captura vídeo de webcams o archivos
• Lo recodifica a formatos compatibles con navegadores (normalmente H.264)
• Lo transmite a servidores usando RTSP o RTMP
• Todo ello en tiempo real sin ahogarse

El flujo básico: capturar → codificar → enviar.

MediaMTX: El traductor de protocolos

FFmpeg no puede manejar múltiples espectadores simultáneamente. Eso es lo que hace MediaMTX. Básicamente es un intermediario de protocolos:

• Acepta streams RTSP, RTMP, WebRTC o HLS
• Los reempaqueta en distintos formatos para diferentes clientes
• Lo más importante: convierte RTSP en WebRTC para que los navegadores puedan verlo
• Todo esto con un solo binario y un archivo de configuración

Puesta en marcha (La parte práctica)

Instalación de FFmpeg

Linux/Ubuntu:

sudo apt-get update sudo apt-get install ffmpeg

macOS:

brew install ffmpeg

Windows:

• Descarga desde ffmpeg.org (usa el build de gyan.dev)
• Extrae en C:\ffmpeg
• Añade C:\ffmpeg\bin a tu PATH del sistema
• Verifica: ffmpeg -version en la consola

Instalación de MediaMTX

Linux/macOS:

wget https://github.com/bluenviron/mediamtx/releases/download/v1.15.0/mediamtx_v1.15.0_linux_amd64.tar.gz tar -xzf mediamtx_v1.15.0_linux_amd64.tar.gz chmod +x mediamtx sudo mv mediamtx /usr/local/bin/ mediamtx

Windows:

• Descarga el .zip desde los releases de GitHub
• Extrae y ejecuta mediamtx.exe
• (Windows Defender puede marcarlo—desactívalo temporalmente si es necesario)

Los tres proyectos

Proyecto 1: retransmitir un archivo de vídeo

Crea mediamtx.yml:

paths: test_video: source: publisher

Ejecuta: mediamtx mediamtx.yml

Luego transmite un archivo de vídeo:

ffmpeg -re -i your_video.mp4 -c:v libx264 -preset fast -c:a aac -f rtsp rtsp://localhost:8554/test_video

Desglose:

• -re = leer a la velocidad de fotogramas nativa (esencial para simular directo)
• -c:v libx264 = usar el códec H.264 (ampliamente compatible)
• -preset fast = equilibrio entre velocidad y compresión
• rtsp://localhost:8554/test_video = dirección de destino

Abre VLC, ve a Medio → Abrir volcado de red, pega rtsp://localhost:8554/test_video. Deberías ver el vídeo. Así funciona MediaMTX.

Proyecto 2: retransmitir tu webcam en directo

Actualiza mediamtx.yml para añadir una nueva ruta:

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

Windows (usando DirectShow):

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

macOS:

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

Linux:

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

Parámetros clave:

• -preset ultrafast = priorizar la velocidad (importante para directo)
• -tune zerolatency = optimizar para tiempo real (mínimo buffer)
• /webcam = la ruta que definimos en la configuración

Proyecto 3: el momento mágico—WebRTC en tu navegador

Aquí se pone interesante. Actualiza mediamtx.yml:

webrtc: yes webrtcAddress: :8889 webrtcEncryption: no webrtcAllowOrigin: '*' webrtcLocalUDPAddress: :8189 webrtcIPsFromInterfaces: yes

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

Reinicia MediaMTX. Ahora abre tu navegador en http://localhost:8889/webrtc/webcam

Tu webcam se carga directamente en el navegador. Sin plugin. Sin RTSP. Solo tu vídeo en directo reproduciéndose en tiempo real.

Qué ha pasado realmente

1. Tu webcam genera frames sin procesar
2. FFmpeg los captura, codifica en H.264 y los transmite vía RTSP a MediaMTX
3. MediaMTX recibe el stream RTSP y lo mantiene
4. El navegador solicita un stream WebRTC desde la ruta /webcam
5. MediaMTX convierte RTSP → WebRTC (sin recodificación, solo reempaquetado)
6. El navegador recibe los paquetes WebRTC y los muestra

La maravilla: MediaMTX no recodifica. Solo reempaqueta el stream H.264 en diferentes formatos de contenedor. Por eso la latencia se mantiene baja.

Limitaciones actuales

Lo que hemos montado funciona genial para pruebas locales, pero en producción necesitas:

• Autenticación (ahora mismo cualquiera puede acceder)
• Solo funciona en localhost (no preparado para Internet)
• Sin soporte aún para cámaras IP
• Sin monitorización ni manejo de errores

Esto es una base sólida. La misma arquitectura escala desde la webcam de un dormitorio hasta la infraestructura de Netflix sirviendo miles de streams concurrentes.

Qué viene después

La Parte 2 cubrirá: asegurar el pipeline, conectar cámaras IP reales, manejar autenticación y desplegar más allá de localhost. Ahí es donde empieza la verdadera ingeniería—y donde fallan la mayoría de los proyectos de hobby.