¡Creando Videos... Con React!

Bienvenidos a todos. Gracias por estar aquí. Estoy muy emocionado de dar esta charla y hoy hablaremos un poco sobre cómo crear videos con React. Pero la primera vez que escuché que se pueden crear videos reales con React, mi reacción fue más o menos así. No estaba seguro de por qué esto era algo. De hecho, puedes usar herramientas como DaVinci Resolve, Adobe Premiere Pro, hay muchas herramientas para crear videos. Entonces, ¿por qué deberías usar un framework o biblioteca de front-end para crear un video? Bueno, tiene mucho sentido por muchas razones y acompáñenme porque hoy aprenderemos cómo crear videos programáticamente utilizando solo React. Y como bono, en caso de que estés interesado en eso, veremos rápidamente cómo construir un motor de renderizado basado en JSON utilizando la biblioteca.

Así que solo unas pocas palabras sobre mí. Soy Alfonso. Soy de Italia. Soy un ingeniero senior en NearForm y si estás interesado en las diapositivas de esta charla, simplemente escanea el código QR. Antes de pasar al contenido, solo unas pocas palabras sobre NearForm, somos un equipo independiente de ingenieros, diseñadores y estrategas. Y en realidad construimos soluciones y productos digitales. Tenemos más de 10 años de experiencia. Somos más de 400 personas en 28, 30 países. Así que en caso de que necesites algo relacionado con Node.js, el ecosistema de React, solo envíanos un mensaje.

Comencemos desde cero. Entonces, ¿qué es un video? Podemos ver un video como una secuencia de imágenes a lo largo del tiempo y el número de imágenes por segundo se llama fotogramas por segundo. Por lo tanto, podemos tener videos con 30 fotogramas por segundo, 60 fotogramas por segundo. Por lo general, depende del caso de uso, ¿verdad? Por ejemplo, las películas suelen tener 24, 25 fotogramas por segundo. Y luego, por supuesto, tenemos audios. Podemos tener una única pista de audio, una pista de audio estéreo y también podemos tener varias pistas de audio. Pero esto es lo básico.

Entonces, imágenes a lo largo del tiempo con una o más pistas de audio. Ahora la intuición aquí es realmente interesante porque podemos usar React, nuestro framework de front-end, nuestra biblioteca de front-end para construir el fotograma individual. Así que montamos todos los componentes dentro del viewport. Por supuesto, empaquetamos todo con Webpack. De esta manera, podemos poner imágenes, texto, videos, lo que se nos ocurra en la pantalla. Luego usamos Puppeteer para tomar una captura de pantalla del viewport para cada fotograma, por supuesto, para que sea eficiente, esto se paraleliza. Y una vez que tenemos todos los fotogramas, usamos FFmpeg para unir todos los fotogramas, agregar el audio y construir el video final en un contenedor como el contenedor mp4. Todo esto lo hace una hermosa biblioteca llamada ReMotion. ReMotion es una biblioteca de React para crear videos de forma programática.

Y así es como lo hacemos. Es muy fácil. Solo tenemos el reproductor de ReMotion, e importamos ese componente, y decimos, ok, el componente principal, el punto de entrada para el video en sí, para el reproductor en sí, es mi video. Eso es todo. Por supuesto, también tenemos que proporcionar el fotograma de direccionamiento, el ancho de la composición y los FPS, y alguna otra información. Por supuesto, podemos agregar controles, o podemos escribir nuestros propios controles, si queremos. Y más o menos así es como se ve.

Como puedes ver, puedo escribir mi nombre y el nombre cambiará dentro del video, luego puedo cambiar este color y el color cambiará, así que esto es súper, súper genial. Ahora veamos un par de componentes integrados. Tenemos, por supuesto, video, pero también tenemos imágenes o GIF, luego tenemos el audio, luego tenemos otros componentes como transiciones, series o, por ejemplo, la secuencia.

La secuencia es un componente realmente importante porque nos permite desplazar elementos en el tiempo. Así que digamos que tengo tres escenas, o digamos que, por ejemplo, quiero que se muestre una imagen después de, no sé, 60 fotogramas, solo tengo que decir que esta es la secuencia, por lo que la secuencia contiene mi imagen, y mi imagen se mostrará dentro de la secuencia, y la secuencia comenzará después de 60 fotogramas. Pero bueno, hay algunos componentes geniales, pero ¿qué pasa si no encuentro el componente perfecto para mi caso de uso específico? Bueno, en ese caso, simplemente podemos usar HTML, CSS y JavaScript puros, porque estamos dentro del ecosistema de React, por lo que podemos usar lo que queramos. Pero debemos tener en cuenta usar el gancho useCurrentFrame mientras trabajamos con animaciones. Dado que ReMotion utiliza un renderizado paralelizado, no podemos usar animaciones normales de CSS, solo debemos tener en cuenta usar el gancho useCurrentFrame, y veremos un ejemplo en solo unos segundos.

Así que vamos al ejemplo. Este es el resultado final, y como puedes ver aquí, acabamos de crear un efecto 3D simple para este componente presentador. ¿Y cómo lo hacemos? Bueno, en primer lugar, tenemos que importar el useCurrentFrame, la animación spring y useVideoConfig. Podemos obtener el fotograma actual de ReMotion con el useCurrentFrame, y aquí estamos creando la opacidad, que es un número de cero a uno, que es una animación spring, e inyectamos ese número de animación, y la línea 22 dentro del estilo. Y eso es todo. Y podemos usar esto más o menos para todo. Por supuesto, en caso de que no nos guste la animación spring, también podemos usar la función interpolate, también de ReMotion, para generar los valores intermedios. Muy bien, veamos cómo podemos renderizar a escala, porque vimos algo sobre el renderizado. Vimos cómo podemos renderizar un solo video desde ReMotion Studio o desde ReMotion CLI. Pero digamos que no tenemos que renderizar un solo video, sino que tenemos que renderizar cientos o miles de videos. ¿Cómo podemos hacer eso? Bueno, con ReMotion, también, es realmente simple. ReMotion, de serie, ofrece varias formas de renderizar, pero nos centraremos solo en un par de ellas. En primer lugar, tenemos Lambda, que vimos anteriormente, y también podemos usar Docker a través de las API de Node.js. Hay algunas diferencias y vale la pena conocer las diferencias. En primer lugar, Lambda generalmente es más rápido porque está realmente muy paralelizado, pero desafortunadamente hay algunas limitaciones en la duración del video y en el tamaño del video que podemos generar. Por lo general, es más barato que mantener en ejecución un contenedor Docker si no tenemos grandes volúmenes de renderizado. Entonces, digamos que tengo que renderizar, no sé, como 10 videos al mes o 10 videos al día. Por lo general, Lambda, en ese caso, es más barato, pero si tenemos cientos o miles de videos, entonces la opción de Docker con, no sé, un grupo de escalado automático, eso suele ser más barato. Además, Docker no tiene las limitaciones en la duración del video y en el tamaño del video, pero desafortunadamente es más lento debido a la falta de esta paralelización extrema que tenemos en Lambda. Pero, ¿cómo funciona Lambda? Entonces, en primer lugar, tenemos que entender cómo funciona, y luego veremos una pequeña demostración. Entonces, en primer lugar, tenemos una función Lambda y un bucket de S3, que están implementados en S3. Luego, el proyecto ReMotion se implementa a través de un bucket de S3, a través del S3