Empujando los límites de la codificación de video en navegadores con WebCodecs

Rate this content
Bookmark
Project website

La codificación de video de alta calidad en los navegadores tradicionalmente ha sido lenta, de baja calidad y no permitía mucha personalización. Esto se debe a que los navegadores nunca tuvieron una forma nativa de codificar videos aprovechando la aceleración por hardware. En esta charla, repasaré los secretos de la creación de videos de alta calidad en los navegadores de manera eficiente con el poder de WebCodecs y WebAssembly. Desde los contenedores de video hasta el multiplexado, el audio y más, ¡esta charla te dará todo lo que necesitas para renderizar tus videos en los navegadores hoy!

25 min
05 Jun, 2023

Video Summary and Transcription

Esta charla explora los desafíos y soluciones en la codificación de video con códecs web. Se discute el dibujo y la grabación de video en la web, la captura y codificación de fotogramas de video, y se presenta la API de WebCodecs. La charla también cubre la configuración del codificador de video, la comprensión de los códecs y los contenedores, y el proceso de codificación de video con multiplexado utilizando ffmpeg. El orador comparte su experiencia en la construcción de una herramienta de edición de video en el navegador y muestra Slantit, una herramienta para hacer videos de productos.

Available in English

1. Introducción a la codificación de video con Web Codecs

Short description:

Bienvenidos a mi charla sobre cómo llevar al límite la codificación de video con web codecs. Mi nombre es Akash Hameedwasia. Escribo código en Razorpay. También me encanta construir productos en la web y contribuir al código abierto. Es posible que me conozcan por algunos de mis proyectos mencionados aquí, Blaze, Untabbed, Dyod o Slanted.

Espero que todos estén pasando un buen momento en JS Nation 2023. Bienvenidos a mi charla sobre cómo llevar al límite la codificación de video con web codecs. Mi nombre es Akash Hameedwasia. Escribo código en Razorpay. También me encanta construir productos en la web y contribuir al código abierto. Es posible que me conozcan por algunos de mis proyectos mencionados aquí, Blaze, Untabbed, Dyod o Slanted. Si no conocen estos proyectos, les sugiero que los revisen. También pueden conectarse conmigo en mi Twitter, GitHub o visitar mis charlas anteriores, blogs anteriores y varios proyectos en mi sitio web personal, AkashHameedwasia.com.

2. Construyendo una Herramienta de Edición de Video en el Navegador

Short description:

En esta charla, compartiré las lecciones que aprendí al construir una herramienta de edición de video en el navegador. Me encontré con desafíos en la codificación de video, audio, muxing y codecs, pero eventualmente lo resolví todo.

Antes de comenzar nuestro viaje para comprender cómo usar los web codecs, aquí hay una pequeña historia. Hace un tiempo, estaba construyendo una herramienta de edición de video en el navegador que me permitiría crear videos de productos realmente llamativos de manera rápida. Hay varias herramientas de edición de video disponibles, pero son para escritorio, por lo que tienes que descargarlas y son bastante grandes. Y luego tienes que aprender a usarlas, y luego tardan mucho tiempo en exportar un video. Pensé, ¿por qué no hacer una herramienta simple? Porque tengo muchas necesidades de edición de video para todos mis proyectos. Construyamos un editor de video simple en el navegador para poder usarlo para exportar videos realmente Ahora, todo iba bien hasta que comencé a escribir código para el proceso de exportación. Me quedé atascado en varios lugares. Codificación de video, audio, navegación, muxing, codecs, mucho lenguaje técnico, muchos lugares para quedarse atascado. Pero eventualmente pude resolver todo, y esto es lo que quiero compartir con ustedes en esta charla, todas las lecciones que aprendí sobre cómo construir algo como esto.

3. Dibujando y Grabando Video en la Web

Short description:

Comencemos discutiendo cómo dibujar un video en la web. Hay diferentes formas de renderizar los fotogramas de video, como animaciones CSS, manipulación del DOM con JavaScript, SVG y HTML Canvas. HTML Canvas proporciona flexibilidad y permite diversas funcionalidades. Para grabar los fotogramas y guardarlos como video, podemos utilizar la API de captura de flujo en el lienzo HTML5. Esta API nos permite crear un objeto grabador de medios y adjuntar escuchadores de eventos para almacenar y procesar los datos grabados. Sin embargo, este método tiene sus limitaciones, como la falta de una velocidad de fotogramas constante.

Comencemos discutiendo cómo dibujar algo como un video en la web. Un video se puede definir simplemente como un conjunto de fotogramas de imagen que cambian a una velocidad constante. Ahora, cada fotograma de este video se puede renderizar de varias formas. Puedes usar animaciones CSS para definir los fotogramas individuales. Puedes modificar el DOM directamente usando JavaScript. También puedes usar algo como SVG, esto es lo que los archivos Lottie usan para renderizar las animaciones de Lottie en el navegador. O también puedes usar algo llamado HTML Canvas.

Ahora, la API de HTML Canvas es un poco verbosa, pero también te brinda mucha flexibilidad para hacer muchas cosas diferentes. Y te sugiero encarecidamente que uses el lienzo HTML5 para hacer algo como esto. Y como verás en la charla, la API del lienzo permite varias cosas que no se pueden hacer con los otros métodos de renderizado.

Una vez que tienes los fotogramas renderizados en la pantalla para crear un video con ellos, simplemente se trata de grabarlo y guardarlo como un archivo de video. Suena fácil en la diapositiva, pero ¿cómo grabas algo en la pantalla usando JavaScript? Bueno, si estás usando el lienzo HTML5, ya tienes suerte porque el lienzo ya permite la captura de video. Y esto es posible gracias a la API de captura de flujo, que es parte del estándar de la API de grabación de flujos de medios.

Aquí hay un código que muestra cómo puedes hacer algo con la captura de flujo. Define una función llamada grabar, que recibe una duración, y creamos un flujo a partir del elemento de lienzo usando la captura de flujo. El primer parámetro es la velocidad de fotogramas. Aquí lo establezco en 30 para 30 fotogramas por segundo. Luego paso ese flujo y creo un nuevo objeto grabador de medios. Este grabador es lo que usaremos para grabar el video del lienzo. Antes de poder comenzar a grabar, debemos adjuntar escuchadores de eventos al grabador. El primero es data disponible. Entonces, cada vez que haya data disponible en el grabador, en lugar de, ya sabes, transmitir por la red o hacer algo, simplemente almacenamos esa data dentro de una matriz de fragmentos. Luego adjuntamos otro escuchador de eventos, que es el escuchador de eventos de detención. Entonces, cuando se detiene el grabador, hemos tomado todos los fragmentos acumulados de data, los procesamos como un archivo blob y lo descargamos como un blob de tipo video slash webinar. Y una vez que se adjuntan los escuchadores de eventos, simplemente se trata de iniciar el grabador y detenerlo después de que haya transcurrido la duración.

Ahora este código parece muy simple, ¿verdad? Y realmente esperaba que todo este proceso fuera tan simple. Pero lamentablemente, no lo es. Este método completo de usar la captura de flujo no es realmente adecuado para este caso de uso. Y hay cuatro razones para ello. La primera es que no hay una velocidad de fotogramas constante con este enfoque.

4. Capturando y Codificando Fotogramas de Video

Short description:

La función de captura de flujo permite capturar fotogramas de video, pero carece de una velocidad de fotogramas constante y la opción de cambiar el formato de video de salida. La confiabilidad y calidad de la salida dependen del rendimiento del dispositivo. Para superar estas limitaciones, podemos capturar y codificar los fotogramas individuales del lienzo nosotros mismos. Mediante el uso de pseudocódigo, podemos buscar el lienzo en cada fotograma, capturarlo como una imagen y almacenar los fotogramas en un arreglo. Luego, podemos codificar el arreglo de imágenes en un archivo de video utilizando bibliotecas como WAMI.js, un codificador WebM en tiempo real en JavaScript.

La función de captura de flujo que vimos toma un parámetro, que es la velocidad de fotogramas. Pero en realidad es la velocidad de fotogramas máxima en la que se debe capturar el video. Ahora, si el dispositivo en el que el lienzo, ya sabes, está representando los fotogramas, si es un dispositivo de baja potencia, el navegador puede decidir omitir fotogramas para mejorar el rendimiento de la representación de los fotogramas en el lienzo. Y esto, ya sabes, conduce a una menor confiabilidad. Es posible que tengas, ya sabes, el mismo código funcionando en dos dispositivos diferentes y te dé dos resultados diferentes.

Por lo tanto, no hay una velocidad de fotogramas constante, el navegador puede decidir en cualquier momento omitir fotogramas para aumentar el rendimiento. No hay opción para cambiar el formato del archivo de video, siempre produce una salida en formato WebM, que no es realmente común con, al menos, ya sabes, otros softwares de edición si estás intentando hacer algo con ellos. Hay poca confiabilidad, como mencioné, el código puede darte dos resultados diferentes en dos dispositivos diferentes debido al rendimiento de ambos. Y la calidad de la salida también es decente, nada extraordinario, puede ser mala debido a la omisión de fotogramas. Pero sí, honestamente depende del rendimiento del dispositivo.

Ahora, puede parecer que estoy tratando de criticar las API de grabación de medios aquí, pero honestamente no están diseñadas para exportaciones de video precisas y de alta calidad. Las API de grabación de medios son mucho más adecuadas para aplicaciones en tiempo real donde se acepta un compromiso de calidad siempre y cuando se obtengan velocidades más altas. Entonces, si la función de captura de flujo no funciona, ¿podemos capturar y codificar los fotogramas individuales del lienzo nosotros mismos? Aquí hay un pseudocódigo con esta idea. Lo que hago es, en el bucle, buscar el lienzo en cada fotograma, capturarlo como una imagen, y luego procesar todos los fotogramas de la animación en un solo archivo de video. El bucle comienza buscando el lienzo en el fotograma. Aquí lo he buscado en el fotograma uno. Luego capturo el fotograma como una imagen usando la función toDataUrl. Y luego le doy image-webp para capturarlo como un archivo de imagen WebP. Y una vez que la imagen está lista, la agrego al arreglo de imágenes. Luego, nuevamente, busco el siguiente fotograma, lo capturo como una imagen y lo almaceno en el arreglo de imágenes. Y una vez que eso se hace para todos los fotogramas, salgo del bucle y con ese arreglo de imágenes puedo pasarlo a una función de codificación para codificarlo como un archivo de video y descargarlo en el dispositivo del usuario.

Ahora, la verdadera pregunta aquí es, ¿cómo se codifica un arreglo de imágenes en un video? Ahora, este no es un problema fácil de resolver porque hasta ahora, los navegadores no han tenido una forma nativa de permitirte tomar un arreglo de imágenes y convertirlo en un solo archivo de video. Hay varias bibliotecas disponibles, y en este punto también me gustaría mencionar a WAMI.js. WAMI es un codificador WebM en tiempo real en JavaScript. Apareció en Hacker News hace 11 años, lo cual es algo increíble. Pero lo que hace es tomar instantáneas del lienzo como imágenes y las codifica en un archivo de video. Y esto es exactamente lo que estamos tratando de hacer. Tomar un lienzo, representar el fotograma, capturarlo como imagen, codificarlo como un archivo de video. Así es como se ve la función de codificación usando WAMI. WAMI expone una función llamada fromImageArray, que toma un arreglo de imágenes, que son los fotogramas individuales de tu video.

5. Descubriendo un Nuevo Estándar Interesante

Short description:

Puedes definir la velocidad de fotogramas de tu video y descargarlo. Las bibliotecas de JavaScript para codificar videos tienen ventajas y desventajas. Las ventajas incluyen una salida de alta calidad y una velocidad de fotogramas constante. Las desventajas incluyen un proceso lento y sincrónico, falta de aceleración de hardware, formatos de video limitados y falta de soporte de audio. Sin embargo, descubrí un nuevo estándar interesante que resuelve estos problemas.

Y luego defines la velocidad de fotogramas de tu video, que en mi caso es 30, y te dará un archivo de video que puedes descargar en el dispositivo del usuario. Puedes echar un vistazo a WAMI en su repositorio de GitHub aquí.

Ahora, he probado muchas de estas bibliotecas de JavaScript para codificar un video a partir de fotogramas de imagen, pero descubrí que todas comparten el mismo conjunto de ventajas y desventajas.

Pasando a las ventajas. La primera ventaja es que obtienes una salida de alta calidad, porque estamos haciendo la búsqueda manual, capturando como imagen y luego codificando. Obtenemos una salida de alta calidad. Obtenemos una velocidad de fotogramas constante porque no hay forma de que se omita un fotograma debido a que estamos buscando manualmente y asegurándonos de que se capture cada fotograma. Todo el proceso también fue relativamente fácil. Si tienes una buena biblioteca como WAMI para realizar el proceso de codificación, el resto del código es realmente fácil de entender.

Ahora, pasando a la lista de desventajas. Aquí es donde la lista es realmente larga, y eso es bastante desafortunado. La primera desventaja es que el proceso es muy lento. Y esto se debe a que todo el proceso es sincrónico. Las dos funciones de URL de datos que vimos, en realidad son sincrónicas. También es intensivo en rendimiento. También es intensivo en cálculos. Por lo tanto, lleva tiempo darte ese archivo de imagen. No hay aceleración de hardware. Incluso si tu hardware admite algunas optimizaciones para el proceso de codificación de video, tu JavaScript no podrá aprovechar estas optimizaciones para acelerar este proceso de codificación de video. Y eso nuevamente conduce a un rendimiento lento. Tampoco hay opción de formatos de video. Estás limitado al formato WebM y no hay soporte para agregar audio. La mayoría de estas bibliotecas de JavaScript solo te permiten codificar un conjunto de imágenes en un archivo de video, pero no te permiten agregar audio también en ese archivo de video.

Entonces, ¿y ahora qué? Parece que hemos llegado a un callejón sin salida. Y honestamente, en este punto, me había dado por vencido. Probé muchas bibliotecas de JS, muchos enfoques para resolver este problema, pero la mayoría de ellos tenían alguna desventaja que conducía a una salida de baja calidad. Pero eventualmente me encontré con este nuevo estándar interesante que apareció en los navegadores, pero no se ha hablado lo suficiente al respecto. También hay muy poca documentación en línea al respecto. Y espero que esta charla realmente llene ese vacío y te brinde el conocimiento que necesitas para trabajar con este interesante estándar. Este nuevo estándar que ha llegado es... ¡redoble de tambores!

6. Introducción a WebCodecs

Short description:

WebCodecs son un conjunto de APIs que te brindan acceso de bajo nivel a los fotogramas individuales de una transmisión de video. Te permite realizar el proceso de codificación y decodificación en fotogramas individuales en varios formatos. WebCodecs es asíncrono y acelerado por hardware, lo que proporciona un alto rendimiento. Admite la codificación y decodificación de video y audio, con un enfoque en la codificación de video en esta charla.

Es WebCodecs. Entonces, ¿qué es WebCodecs? WebCodecs es un conjunto de APIs que te brindan acceso de bajo nivel a los fotogramas individuales de una transmisión de video. Lo que te permite hacer WebCodecs es, una vez que tienes acceso a estos fotogramas individuales, realizar el proceso de codificación y decodificación en fotogramas individuales en varios formatos. Lo bueno de WebCodecs es que es asíncrono y también está acelerado por hardware. Por lo tanto, obtienes un rendimiento muy alto debido a estas dos características. Y WebCodecs es más que solo video. También admite audio. Puedes realizar la codificación y decodificación de video y audio. Las APIs son vastas. Pero en esta charla, solo me enfocaré en los aspectos de codificación de video de WebCodecs.

7. Proceso de Codificación de Video y Uso de WebCodecs

Short description:

La API de WebCodecs proporciona acceso de bajo nivel a fotogramas individuales, lo que es útil para construir editores de video o audio. El proceso de codificación de video implica definir la fuente de entrada, convertirla en un objeto de fotograma de video y pasarlo a un codificador de video para codificar múltiples fotogramas en un solo fragmento de video codificado. Nos enfocaremos en el aspecto de almacenamiento del fragmento de video codificado. Para codificar videos usando WebCodecs, creamos un codificador de video y usamos devoluciones de llamada para manejar los fragmentos de video codificados y los errores.

El otro día estaba revisando el artículo de WebCodecs en MDN. Este es el primer párrafo del artículo, y hay una parte de este artículo que me emocionó mucho cuando lo vi por primera vez. No estoy seguro si lo notaron, pero esto es a lo que me refiero. Básicamente, lo que dice es que la API de WebCodecs brinda acceso de bajo nivel a fotogramas individuales y es útil para construir aplicaciones como editores de video o audio. Y eso es exactamente lo que estoy construyendo. Así que sentí que estaba en el camino correcto y el uso de WebCodecs eventualmente me llevaría a la solución correcta del proceso de exportación.

Veamos el proceso de codificación de video a un nivel alto. El proceso completo se divide en tres partes. La primera parte es definir tu fuente de entrada. Aquí es donde defines cómo ingresas los data al codificador de video. Ahora hay tres formas de codificar o renderizar los data que WebCodecs puede usar. La primera es usar Canvas para dibujar tus fotogramas. La segunda es usar ImageBitmap, la tercera es MediaStreamTracks y también puedes usar ArrayBuffers para definir manualmente los datos de píxeles individuales, pero en esta charla usaré Canvas. Por eso te sugerí usar Canvas en primer lugar.

Una vez que tienes lista tu fuente de entrada, el siguiente paso es convertir esa fuente de entrada en un objeto de fotograma de video. Este objeto de fotograma de video se pasa a un codificador de video que creamos y ese codificador de video toma múltiples fotogramas de video y los codifica en un solo fragmento de video codificado. Una vez que el fragmento de video codificado está listo, podemos hacer varias cosas con él. Podemos transmitirlo a través de la red, podemos almacenarlo en algún lugar más. Podemos hacer varias cosas con él. Pero en nuestra charla solo nos enfocaremos en el aspecto de almacenamiento de este fragmento de video codificado. Así que finalmente veamos algo de código para codificar videos usando WebCodecs.

El primer paso en todo este proceso es crear un codificador de video. El constructor de esta clase de codificador de video toma dos devoluciones de llamada. La primera es la salida. Esto se llama cuando el codificador de video tiene un fragmento de video codificado listo. Y podemos hacer algo con este fragmento. Podemos transmitirlo a través de la red, podemos almacenarlo. También hay una devolución de llamada de error. Así que cuando ocurre un error, se llamará a esta devolución de llamada. Como mencioné, como estamos interesados en almacenar este fragmento para procesarlo más tarde, crearemos una matriz de fragmentos y almacenaremos todos los fragmentos dentro de esta matriz y los procesaremos más tarde.

8. Configuración del Codificador de Video

Short description:

Para el manejo de errores, se utiliza un registro en la consola. El codificador de video debe ser configurado con varias opciones como códec, aceleración de hardware, velocidad de fotogramas y modo de latencia. El códec es la opción más importante. Encontrar el códec adecuado no es tan fácil como WebM MP4 AVI. El códec de video no es lo mismo que el formato de archivo de video.

Para el manejo de errores, simplemente he agregado un registro en la consola. Puedes manejarlo de una mejor manera.

El siguiente paso es configurar el video codificador. Hemos creado el codificador, pero aún no lo hemos configurado con nuestras opciones o con nuestra configuración que diseñamos. Aquí es donde lo hacemos. Llamamos a la función configure con varias opciones. Algunas de las más importantes se mencionan aquí. La primera opción es el códec. Hablaremos de esto en detalle. Por ahora, lo he configurado como VP8. La segunda opción es la aceleración de hardware. Aquí puedes indicarle al navegador que prefiera la aceleración de hardware si el dispositivo lo admite, o puedes optar por omitirlo o dejar que el navegador decida por sí mismo. La tercera opción es la velocidad de fotogramas. Aquí indicas cuál es la velocidad de fotogramas de tu video. En este caso, es 30. La siguiente opción es el modo de latencia. Aquí indicas si prefieres la calidad o la velocidad del proceso de codificación. Si prefieres la velocidad, puedes configurarlo como tiempo real y básicamente tendrás un compromiso con la calidad, pero obtendrás una mayor velocidad. Esto puede ser útil para aplicaciones en tiempo real. Pero como estoy más interesado en obtener salidas de alta calidad, configuraré el modo de latencia en calidad. Luego hay varias otras opciones con altura o velocidad de bits. Pero la opción más importante de todas es la primera, que es el códec.

Entonces, ¿cómo encuentras el códec adecuado? No es tan fácil como WebM MP4 AVI. Obviamente, esperaba que fuera tan fácil, pero no lo es. Los códecs en sí mismos parecen cadenas aleatorias. Ejemplo VP8, AVC1, 420. Blah Blah Blah. Es completamente aleatorio. Parece que son cadenas mágicas que simplemente funcionan. La idea principal que quiero que obtengas de esta diapositiva es que el códec de video no es lo mismo que el formato de archivo de video.

9. Understanding Codecs and Containers

Short description:

El códec es un algoritmo para convertir y comprimir los fotogramas individuales del video. La secuencia de video se procesa aún más y se pasa a un multiplexor para crear un contenedor de video. Los videos contienen audio, subtítulos y datos visuales, que son combinados por el multiplexor en un solo contenedor. Los códecs y los contenedores deben ser compatibles. Los navegadores admiten diferentes códecs, por lo que la compatibilidad puede variar. Para obtener más información sobre la compatibilidad de códecs, consulta los enlaces proporcionados.

Y esto es lo que me confundió mucho en todo este viaje. Siempre pensé que el códec era lo mismo que WebM, MP4, AVA, pero honestamente son muy diferentes y para entender cuán diferentes son, permíteme darte una introducción básica sobre todo el proceso de codificación de video.

Entonces, todo el proceso comienza con los fotogramas individuales. Los fotogramas individuales son los fotogramas de tu video. Hay tres fotogramas en esta demostración. Todos estos fotogramas se pasan a lo que se llama un algoritmo de codificación. Ahora, el trabajo del algoritmo de codificación es tomar los fotogramas, convertirlos, comprimir y almacenarlos en una secuencia de video única. Este algoritmo de codificación, en otras palabras, se llama códec. Toma los fotogramas del video, los convierte, los comprime y almacena los fotogramas en una secuencia de video. Por lo tanto, la salida del códec es una secuencia de video única. Y esto no es lo que se almacena en tu disco duro.

Luego, la secuencia de video se procesa aún más y se pasa a lo que se llama un multiplexor para crear lo que se llama un contenedor de video. Entonces, el contenedor de video es lo que contiene tu secuencia de video y este contenedor de video se almacena finalmente en tu disco duro. Entonces, el archivo mp4 que ves, en realidad es un contenedor que internamente tiene la secuencia de video con los datos de los fotogramas individuales.

Ahora te preguntarás por qué necesitamos un multiplexor. ¿No puede hacer esto también el codificador? Bueno, eso se debe a que los videos no son solo datos visuales, también tienen audio, tienen subtítulos y todos estos son parte de un solo archivo. Y la magia de tener todo dentro de un solo archivo es posible gracias al multiplexor. El multiplexor combina o multiplexa varias secuencias de datos en un solo contenedor. Y como puedes ver aquí, este contenedor único video.mp4 tiene la secuencia de video con los datos de los fotogramas, la secuencia de audio con los datos de los fotogramas y los subtítulos, y es trabajo del multiplexor combinarlos todos juntos.

Entonces, ¿qué es un códec nuevamente? Bueno, un códec es simplemente un algoritmo para convertir y comprimir los fotogramas individuales del video. Un códec y un contenedor deben ser compatibles entre sí para usarlos correctamente. Por ejemplo, si estás usando el contenedor webm, debes usar el códec VP8 o AV1 porque el contenedor webm solo puede almacenar secuencias de video y ponerlo en ese códec. De manera similar, si quieres usar mp4, debes usar el códec AVC o el códec AV1. Y los ejemplos de cadenas que he mencionado aquí son las cadenas que debes pasar en el parámetro del códec de la función de configuración.

Ahora, para complicar aún más todo el proceso, cada navegador admite un conjunto diferente de códecs. Entonces, el navegador que estás usando puede admitir algún códec que no sea compatible en otro navegador. Sí, eso también fragmenta un poco esta API. Pero no profundizaré en los códecs ahora, he dejado dos enlaces aquí, que puedes consultar para comprender la compatibilidad de varios códecs y qué significan los números individuales en esas cadenas de códecs. Te sugiero que los consultes. Volviendo al código, esta es la función de configuración.

10. Proceso de Codificación de Video y Muxing con ffmpeg

Short description:

He configurado el códec como AVC1. Pasamos el lienzo al fotograma de video para crear un fotograma de video. Cerramos el fotograma de video. Una vez que se renderizan todos los fotogramas de video, vaciamos los datos del fotograma del codificador, cerramos el codificador y concatenamos los datos del fragmento en un solo búfer de matriz. WebCodecs solo maneja los primeros tres pasos del proceso de codificación de video. Muxar un video en la web no está bien documentado, pero podemos usar ffmpeg como un muxer para muxar el flujo de video final en el contenedor de video.

He configurado el códec como AVC1. Como estoy usando el códec AVC, tengo la opción de pasar algunas opciones más para el formato AVC en sí mismo. Así que aquí estoy diciendo que use el formato Annex B, que es simplemente un formato de procesamiento de video. Nuevamente, no profundizaré en qué es. Básicamente, obtienes opciones para configurar el códec en sí mismo.

Ahora, después de este paso completo, tenemos el codificador de video listo con nosotros que puede tomar fotogramas de video y codificar el video. El siguiente paso es pasar por cada fotograma de nuestro video, renderizarlos en el lienzo y luego convertir ese lienzo en un fotograma de video. Entonces, pasamos el lienzo al fotograma de video para crear un fotograma de video. También requiere una opción de marca de tiempo, que básicamente es el momento en el que aparece el fotograma en el video. Así que aquí estoy calculando la marca de tiempo a partir del fotograma y la velocidad de fotogramas, y como la marca de tiempo está en microsegundos, también la multiplicamos por un millón. Así que obtenemos un fotograma de video y luego lo pasamos al codificador de video usando la función ENCODE.

Como nuestro trabajo con el fotograma de video ha terminado, en el siguiente paso cerramos el fotograma de video y Esto sigue sucediendo en cada iteración para todos los fotogramas que tenemos en nuestro video. Ahora, una vez que se renderizan todos los fotogramas de video y se pasan al codificador de video, podemos vaciar todos los datos del fotograma del codificador para que los procese y cree los fragmentos, y luego cerramos el codificador porque el trabajo con el codificador ha terminado. Ahora, recuerda que habíamos adjuntado una devolución de llamada en el codificador de video cuando lo creamos. Estaba empujando los datos en la matriz de fragmentos. Bueno, con esos datos de fragmento, como la matriz de fragmentos es en realidad una matriz de matrices, podemos concatenar o aplanar esa matriz en un solo búfer de matriz y esta función de concatenación de búfer de matriz básicamente hace eso. Ahora no profundizaré en lo que hace la concatenación de búfer, pero básicamente está aplanando la matriz de fragmentos, combinando múltiples búferes de matriz en un solo búfer de matriz. Hay varios algoritmos en línea que puedes encontrar para realizar esta operación.

Ahora, después de esta operación, podrías pensar que el búfer de video que tenemos simplemente podemos descargarlo, ¿verdad? Ese es el final. Pero no, recuerda nuevamente el proceso de codificación de video. Hubo varios pasos en esto y WebCodecs solo maneja los primeros tres pasos, que son tomar los fotogramas individuales, pasarlos a través de un códec y darte un flujo de video. El siguiente paso de pasarlos a través de un muxer es algo que tenemos que manejar por nuestra cuenta. Ahora, esta parte no está documentada en ningún lugar, al menos es muy difícil encontrar en línea cómo hacer muxing de un video en la web. Y después de mucha búsqueda, después de mucho ensayo y error y de hacer muchas cosas, finalmente pude descubrir cómo hacer muxing de un video de manera confiable en la web. Y aquí es donde nuestra discusión se centra en esta biblioteca de una década llamada ffmpeg. Ninguna discusión sobre la codificación de video está completa sin esta biblioteca. Entonces, ffmpeg es una biblioteca de una década escrita en C++ y C para codificar, decodificar, video, audio, y hacer cualquier cosa relacionada con multimedia. Y gracias a WebAssembly, ahora podemos usar ffmpeg en el navegador. Así que aquí estaré usando ffmpeg.wasm para usar ffmpeg en el navegador como un muxer para muxar el flujo de video final en el contenedor de video.

11. Codificación de un Video en el Navegador

Short description:

Hay varias compilaciones disponibles, pero encontré que esta es la mejor. El siguiente paso es leer la salida después de que se haya completado el proceso de muxing y eliminar los archivos porque ya no los necesitamos. Y así es como se codifica un video en el navegador. La lista de ventajas que obtienes con este enfoque es una salida de alta calidad, una velocidad de fotogramas constante, un proceso rápido, aceleración de hardware, soporte para cualquier formato de video y la capacidad de agregar audio. La única desventaja es que es relativamente difícil, pero espero que esta charla te lo haya facilitado. WebCodecs es compatible con todos los navegadores excepto Firefox, y espero que Firefox obtenga soporte pronto. WebAssembly es compatible con todos los navegadores.

Hay varias compilaciones disponibles, pero encontré que esta es la mejor. Así que prueba ffmpeg.wasm. Una vez que ffmpeg.wasm está instalado en el proyecto, llamamos a la función create ffmpeg de la biblioteca. Luego llamamos a load en ese objeto para cargar el archivo WebAssembly. Luego usamos la función ffmpeg.fs para acceder al sistema de archivos y escribir el búfer delvideo, el flujo de video dentro del sistema de archivos. El nombre aquí se establece como raw.h264. H264 básicamente le dice a ffmpeg qué códec usamos para codificar este flujo en particular. Luego ejecutamos el comando ffmpeg. Este comando que tengo aquí es básicamente para muxar un flujo de video al contenedor final del video. El muxing en sí es un proceso muy económico. Sucede muy rápidamente. Por lo tanto, no hay cuellos de botella de rendimiento que puedan ocurrir aquí.

El siguiente paso es leer la salida después de que se haya completado el proceso de muxing y eliminar los archivos porque ya no los necesitamos. Ese archivo de salida que tenemos, simplemente lo convertimos en un blob y descargamos ese archivo en el dispositivo del usuario. Y así es como se codifica un video en el navegador. Puede parecer que hay muchos pasos, pero honestamente, la lista de ventajas que obtienes con este enfoque, literalmente llenará la pantalla. Te lo mostraré ahora. Entonces, la primera ventaja es que obtienes una salida de alta calidad porque nuevamente, estamos, ya sabes, renderizando cada fotograma, capturándolos y luego codificándolos, obtenemos una salida de alta calidad. Obtenemos una velocidad de fotogramas constante porque no hay lugar donde se puedan perder fotogramas. Todo el proceso es muy rápido porque la mayoría de las APIs son asíncronas y también admite aceleración de hardware. Puedes usar cualquier formato de video siempre que el códec que deseas esté soportado en el navegador. Y también admite agregar audio. La parte de agregar audio ocurre en la capa de muxing. Entonces, el muxer FMPEG que estamos usando, ya admite incluir audio en ese único comando, por lo que también puedes inyectar fácilmente un audio en el video final.

Ahora, la única desventaja de todo este proceso es que es relativamente difícil, pero fue difícil para mí y espero que esta charla realmente te lo haya facilitado. Entonces, esto también ya no es cierto. Espero que esto se haya vuelto completamente fácil para ti. Ahora, hablando del soporte del navegador, WebCodecs en realidad es compatible con todos los navegadores excepto Firefox, lo cual es un poco triste. Así que realmente espero que incluso Firefox obtenga soporte para WebCodecs pronto. WebAssembly es compatible con todos los navegadores.

12. Construyendo Slantit: Una Herramienta para Hacer Videos de Productos

Short description:

Podemos usar libremente las bibliotecas FFmpeg y Wasm para hacer cosas increíbles en la web. Construí una herramienta llamada Slantit para hacer videos llamativos de productos rápidamente en el navegador. El video de fondo es un ejemplo de un video hecho con Slantit. Puedes probar Slantit en slantit.app. Utiliza el mismo proceso de codificación de video que discutimos. Gracias por su atención y la oportunidad de hablar sobre los códecs web. Conéctate conmigo en Twitter, GitHub y mi sitio web personal.

Así que podemos usar libremente las bibliotecas FFmpeg y Wasm para hacer cosas increíbles en la web. Ahora recuerda, estaba construyendo una herramienta para hacer videos de productos. Finalmente logré construirla y quiero compartirla contigo para que incluso puedas probarla. Se llama Slantit. Te permite hacer videos llamativos de productos rápidamente en tu navegador.

Entonces, el video que ves en el fondo, eso es Slantit hecho con Slantit. Grabé, sabes, una grabación de pantalla usando Slantit y luego usé Slantit para editarlo, agregar estos efectos de transiciones 3D y hacer un video de producto realmente agradable para Slantit. Puedes ver Slantit en slantit.app y sí, utiliza el mismo proceso de codificación de video que discutimos en esta charla.

Así que sí, realmente espero que lo pruebes, des tu opinión y sí, eso nos lleva a el final de la charla. Realmente espero que hayas aprendido algo de la charla y también quiero agradecer a las personas de seleccionar esta charla y darme la oportunidad de hablar sobre los códecs web en esta amplia plataforma. Así que sí, gracias. Puedes conectarte conmigo. Puedes seguirme en Twitter. Tengo un GitHub y también un sitio web personal. Así que sí, espero hablar contigo. Gracias por ver.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.
React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.

Workshops on related topic

React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
WorkshopFree
Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want?
In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
WorkshopFree
This workshop will teach you the basics of writing useful end-to-end tests using Cypress Test Runner.
We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data.
Anyone who knows JavaScript programming language and has NPM installed would be able to follow along.
Node Congress 2023Node Congress 2023
63 min
0 to Auth in an Hour Using NodeJS SDK
WorkshopFree
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.JS backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.
Table of contents- A quick intro to core authentication concepts- Coding- Why passwordless matters
Prerequisites- IDE for your choice- Node 18 or higher
React Summit US 2023React Summit US 2023
96 min
Build a powerful DataGrid in few hours with Ag Grid
WorkshopFree
Does your React app need to efficiently display lots (and lots) of data in a grid? Do your users want to be able to search, sort, filter, and edit data? AG Grid is the best JavaScript grid in the world and is packed with features, highly performant, and extensible. In this workshop, you’ll learn how to get started with AG Grid, how we can enable sorting and filtering of data in the grid, cell rendering, and more. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid into your React application.
We all know that rolling our own grid solution is not easy, and let's be honest, is not something that we should be working on. We are focused on building a product and driving forward innovation. In this workshop, you'll see just how easy it is to get started with AG Grid.
Prerequisites: Basic React and JavaScript
Workshop level: Beginner
Node Congress 2023Node Congress 2023
49 min
JavaScript-based full-text search with Orama everywhere
Workshop
In this workshop, we will see how to adopt Orama, a powerful full-text search engine written entirely in JavaScript, to make search available wherever JavaScript runs. We will learn when, how, and why deploying it on a serverless function could be a great idea, and when it would be better to keep it directly on the browser. Forget APIs, complex configurations, etc: Orama will make it easy to integrate search on projects of any scale.
Node Congress 2022Node Congress 2022
128 min
Back to the basics
WorkshopFree
“You’ll never believe where objects come from in JavaScript.”
“These 10 languages are worse than JavaScript in asynchronous programming.”
Let’s explore some aspects of JavaScript that you might take for granted in the clickbaitest nodecongress.com workshop.
To attend this workshop you only need to be able to write and run NodeJS code on your computer. Both junior and senior developers are welcome.
Objects are from Mars, functions are from Venus
Let’s deep-dive into the ins and outs of objects and then zoom out to see modules from a different perspective. How many ways are there to create objects? Are they all that useful? When should you consider using them?
If you’re now thinking “who cares?“, then this workshop is probably for you.
Asynchronous JavaScript: the good? parts
Let’s have an honest conversation.
I mean… why, oh why, do we need to bear with all this BS? My guess is that it depends on perspective too. Let’s first assume a hard truth about it: it could be worse… then maybe we can start seeing the not-so-bad-even-great features of JavaScript regarding non-blocking programs.