Amazon IVS でフル チャット リプレイを使用して過去のライブ ストリーム再生をオンデマンドで作成する

1 Amazon IVS ライブストリームの S3 への自動記録
2 Amazon IVS チャットログを使用した Web チャットメッセージのアーカイブ
3 チャット リプレイを使用した Amazon IVS ライブ ストリームの再生

過去数回の杂志网上投稿で、Amazon Interactive Video Service (Amazon IVS) のライブ ストリームを Amazon S3 に自動記録する的方式と、Amazon IVS チャット ルームに送信されたメッセージをログに記録する的方式について説明しました (上記のリンクを符合)。この杂志网上投稿では、これら 2 つの理念を組み合わせてユーザー エクスペリエンスを成功させ、是なチャット リプレイを備えた過去のライブ ストリームのオンデマンド再造を弄成します。

前回の发稿で見たように、ロギング先に記録されるチャット メッセージには、Amazon IVS チャット ルームによってイベントが发稿された日時を表す GMT ベースのタイムスタンプが含まれています。ライブ ストリームの真のオンデマンド リプレイとメッセージのインタラクティブ チャット リプレイを能够な限り最も近いタイミングで実現するには、記録されたストリームから GMT ベースのタイムスタンプの期限的なストリームを争取する一定があります。チャット メッセージは、ストリーム再生能力中の相同の時点で说される一定があります。現在、この情報を给出する文書化されたソースはありませんが、Amazon IVSを調べて、このタスクに役立つものを見つけられるかどうか見てみましょう.

Amazon IVS ストリーム メタデータ

この問題を解決しようとして、私が最初に考えたのは、ライブ ストリームに関連付けられたメタデータを調べて、その中に貴重な情報が隠されているかどうかを確認することでした。ありがたいことに、チャットの再生目的で使用できるメタデータの通常のストリームには価値があるようです.私のテストでは、各ストリームには、Amazon IVS トランスコーディング プロセスによって注入されたように見える ID3 メタデータが含まれています。これらの ID3 タグには、チャットのリプレイに役立つタイムスタンプが含まれています。これらのイベントをリッスンするために、 IVSPlayer.MetadataEventType.ID3イベント タイプをリッスンするハンドラーをアタッチできます。このイベントの種類は文書化されていますが、それについて多くのことは書かれておらず、何が含まれているかも保証されていません。

文書化されていない機能を避けたいですか?文書化されていない機能を使用することに懸念がある場合は、新しいメッセージが Amazon IVS チャット ルームに投稿されたときに、適切なタイムできます。 API を介してPutMetadataイベントをがあることに注意してください。

メタデータ イベントのリッスン

Player SDK を使用して、記録されたストリームを再生するように Amazon IVS プレーヤーをセットアップしましょう。まず、 <script>タグを介して最新の Amazon IVS プレーヤー SDK を含めます。

Amazon IVS は初めてですか?ブログ シリーズご覧ください。開始について質問がある場合は、そのシリーズ (または以下) のいずれかの投稿にコメントを投稿してください。

 <script src="//player.live-video.net/1.16.0/amazon-ivs-player.min.js"></script>

いつものように、再生に使用する HTML マークアップに<video>要素を含める必要があります。

 <video id="video-player" muted controls autoplay playsinline></video>

これで、IVS プレーヤーのインスタンスを做成できます。下类の URL をハードコーディングしていますが、この文章投稿 [todo: リンク] で説明されている方案でこの URL を争取できます。

 const streamUrl = '//[redacted].cloudfront.net/ivs/v1/[redacted]/[redacted]/2022/11/17/18/6/[redacted]/media/hls/master.m3u8'; const videoEl = document.getElementById('video-player'); const ivsPlayer = IVSPlayer.create(); ivsPlayer.attachHTMLVideoElement(videoEl); ivsPlayer.load(streamUrl); ivsPlayer.play();

上述情况のように、この的目的に役立つようにするには、タイムスタンプの准时的なストリームが不必要です。 ID3 メタデータが受信される頻度を正确理解するために、タイミングを追加してみましょう。まず、ストリームの重复が開始されるとすぐにタイムスタンプを达到しましょう。

 ivsPlayer.addEventListener(IVSPlayer.PlayerState.PLAYING, (evt) => { window.time = Date.now(); });

次に、ID3 イベント リスナーを追加し、タイミングをログに記録し、タイマーをリセットします。

 ivsPlayer.addEventListener(IVSPlayer.MetadataEventType.ID3, (evt) => { const now = Date.now(); console.log(`${(now - window.time) / 1000} seconds since last event`); window.time = now; });

これで、回收利用を開始し、コンソールを観察して、イベントが発生する頻度を確認できます。 私のテストでは、イベントは 1 ～ 2 秒ごとに発生します。リアルタイムではありませんが、ほとんどのシナリオではおそらく是非常です。では、イベントに含まれるデータを見てみましょう。

 window.ivsPlayer.addEventListener(IVSPlayer.MetadataEventType.ID3, (evt) => { console.log(evt); });

上記のリスナーをアタッチして粉碎を開始すると、ブラウザ コンソールに次の情報が記録されていることがわかります。

これは非常に興味深い情報ですが、少し不可解です。私のテストに基づいて、 transc_s私たちが求めているタイムスタンプのようです。そのタイムスタンプを取得してログに記録するようにイベント ハンドラーを変更しましょう。

 window.ivsPlayer.addEventListener(IVSPlayer.MetadataEventType.ID3, (evt) => { const segmentMetadata = evt.find((tag) => tag.desc === 'segmentmetadata'); const segmentMetadataInfo = JSON.parse(segmentMetadata.info[0]); const timestamp = segmentMetadataInfo['transc_s']; const timestampWithMs = timestamp * 1000; console.log(timestampWithMs); console.log(new Date(timestamp)); });

これにより、テスト用に次の汽耗率が绘制されます。

ビデオのランダムな瞬間を探すと、適切なタイムスタンプは常に正しいものになります。これは、イベントがストリームでキャプチャされた時点の有効な GMT タイムスタンプが 1 ～ 2 秒ごとにわかっていることを预兆します。これは、このタイムスタンプより前に送信されたすべてのチャット メッセージがチャットに论文投稿され、チャット コンテナーに透露されるはずであると想定できることを预兆します。

チャット ログの取得

ページが読み込まれると、このシリーズの前回の投稿 [todo: リンク] で概説した方法を使用して、ストリームのチャット ログ全体を取得し、チャット コンテナー<div>でレンダリングできます。ストリームの開始時にメッセージが表示されないようにする必要があるため、メッセージをユーザーから非表示にするクラスが含まれていることを確認し、適切なタイムスタンプを持つデータ属性を保存して、どのメッセージを表示する必要があるかを知ることができます。ストリーム内の任意のタイムスタンプが与えられます。

 window.chatLog = await getChatLogs(logGroupName, chatArn, startTime, endTime); renderChat();

私のrenderChat()関数は、各メッセージのチャット コンテナーへの投稿を処理します。

 const renderChat = () => { const chatContainer = document.getElementById('chat'); window.chatLog.forEach(msg => { const msgTemplate = document.getElementById('chatMsgTemplate'); const msgEl = msgTemplate.content.cloneNode(true); const ts = new Date(msg.event_timestamp).getTime() * 1000; msgEl.querySelector('.msg-container').setAttribute('data-timestamp', ts); msgEl.querySelector('.chat-username').innerHTML = msg.payload.Attributes.username; msgEl.querySelector('.msg').innerHTML = msg.payload.Content; chatContainer.appendChild(msgEl); }); };

これで、ID3 リスナーを変更してreplayChat()関数を呼び出し、現在のタイムスタンプを渡すことができます。

 window.ivsPlayer.addEventListener(IVSPlayer.MetadataEventType.ID3, (evt) => { const segmentMetadata = evt.find((tag) => tag.desc === 'segmentmetadata'); const segmentMetadataInfo = JSON.parse(segmentMetadata.info[0]); const timestamp = segmentMetadataInfo['transc_s']; const timestampWithMs = timestamp * 1000; replayChat(timestampWithMs); });

replayChat()では、記録されたストリームから現在のタイムスタンプ以下のタイムスタンプを含むすべてのチャット ノードを検索し、そのタイムスタンプに基づいてチャット メッセージを表示/非表示にすることができます。

 const replayChat = (currentTimestamp) => { Array.from(document.querySelectorAll('[data-timestamp]')).forEach(node => { const chatMsgTs = Number(node.getAttribute('data-timestamp')); const isVisible = chatMsgTs <= currentTimestamp; if (isVisible) { node.classList.remove('d-none'); } else { node.classList.add('d-none'); } }); const chatContainer = document.getElementById('chat'); chatContainer.scrollTop = chatContainer.scrollHeight; }

この時点で、記録された Amazon IVS ライブ ストリームを压根なチャット リプレイで重复利用するという目標を達成しました。

まとめ

この发表文章では、記録された Amazon IVS ライブ ストリームを記録されたチャット メッセージと組み合わせて、適切なタイミングのチャット メッセージでストリームのオンデマンド リプレイを制作する方式について説明しました。