Getimede metagegevens signalen met Azure Media Services

  • Artikel

Media Services-logo v3

Waarschuwing

Azure Media Services wordt op 30 juni 2024 buiten gebruik gesteld. Zie de handleiding voor buitengebruikstelling van AMS voor meer informatie.

Getimede metagegevens zijn aangepaste gegevens die worden ingevoegd in een livestream. Zowel de gegevens als de tijdstempel van de invoeging blijven behouden in de mediastroom zelf. Dit is zodat clients die de videostream afspelen, op exact hetzelfde moment dezelfde aangepaste metagegevens kunnen krijgen ten opzichte van de videostream.

Notitie

Getimede metagegevens werken alleen voor livegebeurtenissen die zijn gemaakt met RTMP- en RTMPS-opname.

Vereisten

  • Een Media Services-account
  • Bekendheid met live streamen vanaf een on-premises encoder. Als u dit nog niet eerder hebt gedaan, probeert u eerst live streamen met de OBS-quickstart . Zodra u deze hebt ingesteld en uitgevoerd, moet u de volgende stappen kunnen uitvoeren.
  • Een hulpprogramma om HTTP-berichten te testen.

Het voorbeeld weergeven

In het onderstaande voorbeeld ziet u hoe een videospeler de getimede metagegevens van de videostream vangt en weergeeft. Het maakt gebruik van de Shaka-speler en de ingebouwde ondersteuning voor gebeurtenisberichtgegevens ('emsg') via emsgEvent.

Media Services ondersteunt ook de Shaka player ID3 MetadataEvent, 'emsg'-gebeurtenissen die gebruikmaken van de schema-id-URI https://aomedia.org/emsg/ID3.

Bekijk de code op Stackblitz

We hebben een voorbeeld van een Shaka-speler op Stackblitz beschikbaar gesteld waarmee u kunt werken. Gebruik deze knop om de voorbeeldcode op Stackblitz.com te splitsen.

Fork openen in StackBlitz

De HTML-pagina controleren

Het index.html document bevat:

  • een div-element waarbij het bericht wordt weergegeven zodra het is verzonden.
  • een standaard HTML5-video-element. U ziet dat het video-element is ingesteld op autoplay en op start muted.
  • een invoerveld voor de URL van de streaming-locator. Het invoerveld bevat een tijdelijke url die u kunt bekijken, maar het is geen livestream. U vervangt deze waarde.
<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>

JavaScript controleren

Het index.js-bestand maakt en beheert de speler en speler gebeurtenissen. De onEventMessage functie wordt geregistreerd om de emsg gebeurtenis van de Shaka Player af te handelen en de berichten weer te geven die zijn ontvangen van 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);
    }
}

Een livegebeurtenis maken met een streaming-locator

Als u dit nog niet hebt gedaan met de eerder genoemde OBS-quickstart , maakt u een livegebeurtenis met een streaming-locator.

  1. Gebruik de Azure Portal, REST of uw favoriete SDK om een livegebeurtenis te maken. Kopieer de opname-URL en plak deze in een teksteditor, omdat u deze moet bewerken om een bericht naar de speler te verzenden met een HTTP PUT-aanvraag.
  2. Start de livegebeurtenis en zorg ervoor dat het gekoppelde streaming-eindpunt ook is gestart.

De livegebeurtenis streamen

Kopieer en plak de streaming-locator in het invoerveld in de speler op Stackblitz of werk de waarde op het invoerelement in het index.html-bestand bij. U ziet dat de livegebeurtenis naar de speler wordt gestreamd.

De POST-URL maken

Bewerk de opname-URL:

  1. Wijzig RTMPS in HTTPS.
  2. Verwijder het poortnummer, inclusief de dubbele punt.
  3. Verwijderen /live/ uit het pad.
  4. Voeg toe ingest.isml/eventdata aan het pad.

Voorbeeld:

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

Wordt

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

Een aanvraag maken en verzenden

U kunt elk gewenst hulpprogramma of ELKE SDK gebruiken voor het verzenden van een HTTP POST met de metagegevens in de hoofdtekst naar de speler.

Headers en aanvraagbody

Herinnering: de header HTTP-inhoudstype MOET worden ingesteld op application/json. Voeg vervolgens de informatie toe die u wilt weergeven met de sleutel ingesteld als 'bericht'. Hier volgt een eenvoudig voorbeeldbericht:

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

{

“message”: “Hello world!”

}

Wanneer u de aanvraag verzendt, ziet u dat het bericht in de JSON-nettolading wordt weergegeven in de div die over het video-element zweeft.

Alternatieve aanvragen

U kunt aanvullende informatie verzenden voor een interactieve overlay. De volledige installatie voor dat scenario wordt hier niet behandeld, maar hier ziet u hoe de aanvraagbody eruit kan zien voor een toets. U kunt de antwoorden voor elke 'vraag' herhalen (hier wordt 'bericht' vervangen als de sleutel) en een knop opgeven die de kijker kan selecteren.

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

Tip

Open de ontwikkelhulpprogramma's voor de browser en watch de videogebeurtenissen die worden geactiveerd, evenals de berichten die zijn ontvangen van de JSON-nettolading van de aanvraag.

Voorbeeld van POST met cURL

Wanneer u cURL gebruikt, moet u de header instellen met behulp van -H “Content-Type: application/json”. Gebruik de -d vlag om de JSON-gegevens in te stellen op de opdrachtregel (escape-aanhalingstekens in de JSON-hoofdtekst met een backslash bij gebruik van de opdrachtregel). U kunt eventueel naar een JSON-bestand verwijzen met behulp van -d \@\<path-to-json-file\>.

Een POST is impliciet bij het verzenden van gegevens, zodat u de vlag -X POST niet hoeft te gebruiken.

Voorbeeld VAN POST:

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

Resources opschonen

Zorg ervoor dat u de livegebeurtenis en het streaming-eindpunt afsluit en resources verwijdert die u niet wilt blijven gebruiken, anders worden er kosten in rekening gebracht.

Help en ondersteuning

U kunt contact opnemen met Media Services als u vragen hebt of onze updates op een van de volgende manieren volgen: