Amazon IVS を使用してマルチホスト ブロードキャスト用の動的レイアウトを作成する方法

最近、Amazon Interactive Video Service (Amazon IVS) を使用したマルチホスト ライブ ストリームについていくつかの記事を書きました。これは、最近まで利用できなかった可能性の世界を開くエキサイティングな機能です。まず、 マルチホスト ライブ チャット アプリケーションの作成方法を検討しました。

次に、ライブチャットセッションを Amazon IVS チャネルにブロードキャストする方法を確認しました。

前回の投稿でチャット参加者をブロードキャスト クライアントに追加するところを見たとき、おそらく私が少しズルをして、クライアント上の参加者のビデオのサイズと位置をブロードキャスト クライアントに伝えるVideoComposition値をハードコーディングしたことに気づいたでしょう。

そうですね、だまされたという言葉は強い言葉です。ライブ チャット セッションをブロードキャストするプロセスに焦点を当てるためにコードを意図的に単純化したとしましょう。

基本的にここで探しているのは、ブロードキャスト内の参加者のビデオのサイズと位置を変更して、ビデオが 1 つある場合のレイアウトが次のようになるようにすることです。

ただし、ビデオが 2 つある場合、レイアウトは次のように変わります。

そして5つあるとき:

参加者の数に応じて変化する動的なレイアウトというアイデアがわかります。

この投稿では、動的レイアウトの作成をもう少し簡単にするために利用できる 1 つのアプローチを見ていきます。前回の投稿のソリューションを基にして構築するので、その投稿をまだ読んでいない場合は、今すぐ読むことをお勧めします。

前回の投稿では、 STAGE_PARTICIPANT_STREAMS_ADDEDというイベントをリッスンしました。そのイベントのイベント ハンドラーで、参加者を DOM に追加し、オーディオとビデオをIVSBroadcastClientインスタンスにレンダリングしました。

動的レイアウトをレンダリングするには、現在セッションに参加している参加者の数を追跡する必要があるため、 participantIdsという配列をグローバル変数として追加します。イベント ハンドラーを変更して、現在の参加者 ID をその配列にプッシュしましょう。

 stage.on(StageEvents.STAGE_PARTICIPANT_STREAMS_ADDED, (participant, streams) => { //add participant id to array participantIds.push(participant.id); renderParticipant(participant, streams); renderVideosToClient(participant, streams.find(s => s.streamType === StreamType.VIDEO)); renderAudioToClient(participant, streams.find(s => s.streamType === StreamType.AUDIO)); updateVideoCompositions(); });

前回の投稿では、実装が異なるためupdateVideoCompositions()メソッドが示されていないと述べました。考えられる実装の 1 つについては、後ほど説明します。

ここでは、前回の投稿で行ったように動的レイアウト構成をハードコーディングする代わりに、動的レイアウト構成を取得する方法を見てみましょう。

動的なサイズと位置を取得する 1 つの方法は、参加者の配列をループし、参加者の数、 <canvas>のサイズ、および必要な行、列、パディングの量に基づいて計算することです。しかし、なぜでしょうか？

これらの値が決して変更されないことを理解すると、それは多くの難しいコードと不必要な作業のように思えます。参加者が 1 人の場合、ビデオは固定サイズで<canvas>の中央に配置されます。

参加者が何人追加されるかは問題ではありません。各ビデオのレイアウトは、指定された参加者数に対して常に同じになります。では、これらの値を事前に計算して配列の配列に格納できるのに、なぜ時間と CPU サイクルを無駄にするのでしょうか?

私のデモでは、ペン、紙、電卓を使って 30 分間集中して最適な値を決定し、考えられる各レイアウトの構成値を決定しました。注意してください: 次のスケッチからわかるように、私は数学や美術を専攻していませんでした。

このデモでは、ライブ ストリームの上限を、最初の 6 人の参加者にのみビデオを表示するようにしました。ユースケースによっては別のことが求められるかもしれませんが、私の経験では、1 つのライブ ストリームに 6 人を超える参加者のビデオがあると、少し忙しくなりすぎます。

私の計算結果は次のとおりです。

 const layouts = [ [{ height: 720, width: 1280, x: 320, y: 180 }], [{ height: 450, width: 800, x: 80, y: 315 }, { height: 450, width: 800, x: 1040, y: 315 }], [{ height: 450, width: 800, x: 80, y: 45 }, { height: 450, width: 800, x: 1040, y: 45 }, { height: 450, width: 800, x: 560, y: 585 }], [{ height: 450, width: 800, x: 80, y: 45 }, { height: 450, width: 800, x: 1040, y: 45 }, { height: 450, width: 800, x: 80, y: 585 }, { height: 450, width: 800, x: 1040, y: 585 }], [{ height: 337, width: 600, x: 20, y: 100 }, { height: 337, width: 600, x: 650, y: 100 }, { height: 337, width: 600, x: 1280, y: 100 }, { height: 337, width: 600, x: 340, y: 640 }, { height: 337, width: 600, x: 980, y: 640 }], [{ height: 337, width: 600, x: 20, y: 100 }, { height: 337, width: 600, x: 650, y: 100 }, { height: 337, width: 600, x: 1280, y: 100 }, { height: 337, width: 600, x: 20, y: 640 }, { height: 337, width: 600, x: 650, y: 640 }, { height: 337, width: 600, x: 1280, y: 640 }] ];

膨大に見えるかもしれませんが、外側の配列要素の各要素には、各ビデオのコンポジションの配列が含まれていることを考慮してください。

参加者が 3 人の場合、外側の配列の 3 番目の要素を参照でき、 participantIds配列内の参加者 ID の位置によって、どのコンポジションがそのビデオに適用されるかが決まります。

renderVideosToClient()関数を変更して適切な構成を取得し、ビデオをブロードキャスト クライアントに追加するときにそれらの値を使用できます。

 const renderVideosToClient = async (participant, stream) => { const participantId = participant.id; const videoId = `video-${participantId}`; // get the index of this participantId const pIdx = participantIds.indexOf(participantId); let composition = layouts[participantIds.length - 1][pIdx]; config.index = 2; const mediaStream = new MediaStream(); mediaStream.addTrack(stream.mediaStreamTrack); broadcastClient.addVideoInputDevice(mediaStream, videoId, composition); };

ただし、参加者が追加されたときにのみこれを実行すると、以前のビデオ構成には、追加時に適用された構成が反映されたままになることに注意してください。そこで登場するのがupdateVideoCompositions()関数です。

ここでは、 participantIds配列をループし、 layoutsから適切な構成を取得し、 updateVideoDeviceComposition()を使用します。 ドキュメント) broadcastClientのメソッド。

 const updateVideoCompositions = async () => { let idx = 0; for (const p of participantIds) { const videoId = `video-${p}`; let config = layouts[filteredParticipantIds.length - 1][idx]; config.index = 2; broadcastClient.updateVideoDeviceComposition(videoId, config); idx = idx + 1; } };

また、参加者がステージを離れたときに、配列から参加者 ID を削除し、すべてのビデオの構成を再度更新することを確認する必要があります。

 stage.on(StageEvents.STAGE_PARTICIPANT_STREAMS_REMOVED, (participant, streams) => { const participantId = participant.id; // remove participant id from array const pIdx = participantIds.findIndex(id => id === participantId); participantIds.splice(pIdx, 1); const videoTrackId = `video-${participantId}`; const audioTrackId = `audio-${participantId}`; if (broadcastClient.getVideoInputDevice(videoTrackId)) broadcastClient.removeVideoInputDevice(videoTrackId); if (broadcastClient.getAudioInputDevice(audioTrackId)) broadcastClient.removeAudioInputDevice(audioTrackId); const videoId = `${participantId}-video`; document.getElementById(videoId).closest('.participant-col').remove(); updateVideoCompositions(); });

上で述べたように、ブロードキャスト クライアント経由でライブ ストリームに追加されるビデオの量を制限する必要があることがよくあります。表示されているよりも多くの参加者がいることを示すために、最終的なビデオの代わりに静止画像を追加することもできます。

まとめ

この投稿では、Amazon IVS を使用してマルチホスト ステージをブロードキャストする際の動的レイアウトの 1 つのアプローチを学びました。今後の投稿では、複数のホストでブロードキャストするための追加オプションについて見ていきます。いつものように、ご質問やコメントがございましたら、以下に残してください。

ここでも公開されています