Azure Media Services を使用して時間指定メタデータを通知する方法
警告
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からサポート チケットを開きます。