Azure Media Services を使用して時間指定メタデータを通知する方法

[アーティクル]
06/30/2023

警告

Azure Media Services は、2024 年 6 月 30 日に廃止されます。詳細については、 AMS 廃止ガイドを参照してください。

時間指定メタデータは、ライブストリームに挿入されるカスタムデータです。データとその挿入タイムスタンプの両方が、メディアストリーム自体に保持されます。これは、ビデオストリームを再生しているクライアントが、ビデオストリームに関連して同じカスタムメタデータを同時に取得できるようにするためです。

注意

時間指定メタデータは、RTMP および RTMPS インジェストを使用して作成されたライブイベントに対してのみ機能します。

前提条件

Media Services アカウント
オンプレミスエンコーダーからのライブストリーミングに関する知識。これまでにこれを行ったことがない場合は、最初に OBS クイックスタートを使用してライブストリーミングを試してください。そのセットアップと実行が完了すると、次の手順を実行できるようになります。
HTTP 投稿をテストするためのツール。

サンプルを表示する

次の例は、ビデオプレーヤーがビデオストリームの時間指定されたメタデータをキャッチして表示する方法を示しています。これは、Shaka プレーヤーと、EmsgEvent を介したイベントメッセージデータ ('emsg') の組み込みサポートを使用します。

Media Services では、スキーマ ID URI https://aomedia.org/emsg/ID3を使用する Shaka プレーヤー ID3 MetadataEvent 、'emsg' イベントもサポートされています。

Stackblitz のコードを確認する

Stackblitz で作業するためのサンプルの Shaka プレーヤーが用意されています。このボタンを使用して、Stackblitz.com のサンプルコードをフォークします。

HTML ページを確認する

index.html ドキュメントには次のものが含まれます。

メッセージが送信されると表示される div 要素。
標準の HTML5 ビデオ要素。 video 要素がとに autoplay 設定されていることに注意してください start muted。
ストリーミングロケーター URL の入力フィールド。入力フィールドには、表示できるプレースホルダー URL がありますが、ライブストリームではありません。この値は置き換えます。

<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 を確認する

index.js ファイルは、プレーヤーイベントとプレーヤーイベントを作成および管理します。関数は onEventMessage 、Shaka Player からのイベントを emsg 処理し、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);
    }
}

ストリーミングロケーターを使用してライブイベントを作成する

前述の OBS クイックスタートでまだ行っていない場合は、ストリーミングロケーターを使用してライブイベントを作成します。

ライブイベントを作成するには、Azure portal、REST、またはお気に入りの SDK を使用します。 取り込み URL をコピーし、テキストエディターに貼り付けます。HTTP PUT 要求を使用してプレーヤーにメッセージを送信するために編集する必要があるためです。
ライブイベントを開始し、関連付けられているストリーミングエンドポイントも開始されていることを確認します。

ライブイベントをストリーミングする

ストリーミングロケーターをコピーして Stackblitz のプレーヤーの入力フィールドに貼り付けるか、必要に応じて、index.html ファイル内の入力要素の値を更新します。プレーヤーへのライブイベントストリーミングが表示されます。

POST URL を作成する

取り込み URL を編集します。

RTMPS を HTTPS に変更します。
コロンを含むポート番号を削除します。
パスからを削除 /live/ します。
パスにを追加 ingest.isml/eventdata します。

例:

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

結果

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

要求を作成して送信する

本文のメタデータを含む HTTP POST をプレーヤーに送信するために、任意のツールまたは SDK を使用できます。

ヘッダーと要求本文

アラーム: HTTP コンテンツタイプヘッダーは application/json に設定する 必要があります 。次に、キーを "message" に設定して表示する情報を追加します。簡単なメッセージの例を次に示します。

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

{

“message”: “Hello world!”

}

要求を送信すると、JSON ペイロードのメッセージが video 要素の上に浮かぶ div に表示されます。

代替要求

対話型オーバーレイの追加情報を送信できます。このシナリオの完全なセットアップについてはここでは説明しませんが、要求本文がクイズの場合と同様に表示される可能性があります。各 "質問" の回答を反復処理し (ここでは "message" をキーに置き換えます)、ビューアーが選択するボタンを指定できます。

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

ヒント

ブラウザー用 Developer Tools を開き、発生したビデオイベントと、要求 JSON ペイロードから受信したメッセージをwatchします。

cURLを使用した POST の例

cURLを使用する場合は、を使用して-H “Content-Type: application/json”ヘッダーを設定する必要があります。フラグを -d 使用して、コマンドラインに JSON データを設定します (コマンドラインを使用する場合は、JSON 本文の引用符を円記号でエスケープします)。必要に応じて、を使用して JSON ファイルを -d \@\<path-to-json-file\>ポイントできます。

POST はデータを送信するときに暗黙的であるため、-X POST フラグを使用する必要はありません。

POST の例:

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

リソースをクリーンアップする

ライブイベントとストリーミングエンドポイントをシャットダウンし、使用し続けないリソースを削除するか、課金対象になっていることを確認します。

ヘルプとサポート

質問がある場合は Media Services に問い合わせるか、次のいずれかの方法で更新内容に従ってください。

Q & A
Stack Overflow。質問にタグを付けます azure-media-services。
@MSFTAzureMedia するか、@AzureSupport を使用してサポートを要求します。
Azure portalからサポートチケットを開きます。

Share via

Azure Media Services を使用して時間指定メタデータを通知する方法

前提条件

サンプルを表示する

Stackblitz のコードを確認する

HTML ページを確認する

JavaScript を確認する

ストリーミングロケーターを使用してライブイベントを作成する

ライブイベントをストリーミングする

POST URL を作成する

要求を作成して送信する

ヘッダーと要求本文

代替要求

cURLを使用した POST の例

リソースをクリーンアップする

ヘルプとサポート

その他のリソース

Share via

Azure Media Services を使用して時間指定メタデータを通知する方法

前提条件

サンプルを表示する

Stackblitz のコードを確認する

HTML ページを確認する

JavaScript を確認する

ストリーミング ロケーターを使用してライブ イベントを作成する

ライブ イベントをストリーミングする

POST URL を作成する

要求を作成して送信する

ヘッダーと要求本文

代替要求

cURLを使用した POST の例

リソースをクリーンアップする

ヘルプとサポート

その他のリソース

ストリーミングロケーターを使用してライブイベントを作成する

ライブイベントをストリーミングする