Jak sygnalizować metadane o czasie za pomocą usługi Azure Media Services

  • Artykuł

Logo usługi Media Services w wersji 3

Ostrzeżenie

Usługa Azure Media Services zostanie wycofana 30 czerwca 2024 r. Aby uzyskać więcej informacji, zobacz Przewodnik po wycofaniu usługi AMS.

Metadane o czasie to niestandardowe dane wstawione do strumienia na żywo. Zarówno dane, jak i sygnatura czasowa wstawiania są zachowywane w samym strumieniu multimediów. Dzięki temu klienci odtwarzający strumień wideo mogą uzyskać te same niestandardowe metadane w dokładnie tym samym czasie w odniesieniu do strumienia wideo.

Uwaga

Metadane czasowe działają tylko w przypadku wydarzeń na żywo utworzonych za pomocą pozyskiwania protokołu RTMP i RTMPS.

Wymagania wstępne

  • Konto usługi Media Services
  • Znajomość transmisji strumieniowej na żywo z kodera lokalnego. Jeśli jeszcze tego nie zrobiono, najpierw spróbuj wykonać transmisję strumieniową na żywo za pomocą przewodnika Szybki start usługi OBS . Po skonfigurowaniu i uruchomieniu powinno być możliwe wykonanie następujących kroków.
  • Narzędzie do testowania wpisów HTTP.

Wyświetlanie przykładu

W poniższym przykładzie pokazano, jak odtwarzacz wideo przechwytuje i wyświetla upłynął limit czasu metadanych strumienia wideo. Używa odtwarzacza Shaka i wbudowanej obsługi danych komunikatów zdarzeń ('emsg') za pośrednictwem EmsgEvent.

Usługa Media Services obsługuje również zdarzenia "emsg" identyfikatora odtwarzacza Shaka ID3 MetadataEvent, które używają identyfikatora URI https://aomedia.org/emsg/ID3schematu.

Przejrzyj kod w witrynie Stackblitz

Udostępniliśmy przykładowy odtwarzacz Shaka w witrynie Stackblitz, z którym możesz pracować. Użyj tego przycisku, aby rozwidlić przykładowy kod w Stackblitz.com.

Otwieranie rozwidlenia w witrynie StackBlitz

Przeglądanie strony HTML

Dokument index.html zawiera:

  • element div, w którym zostanie wyświetlony komunikat po wysłaniu.
  • standardowy element wideo HTML5. Zwróć uwagę, że element wideo jest ustawiony na autoplay i na start muted.
  • pole wejściowe adresu URL lokalizatora przesyłania strumieniowego. W polu wejściowym znajduje się adres URL symbolu zastępczego, który można wyświetlić, ale nie jest to strumień na żywo. Zastąpisz tę wartość.
<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>

Przeglądanie kodu JavaScript

Plik index.js tworzy zdarzenia odtwarzacza i odtwarzacza oraz zarządza nimi. Funkcja jest zarejestrowana onEventMessage w celu obsługi emsg zdarzenia z odtwarzacza Shaka i wyświetlania komunikatów odebranych z postu.

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

Tworzenie wydarzenia na żywo za pomocą lokalizatora przesyłania strumieniowego

Jeśli jeszcze tego nie zrobiono w przewodniku Szybki start usługi OBS wymienionym wcześniej, utwórz wydarzenie na żywo z lokalizatorem przesyłania strumieniowego.

  1. Użyj Azure Portal, REST lub ulubionego zestawu SDK, aby utworzyć wydarzenie na żywo. Skopiuj adres URL pozyskiwania i wklej go w edytorze tekstów, ponieważ musisz go edytować, aby wysłać komunikat do odtwarzacza za pomocą żądania HTTP PUT.
  2. Uruchom wydarzenie na żywo i upewnij się, że jest również uruchomiony skojarzony punkt końcowy przesyłania strumieniowego.

Przesyłanie strumieniowe wydarzenia na żywo

Skopiuj i wklej lokalizator przesyłania strumieniowego do pola wejściowego w odtwarzaczu w witrynie Stackblitz lub opcjonalnie zaktualizuj wartość elementu wejściowego w pliku index.html. Powinno zostać wyświetlone przesyłanie strumieniowe zdarzeń na żywo do odtwarzacza.

Tworzenie adresu URL POST

Edytuj adres URL pozyskiwania:

  1. Zmień wartość RTMPS na HTTPS.
  2. Usuń numer portu, w tym dwukropek.
  3. Usuń /live/ ze ścieżki.
  4. Dołącz ingest.isml/eventdata do ścieżki.

Przykład:

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

Staje się

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

Tworzenie i wysyłanie żądania

Możesz użyć dowolnego narzędzia lub zestawu SDK, które chcesz wysłać post HTTP z metadanymi w treści do odtwarzacza.

Nagłówki i treść żądania

Przypomnienie: Nagłówek TYPU zawartości HTTP musi być ustawiony na wartość application/json. Następnie dodaj informacje, które chcesz wyświetlić przy użyciu klucza ustawionego jako "komunikat". Oto prosty przykładowy komunikat:

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

{

“message”: “Hello world!”

}

Po wysłaniu żądania powinien zostać wyświetlony komunikat w ładunku JSON wyświetlanym w obiekcie div pływającym nad elementem wideo.

Żądania alternatywne

Dodatkowe informacje można wysłać dla interaktywnej nakładki. Pełna konfiguracja dla tego scenariusza nie jest tutaj omówiona, ale oto, jak może wyglądać treść żądania na potrzeby testu. Możesz iterować odpowiedzi dla każdego "pytania" (tutaj zastępując "komunikat" jako klucz) i podać przycisk dla osoby przeglądającej, aby wybrać.

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

Porada

Otwórz narzędzia deweloperskie dla przeglądarki i watch zdarzenia wideo, które są wyzwalane, a także komunikaty odebrane z ładunku JSON żądania.

Przykładowy post przy użyciu biblioteki cURL

W przypadku korzystania z biblioteki cURL należy ustawić nagłówek przy użyciu polecenia -H “Content-Type: application/json”. Użyj flagi -d , aby ustawić dane JSON w wierszu polecenia (cudzysłowy ucieczki w treści JSON z ukośnikiem odwrotnym podczas korzystania z wiersza polecenia). Opcjonalnie możesz wskazać plik JSON przy użyciu polecenia -d \@\<path-to-json-file\>.

Post jest niejawny podczas wysyłania danych, więc nie trzeba używać flagi -X POST.

Przykładowy post:

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

Czyszczenie zasobów

Upewnij się, że zamkniesz wydarzenie na żywo i punkt końcowy przesyłania strumieniowego oraz usuniesz zasoby, których nie zamierzasz używać lub opłaty zostaną naliczone.

Uzyskiwanie pomocy i obsługi technicznej

Możesz skontaktować się z usługą Media Services z pytaniami lub postępować zgodnie z naszymi aktualizacjami przy użyciu jednej z następujących metod: