Időzított metaadatok jelzése az Azure Media Services használatával

  • Cikk

Media Services embléma v3

Figyelmeztetés

Az Azure Media Services 2024. június 30-án megszűnik. További információkért lásd az AMS kivezetési útmutatót.

Az időzített metaadatok az élő streambe beszúrt egyéni adatok. Az adatok és a beszúrási időbélyeg is megmarad a médiastreamben. Ennek az az oka, hogy a videóstreamet ját űző ügyfelek pontosan ugyanabban az időben kapják meg ugyanazokat az egyéni metaadatokat a videóstreamhez képest.

Megjegyzés

Az időztetett metaadatok csak az RTMP- és RTMPS-betöltéssel létrehozott élő eseményekhez működnek.

Előfeltételek

  • Media Services-fiók
  • Helyszíni kódolóból származó élő streamelés ismerete. Ha még nem tette meg ezt, először próbálja meg az élő streamelést az OBS gyorsútmutatójával . A beállítás és a futtatás után végre kell hajtania a következő lépéseket.
  • A HTTP-bejegyzések tesztelésére szolgáló eszköz.

A minta megtekintése

Az alábbi példa bemutatja, hogy egy videolejátszó hogyan kapja meg és jeleníti meg a videóstream időzított metaadatait. A Shaka-lejátszót és annak beépített támogatását használja az Eseményüzenetek adataihoz ('emsg') az EmsgEventen keresztül.

A Media Services emellett támogatja a Shaka player ID3 MetadataEvent, 'emsg' eseményeket is, amelyek a sémaazonosító uri-ját https://aomedia.org/emsg/ID3használják.

Tekintse át a kódot a Stackblitzen

A Stackblitzen egy shaka-mintalejátszót biztosítunk, amellyel dolgozhat. Ezzel a gombbal elágazhatja a mintakódot a Stackblitz.com.

Fork megnyitása a StackBlitzben

A HTML-oldal áttekintése

A index.html dokumentum a következőket tartalmazza:

  • egy div elem, amelyben az üzenet megjelenik az elküldése után.
  • egy szabványos HTML5 videóelem. Figyelje meg, hogy a videoelem értéke autoplay és start mutedértéke.
  • egy bemeneti mező a streamelési lokátor URL-címéhez. A bemeneti mezőben van egy helyőrző URL-cím, amelyet meg lehet tekinteni, de ez nem élő stream. Ezt az értéket fogja lecserélni.
<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>

A JavaScript áttekintése

A index.js fájl létrehozza és kezeli a lejátszó- és lejátszóeseményeket. A onEventMessage függvény regisztrálva van, hogy kezelje az eseményt emsg a Shaka Playertől, és megjelenítse a POST-ból kapott üzeneteket.

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

Élő esemény létrehozása streamelési lokátor használatával

Ha még nem tette meg ezt a korábban említett OBS-gyorsútmutatóval , hozzon létre egy élő eseményt egy streamelési lokátorral.

  1. Élő esemény létrehozásához használja a Azure Portal, a REST vagy a kedvenc SDK-t. Másolja ki a betöltési URL-címet , és illessze be egy szövegszerkesztőbe, mivel szerkesztenie kell, hogy http PUT kéréssel küldjön üzenetet a lejátszónak.
  2. Indítsa el az élő eseményt, és győződjön meg arról, hogy a társított streamvégpont is elindult.

Élő esemény streamelése

Másolja és illessze be a streamelési lokátort a Stackblitz lejátszó bemeneti mezőjébe, vagy igény szerint frissítse az értéket a index.html fájl bemeneti elemén. Látnia kell a lejátszónak streamelt élő eseményt.

A POST URL-cím létrehozása

A betöltési URL-cím szerkesztése:

  1. Váltson a () RTMPS gombra HTTPS.
  2. Távolítsa el a portszámot, beleértve a kettőspontot is.
  3. Távolítsa el /live/ az elérési útról.
  4. Fűzze hozzá ingest.isml/eventdata az elérési utat.

Példa:

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

Lesz

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

Kérés létrehozása és elküldése

Bármilyen eszközt vagy SDK-t használhat, amellyel HTTP POST-ot küldhet a szövegtörzs metaadataival a lejátszónak.

Fejlécek és kérelemtörzs

Emlékeztető: A HTTP-tartalom típusú fejlécet application/json értékre kell állítani. Ezután adja hozzá a megjeleníteni kívánt információkat a kulcskészlettel "üzenetként". Íme egy egyszerű példaüzenet:

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

{

“message”: “Hello world!”

}

Amikor elküldi a kérést, a JSON hasznos adatainak üzenete megjelenik a videóelem fölött lebegő divban.

Alternatív kérések

Az interaktív átfedésekhez további információkat is küldhet. Az adott forgatókönyv teljes beállítására itt nincs lehetőség, de a kérés törzse így nézhet ki egy teszthez. Végigfuttathatja az egyes "kérdések" válaszait (itt kulcsként az "üzenet" helyett), és megadhat egy gombot a megtekintő számára.

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

Nyissa meg a fejlesztői eszközöket a böngészőhöz, és watch az aktivált videoeseményeket, valamint a JSON-kérelem hasznos adataitól kapott üzeneteket.

Példa POST-ra a cURL használatával

A cURL használatakor a fejlécet a paranccsal -H “Content-Type: application/json”kell beállítania. -d A jelölővel állítsa be a JSON-adatokat a parancssorban (a parancssor használatakor a JSON-törzsben lévő idézőjelek feloldása fordított perjellel). Igény szerint JSON-fájlra mutathat a használatával -d \@\<path-to-json-file\>.

A POST implicit módon küld adatokat, ezért nem kell az -X POST jelzőt használnia.

Példa POST:

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

Az erőforrások eltávolítása

Győződjön meg arról, hogy leállítja az élő eseményt és a streamvégpontot, és törli azokat az erőforrásokat, amelyeket nem kíván használni, vagy kiszámlázzák.

Súgó és támogatás

Kérdéseket tehet fel a Media Serviceshez, vagy kövesse a frissítéseket az alábbi módszerek egyikével: