Condividi tramite

Come segnalare i metadati a tempo con Servizi multimediali di Azure

  • Articolo

Logo di Servizi multimediali v3

Avviso

Servizi multimediali di Azure verrà ritirato il 30 giugno 2024. Per altre informazioni, vedere la Guida al ritiro di AMS.

I metadati a tempo sono dati personalizzati inseriti in un flusso live. Sia i dati che il timestamp di inserimento vengono mantenuti nel flusso multimediale stesso. Ciò significa che i client che riproduceno il flusso video possono ottenere gli stessi metadati personalizzati esattamente nello stesso momento in relazione al flusso video.

Nota

I metadati a tempo funzionano solo per gli eventi live creati con l'inserimento RTMP e RTMPS.

Prerequisiti

  • Un account di Servizi multimediali
  • Familiarità con lo streaming live da un codificatore locale. Se non è già stato fatto prima, provare a eseguire lo streaming live con la guida introduttiva di OBS . Dopo aver configurato ed eseguito, dovrebbe essere possibile eseguire i passaggi seguenti.
  • Strumento per testare i post HTTP.

Visualizzare l'esempio

L'esempio seguente mostra come un lettore video intercetta e visualizza i metadati cronologici del flusso video. Usa il lettore Shaka e il supporto predefinito per i dati del messaggio di evento ('emsg') tramite EmsgEvent.

Servizi multimediali supporta anche gli eventi MetadataEvent del lettore Shaka ID3, "emsg" che usano l'URI https://aomedia.org/emsg/ID3dell'ID schema .

Esaminare il codice in Stackblitz

Abbiamo fornito un campione di Shaka player in Stackblitz per lavorare con te. Usare questo pulsante per creare una copia tramite fork del codice di esempio in Stackblitz.com.

Aprire fork in StackBlitz

Esaminare la pagina HTML

Il documento index.html contiene:

  • elemento div in cui il messaggio verrà visualizzato una volta inviato.
  • un elemento video HTML5 standard. Si noti che l'elemento video è impostato su autoplay e su start muted.
  • un campo di input per l'URL del localizzatore di streaming. Nel campo di input è presente un URL segnaposto che è possibile visualizzare, ma non è un flusso live. Questo valore verrà sostituito.
<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>

Esaminare JavaScript

Il file index.js crea e gestisce gli eventi del lettore e del lettore. La onEventMessage funzione viene registrata per gestire l'evento emsg da Shaka Player e visualizzare i messaggi ricevuti dal 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);
    }
}

Creare un evento live con un localizzatore di streaming

Se non è già stato fatto con la guida introduttiva di OBS menzionata in precedenza , creare un evento live con un localizzatore di streaming.

  1. Usare il portale di Azure, REST o l'SDK preferito per creare un evento live. Copiare l'URL di inserimento e incollarlo in un editor di testo perché sarà necessario modificarlo per inviare un messaggio al lettore con una richiesta HTTP PUT.
  2. Avviare l'evento live e assicurarsi che sia avviato anche l'endpoint di streaming associato.

Trasmettere l'evento live

Copiare e incollare il localizzatore di streaming nel campo di input del lettore in Stackblitz o, facoltativamente, aggiornare il valore nell'elemento di input nel file di index.html. Verrà visualizzato lo streaming di eventi live al lettore.

Creare l'URL POST

Modificare l'URL di inserimento:

  1. Cambiare RTMPS in HTTPS.
  2. Rimuovere il numero di porta, inclusi i due punti.
  3. Rimuovere /live/ dal percorso.
  4. Aggiungere ingest.isml/eventdata al percorso.

Esempio:

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

diventa

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

Creare e inviare una richiesta

È possibile usare qualsiasi strumento o SDK desiderato per inviare un HTTP POST con i metadati nel corpo al lettore.

Intestazioni e corpo della richiesta

Promemoria: l'intestazione HTTP Content-type deve essere impostata su application/json. Aggiungere quindi le informazioni da visualizzare con la chiave impostata come "message". Ecco un semplice messaggio di esempio:

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

{

“message”: “Hello world!”

}

Quando si invia la richiesta, viene visualizzato il messaggio nel payload JSON visualizzato nel div mobile sull'elemento video.

Richieste alternative

È possibile inviare informazioni aggiuntive per una sovrimpressione interattiva. La configurazione completa per questo scenario non è descritta qui, ma ecco l'aspetto del corpo della richiesta per un quiz. È possibile scorrere le risposte per ogni "domanda" (qui sostituendo "message" come chiave) e specificare un pulsante per il visualizzatore da selezionare.

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."},
    ]
}

Suggerimento

Aprire Gli strumenti di sviluppo per il browser e watch gli eventi video generati, nonché i messaggi ricevuti dal payload JSON della richiesta.

Post di esempio con cURL

Quando si usa cURL, è necessario impostare l'intestazione usando -H “Content-Type: application/json”. Usare il -d flag per impostare i dati JSON nella riga di comando (virgolette di escape nel corpo JSON con una barra rovesciata quando si usa la riga di comando). Facoltativamente, è possibile puntare a un file JSON usando -d \@\<path-to-json-file\>.

Un POST è implicito quando si inviano dati, quindi non è necessario usare il flag POST -X.

Post di esempio:

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

Pulire le risorse

Assicurarsi di arrestare l'evento live e l'endpoint di streaming ed eliminare le risorse che non si intende continuare a usare o verranno fatturate.

Guida e supporto tecnico

È possibile contattare Servizi multimediali con domande o seguire gli aggiornamenti tramite uno dei metodi seguenti: