Uso de Amazon IVS para crear experiencias interactivas de transmisión en vivo con metadatos cronometrados

Hasta ahora, en esta serie de blogs, creamos nuestro primer canal de transmisión en vivo, aprendimos cómo crear una experiencia de reproducción en el navegador y mejoramos esa experiencia con el reproductor SDK de Amazon Interactive Video Service (Amazon IVS). En las próximas publicaciones, veremos cómo agregar algo de interactividad a nuestra experiencia de reproducción.

La transmisión en vivo es claramente popular, pero es más que solo el video lo que atrae a los espectadores. Interactuar con la emisora y otros espectadores es una de las principales razones por las que muchas personas siguen volviendo a ciertas transmisiones y transmisores. Amazon IVS nos brinda algunas características bastante sorprendentes que permiten la interactividad, y uno de los elementos más geniales que podemos usar para mejorar nuestra transmisión en vivo son los metadatos cronometrados (obligatorio " enlace de documento oficial ").

¿Metadatos cronometrados?

Los metadatos cronometrados son una forma de incrustar información en su transmisión en vivo en un momento específico. Los metadatos que publica se convierten en parte de la transmisión de video en sí, ya que utiliza etiquetas ID3 incrustadas directamente en los segmentos de video. Eso significa que estarán disponibles más adelante si grabamos nuestras transmisiones en vivo.

¿Para que sirve?

¡Todo tipo de cosas! Usando metadatos cronometrados, podemos crear una experiencia interactiva para nuestros espectadores fuera del reproductor de video. Imagine una transmisión en vivo de un programa de juegos que pueda generar preguntas en el navegador cuando el anfitrión las haga. Piense en una experiencia de compra en vivo que actualice la página con imágenes de productos, reseñas, información de precios o códigos de descuento mientras el presentador hace una demostración del producto. ¿Qué pasa con la actualización de tablas de clasificación, puntajes de cuadro, estadísticas detalladas durante un evento deportivo (o e-sports) transmitido en vivo? Imagine una carrera de bicicletas transmitida en vivo que transmite la ubicación GPS del ciclista con la transmisión y la muestra en tiempo real en un mapa. Hay tantos casos de uso, y estoy seguro de que ya ha pensado en algunos para sus propias aplicaciones. ¡Basta de hablar, construyamos algo!

Escuchar metadatos cronometrados

Volvamos una vez más a la página de flujos de prueba de Amazon IVS. Tenga en cuenta que aquí hay una transmisión de prueba que contiene metadatos cronometrados. ¡Agradable! Conectaremos esto con nuestro ejemplo de reproductor de Amazon IVS con el que hemos estado trabajando y lo desarrollaremos. Así es como se ve:

 <video id="video-player" controls autoplay playsinline></video>

 const videoEl = document.getElementById('video-player'); const streamUrl = 'https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.xhP3ExfcX8ON.m3u8'; const ivsPlayer = IVSPlayer.create(); ivsPlayer.attachHTMLVideoElement(videoEl); ivsPlayer.load(streamUrl); ivsPlayer.play();

Esta transmisión es un ejemplo de una transmisión de "trivia en vivo" donde el anfitrión lee algunas preguntas de trivia. Se incrusta un evento de metadatos cronometrado en el momento exacto en que el host lee una pregunta de trivia. Podemos escuchar y responder a este evento. Si recuerda nuestra última publicación, podemos usar addEventListener() en el reproductor de Amazon IVS para escuchar varios eventos, y TEXT_METADATA_CUE ( docs ) es uno de esos eventos.

 ivsPlayer.addEventListener(IVSPlayer.PlayerEventType.TEXT_METADATA_CUE, (e) => { console.log(e); });

Si reproducimos nuestra transmisión, podemos verificar la consola después de que el anfitrión lea una pregunta y observe el evento registrado. Debería verse similar a esto:

 { "startTime": 61.04233333333333, "endTime": 61.04233333333333, "type": "TextMetadataCue", "description": "", "text": "{\"question\": \"From what language does the term RSVP originate from?\",\"answers\": [ \"Russian\", \"Italian\", \"French\", \"Portuguese\" ],\"correctIndex\": 2}", "owner": "metadata.live-video.net" }

La clave startTime representa el tiempo transcurrido desde que comenzó la transmisión hasta que tuvo lugar el evento (61 segundos en el ejemplo anterior). Lo interesante que buscamos aquí es la clave de text , que contiene los metadatos. Aquí, es una cadena JSON, pero puede ser lo que necesites que sea.

Eso puede sonar pequeño, pero los metadatos no están destinados a entregar grandes cargas útiles. Podemos realizar pasos adicionales en el lado del cliente si es necesario. Por ejemplo, podríamos pasar una ID de pregunta en el ejemplo anterior en lugar de pasar la pregunta, las respuestas y la respuesta correcta y obtener el resto de la información de la memoria del cliente o una llamada API remota.

Pero como tenemos todo el payload de trivia, analicemos los metadatos.

 const metadata = JSON.parse(e.text);

La estructura de metadatos analizados utiliza la siguiente estructura:

 { "question": "From what language does the term RSVP originate from?", "answers": [ "Russian", "Italian", "French", "Portuguese" ], "correctIndex": 2 }

Presentación de la pregunta y las respuestas

Así que tenemos las preguntas, las respuestas y el índice de la respuesta correcta. Sin duda, nuestros espectadores serían muy honestos y nunca buscarían en las herramientas de desarrollo del navegador para ver la respuesta correcta, por lo que procederemos con nuestra aplicación de trivia en el sistema de honor. Hagamos la pregunta y las respuestas. Primero, agregaremos algunas marcas HTML (diseñadas con Bootstrap) debajo del reproductor de video.

 <div class="card mt-3"> <div class="card-header bg-dark text-white"> <h4>Question</h4> </div> <div class="card-body"> <div class="card-title"> <h4 id="question"></h4> </div> <div id="answerContainer"> <ul id="answers" class="list-group"></ul> </div> </div> <div class="card-footer text-center"> <button class="btn btn-dark" id="check-answer-btn" disabled>Submit</button> </div> </div>

Así que tenemos un contenedor para nuestra pregunta y las respuestas. También hemos agregado un botón para verificar la respuesta que inicialmente está disabled . Agreguemos algo de código dentro de nuestro controlador de eventos para almacenar la respuesta correcta en el alcance global para que podamos verificar la respuesta del usuario más adelante.

 window.correctIndex = metadata.correctIndex;

Ahora podemos habilitar el botón Enviar, mostrar la pregunta y borrar el contenedor de respuestas.

 // enable the submit button document.getElementById('check-answer-btn').removeAttribute('disabled'); // display the question document.getElementById('question').innerHTML = metadata.question; // clear previous answers const answersEl = document.getElementById('answers'); answersEl.replaceChildren();

Ahora podemos recorrer todas las respuestas en el objeto de metadatos y mostrarlas en la página.

 // render the answers for this question metadata.answers.forEach((a, i) => { // create an answer container const answerEl = document.createElement('li'); answerEl.classList.add('list-group-item'); // radio button to select the answer const answerRadio = document.createElement('input'); answerRadio.setAttribute('name', 'answer-input'); answerRadio.type = 'radio'; answerRadio.id = `answer-input-${i}`; answerRadio.classList.add('me-2', 'form-check-input'); answerRadio.dataset.index = i; answerEl.appendChild(answerRadio); // label to display the answer text const answerLbl = document.createElement('label'); answerLbl.setAttribute('for', `answer-input-${i}`); answerLbl.innerHTML = a; answerEl.appendChild(answerLbl); answersEl.appendChild(answerEl); });

Comprobación de la respuesta correcta

Ahora nuestra aplicación mostrará la pregunta y las respuestas en la página. Necesitaremos una función que pueda comprobar si la respuesta del usuario es correcta y que proporcione comentarios de los usuarios, así que vamos a crear eso ahora.

 const checkAnswer = () => { // disable the submit btn document.getElementById('check-answer-btn').setAttribute('disabled', 'disabled'); // check the current answer const selectedAnswer = document.querySelector('input[name="answer-input"]:checked'); const selectedIdx = parseInt(selectedAnswer.dataset.index); // highlight the correct answer document.querySelector(`input[data-index="${window.correctIndex}"]`).nextSibling.classList.add('text-success'); // if they're wrong, highlight the incorrect answer if (selectedIdx !== window.correctIndex) { selectedAnswer.nextSibling.classList.add('text-danger'); } }

No olvide adjuntar un detector de eventos para el evento de click en nuestro botón Enviar . Agregaremos eso en nuestra función init() .

 document.getElementById('check-answer-btn').addEventListener('click', checkAnswer);

¡Y estamos listos para verlo en acción! Si estás jugando en casa, compara tu código con el código de la demostración a continuación. Si no, échale un vistazo de todos modos para ver la solución final. ¡Pruébelo y vea cuántas preguntas puede acertar! Tenga en cuenta que es posible que deba desplazarse hacia abajo en la demostración para ver la pregunta.

Producción de metadatos cronometrados

Hemos visto cómo consumir metadatos, pero aún no hemos visto cómo producirlos. No te preocupes, ¡no es tan difícil de hacer! Hay varias formas de producir metadatos cronometrados y todas requieren el ARN del canal . Puede obtener este valor de la consola de administración de Amazon IVS en los detalles del canal o a través de la CLI de AWS.

 $ aws \ ivs \ list-channels \ --filter-by-name [YOUR CHANNEL NAME] \ --query "channels[0].arn" \ --output text

Con la CLI de AWS

Una forma de producir metadatos cronometrados es utilizar la CLI de AWS. No sé si este es un método que usaría muy a menudo, pero para fines de prueba y depuración, es bueno saber cómo hacerlo.

 $ aws \ ivs \ put-metadata \ --channel-arn [YOUR CHANNEL ARN] \ --metadata '{"test": true}'

Documentos de la CLI de AWS .

Con el SDK de Amazon IVS

SDK de nodo

 import AWS from 'aws-sdk'; const Ivs = new AWS.IVS({ region: 'us-east-1', credentials }); const putMetadata = async (metadata) => { const input = { channelArn: '[YOUR CHANNEL ARN]', metadata: JSON.stringify(metadata) }; let output; try { output = await Ivs.putMetadata(input).promise(); } catch (e) { console.error(e); if (e.name === 'ChannelNotBroadcasting') { output = { offline: true }; } else { throw new Error(e); } } return output; }

Documentos del SDK del nodo .

SDK de Python

 import boto3 client = boto3.client('ivs') response = client.put_metadata( channelArn='[YOUR CHANNEL ARN]', metadata='{"python": true}' ) print(response)

Documentos SDK de Python .

Otros idiomas

Consulte la documentación específica del SDK para conocer la sintaxis para publicar eventos de metadatos en su idioma favorito.

Resumen

Los metadatos cronometrados son infinitamente geniales y tienen muchas aplicaciones para hacer que nuestra transmisión en vivo sea atractiva e interactiva. En nuestra próxima publicación, veremos otra forma en que podemos agregar interactividad a nuestras transmisiones en vivo: ¡Amazon IVS Chat!

También publicado aquí