先日、Amazon Interactive Video Service（以下、IVS）のリアルタイムストリーミング機能を活用したマルチビューライブ配信を実施しました。 理解に苦しんだ視聴までの処理をデモ環境をベースにご紹介します！

『リアルタイムストリーミング』とは

リアルタイムストリーミング機能はIVSの機能の一つです。

IVSに関しては下記をご参照ください。

AWS再入門2022 Amazon Interactive Video Service(IVS)編 | DevelopersIO

『リアルタイムストリーミング』機能を活用することで下記のように複数の映像をリアルタイム配信することができます。

引用元：https://aws.amazon.com/jp/blogs/news/new-deliver-interactive-real-time-live-streams-with-amazon-ivs/

リアルタイムストリーミング機能を試してみる @デモ環境

リアルタイムストリーミング機能は実際に触ってみたほうがわかりやすいと思います。 下記の手順で簡単に試すことができますので、ぜひ試してみてください！

①コンソール/AWS CLIでステージを作成 ② ①で作成したステージ上でコンソール/AWS CLIで配信者用のトークンを作成 ③ OBSなどで配信者用トークンを利用して配信開始 ⇒配信は完了！ ④ ①で作成したステージ上でコンソール/AWS CLIで視聴者用のトークンを作成 ⑤ デモ環境に視聴者用トークンを入力して視聴開始

デモ環境

• 『IVS Real-Time Streaming Simplified Basic Web Sample』https://codepen.io/amazon-ivs/pen/ZEqgrpo ⇒とてもシンプルです、本コラムではこちらの環境をもとに解説します。
• 『IVS Real-Time Streaming Web Sample (HTML and JavaScript)』https://codepen.io/amazon-ivs/project/editor/DYapzL#

その他Reactなども用意されています。デモ環境での配信方法の詳細は下記コラムで紹介されています。

Amazon IVSの新機能 リアルタイムストリーミングのご紹介 | コラム | クラウドソリューション｜サービス｜法人のお客さま｜NTT東日本

Amazon IVS Real-Time StreamingにOBSからWHIPでストリーミングしてみた！ | DevelopersIO

リアルタイムストリーミング機能に関する用語

IVS には、アプリケーションに統合できるウェブ、Android、iOS 用のブロードキャスト SDK が用意されていて、ブロードキャストSDKはビデオの送信と受信の両方に使用されます。そのため、実際に配信基盤を構築する際はスクリプトタグまたは npm を使用してインストールする必要があります。詳細は下記をご参照ください。

Web - Amazon IVS

視聴までの処理@デモ環境

※デモ環境のコードを一部変更して処理の結果をコンソール上で確認しました。

Step1：入力された参加者トークンの取得

const token = document.getElementById("token").value;

Step2：ローカルのカメラ・音声情報の取得

    // Retrieve the User Media currently set on the page
    localCamera = await getCamera();
    localMic = await getMic();
  
    // Create StageStreams for Audio and Video
    cameraStageStream = new LocalStageStream(localCamera.getVideoTracks()[0]);
    micStageStream = new LocalStageStream(localMic.getAudioTracks()[0]);

下記のような情報を取得しているようです。

Step3：ストラテジーの設定およびステージにアクセス

    const strategy = {
      stageStreamsToPublish() {
        return [cameraStageStream, micStageStream];
      },
      shouldPublishParticipant() {
        return true;
      },
      shouldSubscribeToParticipant() {
        return SubscribeType.AUDIO_VIDEO;
      }
    };
    
    stage = new Stage(token, strategy);

『ストラテジー』はリアルタイムストリーミング機能のコアコンセプトとされ、3つの関数（shouldSubscribeToParticipant、shouldPublishParticipant、stageStreamsToPublish ）を設定する必要があります。『ストラテジー』の書き方は下記AWSドキュメントをご確認ください。

Publishing and Subscribing - Amazon IVS

Step4：ステージイベントの処理

stage.onで様々なステージのイベントに対して処理を実施しています。 ※私の環境でコンソールに表示された順にご紹介します

Event Type1 | StageEvents.STAGE_CONNECTION_STATE_CHANGED

  stage.on(StageEvents.STAGE_CONNECTION_STATE_CHANGED, (state) => {
    console.log("STAGE_CONNECTION_STATE_CHANGED",state)　

stateがconnectingからconnectedになっていることが確認できます、無事ステージにアクセスできたようです。

Event Type2 | StageEvents.STAGE_PARTICIPANT_JOINED

  stage.on(StageEvents.STAGE_PARTICIPANT_JOINED, (participant) => {
    console.log("Participant Joined:", participant);
  });

配信者の情報（コンソール/AWS CLIで払い出した配信者情報）を取得しています。

Event Type3 | StageEvents.STAGE_PARTICIPANT_STREAMS_ADDED

  stage.on(
    StageEvents.STAGE_PARTICIPANT_STREAMS_ADDED,
    (participant, streams) => {
      console.log("Participant Media Added: ", participant, streams);
      
      let streamsToDisplay = streams;

コンソール上はこのような表示になりました。

ここではparticipantとstreams情報を取得しています。participant情報は、Event Type2でも取得した配信者の情報（コンソール/AWS CLIで払い出した配信者情報）です。

stream情報に関して詳細を確認すると、『audio』と『video』のストリームであることが確認できます。またisLocalは配信状態を示していて、トークンは払い出されているが配信されていない状態は”True”、配信されている状態が”False”となっていました。

残りの処理を見ていきましょう。

//処理1
const videoEl = setupParticipant(participant);

//処理2
streamsToDisplay.forEach((stream) =>
  videoEl.srcObject.addTrack(stream.mediaStreamTrack)
);

処理1ではsetupParticipant関数を動かしています。この関数は配信者の映像を映すためのHTML上での場所の確保をしています。詳細は割愛しますが、appendChildで要素を作成しています。

処理2で各配信者のストリーム情報を処理1で作成した要素に映像を流しています。これで映像を視聴できるようになりました！

さいごに

リアルタイムストリーミング機能はデモ環境を応用することで比較的配信基盤は作りやすいと思います！ ただどのような処理をされているかを理解することが難しく感じました。コンソールの出力結果とAWSドキュメント、時にはChatGPTにコード処理に関してアドバイスをもらうことでイメージをつかむことができました。本コラムがどなたかのお役に立てれば幸いです！