Sdílet prostřednictvím

Jak signalizovat metadata s časovým limitem pomocí Služby Azure Media Services

  • Článek

Logo Media Services v3

Upozornění

Služba Azure Media Services bude vyřazena 30. června 2024. Další informace najdete v průvodci vyřazením AMS.

Časovaná metadata jsou vlastní data, která se vkládají do živého streamu. Data i časové razítko vložení se zachovají v samotném mediálním streamu. Je to proto, aby klienti, kteří přehrávají stream videa, mohli získat stejná vlastní metadata ve stejnou dobu ve vztahu k video streamu.

Poznámka

Časovaná metadata fungují jenom pro živé události vytvořené pomocí příjmu rtmp a RTMPS.

Požadavky

  • Účet Media Services
  • Znalost živého streamování z místního kodéru Pokud jste to ještě neudělali, zkuste nejprve živé streamování pomocí rychlého startu OBS . Jakmile toto nastavení a spustíte, měli byste být schopni provést následující kroky.
  • Nástroj pro testování příspěvků HTTP.

Zobrazení ukázky

Následující příklad ukazuje, jak přehrávač videa zachytí a zobrazí časovaná metadata streamu videa. Používá přehrávač Shaka a jeho integrovanou podporu pro data zpráv událostí ("emsg") prostřednictvím EmsgEvent.

Služba Media Services také podporuje id přehrávače Shaka ID3 MetadataEvent, "emsg" události, které používají identifikátor URI https://aomedia.org/emsg/ID3schématu .

Kontrola kódu na webu Stackblitz

Na Stackblitzu jsme pro vás připravili ukázkový přehrávač Shaka, se kterým můžete pracovat. Pomocí tohoto tlačítka můžete vytvořit fork ukázkového kódu na Stackblitz.com.

Open Fork ve službě StackBlitz

Kontrola stránky HTML

Dokumentindex.html obsahuje:

  • element div, kde se zpráva zobrazí po odeslání.
  • standardní html5 element videa. Všimněte si, že element video je nastavený na autoplay a na start muted.
  • vstupní pole pro adresu URL lokátoru streamování. Ve vstupním poli je zástupná adresa URL, kterou můžete zobrazit, ale nejedná se o živý stream. Tuto hodnotu nahradíte.
<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>

Kontrola JavaScriptu

Souborindex.js vytváří a spravuje události přehrávače a hráče. Funkce je zaregistrovaná onEventMessage pro zpracování emsg události z přehrávače Shaka a zobrazení zpráv přijatých z 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);
    }
}

Vytvoření živé události pomocí lokátoru streamování

Pokud jste to ještě neudělali s dříve zmíněným rychlým startem OBS , vytvořte živou událost pomocí lokátoru streamování.

  1. K vytvoření živé události použijte Azure Portal, REST nebo vaši oblíbenou sadu SDK. Zkopírujte adresu URL ingestace a vložte ji do textového editoru, protože ji budete muset upravit, aby se přehrávači odeslala zpráva s požadavkem HTTP PUT.
  2. Spusťte živou událost a ujistěte se, že je spuštěný také přidružený koncový bod streamování.

Streamování živé události

Zkopírujte a vložte lokátor streamování do vstupního pole v přehrávači na Stackblitz nebo volitelně aktualizujte hodnotu vstupního prvku v souboru index.html. Měli byste vidět streamování živé události do přehrávače.

Vytvoření adresy POST URL

Upravte adresu URL ingestace:

  1. Změňte RTMPS na HTTPS.
  2. Odeberte číslo portu včetně dvojtečky.
  3. Odeberte /live/ z cesty.
  4. Připojte ingest.isml/eventdata k cestě.

Příklad:

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

se změní na

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

Vytvoření a odeslání žádosti

K odeslání protokolu HTTP POST s metadaty v těle do přehrávače můžete použít libovolný nástroj nebo sadu SDK.

Hlavičky a text požadavku

Připomenutí: Hlavička HTTP Content-type musí být nastavená na application/json. Pak přidejte informace, které chcete zobrazit pomocí klíče nastaveného jako "zpráva". Tady je jednoduchá ukázková zpráva:

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

{

“message”: “Hello world!”

}

Když odešlete požadavek, měla by se zpráva zobrazit v datové části JSON v div plovoucím nad elementem video.

Alternativní žádosti

Pro interaktivní překryvné zobrazení můžete odeslat další informace. Úplné nastavení pro tento scénář tu není popsané, ale text žádosti by mohl vypadat pro kvíz takto. Můžete iterovat odpovědi na každou "otázku" (zde nahraďte "message" jako klíč) a zadat tlačítko, které může čtenář vybrat.

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

Otevřete vývojářské nástroje pro prohlížeč a watch události videa, které se aktivují, a také zprávy přijaté z datové části JSON požadavku.

Příklad post s využitím cURL

Pokud používáte cURL, musíte hlavičku nastavit pomocí -H “Content-Type: application/json”. Pomocí příznaku -d nastavte data JSON na příkazovém řádku (při použití příkazového řádku uvozovky v textu JSON se zpětným lomítkem). Volitelně můžete odkazovat na soubor JSON pomocí -d \@\<path-to-json-file\>.

Post je při odesílání dat implicitní, takže nemusíte používat příznak -X POST.

Příklad POST:

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

Vyčištění prostředků

Ujistěte se, že jste vypnuli živou událost a koncový bod streamování a odstranili prostředky, které nechcete dál používat, nebo se vám budou účtovat poplatky.

Získání nápovědy a podpory

Službu Media Services můžete kontaktovat s dotazy nebo můžete sledovat naše aktualizace jedním z následujících způsobů: