Share via

Signalisieren von zeitlimitierten Metadaten mit Azure Media Services

  • Artikel

Media Services-Logo v3

Warnung

Azure Media Services wird am 30. Juni 2024 eingestellt. Weitere Informationen finden Sie im Leitfaden zur Einstellung von AMS.

Zeitlimitierte Metadaten sind benutzerdefinierte Daten, die in einen Livestream eingefügt werden. Sowohl die Daten als auch der zugehörige Einfügezeitstempel bleiben im Mediendatenstrom selbst erhalten. Dies ist so, dass Clients, die den Videodatenstrom wiedergeben, die gleichen benutzerdefinierten Metadaten zur genau gleichen Zeit in Bezug auf den Videodatenstrom erhalten können.

Hinweis

Zeitlimitierte Metadaten funktionieren nur für Liveereignisse, die mit RTMP- und RTMPS-Erfassung erstellt wurden.

Voraussetzungen

  • Ein Media Services-Konto
  • Vertrautheit mit Livestreaming von einem lokalen Encoder. Wenn Sie dies noch nicht getan haben, versuchen Sie es zunächst mit dem OBS-Schnellstart live zu streamen. Sobald Sie diese Einrichtung eingerichtet und ausgeführt haben, sollten Sie in der Lage sein, die folgenden Schritte auszuführen.
  • Ein Tool zum Testen von HTTP-Beiträgen.

Anzeigen des Beispiels

Das folgende Beispiel zeigt, wie ein Videoplayer die zeitlimitierten Metadaten des Videostreams erfasst und anzeigt. Es verwendet den Shaka-Player und seine integrierte Unterstützung für Ereignisnachrichtendaten ("emsg") über das EmsgEvent.

Media Services unterstützt auch das Shaka Player ID3 MetadataEvent, "emsg"-Ereignisse, die die Schema-ID URI https://aomedia.org/emsg/ID3verwenden.

Überprüfen des Codes auf Stackblitz

Wir haben ein Shaka-Beispiel auf Stackblitz bereitgestellt, mit dem Sie arbeiten können. Verwenden Sie diese Schaltfläche, um den Beispielcode auf Stackblitz.com zu forken.

Fork in StackBlitz öffnen

Überprüfen der HTML-Seite

Das index.html Dokument enthält Folgendes:

  • ein div-Element, in dem die Nachricht nach dem Senden angezeigt wird.
  • ein HTML5-Standardvideoelement. Beachten Sie, dass das video-Element auf autoplay und auf start mutedfestgelegt ist.
  • ein Eingabefeld für die Streaminglocator-URL. Es gibt eine Platzhalter-URL im Eingabefeld, die Sie anzeigen können, aber es handelt sich nicht um einen Livestream. Sie ersetzen diesen Wert.
<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>

Überprüfen von JavaScript

Die index.js-Datei erstellt und verwaltet die Player- und Playerereignisse. Die onEventMessage Funktion wird registriert, um das emsg Ereignis vom Shaka Player zu behandeln und die vom POST empfangenen Nachrichten anzuzeigen.

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);
    }
}

Erstellen eines Liveereignisses mit einem Streaminglocator

Erstellen Sie ein Liveereignis mit einem Streaminglocator, falls Sie dies noch nicht mit der oben erwähnten OBS-Schnellstartanleitung getan haben.

  1. Verwenden Sie die Azure-Portal, REST oder Ihr bevorzugtes SDK, um ein Liveereignis zu erstellen. Kopieren Sie die Erfassungs-URL , und fügen Sie sie in einen Text-Editor ein, da Sie sie bearbeiten müssen, um eine Nachricht mit einer HTTP PUT-Anforderung an den Player zu senden.
  2. Starten Sie das Liveereignis, und stellen Sie sicher, dass auch der zugehörige Streamingendpunkt gestartet wurde.

Streamen des Liveereignisses

Kopieren Sie den Streaminglocator, und fügen Sie ihn in das Eingabefeld im Player auf Stackblitz ein, oder aktualisieren Sie optional den Wert für das Eingabeelement in der index.html-Datei. Sie sollten sehen, dass das Liveereignis an den Player gestreamt wird.

Erstellen der POST-URL

Bearbeiten Sie die Erfassungs-URL:

  1. Ändern Sie RTMPS in HTTPS.
  2. Entfernen Sie die Portnummer, einschließlich des Doppelpunkts.
  3. Entfernen Sie /live/ aus dem Pfad.
  4. Fügen Sie ingest.isml/eventdata an den Pfad an.

Beispiel:

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

Vervollständigung

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

Erstellen und Senden einer Anforderung

Sie können ein beliebiges Tool oder SDK verwenden, um einen HTTP POST mit den Metadaten im Text an den Player zu senden.

Header und Anforderungstext

Erinnerung: Der HTTP-Inhaltstypheader MUSS auf application/json festgelegt werden. Fügen Sie dann die Informationen hinzu, die Sie anzeigen möchten, wobei der Schlüssel als "Nachricht" festgelegt ist. Hier ist eine einfache Beispielmeldung:

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

{

“message”: “Hello world!”

}

Wenn Sie die Anforderung senden, sollte die Nachricht in der JSON-Nutzlast im div-Floating über dem Videoelement angezeigt werden.

Alternative Anforderungen

Sie können zusätzliche Informationen für ein interaktives Overlay senden. Die vollständige Einrichtung für dieses Szenario wird hier nicht behandelt, aber hier sehen Sie, wie der Anforderungstext für ein Quiz aussehen könnte. Sie können die Antworten für jede "Frage" durchlaufen (hier ersetzen Sie "Nachricht" als Schlüssel) und eine Schaltfläche bereitstellen, die der Viewer auswählen kann.

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

Tipp

Öffnen Sie die Entwicklertools für den Browser, und watch Sie die ausgelösten Videoereignisse sowie die von der JSON-Nutzlast der Anforderung empfangenen Nachrichten.

Beispiel für POST mit cURL

Wenn Sie cURL verwenden, müssen Sie den Header mit -H “Content-Type: application/json”festlegen. Verwenden Sie das -d Flag, um die JSON-Daten in der Befehlszeile festzulegen (Escapezeichen im JSON-Text mit umgekehrtem Schrägstrich bei Verwendung der Befehlszeile). Optional können Sie mit -d \@\<path-to-json-file\>auf eine JSON-Datei verweisen.

Ein POST ist beim Senden von Daten implizit, sodass Sie das POST-Flag -X nicht verwenden müssen.

Beispiel für POST:

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

Bereinigen von Ressourcen

Stellen Sie sicher, dass Sie das Liveereignis und den Streamingendpunkt herunterfahren und Ressourcen löschen, die Sie nicht weiter verwenden möchten. Andernfalls werden Sie in Rechnung gestellt.

Anfordern von Hilfe und Support

Sie können Media Services mit Fragen kontaktieren oder unsere Updates mit einer der folgenden Methoden verfolgen: