Creando Videos Programáticamente en React

¡Hola a todos y bienvenidos! Mi nombre es Jonny Burger y estoy conectando desde la hermosa Zurich, Suiza. Desafortunadamente, solo podemos hacer esta conferencia de forma remota, lo que significa que estoy en casa y ustedes también están en casa, y no me ven personalmente, sino solo un video. Pero no es tan malo. Puedo hacer un video más interesante, puedo elegir diferentes ángulos y puedo editar todos los errores que cometo. ¿Han visto el discurso de apertura de Apple recientemente? Ahora que graban todo de antemano, sus videos son mucho más dinámicos y mucho más agradables de ver.

De todos modos, cómo editamos normalmente estos videos son programas gráficos como Adobe Premiere, iMovie, After Effects, DaVinci Resolve. Pero para mí, como desarrollador, siempre ha faltado algo. Quiero reutilizar elementos en mi video y parametrizarlos como lo hago con los componentes de React. Quiero algo que sea más dinámico que simplemente copiar y pegar capas y deshacer y rehacer mis acciones. Quiero algo que sea más declarativo.

También el control de versiones es horrible para los videos. Si guardo mi proyecto, cierro el programa y lo vuelvo a abrir, básicamente toda mi historia desaparece y solo tengo una instantánea del tiempo actual a menos que haga copias de mi archivo con extensiones de archivo v1, v2 y a veces el programa simplemente se bloqueará y todo mi progreso se habrá ido. Espero que vean a dónde voy con esto. Quiero escribir videos programáticamente.

Hice una biblioteca llamada Remotion que te permite escribir videos mp4 reales de forma declarativa en React. Creo tanto en ella que este video en sí mismo fue editado en React usando Remotion, al menos todos los videos que estoy presentando en React Summit. Este también es un video de código abierto, por lo que pueden ir al enlace de GitHub que ven a la derecha en este momento y visitar el código fuente del video, todas las imágenes están allí y todas las ediciones y diapositivas están escritas en React.

Hacer un video en React suena como algo mágico, pero en realidad no lo es y no es una caja negra. Para usar ReMotion correctamente, necesitamos saber cómo funciona. Así que echemos un vistazo general a cómo ReMotion convierte el código en un video. Comenzamos en un proyecto de React y definimos una composición. Una composición es básicamente un video, pero tiene metadatos que debemos definir. Debemos pasar el ancho, la altura, la duración y la velocidad de fotogramas del video, y qué componente se utilizará para renderizar el video. Dentro de ese componente, necesitamos llamar al gancho UseCurrentFrame para obtener el tiempo actual y, en función de ese tiempo, que se expresa como el fotograma actual, que es un número entero, debemos renderizar cualquier cosa que queramos usando nuestras tecnologías web favoritas. Es importante que usemos esta variable de fotograma para impulsar nuestra animación en lugar de algo más como una transición CSS. Más sobre eso más adelante. Entonces, una vez que hemos escrito nuestro video, entramos en un proceso de renderizado de tres etapas. El primer paso es empaquetar el video usando webpack, al igual que cualquier otra aplicación web. En el segundo paso, abrimos una instancia de Chromium sin cabeza y abrimos la página web en ella y luego tomamos una captura de pantalla para cada fotograma del video. Para que este proceso sea eficiente y rápido, debemos paralelizarlo. Así que en realidad abrimos varias pestañas. El número depende del número de núcleos de su CPU, o también puede personalizarlo, pero desea tener algún tipo de paralelismo si puede permitírselo. Abrimos varias pestañas y tomamos múltiples capturas de pantalla al mismo tiempo. Esta es la razón por la que es muy importante que usemos el gancho UseCurrentFrame para impulsar todas nuestras animaciones. Porque si usas algo como una transición CSS o un RequestAnimationFrame, o intentas incluir un GIF, no funcionará porque durante el renderizado abrimos múltiples instancias de tu animación. Prácticamente solo funciona si te doy un fotograma, debes devolver una imagen estática que no tenga ningún

Entonces, he reemplazado esto con un lienzo negro. Y ahora quiero contarte mi idea de qué tipo de video podemos hacer juntos. Vi en Twitter que React Summit está creando un gráfico para cada orador y publicándolo, tiene la foto de perfil, el nombre de la charla y todo sobre cada orador en él. También noté que hay un archivo JSON en el código fuente del sitio web de React Summit que contiene a todos los oradores. Así que pensé que sería divertido crear todos estos gráficos de una vez y también animarlos para que sean un video, no una imagen. Esto es lo que he hecho. He importado la lista de todos los oradores de React en este proyecto. Para comenzar, no tenemos mucho tiempo, así que voy a codificar algo muy rápido. Nos vemos en un segundo. Lo que he creado rápidamente es, básicamente, un marcado normal de React y CSS. Como puedes ver, no he utilizado ninguna biblioteca.

Puedes usar cualquier biblioteca que desees. Pero aquí lo hice con un marcado normal y CSS. Solo una cosa a tener en cuenta. En lugar de una etiqueta de imagen en minúsculas, utilicé el componente de imagen de ReMotion. Funciona prácticamente de la misma manera que el elemento de imagen nativo. Excepto que está envuelto en un cargador que esperará hasta que la imagen se cargue antes de renderizar el fotograma. Así que tu video no contendrá una imagen que no esté completamente cargada. También he agregado algunos círculos aquí en el fondo usando SVG, lo cual también es genial.

De todos modos, ahora que tenemos esta configuración básica, que no expliqué en detalle completo porque probablemente ya conozcas un poco de React al menos. Vamos a animarlo. Necesitamos impulsar todas nuestras animaciones utilizando el gancho UseCurrentFrame. Voy a decir const frame = UseCurrentFrame y ahora necesitamos animar las cosas con el tiempo.

Digamos que queremos animar la foto de perfil para que se amplíe. Para eso, podemos usar la función interpolateHelper en ReMotion. Voy a decir escala y voy a interpolar la escala a lo largo del tiempo. Lo que quiero decir con eso es que paso lo que impulsa la animación, el fotograma, y digo un rango de entrada. Digo de 0 a 30, lo que básicamente significa que la duración de la animación es de 30 fotogramas. Solo voy a decir que se escalará de 0 a 1. Ahora solo aplico este estilo utilizando CSS normal a la imagen. Y como puedes ver, mi imagen se está escalando durante una duración de 1 segundo. No se ve tan suave. Por eso prefiero usar una animación de resorte. Así que deshagámonos de eso y digamos const scale = spring. Para eso, necesitamos pasar el fotograma y los fotogramas por segundo actuales. Esta es la información necesaria que la función de resorte necesita saber para calcular el video. ¡Sí, probémoslo y ahí vamos! ¡Se está animando! También pasemos esta escala a nuestros círculos en el fondo. Bien, ¿se ve bastante bien, verdad? Deslicemos también el título. Podemos decir const title, title.translation por ejemplo. Y me encanta usar animaciones de resorte para todo. Pasemos fps y frame, pero esta vez hagámoslo un poco más avanzado.

Podemos jugar con los parámetros físicos de nuestra animación de resorte. Me gusta aumentar el amortiguamiento para que no se sobrecompense. Como puedes ver aquí, se sobrecompensa y luego vuelve a ser más pequeño. Quiero retrasar esta transición para que la animación no comience de inmediato.

Para eso, simplemente engaño a la función de resorte, diciéndole en qué fotograma se encuentra actualmente. Y digo, en realidad, está 20 fotogramas antes de lo que crees que está. Ahora el valor va de 0 a 1, como cualquier animación de resorte. En realidad, también necesitamos interpolarlo, para que el rango no sea entre 0 y 1, sino algo como 0 y 1000. Entonces aquí, el rango de entrada es 0 y 1 y decimos, 0 a 1000. Voy a pasar una transformación.

Bueno, cometí un pequeño error allí. Animé accidentalmente mi nombre en lugar del título de la charla y también va hacia abajo en lugar de hacia arriba. Pero, por supuesto, con la actualización rápida, podemos solucionar fácilmente estas cosas. En realidad, queremos animar de 1000 a 0. Echemos un vistazo a cómo se ve eso. ¡Muy bien! También apliquemos esta traducción rápidamente a todos los demás elementos para que creo que se verá bien. Solo voy a copiar y pegar esto aquí. Tal vez encuentres una forma más ingeniosa de hacerlo. Pero creo que esto hace el trabajo rápidamente. Así es como se ve nuestro video ahora. ¡Genial!

Ahora viene la parte más divertida, en mi opinión. Convirtamos un video en docenas de videos. Creemos una de estas animaciones para cada uno de los oradores que aparecen en React Summit. Para esto, ya he importado, como se mostró antes, un archivo JSON en el proyecto. Donde están todos los metadatos. Y simplemente voy a usar .map para iterar sobre cada orador y devolver una composición para ellos. Podría verse algo así. Démonos a cada uno una clave única. Y también es muy útil que haya una propiedad de Slack en cada orador.

Sí, ahí vamos. Y ahora, como puedes ver, todos los oradores están en la barra lateral izquierda. Entonces, ahora, hagamos que la composición también sea dinámica al alinear los componentes para tomar algunas props. Digamos que el nombre del orador debe ser una cadena, la empresa debe ser una cadena, la URL del avatar también puede ser una cadena y ¿qué más falta? El título de la charla. Solo voy a aceptar estos. Y el nombre del orador y los llenaré, en mi video. Aquí tengo un pequeño conflicto de nombres con un estilo, así que voy a hacer esto. Vamos a poner esto como el título de la charla. Este es el orador. Lo siento, otro conflicto de nombres. Espero que esto lo resuelva ahora. De acuerdo, era solo un problema de sangría. No importa, no importa. Aquí, pongamos la URL del avatar. Aquí podemos definir algunas props predeterminadas para cada composición, y digo predeterminadas porque estas props pueden sobrescribirse más tarde en la línea de comandos. Pero para la vista previa aquí en el navegador, vamos a poner algunas props predeterminadas. La URL del avatar será speaker.avatar.company, speaker.company, speakerName, speaker.name, y el tagName speaker.game. Hagamos speaker.activities.tags, 0.title. Creo que eso será todo. Y convirtámoslo en una cadena. ¡Listo!

Así que aquí tenemos uno para Brandon Bayer. Aquí tenemos la etiqueta de Brent Watney. La de Lee Robinson. Ahora hagamos un mp4 video con esto. Tomemos el video de KentzC. Solo voy a copiar el ID de composición de su etiqueta. Y lo voy a poner en mi comando de construcción, que puedes ejecutar usando npm run build como una forma abreviada, o puedes escribir todo esto. Así que escribamos esto en kent.mp4 y ejecutemos npm run build. Y sí, esto tomará unos segundos. Puedes tener una idea de cuánto tiempo tarda en renderizarse un video de dos segundos.

Aquí podemos ver, en mi computadora muestra la concurrencia 8x. Por lo tanto, toma ocho capturas de pantalla al mismo tiempo. Y se ha creado el video. Echemos un vistazo.

Y aquí tenemos un anuncio de la charla de Kent CDOT, una charla informal con Kent CDOT. Solo he podido tocar ligeramente la superficie de lo que ReMotion puede hacer. Algunas cosas que podrías explorar a continuación. La primera cosa son las secuencias, que es una construcción que te permite desplazar el tiempo. Lo cual es realmente útil si tienes varias escenas en las que quieres trabajar individualmente y luego quieres unirlas para que se reproduzcan una tras otra. Lo cual realmente te ayuda a organizar tu código y la organización, reutilización y encapsulación son clave para escalar la producción de tu video. Otra cosa es el soporte de audio. En el momento en que estés viendo esto, habremos lanzado el soporte de audio. Podrás hacer cosas como tener tantas pistas como desees, podrás cambiar el volumen en cada fotograma y podrás cortar y recortar audio. Otro tema importante es el renderizado en el lado del servidor. ¿Cómo renderizar un video basado en una llamada a la API? Para todas estas cosas, te recomendaría que consultes la documentación en reemotion.dev donde explicaremos todos los temas y también tenemos algunos tutoriales en video para ayudarte a comprender los entresijos de Reemotion. También recuerda que esta charla es de código abierto y con eso no me refiero solo a las diapositivas, sino a todo el video, todo lo que viste fue editado usando Reemotion y puedes consultarlo con el enlace que está en la pantalla ahora.

Sí, eso es todo. Muchas gracias por escucharme. Estaré en vivo para una sesión de preguntas y respuestas justo después de esta charla y espero que también disfrutes de las otras charlas de esta noche.

Hola, bien. Gracias por tenerme aquí. Sí, es un placer tenerte aquí. También te he estado siguiendo en Twitter durante un tiempo y publicas cosas increíbles, pero este Remotion está en otro nivel, tengo que decirlo directamente. Es increíble lo que has hecho solo con React.

Genial. Sí, gracias. Parece que la audiencia no está de acuerdo, aparentemente no quieren usarlo. Por el momento, creo que aún faltan algunas características, ¿verdad?, pero estás trabajando en ello. También es de código abierto, por lo que cualquiera puede contribuir en eso.

Entonces, no veo la razón por la cual en un futuro cercano, tal vez el próximo año, todos crearán videos usando Reomotion.

Entonces parece que la GUI tiene un 53%. Casi está empatado, ¿verdad? Podríamos decir que es una encuesta equilibrada aquí.

Sí, eso está bastante bien. Quiero decir, si la mitad de las personas quieren escribir en React, eso sigue siendo una gran parte. Así que, en realidad, no está tan mal.

Veamos si tenemos alguna pregunta. Iré ahora al chat. Veamos.

De acuerdo. Parece que no tenemos muchas preguntas. Si tienes alguna, solo envíalas en la sección de preguntas y respuestas de Basecamp. Tengo algunas preguntas propias.

Entonces, Johnny, vi que anunciaste recientemente Reomotion 2.0, que es un gran avance. ¿Cuáles fueron las mejoras que hiciste? ¿Cuáles son las nuevas características que has agregado? Si puedes agregar solo un poco allí.

Claro. Así que hay una nueva versión de Reomotion que salió hace solo dos horas. Y la razón por la cual es justo ahora es porque lo mencioné en mi charla. Y luego, así que estaba realmente motivado para lanzarlo porque lo anuncié aquí.

Lo hice justo a tiempo. La característica más importante en Reomotion 2.0 es el soporte de audio. Creo que es realmente genial que puedas simplemente poner estas etiquetas de audio de manera declarativa, cortar y recortar, ponerlas en cualquier posición, poner múltiples pistas de audio e incluso cambiar el volumen por fotograma, crear efectos de desvanecimiento, desvanecerlo en ciertos momentos. Reomotion creará un filtro FF MPEG tan complejo como sea necesario para convertir tu marcado de React en una pista de audio real de un archivo mp4. Eso es realmente poderoso, porque vi en YouTube, por ejemplo, que muchos canales están utilizando este tipo de ecualizador como Soundwave para todos los videos.

Así que simplemente agregar un video sin pasar por una aplicación de terceros y simplemente directamente en el navegador, tal vez, o simplemente abrir la terminal y escribir algo y pasar el mp4 mp3 y tener un mp4 como salida. Es asombroso.

Ahora, me pregunto, ¿es posible hacerlo en vivo, como alimentar un mp3 o una sesión de transmisión en vivo, digamos audio, y tenerlo ahí fuera?

Sí, interesante. Diría que no es el caso de uso previsto utilizarlo para transmisión en vivo, pero diría que es genérico de tal manera que podría prever que suceda.

Entonces, quiero decir, en este momento, como viste, simplemente puedes reproducir el video en un navegador y pronto haré que puedas incrustarlo en tu propia página web y luego cambiar las props de la composición en vivo.

Entonces, sí, quiero decir, si lo scripteas de manera inteligente y luego lo transmites, ¿por qué no? Tenemos una pregunta de Afro Dev Girl que dice, ¿cuál fue la inspiración original para crear Lumotion? La inspiración original. Bueno, diría que fue más como una frustración con las herramientas existentes de edición de video. Sí, quiero decir, me faltaban estas características a las que estoy acostumbrado como desarrollador. Me gusta tener este historial de versiones, poder importar datos de APIs. Hacer cosas con una llamada de API de forma programática. Con los programas de edición de video, solo tendría que abrirlo. Y no hay una buena herramienta de abstracción excepto copiar y pegar. Todas estas cosas me llevaron eventualmente a crear mi propio programa de edición de video.

Genial. Puedo entender esa frustración. Yo también la tengo. Otra pregunta de Vadik. ¿Remotion crea videos solo a partir de transiciones CSS? ¿Si los crea solo a partir de transiciones CSS? No, para nada. Creo que mencioné esto en el video, que las transiciones CSS en realidad no funcionan en absoluto. La razón es que se supone que debes crear un montón de imágenes estáticas en React. Si te doy un número de fotograma, creas una imagen estática. Y estas imágenes estáticas juntas hacen una animación. Mientras que una transición CSS, no es tanto una animación derivada del número de fotograma. Simplemente lo pones en tu archivo CSS y se mueve sin que hagas nada más. Así que en lugar de usar una transición CSS, simplemente calcularías la posición, calcularías el valor de la propiedad para cada fotograma y luego lo renderizarías. Y sí, eso es una limitación, pero también muy necesaria. Y una vez que le tomas la mano, es bastante bueno porque luego puedes simplemente tomar el cursor de la línea de tiempo y moverlo hacia adelante y hacia atrás, pausar tu animación y eso no puedes hacerlo con una transición CSS.

Genial. Otra pregunta de jrock94, ¿cómo integras videos existentes en un proyecto? No estoy seguro si se refiere a MP4s o proyectos de ReMotion. Eso funciona bastante bien. Simplemente usas una etiqueta de video HTML5, y cargas tu video usando una declaración de importación como lo harías en Webpack, y lo pasas como fuente de una etiqueta de video. Como dije, normalmente, esto no sería controlado por el fotograma que ReMotion piensa que es. Pero hemos creado un componente de video que sincronizará el video con el tiempo actual. Así que eso funciona bastante bien. De hecho, todas las grabaciones de pantalla que has visto en el lado derecho de la pantalla mientras codificaba, eran solo un video importado en ReMotion y reproducido.

Fue tan fluido que creo que no era posible ver que no solo envié el video tal como estaba. Sí, es prácticamente una incepción, ¿verdad? Simplemente grabándote a ti mismo dentro de la grabación. Es como dirigirte a ti mismo dentro de la grabación. Muy bueno. Es un proyecto divertido.

Desafortunadamente, nos quedamos sin tiempo. Y muchas gracias, Johnny, por tomarte tu tiempo y mostrarnos otra forma de crear videos usando código. Especialmente React.

¿Estás disponible para otras preguntas? Porque veo que están llegando ahora. ¿Estás en Spatial chat y la gente puede encontrarte allí? Sí, absolutamente. Sí, lo tengo marcado en mi calendario. Ahora me pasaré a Spatial chat. Y es genial ver que llegan más preguntas. Estoy muy feliz de responderlas en unos minutos allí. Muchas gracias, Johnny. Una vez más, fue un placer tenerte aquí. Disfruta el resto del día. Gracias. Adiós. Gracias. Adiós. Disfruta de la conferencia. Gracias.