¿Recuerdas los CSS Sprites? ¡Hagamos eso con video!

Hola a todos, hoy quiero hablar sobre algo un poco ingenioso en lo que he estado pensando últimamente, pero la idea aquí es que queremos usar sprites de video de la misma manera que muchos de ustedes podrían haber usado sprites de CSS en el pasado, así que hablaremos sobre a qué me refiero con muchos esto, pero hola, soy Matt McClure, uno de los cofundadores de una empresa llamada Mux, y dirijo el departamento de Experiencia del Desarrollador allí, y en pocas palabras, construimos una infraestructura de video increíble para desarrolladores, así que si estás buscando una API de video, estamos aquí, así que échale un vistazo.

Entonces, tomando un paso atrás, ¿qué es un sprite? En pocas palabras, es una imagen con un montón de imágenes en ella. El cliente recibe esta gran imagen combinada y luego puede elegir qué partes mostrar, así que si eres relativamente nuevo, es posible que no hayas visto esto tan ampliamente utilizado, pero esta es una técnica de optimización muy común de los primeros años 2000, así que si tenías un botón con estados de hover y estados de presionado y estados activos, simplemente enviarías una imagen de botón y luego usarías tu fondo de CSS para decidir cuál de esa imagen mostrar. Un poco más común si comenzaste ahí, es posible que recuerdes esto de aquel entonces.

Pero para mostrar esto de manera más concreta, mucha gente conoce esto de los sprites de video juegos, así que todos los estados de Mario están en una imagen y la ventana de visualización del cliente muestra el estado de Mario de una vez. Entonces, es posible que te preguntes qué tiene que ver esto con el video. La idea aquí es que la misma técnica funciona. Puedes enviar varios videos combinados en uno solo y luego mostrar solo el que te interesa en el reproductor. Entonces, es posible que te preguntes por qué, ¿por qué demonios estaríamos haciendo esto? Y yo diría, usa tu imaginación. Podría haber muchos ejemplos de esto, como eventos deportivos, conciertos.

Pero el ejemplo más destacado que me viene a la mente y lo que más vemos en los clientes que quieren hacer cosas como esta es la sincronización de feeds. Especialmente la capacidad de elegir entre estos diferentes feeds de manera sincronizada. Entonces, digamos que estás transmitiendo conciertos en vivo, música en vivo. Tienes varias cámaras transmitiendo desde diferentes ángulos. Una está enfocada en el baterista, otra en el cantante, otra en el público, y un productor en el lugar generalmente decide qué feed mostrar en cada momento. Así que podrían hacer una transición suave, pasar del baterista al público, etc. Luego, ese productor envía un feed a un servicio codificador o cualquier otro servicio que se utilice. Estoy usando el ejemplo de Mux aquí por razones obvias. Luego, ese servicio transmite eso a todos tus espectadores finales. Entonces, esos espectadores comienzan a decir cosas como: en realidad, solo quiero ver al baterista todo el tiempo y odio las transiciones que hace este productor. Así que quieren tener la capacidad de elegir qué feed ver. Entonces, decides, ¿cómo podemos construir esto? Entonces, comienzas a pensar, enviaré cada cámara directamente a ese codificador o servicio de transmisión. Y luego cada espectador puede obtener todos los feeds, en este ejemplo, tres feeds. Y aquí es donde las cosas se complican si sigues por este camino. Ahora tienes tres transmisiones en vivo diferentes que las personas pueden ver, pero ¿cómo cambias entre ellas? ¿Las personas simplemente hacen clic en otro feed? Y luego podrías tener unos segundos de retraso en términos de audio para todos ellos. Por lo tanto, puede ser difícil sincronizar eso en el cliente, o honestamente, casi imposible hacerlo bien. Entonces, una solución sería simplemente enviar un video nuevamente. Como lo estabas haciendo antes, pero en lugar de que ese video sea producido, simplemente combinas todos los feeds en ese nivel y luego los envías. Entonces, en este ejemplo, todas las cámaras van a esa caja codificadora local. Simplemente las coloca en cuatro cuadrantes, los envía al servicio de transmisión del codificador, y eso se envía a todos los espectadores. Y luego, los espectadores pueden elegir cuál quieren. Entonces, ahora tienes la garantía de que tus feeds están sincronizados, solo tienes que preocuparte por un audio que se comparte entre todos ellos por razones obvias, y solo muestras el cuadrante del video que el espectador selecciona en cada momento.

Entonces, ¿cómo podría funcionar esto en detalle? Todo este código está en GitHub. Sugeriría revisarlo allí. Pero a grandes rasgos, quieres obtener las coordenadas del feed que deseas mostrar. Así que tengo los feeds simplemente nombrados como 0 a través de 3. Y quieres colocar esas coordenadas. Entonces, en este ejemplo, este array es la posición X de origen, la posición Y de origen, el ancho de origen y la altura de origen. Entonces, lo que quieres cortar. Entonces, 0, 0, es la esquina superior izquierda, 0, la mitad del ancho del video es el cuadrante superior derecho, y así sucesivamente, y así sucesivamente. Y dado que estos son cuadrantes, cada uno tiene la mitad de la altura del video y la mitad del ancho del video. Luego, usas estos cuando actualizas el lienzo. Entonces, cuando dibujas esa imagen en el lienzo, dibujas la imagen del video, o pasas la imagen del video, y luego pasas estas coordenadas que acabamos de obtener, lo que dirá, está bien, solo dibuja el cuadrante superior derecho del video en el lienzo. Y luego llama a la solicitud de animación de cuadro una y otra vez. Entonces, si quieres probarlo, es solo video-sprites.mux.dev. Y luego el código fuente está en github.com. Pero muy rápido, quería mostrarte cómo se ve esto. Esto es solo video-sprites.mux.dev. Solo tengo un activo de bot aquí, pero esto también podría funcionar con transmisiones en vivo, cualquier otra cosa. Aquí hay algo de música de transmisión suave. Y un poco de entrenamiento. Entonces, funciona sorprendentemente bien. Las cosas a tener en cuenta aquí son que debes tener en cuenta que solo podrás transmitir un subconjunto de lo que sea tu nivel superior. Entonces, si tu servicio de transmisión está limitado a 1080, por ejemplo, cada uno solo puede ser una cuarta parte de eso. Lo cual está bien para la mayoría de los ejemplos. Una vez que lleguemos a 4k para servicios que realmente admiten mucho, podrías hacer 1080 para cada cuadrante. Pero eso es lo único que debes tener en cuenta. Pero muchas gracias por escuchar. Si decides usar esto, por favor avísame. Envíame una nota a Matt McClure en Twitter. Y si quieres cualquier cosa relacionada con video, visita mux.com. Muy bien, gracias a todos.