¿Recuerdas los CSS Sprites? ¡Hagámoslo 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 lo que quiero decir con todo esto, pero hola, soy Matt McClure. Soy uno de los cofundadores de una empresa llamada Mux y dirijo el departamento de Developer Experience allí. Y en pocas palabras, construimos una infraestructura impresionante de video 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 varias imágenes en ella. El cliente recibe esta gran imagen combinada y luego puede elegir qué partes mostrar de ella. 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 principios de los años 2000.

Entonces, si tenías un botón con estados de hover, estados de presión y estados activos, entonces solo 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 esa época.

Pero para mostrar esto de manera más concreta, mucha gente lo conoce a partir de los sprites de video de los juegos. Todos los estados de Mario están en una sola imagen. Y luego la ventana del cliente muestra el estado de Mario que desea. Es posible que te preguntes qué tiene que ver esto con los videos. La idea aquí es que la misma técnica funciona. Puedes enviar varios videos combinados en uno y luego mostrar solo el que te interesa en el reproductor.

Es posible que te preguntes, ¿por qué demonios haríamos esto? Y yo diría, usa tu imaginación. Podría haber muchos ejemplos de esto, como, por ejemplo, deportes, eventos deportivos, conciertos. Pero el ejemplo más grande que me viene a la mente y lo que vemos más a menudo es la sincronización de feeds, especialmente la capacidad de elegir entre estos diferentes feeds de manera sincronizada. Digamos que estás transmitiendo conciertos en vivo, música en vivo. Entonces tienes varias cámaras transmitiendo diferentes ángulos. Una está en el baterista, otra en el cantante, otra en el público. Y un productor en el lugar generalmente decide qué feed mostrar en cualquier momento dado. Entonces podrían hacer una bonita transición, pasar del baterista al público, etc. Luego, ese productor envía un feed a un servicio de codificación o cualquier otra cosa. Aquí estoy usando Mux como ejemplo por razones obvias. Luego, ese servicio transmite eso a todos tus espectadores finales. Entonces esos espectadores comienzan a decir, en realidad, solo quiero ver al baterista todo el tiempo, y odio las transiciones que hace este productor. Entonces quieren poder elegir qué feed ver. Entonces decides, bien, ¿cómo podemos construir esto.

Entonces comienzas a pensar, bien, 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. Una solución sería simplemente enviar un video nuevamente. Entonces, como lo estabas haciendo antes, pero en lugar de que se produzca ese video, simplemente combinas todos los feeds en ese nivel y luego los envías. En este ejemplo, todas las cámaras van a esa caja de codificador local. Simplemente las organiza 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. Ahora tienes la garantía de que tus feeds están sincronizados. Solo tienes que preocuparte por un flujo de audio que se comparte entre todos ellos por razones obvias, y solo muestras el cuadrante del video que el espectador selecciona en cualquier momento dado. ¿Cómo podría funcionar esto en detalle? Todo este código está en GitHub. Sugeriría que lo revises allí, pero a grandes rasgos, quieres obtener las coordenadas del feed que deseas mostrar. Tengo los feeds simplemente nombrados como cero a tres. Y quieres organizar esas coordenadas. Las coordenadas en este ejemplo de esta matriz son la posición X de origen, la posición Y de origen, el ancho de origen y la altura de origen, es decir, lo que quieres recortar. Entonces, cero, cero, es la esquina superior izquierda. Cero, la mitad del ancho del video es el cuadrante superior derecho, y así sucesivamente. Y dado que estos son cuadrantes, cada uno es la mitad de la altura del video y la mitad del ancho del video. Y luego usas estas coordenadas 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á, por ejemplo, solo dibuja el cuadrante superior derecho del video en el lienzo. Y luego, ya sabes, llama a la solicitud de animación de cuadro una y otra vez. Si quieres probarlo, solo ve a video-sprites.mux.dev. Y luego el código fuente está en github.com/muxlabs/video-sprites. Pero muy rápido, quería mostrarte cómo se ve esto. Esto es solo video-sprites.mux.dev. Solo tengo un elemento 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. Sorprendentemente, funciona muy bien. Los puntos a tener en cuenta aquí son que debes recordar que solo podrás difundir un subconjunto de 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 muchos servicios que lo admiten, podrías hacer 1080 para cada cuadrante, pero eso es lo único que debes tener en cuenta y todas las demás consideraciones para Canvas.

Pero, muchas gracias por escuchar. Si decides usar nuestro servicio, por favor avísame. Envíame un mensaje a Matt McClure en Twitter. Y si necesitas contenido de video, visita mux.com. Muy bien. Gracias a todos.