Compartir a través de

Señalización de metadatos con tiempo con Azure Media Services

  • Artículo

Logotipo de Media Services v3

Advertencia

Azure Media Services se retirará el 30 de junio de 2024. Para obtener más información, consulte la Guía de retirada de AMS.

Los metadatos con tiempo son datos personalizados que se insertan en una secuencia en vivo. Tanto los datos como su marca de tiempo de inserción se conservan en la propia secuencia multimedia. Esto es para que los clientes que reproducen la secuencia de vídeo puedan obtener los mismos metadatos personalizados exactamente al mismo tiempo en relación con la secuencia de vídeo.

Nota

Los metadatos con tiempo de espera solo funcionan para los eventos en directo creados con la ingesta RTMP y RTMPS.

Requisitos previos

  • Una cuenta de Media Services
  • Familiaridad con el streaming en vivo desde un codificador local. Si no lo ha hecho antes, pruebe primero el streaming en vivo con el inicio rápido de OBS . Una vez que tenga esa configuración y en ejecución, debería poder realizar los pasos siguientes.
  • Una herramienta para probar entradas HTTP.

Visualización del ejemplo

En el ejemplo siguiente se muestra cómo un reproductor de vídeo detecta y muestra los metadatos con tiempo de la secuencia de vídeo. Usa el reproductor de Shaka y su compatibilidad integrada con los datos de mensajes de eventos ('emsg') a través de EmsgEvent.

Media Services también admite los eventos MetadataEvent del reproductor shaka ID3, "emsg" que usan el URI https://aomedia.org/emsg/ID3de identificador de esquema .

Revisión del código en Stackblitz

Hemos proporcionado un jugador de Shaka de ejemplo en Stackblitz para que trabaje con usted. Use este botón para bifurcar el código de ejemplo en Stackblitz.com.

Abrir bifurcación en StackBlitz

Revisar la página HTML

El documento index.html contiene:

  • un elemento div donde se mostrará el mensaje una vez enviado.
  • un elemento de vídeo HTML5 estándar. Observe que el elemento de vídeo está establecido autoplay en y en start muted.
  • un campo de entrada para la dirección URL del localizador de streaming. Hay una dirección URL de marcador de posición en el campo de entrada que puede ver, pero no es una secuencia en directo. Reemplazará este valor.
<script type="module" src="./index.js"></script>
<link href="./style.css" type="text/css" rel="stylesheet">

<div class="grid-container">

  <div id="header">
    <a href="https://github.com/Azure-Samples/media-services-v3-node-tutorials/tree/main/Player/examples/shaka">
      <span class="microsoft"><svg aria-hidden="true" role="presentation" viewBox="0 0 26 25"
          xmlns="http://www.w3.org/2000/svg">
          <path d="M12.5708 0.981934H0.907471V12.3682H12.5708V0.981934Z" fill="#F25022"></path>
          <path d="M25.4625 0.981934H13.7992V12.3682H25.4625V0.981934Z" fill="#7FBA00"></path>
          <path d="M12.5708 13.5649H0.907471V24.9512H12.5708V13.5649Z" fill="#00A4EF"></path>
          <path d="M25.4629 13.5649H13.7996V24.9512H25.4629V13.5649Z" fill="#FFB900"></path>
        </svg></span>
      <span class="title">Shaka Player LL-HLS with Timed Metadata Sample</span>
    </a>
  </div>
  <div id="videoArea">


    <div id="video-container" data-shaka-player-cast-receiver-id="07AEE832">
      <div id="metadata" class="metadata-hide"></div>
      <video autoplay muted playsinline id="video" style="width: 100%; height: 100%"></video>
    </div>
  </div>
  <div id="clock">
  </div>

  <div id="console">Waiting for timed metadata signals to arrive...</div>
  <div id="manifest">
    <label>Your Manifest (paste and hit enter):</label>
    <input id="manifestUrl" type="url" placeholder="place manifest URL here" size="80"
      value="//aka.ms/lowlatencydemo.m3u8" />
  </div>

  <div id="footer">
  <a href="http://media.azure">Azure Media Services</a>
  </div>
</div>

Revisión de JavaScript

El archivo index.js crea y administra los eventos del reproductor y del reproductor. La onEventMessage función está registrada para controlar el emsg evento desde shaka Player y mostrar los mensajes recibidos de post.

player.addEventListener('emsg', onEventMessage);

function onEventMessage(event) {         
    // In version 4.2.x of Shaka player, the event message from AMS will fire here.
    // In version 4.3.0 and higher of Shaka player, the message will only fire in the "metadata' event, since the Shaka player is looking for ID3 messages and filtering them out to that event.

    console.log('Timed Metadata Event Message');
    //console.log('emsg:', event)
    // emsg box information are in emsg.details
    const dataMsg = new TextDecoder().decode(event.detail.messageData);
    console.log('EMSG: Scheme = ' + event.detail.schemeIdUri);
    console.log('EMSG: StartTime = ' + event.detail.startTime);
    console.log(
        'video.currenttime=' + document.getElementById('video').currentTime
    );

    // The start time and the presentationTimeDelta are in seconds on the presentation timeline. Shaka player does this work for us. The value startTime-presentationTimeDelta will give you the exact time in the video player's timeline to display the event.
    console.log(
        'EMSG: startTime-presentationTimeDelta = ' +
        (event.detail.startTime - event.detail.presentationTimeDelta)
    );

    console.log(
        'EMSG: presentationTimeDelta = ' + event.detail.presentationTimeDelta
    );
    console.log('EMSG: endTime = ' + event.detail.endTime);
    console.log('EMSG: timescale = ' + event.detail.timescale);
    console.log('EMSG: duration = ' + event.detail.eventDuration);
    console.log('EMSG: message length = ' + event.detail.messageData.length);

    try {
        const frames = shaka.util.Id3Utils.getID3Frames(event.detail.messageData);

        if (frames.length > 0) {
            console.log('EMSG: message = ', frames[0]);
            console.log('EMSG: mimeType = ', frames[0].mimeType);

            if (frames[0].mimeType === 'application/json') {
                const jsonPayload = JSON.parse(frames[0].data);
                let message = jsonPayload.message;
                console.log('message=' + message);

                // Now do something with your custom JSON payload
                let metadataDiv = document.getElementById('metadata');
                metadataDiv.innerText = message;

                let logLine = document.createElement('p');
                logLine.innerText = 'onEmsg - timestamp:' + (event.detail.startTime - event.detail.presentationTimeDelta).toFixed(2) + ' ' + JSON.stringify(jsonPayload);
                document.getElementById('console').appendChild(logLine).scrollIntoView(false);

                metadataDiv.className = 'metadata-show';

                setTimeout(() => {
                    metadataDiv.className = 'metadata-hide';
                }, 5000); // clear the message

                console.log('JSON= ' + JSON.stringify(jsonPayload));
            }
        }
    } catch (err) {
        console.error(err.stack);
    }
}

Creación de un evento en directo con un localizador de streaming

Si aún no lo ha hecho con el inicio rápido de OBS mencionado anteriormente, cree un evento en directo con un localizador de streaming.

  1. Use el Azure Portal, REST o su SDK favorito para crear un evento en directo. Copie la dirección URL de ingesta y péguela en un editor de texto, ya que deberá editarla para enviar un mensaje al reproductor con una solicitud HTTP PUT.
  2. Inicie el evento en directo y asegúrese de que también se ha iniciado el punto de conexión de streaming asociado.

Transmisión del evento en directo

Copie y pegue el localizador de streaming en el campo de entrada del reproductor en Stackblitz o, opcionalmente, actualice el valor en el elemento de entrada del archivo index.html. Debería ver el streaming de eventos en directo al reproductor.

Creación de la dirección URL POST

Edite la dirección URL de ingesta:

  1. Cambio de RTMPS a HTTPS.
  2. Quite el número de puerto, incluidos los dos puntos.
  3. Quite /live/ de la ruta de acceso.
  4. Anexe ingest.isml/eventdata a la ruta de acceso.

Ejemplo:

rtmps://mylivestream.channel.media.azure-test.net:2935/live/0251458ba5df44b2b807ea02f40fed76

se convierte en

https://mylivestream.channel.media.azure-test.net/0251458ba5df44b2b807ea02f40fed76/ingest.isml/eventdata

Creación y envío de una solicitud

Puede usar cualquier herramienta o SDK que desee para enviar una solicitud HTTP POST con los metadatos del cuerpo al reproductor.

Encabezados y cuerpo de la solicitud

Recordatorio: El encabezado de tipo de contenido HTTP DEBE establecerse en application/json. A continuación, agregue la información que desea mostrar con la clave establecida como "message". Este es un sencillo mensaje de ejemplo:

POST https://mylivestream.channel.media.azure-test.net/0251458ba5df44b2b807ea02f40fed76/ingest.isml/eventdata
Content-Type: application/json

{

“message”: “Hello world!”

}

Al enviar la solicitud, debería ver que el mensaje en la carga JSON aparece en el elemento div flotante sobre el elemento de vídeo.

Solicitudes alternativas

Puede enviar información adicional para una superposición interactiva. La configuración completa de ese escenario no se trata aquí, pero este es el aspecto que podría tener el cuerpo de la solicitud para una prueba. Puede recorrer en iteración las respuestas de cada "pregunta" (aquí reemplazando "message" como clave) y proporcionar un botón para que el visor seleccione.

POST https://mylivestream.channel.media.azure-test.net/0251458ba5df44b2b807ea02f40fed76/ingest.isml/eventdata
Content-Type: application/json


{
    "question": "What is the airspeed velocity of an unladen swallow?",
     "answers" : [
        {"a1": "A shrubbery!"},
        {"a2": "I am not a witch!"},
        {"a3":  "An African or European swallow?"},
        {"a4": "It's just a flesh wound."},
    ]
}

Sugerencia

Abra las Herramientas de desarrollo para el explorador y watch los eventos de vídeo que se desencadenan, así como los mensajes recibidos de la carga JSON de la solicitud.

Ejemplo post con cURL

Al usar cURL, debe establecer el encabezado mediante -H “Content-Type: application/json”. Use la -d marca para establecer los datos JSON en la línea de comandos (comillas de escape en el cuerpo JSON con una barra diagonal inversa al usar la línea de comandos). Opcionalmente, puede apuntar a un archivo JSON mediante -d \@\<path-to-json-file\>.

Post es implícito al enviar datos, por lo que no es necesario usar la marca -X POST.

Post de ejemplo:

curl https://mylivestream.channel.media.azure.net/618377123f4c49b3937ade20204ca0b2/ingest.isml/eventdata -H "Content-Type: application/json" -d "{\\"message\\":\\"Hello from Seattle\\"}" -v

Limpieza de recursos

Asegúrese de apagar el evento en directo y el punto de conexión de streaming y eliminar los recursos que no pretende seguir usando o se le facturará.

Obtener ayuda y soporte técnico

Puede ponerse en contacto con Media Services con preguntas o seguir nuestras actualizaciones mediante uno de los métodos siguientes: