Por Qué Construimos una Herramienta de Procesamiento de Video Basada en el Navegador
Cuando nos propusimos construir herramientas de video para la web, la sabiduría convencional era clara: el procesamiento de video pertenece al servidor. Sube el archivo, ejecuta FFmpeg, devuelve el resultado. Simple, probado y profundamente limitado por el ancho de banda, el costo y la privacidad.
Pensamos que tenía que haber una forma mejor. Resulta que la hay, y ha estado en nuestros navegadores todo el tiempo.
El Status Quo: ffmpeg.wasm
Durante los últimos años, ffmpeg.wasm ha sido la solución preferida para el procesamiento de video en el navegador. Compila FFmpeg a WebAssembly, dándote acceso a todo el conjunto de herramientas de FFmpeg directamente en el navegador. Funciona, pero tiene inconvenientes significativos:
- Gran tamaño de paquete: el núcleo de ffmpeg.wasm es de ~25MB, con códecs específicos de formato que lo elevan a más de 30MB
- Inicialización lenta: Carga un módulo WebAssembly de 25MB antes de que comience cualquier procesamiento
- Monohilo por defecto: Sin acceso a aceleración de hardware
- Restricciones de memoria: Los límites de memoria lineal de WebAssembly (4GB) crean problemas con archivos grandes
- Sin decodificación por hardware: Decodificación/codificación solo por software, perdiendo por completo la aceleración de GPU
En nuestras pruebas de rendimiento, la compresión de un video MP4 de 50MB al 70% de calidad tomó 45-60 segundos con ffmpeg.wasm. No es terrible, pero tampoco es genial.
El Enfoque WebCodecs
La WebCodecs API es una API de navegador relativamente nueva que proporciona acceso directo a los códecs multimedia nativos del navegador, los mismos que se utilizan para la reproducción de video en YouTube, Netflix y cualquier otra plataforma de streaming. Ventajas clave:
- Aceleración por hardware: Utiliza la GPU para decodificación y codificación cuando está disponible
- Cero sobrecarga de paquete: Sin WebAssembly, sin binarios compilados, es una API nativa del navegador
- Inicialización rápida: Disponible inmediatamente, sin tiempo de carga
- Soporte completo de formatos: H.264, H.265, VP8, VP9, AV1 — lo que sea que tu navegador soporte
¿La pega? WebCodecs es de bajo nivel. Necesitas manejar la demultiplexación, la codificación fotograma a fotograma, el formato del contenedor y todo lo demás. Eso es mucha fontanería.
Llega mediabunny
Construimos mediabunny — una biblioteca ligera que envuelve WebCodecs con una API simple y ergonómica. Maneja las partes complejas:
- Demultiplexación automática: Detecta el formato del contenedor y extrae flujos de video/audio
- Control a nivel de fotograma: Accede a fotogramas individuales para una edición precisa
- Recodificación inteligente: Preajustes de calidad configurables con progreso en tiempo real
- Streaming eficiente en memoria: Procesa fotogramas en bloques, no todos a la vez
Comparación de Rendimiento
| Métrica | ffmpeg.wasm | mediabunny (WebCodecs) |
|---|---|---|
| Tamaño del paquete | 25-30MB | ~15KB |
| Inicialización | 3-5s | Instantáneo |
| Compresión de 50MB (70%) | 45-60s | 10-20s |
| Aceleración por hardware | ❌ | ✅ |
| Uso de memoria (archivo de 50MB) | ~800MB | ~300MB |
3-5 veces más rápido en todos los aspectos, con un uso de memoria dramáticamente menor y cero sobrecarga de paquete.
Privacidad: La Característica Estrella
El rendimiento es excelente, pero esto es lo que realmente distingue al procesamiento basado en el navegador: privacidad por arquitectura.
Con las herramientas basadas en el servidor, estás confiando tus datos a otra persona. Incluso los servicios bien intencionados tienen servidores que pueden ser vulnerados, citados o mal configurados. Con VideosKit:
- Los archivos nunca abandonan tu dispositivo — literalmente no hay un punto final de servidor para la subida de archivos
- Sin cookies, sin seguimiento, sin análisis del contenido de los archivos
- Funciona sin conexión una vez cargado — procesa videos en un avión, en una red restringida, en cualquier lugar
- Amigable para empresas con contenido sensible — sin preocupaciones de residencia de datos o cumplimiento
Los Desafíos de Desarrollo
Construir esto no estuvo exento de desafíos:
Manejo de Archivos Grandes
Los navegadores no te dan acceso aleatorio a archivos. Utilizamos la API File + streaming para procesar videos fotograma a fotograma sin cargar todo el archivo en la memoria. Esto requirió una cuidadosa gestión de búferes y ajuste de la recolección de basura.
Compatibilidad entre Navegadores
WebCodecs es compatible con Chrome 94+, Edge 94+ y Safari 16.4+. Firefox añadió soporte en la versión 130. Detectamos la capacidad y, si no es compatible, mostramos un mensaje.
Gestión de Memoria
Los fotogramas de video son grandes — un solo fotograma 4K es de ~33MB sin comprimir. Implementamos agrupamiento de fotogramas y pipelines de streaming para mantener el uso de memoria bajo control, incluso con contenido 4K.
Informes de Progreso
Los usuarios necesitan saber cuánto tiempo esperar. Construimos un sistema de callbacks que informa el progreso basado en la posición del fotograma, proporcionando actualizaciones precisas en tiempo real.
Código Abierto
VideosKit y mediabunny son ambos de código abierto. Echa un vistazo al código:
- VideosKit: github.com/nicely-gg/video-tools
- mediabunny: github.com/nicely-gg/mediabunny
Las contribuciones, problemas y comentarios son bienvenidos.
El Futuro del Video Basado en el Navegador
WebCodecs sigue evolucionando. La codificación AV1, el procesamiento impulsado por WebGPU y las extensiones mejoradas de MediaSource harán que el video basado en el navegador sea aún más potente. Estamos emocionados de estar empujando los límites de lo posible.
Si aún no has probado VideosKit, visita videoskit.cc. Comprime, convierte, recorta o inspecciona un video, todo en tu navegador, todo gratis.