Edición de Video en el Navegador

Así que durante la pandemia, pasé mucho tiempo haciendo edición de video. Incluso estaba pensando en convertirme en un YouTuber a tiempo completo. Pero luego me di cuenta de que con este número de visitas, probablemente debería mantener mi trabajo como ingeniero de software por un poco más de tiempo.

Entonces, ¿qué significa editar videos? Usé una herramienta llamada Final Cut Pro. Y sentí que estaba construida hace muchos, muchos años y no tenía todos los avances de IA que hemos visto recientemente. Por ejemplo, compré una pantalla verde de $20. Y necesito seleccionar el color verde y el rango para eliminarlo. Y como puedes ver, hay algunas sombras detrás de mí en la imagen. Y no se eliminaron correctamente. Luego, para cortar, quiero saber qué estoy diciendo para saber qué parte debería cortar. Pero solo obtuve las ondas de sonido y no las palabras habladas reales. Por otro lado, estaba mirando las noticias de JavaScript, como el navegador, y vi muchas cosas súper emocionantes sucediendo. Así que podemos comenzar a hacer codificación y decodificación con WebCodecs. TensorFlow.js te permite eliminar el fondo del video. Y luego, Whisper te permite convertir lo que estoy diciendo en palabras reales. Así que aparentemente teníamos todos los bloques de construcción para poder hacer un buen editor de video impulsado por IA, pero desafortunadamente no pude llegar hasta allí. Y esta charla será la historia de por qué.

Por lo general, cuando me enfrento a un nuevo producto como este, hay algunas cosas que creo que son verdaderas y en las que baso todo lo que hago. Pero en este caso, había tres cosas que no eran ciertas. La primera es que el tiempo solo avanza hacia adelante. La segunda es que cuando codificas un fotograma, obtienes un fotograma de vuelta. Y finalmente, que WASM es más rápido que JavaScript para la decodificación de video. Entonces, si quieres saber por qué esto no es cierto, prepárate. Vamos a ello. Así que comencemos pensando en cómo hacer un video.

Desafortunadamente, no puedo estar aquí en persona hoy, así que decidí traer un poco del soleado California a Ámsterdam. Para esto, puse una palmera en todas las imágenes. En este caso, tenemos la cumbre de React en el fondo y luego se mueve al primer plano y la palmera se desvanece. ¿Cuál sería la API que esperaría poder hacer eso? Inicialmente, quería una API de carga de video. Que tome una ruta de archivo y me devuelva una lista de imágenes. Luego modificaría las imágenes, eliminaría el fondo, cortaría y pegaría y muchas otras cosas. Y luego una API de guardado de video que tome la ruta de archivo y renderice, y una lista de imágenes y realmente guarde el video.

Desafortunadamente, esta API no puede existir. Veamos por qué. Veamos una imagen de todo este video. No demasiado grande, no demasiado pequeña. Una imagen de mil por mil. ¿Y qué tan grande es en realidad para representar esto? Será de mil por mil píxeles, alrededor de un megabyte. Y luego tenemos rojo, verde y azul. Así que estamos hablando de alrededor de cuatro megabytes de tamaño. Y esto es solo para una imagen. Ahora, si queremos 60 fps, como un segundo, estaríamos hablando de alrededor de 200 megabytes por cada segundo. Esta charla dura alrededor de 20 minutos, así que esto sería grande. Y en realidad sería demasiado grande para el navegador o cualquier computadora en este momento. ¿Y qué hacemos? Afortunadamente, muchas personas muy inteligentes han estado trabajando en esto durante años. Y lo que han construido es una máquina de reducción. Bueno, no exactamente. Lo que las personas han estado haciendo es compresión de imágenes. Y hablaré durante los próximos minutos sobre diferentes tipos de compresión de imágenes. Y no solo porque me parezca interesante, que lo es, sino porque realmente tienen un gran impacto en la API utilizada para la codificación de video. Así que veamos las ideas principales sobre la compresión de imágenes.

Entonces, si observamos este fotograma, una cosa que podemos ver es que solo se están utilizando dos colores y hay muchos píxeles blancos y oscuros. En lugar de mostrar siete píxeles oscuros seguidos con rojo, verde, azul, rojo, verde, azul, rojo, verde, azul, lo que podemos hacer es comenzar a escribir un byte, que es un número del píxel, y luego el rojo, verde, azul una vez, y luego podemos repetirlo así. Y esto es una técnica llamada codificación de longitud de ejecución. Ahora, esta técnica en sí misma es muy útil para imágenes con solo dos colores, pero si tomas una foto con tu cámara, nunca verás dos píxeles uno al lado del otro con el mismo color exacto. Y veremos a continuación cómo ayudar con esto, pero ten en cuenta que este es un bloque de construcción para comprimir imágenes que se utilizará en el proceso.

Entonces, ahora la otra estrategia de la que voy a hablar, necesitas tener algo de imaginación para esto. En este caso, vamos a pensar en la imagen no como una serie de píxeles, sino como una función continua. Y una de las cosas que podemos hacer con una función continua es aplicar una transformada de Fourier sobre ella, lo que va a descomponer esta función continua en una suma infinita de funciones sinusoidales como seno y coseno con alguna variación. Entonces, ¿por qué querrías eso? ¿Cómo es útil? Lo que puedes ver en la ilustración son las primeras funciones sinusoidales, que en realidad terminan siendo muy similares a la función final, y a medida que te adentras en esas funciones sinusoidales, tienen menos información.

En la práctica, si solo mantienes las primeras y las vuelves a codificar, obtendrás una imagen muy similar pero perderás muchos detalles que es posible que no puedas percibir. Ahora, cada una de estas funciones requiere aproximadamente la misma cantidad de bits para codificar, por lo que al hacer esto puedes reducir la información que debes codificar para comprimir la imagen. Y la tercera técnica de la que voy a hablar... También debes pensar en la imagen de una manera diferente, en este caso como una serie de 0s y 1s. Y lo que podemos observar es que están surgiendo algunos patrones.

Por ejemplo, la secuencia 0 1 0 1 está presente 15 veces. Luego, la secuencia 1 1 0 solo está presente unas 7 veces, y así sucesivamente hasta que en algún momento algunas de ellas solo estarán presentes una vez. La idea detrás de la compresión es que puedes hacer un remapeo. Puedes remapear 0 1 0 1 al bit 0, luego puedes remapear 1 1 0 a los 2 bits 1 0, y así sucesivamente, hasta que en algún momento, debido a que has mapeado varias cosas a cosas más pequeñas, algunas cosas deberán ser mapeadas a cosas más grandes. Pero si observas todas las secuencias de 0s y 1s, se comprimirán utilizando esta técnica si también agregas la tabla de mapeo. Esto se llama codificación de Huffman. Estos son como tres bloques de construcción para comprimir la imagen. ¿Y cuál es el resultado de esto? Podemos reducir el tamaño de la imagen en 10 veces. Es decir, pasamos de tener 4 MB a aproximadamente 400K. Y esto se llama compresión de imagen. Los formatos de compresión de imagen más populares son JPEG, WEBP y PNG. Estos utilizan todos estos bloques de construcción y algunos más para comprimir la imagen. Hemos logrado un gran avance en la reducción del tamaño de la imagen, pero aún así, para nuestro video, sigue siendo demasiado, alrededor de 20 MB por segundo. Entonces, ¿qué más podemos hacer? Para esto, podemos pensar en nuestro video como una serie de imágenes. Pero ahora puedes ver que todas las imágenes una al lado de la otra son muy, muy similares. Y probablemente haya algo que podamos hacer al respecto. La primera idea es hacer una diferencia entre la imagen anterior y la imagen siguiente. Y codificar solo la diferencia utilizando las estrategias anteriores. Esto funciona y da mejores resultados, pero podemos hacerlo aún mejor. Lo que podemos hacer es comenzar a predecir cuál será la siguiente imagen.

Y en este caso, la palmera va desde la esquina superior izquierda hasta la esquina inferior derecha. Y así puedes empezar a predecir dónde estará la próxima imagen y luego hacer el delta basado en esta predicción. Y así se llama un códec de video. Y los códecs de video más populares son H.264 y AVC, que son lo mismo pero con un nombre diferente como JavaScript y Xamarin. Y también está AV1, VP8, VP9.

Entonces este códec de video es capaz nuevamente de reducir drásticamente el tamaño. Entonces en este caso, así es como se ve nuestra configuración. Ahora tenemos dos tipos de fotogramas. Tenemos fotogramas clave, así que en este caso, el primer fotograma, que utiliza algo como JPEG para comprimirlo, y luego tenemos fotogramas delta. Entonces en este caso, como cada uno en esta imagen.

Y ahora, para decodificar el video, ya no es simplemente, oh, dame una imagen y puedo hacerlo. Ahora necesitas comenzar con el fotograma clave. Y luego, para decodificar el segundo, necesitas haber decodificado el fotograma clave, hacer la predicción de dónde estará a continuación y luego hacer el delta para decodificarlo. Así que ahora vemos que necesitamos una API con estado y en un orden específico. Pero esta es solo una parte del panorama, porque las personas que hacen la codificación y compresión de video querían hacerlo aún mejor. Una cosa que se dieron cuenta es que puedes hacer esta optimización avanzando. Pero también puedes hacerlo hacia atrás. Entonces puedes comenzar desde el final, hacer la predicción, la codificación y luego comenzar a ver en qué dirección obtenemos el mayor ahorro. Y tomar el que en realidad será el más pequeño en general. Y aquí es donde entra en juego la noción de fotogramas bidireccionales o B-frames. Entonces en este caso, el fotograma número 5 es un B-frame, lo que significa que para decodificarlo, necesitas decodificar el número 4 y el número 6. Y también para decodificar el número 6, necesitas hacer el 7, y el 7 necesitas el 8 y el 8 necesitas el 9, y lo mismo en la otra dirección. Y ahora lo que estás viendo es que para decodificar la secuencia de video en orden, necesitas enviar todos los fotogramas en un orden diferente. Y aquí es donde tenemos dos nociones de tiempo. Entonces tenemos el tiempo de presentación, que es el que esperas ver en la duración de la película, y luego el segundo es la marca de tiempo de decodificación. Y esta es la marca de tiempo en la que debes enviar los fotogramas para que se decodifiquen en el orden correcto. Y aquí es donde tenemos nuestra primera, en realidad no hay verdad, donde el tiempo solo avanza hacia adelante. Ahora que hemos visto las primeras cosas rompedoras, volvamos a la API, en realidad la API real. Entonces en este caso, necesitamos tener algún tipo de API de carga de video para que nos dé todos los fotogramas. Y luego queremos una API de decodificador.

Y así en este caso, los códecs web, como el navegador, nos proporcionan un decodificador de video con un montón de opciones, incluyendo una devolución de llamada en el fotograma decodificado. Y ahora necesitas hacer decoder.decode, enviarlo como el primer fotograma, y luego se procesará, y en algún momento nos dará una devolución de llamada con la primera imagen. Y luego lo hacemos con el número dos, número tres, número cuatro, y los estamos obteniendo en orden. Pero ahora, ¿qué sucede con nuestros fotogramas B? Ahora lo que necesitamos hacer es enviar el fotograma número nueve, y luego el fotograma número ocho, y luego los fotogramas siete y seis. Pero nuestra devolución de llamada no se llamará. Es como si no pasara nada, pero en la práctica, muchas cosas están sucediendo detrás de escena. Y solo cuando enviamos el fotograma número cinco, ahora va a hacer toda la cadena nuevamente y va a llamar a todos nuestros fotogramas en el orden correcto para que podamos usarlos. Y así es donde la verdad número dos es una mentira. Entonces, si estás decodificando un fotograma, no obtienes un fotograma de vuelta. En la práctica, puedes obtener cero o puedes obtener cinco según cómo se haya hecho la codificación. Y así esto es muy confuso porque todas las APIs que puedo pensar, incluso la API asincrónica, cuando llamas algo, te lo devuelve después de algún tiempo, pero nunca es como que obtienes uno o diez o cero, y de una manera muy impredecible. Ahora que hemos visto otra verdad, vayamos aún más profundo. Entonces pensemos en esta API de carga de video de la que hablé. ¿Cómo codificarías toda esta información? Ahora hay muchos metadatos que necesitamos. Necesitamos tener, por ejemplo, ¿cuánto tiempo dura un fotograma? ¿Cuál es la lista de fotogramas? ¿Cuáles son nuestros tipos? ¿Cuáles son las marcas de tiempo? ¿Cuáles son nuestras dependencias entre ellos? Entonces, muchos metadatos que deben almacenarse. Y si lo hiciéramos hoy, probablemente lo implementaríamos en JSON. Pero todos esos cinco formatos se escribieron hace unos 20 años. Y así todos están en binario, pero la idea es la misma. Entonces, ¿cómo se llama este paso? ¿Cómo se llama esto? Esto se llama un contenedor de video. Y en la práctica, los cuatro más conocidos son mp4, move, avi y mkv. Y todos ellos utilizan diferentes codificaciones y diferentes formas de representarlo, pero todos tienen información muy similar que se trata de un contenedor para luego llamar al códec. Y este paso de leer estos formatos de archivo y luego enviar todos los fotogramas en el orden correcto al códec se llama demultiplexación. Entonces ahora se llama demultiplexación. Ahora hablemos un poco sobre el rendimiento. Entonces, ¿qué lleva tiempo en todo este proceso? En la práctica, el códec es la parte que lleva más tiempo. Y para refrescar tu mente, el códec está haciendo toda la compresión de imágenes, descompresión, todas las predicciones, todos los deltas, todas estas codificaciones. Y una de las formas de pensarlo es simplemente mirar el tamaño de las cosas. Entonces, los datos binarios son de decenas a cientos de kilobytes. Pero luego, los metadatos reales para cada fotograma son de decenas de caracteres. Y así puedes ver un cambio muy grande.

Y esto es tan consumidor de tiempo y complicado y requiere tanto rendimiento que ahora hay unidades especializadas de hardware junto a la CPU o la GPU que realizan todas las operaciones que mencioné, como la Transformada Rápida de Fourier, la codificación Huffman y todas esas cosas en el hardware. Y la razón por la que está en el hardware es porque hacerlo solo en la CPU normalmente, incluso con el código C++ más optimizado, no era lo suficientemente rápido. Y ahora, si quieres usar Wasm, ahora tendrías que no solo tener algo que no es tan rápido porque se ejecuta en la CPU, sino también con cierta sobrecarga por Wasm. Y hacerlo de esta manera será más lento. Y aquí es donde WebCodecs es muy emocionante, ahora podemos usar una API de JavaScript y enviar todos estos datos binarios y la API de WebCodecs utilizará todas esas funcionalidades aceleradas por hardware. Así que esto es emocionante. Ahora, esto es solo una parte de la ecuación. La segunda parte es lo que necesitamos hacer para leer este archivo, este archivo binario, como hacer esta demultiplexación. ¿Podríamos usar Wasm para esto? Nuevamente, la historia es un poco más complicada. La forma en que funciona Wasm es que crea un nuevo montón de memoria, como un espacio de memoria. Y para codificar en él y hacer que haga su trabajo, debes copiar toda la información a este nuevo espacio, luego hacer su trabajo y luego copiarlo y luego devolvértelo. Y aquí estamos hablando de cientos de kilobytes, como megabytes de información, y hacer una copia para hacer no mucho trabajo para decodificar esto, y luego copiarlo de vuelta y luego enviarlo de vuelta a la API de WebCodecs. Y hacer esta copia en realidad anula cualquier ventaja que puedas tener al usar Wasm, que es más rápido. Así que aquí es donde nuestra tercera verdad se convierte en una mentira, donde Wasm no es más rápido que usar JavaScript puro para la decodificación de video. Ahora, una advertencia que voy a decir es que en la práctica, la demultiplexación no es parte de la API de WebCodecs. No es parte del navegador. Entonces, debes hacerlo por tu cuenta. Y se han escrito muchas API en C++ para la demultiplexación a lo largo de los años. Y así, para reutilizar código, en realidad es una forma legítima de usar Wasm para esto. Pero en realidad no es por razones de rendimiento. Ahora que hemos desacreditado estos tres mitos, ¿en qué punto nos encontramos? En la práctica, desearía haber terminado la charla diciendo que puedes usar este editor de video con todas sus funcionalidades. Aún no he llegado a ese punto. Lo que he logrado hacer es decodificar un archivo de video completo y volver a codificarlo sin hacer nada. Y en el navegador. La buena noticia es que, uno, es posible y funciona. Y la segunda es que es realmente rápido. Debido a que estamos utilizando las características aceleradas por hardware, es tan rápido como usar Final Cut Pro en el navegador. El rendimiento está ahí. La capacidad está ahí. Pero el problema es que hacerlo lleva cientos de líneas de código complicado que es muy difícil de depurar y que necesita comprender todas las cosas de las que te he hablado hasta ahora. Y aquí es donde mi llamado a la acción para cada uno de ustedes es que necesitamos tener un jQuery de edición de video en el navegador. Necesitamos limpiar la API y empaquetarla de manera que sea posible crear un editor de video con IA. Entonces, ¿serás tú quien lo construya? Este es mi llamado a la acción. Gracias, que tengas un buen día.