ブラウザと Amazon IVS を使用して複数のホストでライブ ストリーミングする方法

前回の投稿では、Amazon Interactive Video Service (Amazon IVS) を使用して、最大 12 人の参加者向けのリアルタイムビデオチャット体験を作成するための仮想「ステージ」を作成する方法を学びました。これはスタンドアロン機能としては非常に強力で、アプリケーションにリアルタイムのコラボレーションを追加できるようになります。ただし、この機能は、開発者が Twitch の「ゲスト スター」機能と同様の共同ライブ ストリーミング エクスペリエンスを簡単に作成できるようにするために作成されました。この投稿では、前のデモを基にして、すべての参加者からの音声フィードとビデオ フィードを 1 つのフィードに結合し、Amazon IVS チャネルにフィードをブロードキャストします。

前回の投稿をまだ読んでいない場合は、この投稿を進める前に読んでください。要約すると、その投稿では次の方法を学びました。

• AWS SDK for JavaScript (v3) を使用してステージリソースを作成する

• AWS SDK for JavaScript (v3) を使用してステージ参加者トークンを作成する

• Web Broadcast SDK を使用して仮想ステージに接続し、参加者間のリアルタイム ビデオ チャットを実現します。

  
  

共同ライブストリーミング体験を作成するための次のステップは、ローカルとリモートの両方の参加者を Amazon IVS チャネルに公開できる単一のストリームに結合 (または「合成」) することです。このために Web Broadcast SDK を使用することもできるので、その方法を見てみましょう。

ブロードキャストクライアントの作成

思い出していただければ、前回の投稿では、権限の有効化、デバイスの取得、 Stageインスタンスの構成、ステージへの参加処理を行うDOMContentLoadedハンドラー内でいくつかの関数を呼び出しました。このフローに、 IVSBroadcastClientのインスタンスの作成に使用できるinitBroadcastClient()というメソッドをもう 1 つ追加します。最終的に Amazon IVS チャネルにブロードキャストされる内容を参加者がプレビューできるように、結合ストリームのマークアップに<canvas>要素が必要になります。

 const initBroadcastClient = async () => { broadcastClient = IVSBroadcastClient.create({ streamConfig: IVSBroadcastClient.STANDARD_LANDSCAPE, ingestEndpoint: '[YOUR INGEST ENDPOINT]', }); const previewEl = document.getElementById('broadcast-preview'); broadcastClient.attachPreview(previewEl); const bgImage = new Image(); bgImage.src = '/images/stage_bg.png'; broadcastClient.addImageSource(bgImage, 'bg-image', { index: 0 }); };

もう少し視覚的に魅力的なものにするために、 addImageSource()を使用して背景画像をストリームに追加しました。 addImageSource()メソッドは、画像、ソースの一意の名前、およびindex (または「レイヤー」) を定義するために使用されるVideoCompositionオブジェクトの 3 つの引数を受け取ります。をチェックすると、 ドキュメントVideoCompositionの場合、ソースのheight 、 width 、 x 、 y位置の値を含めることができることにも注意してください。各参加者にビデオ レイヤーを追加するときに、これらのプロパティを少し活用します。

参加者の音声とビデオをブロードキャスト クライアントに追加する

次に、各参加者のオーディオとビデオをブロードキャスト クライアントに追加します。これは、前の投稿で定義したStageEvents.STAGE_PARTICIPANT_STREAMS_ADDEDハンドラー内で行います。その関数を変更して、2 つの新しい関数への呼び出しを追加します。

 stage.on(StageEvents.STAGE_PARTICIPANT_STREAMS_ADDED, (participant, streams) => { renderParticipant(participant, streams); renderVideosToClient(participant, streams.find(s => s.streamType === StreamType.VIDEO)); renderAudioToClient(participant, streams.find(s => s.streamType === StreamType.AUDIO)); });

次に、 renderVideosToClient()関数を作成しましょう。ここでは、 VideoComposition 1 人の参加者に適切な値にハードコーディングしています。アプリケーションでは、現在会話に参加しているユーザーの数に応じて、 height 、 width 、 x 、およびy値を動的に計算する必要があります。

 const renderVideosToClient = async (participant, stream) => { const participantId = participant.id; const videoId = `video-${participantId}`; const composition = { index: 1, height: 984, width: 1750, x: 85, y: 48 }; const mediaStream = new MediaStream(); mediaStream.addTrack(stream.mediaStreamTrack); broadcastClient.addVideoInputDevice(mediaStream, videoId, composition); };

renderAudioToClient()関数は似ていますが、SDK のaddAudioInputDevice()メソッドを使用してオーディオ トラックを追加します。

 const renderAudioToClient = async (participant, stream) => { const participantId = participant.id; const audioTrackId = `audio-${participantId}`; const mediaStream = new MediaStream(); mediaStream.addTrack(stream.mediaStreamTrack); broadcastClient.addAudioInputDevice(mediaStream, audioTrackId) };

この時点で、 broadcastClient.startBroadcast('[YOUR STREAM KEY]')を呼び出すことで、ステージをチャネルにブロードキャストする準備が整います。また、参加者がステージを離れたときに、 broadcastClientから参加者を削除する処理も必要になります。このために、 StageEvents.STAGE_PARTICIPANT_STREAMS_REMOVEDのハンドラーを更新します。

 stage.on(StageEvents.STAGE_PARTICIPANT_STREAMS_REMOVED, (participant, streams) => { const videoTrackId = `video-${participant.id}`; const audioTrackId = `audio-${participant.id}`; if (broadcastClient.getVideoInputDevice(videoTrackId)) broadcastClient.removeVideoInputDevice(videoTrackId); if (broadcastClient.getAudioInputDevice(audioTrackId)) broadcastClient.removeAudioInputDevice(audioTrackId); const videoId = `${participant.id}-video` document.getElementById(videoId).closest('.participant-col').remove(); updateVideoCompositions(); // function not defined in demo, implementation will vary });

参加者が 1 人の場合の実装は次のようになります。各ステージ参加者が下の画面に表示され、ブロードキャストされる複合ビューが上に表示されることに注意してください。

また、複数の参加者が仮想ステージに参加すると、アプリケーションは各参加者に合わせてレイアウトを調整します。

「ホスト」参加者が「ブロードキャスト」ボタンをクリックすると、結合された会話が、すべての参加者の音声とビデオが 1 つのストリームに結合された複合ビューとして Amazon IVS チャネルにブロードキャストされます。

まとめ

この投稿では、複数のリモート参加者からの音声とビデオを含むライブ ストリーム ブロードキャストを作成する方法を学びました。今後の投稿では、複合ストリームを作成し、それを Amazon IVS チャネルにブロードキャストするための代替オプションを検討します。