Dela via

Så här signalerar du tidsindelade metadata med Azure Media Services

  • Artikel

Media Services-logotyp v3

Varning

Azure Media Services dras tillbaka den 30 juni 2024. Mer information finns i AMS Pensionsguide.

Tidsindelade metadata är anpassade data som infogas i en liveström. Både data och dess infogningstidsstämpel bevaras i själva medieströmmen. Detta gör att klienter som spelar upp videoströmmen kan få samma anpassade metadata exakt samtidigt i förhållande till videoströmmen.

Anteckning

Tidsindelade metadata fungerar endast för livehändelser som skapats med RTMP- och RTMPS-inmatning.

Förutsättningar

  • Ett Media Services-konto
  • Kunskaper om liveuppspelning från en lokal kodare. Om du inte har gjort det tidigare kan du prova liveuppspelning med OBS-snabbstarten först. När du har konfigurerat och kört den bör du kunna utföra följande steg.
  • Ett verktyg för att testa HTTP-inlägg.

Visa exemplet

Exemplet nedan visar hur en videospelare fångar upp och visar tidsindelade metadata för videoströmmen. Den använder Shaka-spelaren och dess inbyggda stöd för händelsemeddelandedata ('emsg') via EmsgEvent.

Media Services stöder även Shaka-spelar-ID3 MetadataEvent, "emsg"-händelser som använder schema-ID-uri https://aomedia.org/emsg/ID3.

Granska koden på Stackblitz

Vi har tillhandahållit ett exempel på Shaka-spelare på Stackblitz som du kan arbeta med. Använd den här knappen för att förgrena exempelkoden på Stackblitz.com.

Öppna förgrening i StackBlitz

Granska HTML-sidan

Dokumentet index.html innehåller:

  • ett div-element där meddelandet visas när det har skickats.
  • ett html5-standardvideoelement. Observera att videoelementet är inställt på autoplay och till start muted.
  • ett indatafält för url:en för positioneraren för direktuppspelning. Det finns en platshållar-URL i indatafältet som du kan visa, men det är inte en liveström. Du kommer att ersätta det här värdet.
<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>

Granska JavaScript

Den index.js filen skapar och hanterar spelar- och spelarhändelserna. Funktionen onEventMessage är registrerad för att hantera emsg händelsen från Shaka Player och visa de meddelanden som tas emot från 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);
    }
}

Skapa en livehändelse med en positionerare för direktuppspelning

Om du inte redan har gjort det med obs-snabbstarten som nämndes tidigare skapar du en livehändelse med en positionerare för direktuppspelning.

  1. Använd Azure Portal, REST eller din favorit-SDK för att skapa en livehändelse. Kopiera inmatnings-URL:en och klistra in den i en textredigerare eftersom du behöver redigera den för att skicka ett meddelande till spelaren med en HTTP PUT-begäran.
  2. Starta livehändelsen och kontrollera att den associerade slutpunkten för direktuppspelning också har startats.

Strömma livehändelsen

Kopiera och klistra in positioneraren för direktuppspelning i indatafältet i spelaren på Stackblitz eller uppdatera värdet på indataelementet i index.html-filen. Du bör se livehändelseuppspelningen till spelaren.

Skapa POST-URL:en

Redigera inmatnings-URL:en:

  1. Ändra RTMPS till HTTPS.
  2. Ta bort portnumret, inklusive kolonet.
  3. Ta bort /live/ från sökvägen.
  4. ingest.isml/eventdata Lägg till i sökvägen.

Exempel:

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

Blir

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

Skapa och skicka en begäran

Du kan använda valfritt verktyg eller SDK som du vill för att skicka ett HTTP POST med metadata i brödtexten till spelaren.

Sidhuvuden och begärandetext

Påminnelse: RUBRIKEN HTTP-innehållstyp MÅSTE anges till application/json. Lägg sedan till den information som du vill visa med nyckeluppsättningen som "meddelande". Här är ett enkelt exempelmeddelande:

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

{

“message”: “Hello world!”

}

När du skickar begäran bör du se meddelandet i JSON-nyttolasten visas i div:en som flyter över videoelementet.

Alternativa begäranden

Du kan skicka ytterligare information för ett interaktivt överlägg. Den fullständiga konfigurationen för det scenariot beskrivs inte här, men så här kan begärandetexten se ut för ett test. Du kan iterera genom svaren för varje "fråga" (här ersätter du "meddelande" som nyckeln) och anger en knapp för visningsprogrammet att välja.

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

Tips

Öppna utvecklarverktygen för webbläsaren och watch de videohändelser som utlöses samt de meddelanden som tas emot från JSON-nyttolasten för begäran.

Exempel på POST med cURL

När du använder cURL måste du ange huvudet med .-H “Content-Type: application/json” -d Använd flaggan för att ange JSON-data på kommandoraden (escape-citattecken i JSON-brödtexten med ett omvänt snedstreck när du använder kommandoraden). Du kan också peka på en JSON-fil med .-d \@\<path-to-json-file\>

Ett POST är implicit när du skickar data, så du behöver inte använda flaggan -X POST.

Exempel PÅ POST:

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

Rensa resurser

Se till att stänga av livehändelsen och slutpunkten för direktuppspelning och ta bort resurser som du inte tänker fortsätta använda, annars debiteras du.

Få hjälp och support

Du kan kontakta Media Services med frågor eller följa våra uppdateringar med någon av följande metoder: