# IVS リアルタイムストリーミングの開始
<a name="getting-started"></a>

このドキュメントでは、Amazon IVS Real-Time Streaming をアプリに統合する手順を説明します。

**Topics**
+ [IVS Real-Time Streaming の概要](getting-started-introduction.md)
+ [ステップ 1: IAM アクセス許可を設定する](getting-started-iam-permissions.md)
+ [ステップ 2: ステージを作成する](getting-started-create-stage.md)
+ [ステップ 3: 参加者トークンを配布する](getting-started-distribute-tokens.md)
+ [ステップ 4: IVS Broadcast SDK を統合する](getting-started-broadcast-sdk.md)
+ [ステップ 5: ビデオを公開およびサブスクライブする](getting-started-pub-sub.md)

# IVS Real-Time Streaming の概要
<a name="getting-started-introduction"></a>

このセクションでは、Real-Time Streaming を使用するための前提条件の一覧を示し、主要な用語を紹介します。

## 前提条件
<a name="getting-started-introduction-prereq"></a>

リアルタイムストリーミングを初めて使用する前に、次のタスクをすべて完了してください。手順については、「[IVS 低レイテンシーストリーミングの開始](https://docs.aws.amazon.com/ivs/latest/LowLatencyUserGuide/getting-started.html)」を参照してください。
+ AWS 無料アカウントを作成する
+ ルートユーザーと管理ユーザーを設定する

## その他のリファレンス
<a name="getting-started-introduction-extref"></a>
+ 「[IVS Web Broadcast SDK リファレンス](https://aws.github.io/amazon-ivs-web-broadcast/docs/sdk-reference)」
+ 「[IVS Android ブロードキャスト SDK リファレンス](https://aws.github.io/amazon-ivs-broadcast-docs/latest/android/)」
+ 「[IVS iOS ウェブブロードキャスト SDK リファレンス](https://aws.github.io/amazon-ivs-broadcast-docs/latest/ios/)」
+ 「[IVS Real-Time Streaming API リファレンス](https://docs.aws.amazon.com/ivs/latest/RealTimeAPIReference/Welcome.html)」

## リアルタイムストリーミング用語
<a name="getting-started-introduction-terminology"></a>


| 言葉 | 説明 | 
| --- | --- | 
| ステージ | 参加者がリアルタイムでビデオを送受信できる仮想スペース。 | 
| ホスト | ローカルのビデオをステージに送信する参加者。 | 
| 表示者 | ホストのビデオを受け取る参加者。 | 
| Participant | ホストまたはビューアーとしてステージに接続したユーザー。 | 
| 参加者トークン | ステージに参加する参加者を認証するトークン。 | 
| ブロードキャスト SDK | 参加者がビデオを送受信できるようにするクライアントライブラリ。 | 

## 手順の概要
<a name="getting-started-introduction-steps"></a>

1. [IAM アクセス許可を設定する](getting-started-iam-permissions.md) – ユーザーに基本的なアクセス許可を付与する AWS Identity and Access Management (IAM) ポリシーを作成し、そのポリシーをユーザーに割り当てます。

1. [ステージの作成](getting-started-create-stage.md) — 参加者がリアルタイムでビデオを交換できる仮想スペースを作成します。

1. [参加者トークンの配布](getting-started-distribute-tokens.md) — 参加者にトークンを送信して、ステージに参加できるようにします。

1. [IVS Broadcast SDK の統合](getting-started-broadcast-sdk.md)— ブロードキャスト SDK をアプリに追加して、参加者がビデオを送受信できるようにします: [Web](getting-started-broadcast-sdk.md#getting-started-broadcast-sdk-web)、[Android](getting-started-broadcast-sdk.md#getting-started-broadcast-sdk-android)、[iOS](getting-started-broadcast-sdk.md#getting-started-broadcast-sdk-ios)。

1. [ビデオの公開とサブスクライブ](getting-started-pub-sub.md) — ステージにビデオを送信し、他のホストからビデオを受信します ([IVS console](getting-started-pub-sub.md#getting-started-pub-sub-console)、[IVS Web Broadcast SDK を使用してパブリッシュおよびサブスクライブする](getting-started-pub-sub-web.md)、[IVS Android Broadcast SDK を使用してパブリッシュおよびサブスクライブする](getting-started-pub-sub-android.md)、[IVS iOS Broadcast SDK を使用してパブリッシュおよびサブスクライブする](getting-started-pub-sub-ios.md))。

# ステップ 1: IAM アクセス許可を設定する
<a name="getting-started-iam-permissions"></a>

次に、基本的なアクセス許可のセット (Amazon IVS ステージの作成、参加者トークンの作成など) が可能になる AWS Identity and Access Management (IAM) ポリシーを作成し、ユーザーにこのポリシーを割り当てる必要があります。[新しいユーザー](#iam-permissions-new-user)の作成時にアクセス許可を追加するか、あるいは[既存のユーザー](#iam-permissions-existing-user)にアクセス許可を追加することができます。両方の手順を以下に示します。

詳細 (IAM ユーザーとポリシーについて、ポリシーをユーザーにアタッチする方法、Amazon IVS を使用してユーザーのアクションを制限する方法など) については、以下を参照してください。
+ *IAM ユーザーガイド*の [IAM ユーザーの作成](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_users_create.html#Using_CreateUser_console)
+ IAM に関する [Amazon IVS セキュリティと](https://docs.aws.amazon.com/ivs/latest/LowLatencyUserGuide/security.html)「IVS のマネージドポリシー」の情報。
+ 「[Amazon IVS のセキュリテイ](https://docs.aws.amazon.com/ivs/latest/LowLatencyUserGuide/security.html)」にある IAM 情報

Amazon IVS 用の既存の AWS マネージドポリシーを使用するか、ユーザー、グループ、またはロールのセットに付与する権限をカスタマイズする新しいポリシーを作成できます。両方のアプローチを以下にて説明します。

## IVS のアクセス許可には既存のポリシーを使用してください。
<a name="iam-permissions-existing-policy"></a>

ほとんどの場合、Amazon IVS には AWS マネージドポリシーを使用することになります。これらについては、「*IVS のセキュリティ*」の「[IVS 用マネージドポリシー](https://docs.aws.amazon.com/ivs/latest/LowLatencyUserGuide/security-iam-awsmanpol.html)」セクションで詳しく説明されています。
+ `IVSReadOnlyAccess` AWS マネージドポリシーを使用し、アプリケーションデベロッパーにすべての IVS Get および List API オペレーション (低レイテンシーおよびリアルタイムストリーミングの両方) へのアクセスを許可します。
+ `IVSFullAccess` AWS マネージドポリシーを使用して、アプリケーションデベロッパーにすべての IVS API オペレーション (低レイテンシーおよびリアルタイムストリーミングの両方) へのアクセスを許可します。

## オプション: Amazon IVS アクセス許可の新しいポリシーを作成する
<a name="iam-permissions-new-policy"></a>

以下の手順に従ってください。

1. AWS マネジメントコンソールにサインインして、IAM コンソールを開きます。[https://console.aws.amazon.com/iam/](https://console.aws.amazon.com/iam/)

1. ナビゲーションペインで、**[ポリシー]**、**[ポリシーの作成]** の順に選択します。**[アクセス許可の指定]** ウィンドウが開きます。

1. **[アクセス許可の指定]** ウィンドウで、**[JSON]** タブをクリックし、次の IVS ポリシーをコピーして **[ポリシーエディタ]** テキスト領域に貼り付けます。(このポリシーには、すべての Amazon IVS アクションは含まれていません。必要に応じてオペレーションアクセス許可を追加/削除 (許可/拒否) できます。IVS オペレーションの詳細については、「[IVS リアルタイムストリーミング API リファレンス](https://docs.aws.amazon.com//ivs/latest/RealTimeAPIReference/Welcome.html)」を参照してください)

------
#### [ JSON ]

****  

   ```
   {
      "Version":"2012-10-17",		 	 	 
      "Statement": [
         {
            "Effect": "Allow",
            "Action": [
               "ivs:CreateStage",
               "ivs:CreateParticipantToken",
               "ivs:GetStage",
               "ivs:GetStageSession",
               "ivs:ListStages",
               "ivs:ListStageSessions",
               "ivs:CreateEncoderConfiguration",
               "ivs:GetEncoderConfiguration",
               "ivs:ListEncoderConfigurations",
               "ivs:GetComposition",
               "ivs:ListCompositions",
               "ivs:StartComposition",
               "ivs:StopComposition"
             ],
             "Resource": "*"
         },
         {
            "Effect": "Allow",
            "Action": [
               "cloudwatch:DescribeAlarms",
               "cloudwatch:GetMetricData",
               "s3:DeleteBucketPolicy",
               "s3:GetBucketLocation",
               "s3:GetBucketPolicy",
               "s3:PutBucketPolicy",
               "servicequotas:ListAWSDefaultServiceQuotas",
               "servicequotas:ListRequestedServiceQuotaChangeHistoryByQuota",
               "servicequotas:ListServiceQuotas",
               "servicequotas:ListServices",
               "servicequotas:ListTagsForResource"
            ],
            "Resource": "*"
         }
      ]
   }
   ```

------

1. **[アクセス許可の指定]** ウィンドウを開いたまま、**[次へ]** を選択します (ウィンドウの一番下までスクロールすると表示されます)。**[レビューと作成]** ウィンドウが開きます。

1. **[レビューと作成]** ウィンドウで、ポリシーに**ポリシー名**を入力します。オプションで**説明**を追加します。ユーザーを作成する時に必要になるので、ポリシーの名前を書きとめておきます (下記を参照してください)。ページの最下部で、**[Create policy]** (ポリシーの作成) を選択します。

1. IAM コンソールウィンドウが表示され、新しいポリシーが作成されたことを確認するバナーが表示されます。

## 新しいユーザーを作成し、アクセス許可を付与する
<a name="iam-permissions-new-user"></a>

### IAM ユーザーアクセスキー
<a name="iam-permissions-new-user-access-keys"></a>

IAM アクセスキーは、アクセスキー ID とシークレットアクセスキーで構成されます。これは AWS へのプログラムによるリクエストの署名に使用されます。アクセスキーがない場合は、AWS マネジメントコンソールから作成できます。ベストプラクティスとして、ルートユーザーのアクセスキーは作成しないでください。

*シークレットアクセスキーを表示またはダウンロードできるのは、アクセスキーを作成するときのみです。後で回復することはできません。*ただ、アクセスキーはいつでも新しく作成できます。必要な IAM アクションを実行するためのアクセス許可が必要です。

アクセスキーは、常に安全に保管してください。(例え Amazon からの問い合わせであっても) 第三者と共有しないでください。詳細については、「*IAM ユーザーガイド*」の「[IAM ユーザーのアクセスキーの管理](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_credentials_access-keys.html)」を参照してください。

### 手順
<a name="iam-permissions-new-user-procedure"></a>

以下の手順に従ってください。

1. ナビゲーションペインで **[ユーザー]**、**[ユーザーの作成]** の順に選択します。**[ユーザーの詳細を指定]** ウィンドウが開きます。

1. **[ユーザーの詳細を指定]** ウィンドウで次の手順を実行します。

   1. **[ユーザーの詳細]** で、作成する新しい**ユーザーの名前**を入力します。

   1. **[AWS マネジメントコンソールへのユーザーアクセスを提供]** を選択します。

   1. **[コンソールパスワード]** で、**[自動生成パスワード]** を選択します。

   1. **[ユーザーは次回サインイン時に新しいパスワードを作成する必要があります]** を選択します。

   1. [**次へ**] を選択します。**[アクセス許可の設定]** ウィンドウが開きます。

1. **[アクセス許可の設定]** で、**[ポリシーを直接アタッチする]** を選択します。**[アクセス許可ポリシー]** ウィンドウが開きます。

1. 検索ボックスに、IVS ポリシー名 (AWS マネージドポリシーまたは以前に作成したカスタムポリシー) を入力します。見つかったら、チェックボックスをオンにして、ポリシーを選択します。

1. ページの最下部で、**[次へ]** を選択します。**[レビューと作成]** ウィンドウが開きます。

1. **[レビューと作成]** ウィンドウで、ユーザーのすべての詳細が正しいことを確認してから、ウィンドウ最下部にある **[ユーザーの作成]** を選択します。

1. **[パスワードの取得]** ウィンドウが開き、**コンソールサインインの詳細**が表示されます。*後で参照できるように、この情報を保存しておきます*。完了したら、**[ユーザーリストに戻る]** を選択します。

## 既存のユーザーへのアクセス許可を追加する
<a name="iam-permissions-existing-user"></a>

以下の手順に従ってください。

1. AWS マネジメントコンソールにサインインして、IAM コンソールを開きます。[https://console.aws.amazon.com/iam/](https://console.aws.amazon.com/iam/)

1. ナビゲーションペインで、 [**Users (ユーザー) **] を選択し、更新する既存のユーザー名を選択します。(名前をクリックして選択します。選択ボックスはチェックしないでください。)

1. **概要**ページの[**アクセス許可**] タブで、[**アクセス許可の追加**] を選択します。**[アクセス許可の追加**] ウィンドウが開きます。

1. **[既存のポリシーを直接アタッチ]** を選択します。**[アクセス許可ポリシー]** ウィンドウが開きます。

1. 検索ボックスに、IVS ポリシー名 (AWS マネージドポリシーまたは以前に作成したカスタムポリシー) を入力します。ポリシーが見つかったら、チェックボックスをオンにして、ポリシーを選択します。

1. ページの最下部で、**[次へ]** を選択します。**[レビュー]** ウィンドウが開きます。

1. **[レビュー]** ウィンドウの下部にある **[アクセス許可の追加]** を選択します。

1. **[Summary]** (概要) ページで、IVS ポリシーが追加されたことを確認します。

# ステップ 2: ステージを作成する
<a name="getting-started-create-stage"></a>

ステージは、参加者がリアルタイムでビデオを送受信できる仮想スペースです。リアルタイムストリーミング API の基盤となるリソースです。コンソールまたは CreateStage オペレーションのいずれかを使用し、ステージを作成できます。

可能な限り、再利用のために古いステージを保持するのではなく、論理セッ ションごとに新しいステージを作成し、終了したら削除することをお勧めします。古くなったリソース (再利用されない古いステージ) がクリーンアップされなければ、ステージの最大数の制限に早く到達する可能性が高くなります。

Amazon IVS コンソールまたは AWS CLI を介して、個々の参加者による記録の有無を問わずにステージを作成できます。ステージの作成および記録については、以下で説明します。

## 個々の参加者の録画
<a name="getting-started-create-stage-ipr-overview"></a>

ステージの個々の参加者による記録を有効にするオプションがあります。個々の参加者の記録における S3 機能が有効になっている場合、ステージへの個々の参加者によるブロードキャストはすべて記録され、ユーザーが所有する Amazon S3 ストレージバケットに保存されます。その後、この録画はオンデマンド再生が可能です。

*このセットアップは拡張オプションです。*デフォルトでは、ステージの作成時に記録は無効になっています。

記録用にステージを設定する前に、*保存設定*を作成する必要があります。ステージの記録されたストリームが保存される Amazon S3 ロケーションを指定するリソースです。コンソールまたは CLI を使用して保存設定を作成および管理することができます。両方の手順を以下に示されます。保存設定を作成したら、ステージ作成時 (以下で説明) または既存のステージを更新することで後で作成する際、保存設定をステージに関連付けします。(API で「[CreateStage](https://docs.aws.amazon.com//ivs/latest/RealTimeAPIReference/API_CreateStage.html)」および「[UpdateStage](https://docs.aws.amazon.com//ivs/latest/RealTimeAPIReference/API_UpdateStage.html)」を参照してください) 複数のステージを同じ保存設定に関連付けることができます。すべてのステージに関連付けされなくなった保存設定を削除できます。

次の制約に注意が必要です。
+ S3 バケットを所有している必要があります。つまり、記録されるステージを設定するアカウントは、記録を保存する S3 バケットを所有している必要があります。
+ ステージ、保存設定、S3 ロケーションは同じ AWS リージョンにある必要があります。他のリージョンでステージを作成して記録する場合、それらのリージョンで保存設定および S3 バケットも設定する必要があります。

S3 バケットに録画するには、AWS 認証情報を使用した認可が必要です。IVS に必要なアクセス権を付与するため、録画設定が作成される際に AWS IAM [サービスにリンクされたロール](https://docs.aws.amazon.com/IAM/latest/UserGuide/using-service-linked-roles.html) (SLR) が自動的に作成されます。SLR は、特定のバケットのみに IVS 書き込み許可を付与するように制限されます。

ストリーミングロケーションおよび AWS 間、あるいは AWS 内のネットワーク問題により、ストリームの記録中に一部データが失われる可能性があることに注意してください。このような場合、Amazon IVS は録画よりもライブストリームを優先します。冗長性のために、ストリーミングツールでローカルに録画してください。

記録したファイルのポスト処理や VOD 再生の設定方法などの詳細については「[個々の参加者の録画](rt-individual-participant-recording.md)」を参照してください。

### 録画を無効にする方法
<a name="getting-started-disable-recording"></a>

既存のステージで Amazon S3 記録を無効にする方法
+ コンソール — 関連するステージの詳細ページの**個々の参加者のストリーミングを記録する**セクションで、**[S3 への自動録画]** の **[自動録画の有効化]** をオフに切り替え、**[変更を保存する]** を選択します。保存設定によるステージとの関連付けが解除され、ステージ上のストリームが記録されなくなります。
+ CLI — `update-stage`コマンドを実行し、録画設定の ARN を空の文字列として渡します。

  ```
  aws ivs-realtime update-stage --arn arn:aws:ivs:us-west-2:123456789012:stage/abcdABCDefgh --auto-participant-recording-configuration storageConfigurationArn=""
  ```

  記録が無効になったことを示す `storageConfigurationArn` の空の文字列が含まれるステージオブジェクトが返されます。

## IVS ステージを作成するためのコンソール手順
<a name="getting-started-create-stage-console"></a>

1. [Amazon IVS コンソール](https://console.aws.amazon.com/ivs)を開きます。

   ([AWS マネジメントコンソール](https://console.aws.amazon.com/)から Amazon IVS コンソールにアクセスすることもできます。)

1. 左側のナビゲーションペインで **[ステージ]** を選択し、**[ステージを作成]** を選択します。**[ステージを作成]** ウィンドウが表示されます。  
![\[[ステージを作成] ウィンドウを使用して、新しいステージとそのステージの参加者トークンを作成します。\]](http://docs.aws.amazon.com/ja_jp/ivs/latest/RealTimeUserGuide/images/Create_Stage_Console_IPR.png)

1. 必要に応じて、**[ステージ名]** を入力します。

1. 個々の参加者の記録を有効にする場合、以下の「[Amazon S3 に個々の参加者の自動記録を設定する (オプション)](#getting-started-create-stage-ipr)」の手順を完了させてください。

1. **[ステージを作成]** を選択してステージを作成します。新しいステージのステージ詳細ページが表示されます。

### Amazon S3 に個々の参加者の自動記録を設定する (オプション)
<a name="getting-started-create-stage-ipr"></a>

ステージの作成中に個々の参加者の記録を有効にするには、次の手順に従ってください。

1. **ステージを作成する**ページの**個々の参加者を記録する**で、**[自動録画の有効化]** をオンにします。**[記録済みメディアタイプ]** を選択し、既存の **[保存設定]** を選択するか新しい保存設定を作成し、ある時間間隔でサムネイルを記録するかどうかを選択するため、追加のフィールドが表示されます。  
![\[[個々の参加者の記録] ダイアログを使用して、ステージによる個々の参加者の記録を設定します。\]](http://docs.aws.amazon.com/ja_jp/ivs/latest/RealTimeUserGuide/images/Create_Stage_Console_enable_IPR.png)

1. 記録するメディアタイプを選択します。

1. **[保存設定を作成する]** を選択します。新しいウィンドウが開きます。オプションを使用して、Amazon S3 バケットを作成し、新しい録画設定にアタッチします。  
![\[[保存設定を作成する] ウィンドウを使用し、ステージの新規の保存設定を作成します。\]](http://docs.aws.amazon.com/ja_jp/ivs/latest/RealTimeUserGuide/images/Create_Storage_Configuration_IPR.png)

1. 次のフィールドに入力します。

   1. 必要に応じて**保存設定名**を入力します。

   1. [**バケット名**] を入力します。

1. **[保存設定を作成する]** を選択し、一意の ARN を持つ新規の保存設定リソースを作成します。通常、録画設定の作成は数秒ですが、最大で 20 秒かかることがあります。保存設定が作成されると、**[チャネルを作成する]** ウィンドウに戻ります。その**個々の参加者を記録する**エリアには、新規の**保存設定**および作成した S3 バケット (**ストレージ**) が表示されます。  
![\[IVS コンソール を使用してステージを作成する: 新規の保存設定が作成されました。\]](http://docs.aws.amazon.com/ja_jp/ivs/latest/RealTimeUserGuide/images/Create_Stage_Console_Storage_Configuration.png)

1. 必要に応じて、参加者レプリカの記録、個々の参加者による記録のマージ、サムネイル記録など、デフォルトでは無効になっているその他のオプションを有効にすることができます。  
![\[IVS コンソールを使用してステージを作成する: サムネイル記録や IPR ステッチングなどの高度なオプションを有効にします。\]](http://docs.aws.amazon.com/ja_jp/ivs/latest/RealTimeUserGuide/images/Create_Stage_Console_IPR_Stitching.png)

## IVS ステージを作成するための CLI 手順
<a name="getting-started-create-stage-cli"></a>

AWS CLI をインストールするには、「[AWS CLI の最新バージョンをインストールまたは更新する](https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html)」を参照してください。

個々の参加者による記録の有効の有無を問わず、ステージを作成するかどうかにより、CLI を使用して以下の 2 手順のいずれかに従ってリソースを作成および管理できるようになりました。

### 個々の参加者の記録なしでステージを作成する
<a name="getting-started-create-stage-cli-without-ipr"></a>

ステージ API は ivs-realtime 名前空間の下にあります。例えば、ステージを作成するには以下のようにします。

```
aws ivs-realtime create-stage --name "test-stage"
```

レスポンスは次のとおりです。

```
{
   "stage": {
      "arn": "arn:aws:ivs:us-west-2:376666121854:stage/VSWjvX5XOkU3",
      "name": "test-stage"
   }
}
```

### 個々の参加者の記録でステージを作成する
<a name="getting-started-create-stage-cli-with-ipr"></a>

個々の参加者の記録を有効にしてステージを作成する方法

```
aws ivs-realtime create-stage --name "test-stage-participant-recording" --auto-participant-recording-configuration storageConfigurationArn=arn:aws:ivs:us-west-2:123456789012:storage-configuration/LKZ6QR7r55c2,mediaTypes=AUDIO_VIDEO
```

必要に応じて `thumbnailConfiguration` パラメータを渡してサムネイルの保存、記録モード、サムネイル間隔秒数を手動で設定します。

```
aws ivs-realtime create-stage --name "test-stage-participant-recording" --auto-participant-recording-configuration storageConfigurationArn=arn:aws:ivs:us-west-2:123456789012:storage-configuration/LKZ6QR7r55c2,mediaTypes=AUDIO_VIDEO,thumbnailConfiguration="{targetIntervalSeconds=10,storage=[SEQUENTIAL,LATEST],recordingMode=INTERVAL}"
```

必要に応じて `recordingReconnectWindowSeconds` パラメータを渡し、フラグメント化された個々の参加者の記録をマージできるようにします。

```
aws ivs-realtime create-stage --name "test-stage-participant-recording" --auto-participant-recording-configuration "storageConfigurationArn=arn:aws:ivs:us-west-2:123456789012:storage-configuration/LKZ6QR7r55c2,mediaTypes=AUDIO_VIDEO,thumbnailConfiguration="{targetIntervalSeconds=10,storage=[SEQUENTIAL,LATEST],recordingMode=INTERVAL}",recordingReconnectWindowSeconds=60"
```

レスポンスは次のとおりです。

```
{
   "stage": {
      "arn": "arn:aws:ivs:us-west-2:123456789012:stage/VSWjvX5XOkU3",
      "autoParticipantRecordingConfiguration": {
         "hlsConfiguration": {
             "targetSegmentDurationSeconds": 6
         },
         "mediaTypes": [
            "AUDIO_VIDEO"
         ],
         "recordingReconnectWindowSeconds": 60,
         "recordParticipantReplicas": true,
         "storageConfigurationArn": "arn:aws:ivs:us-west-2:123456789012:storage-configuration/LKZ6QR7r55c2",
         "thumbnailConfiguration": {
            "recordingMode": "INTERVAL",
            "storage": [
               "SEQUENTIAL",
               "LATEST"
            ],
            "targetIntervalSeconds": 10
         }
      },
      "endpoints": {
         "events": "<events-endpoint>",
         "rtmp": "<rtmp-endpoint>",
         "rtmps": "<rtmps-endpoint>",
         "whip": "<whip-endpoint>"
      },
      "name": "test-stage-participant-recording"
   }
}
```

# ステップ 3: 参加者トークンを配布する
<a name="getting-started-distribute-tokens"></a>

ステージができたら、トークンを作成して参加者に配布し、参加者がステージに参加してビデオの送受信を開始できるようにする必要があります。トークンを生成するには、次の 2 つの方法があります。
+ キーペアを使用してトークンを[作成](#getting-started-distribute-tokens-self-signed)します。
+ [IVS リアルタイムストリーミング API を使用してトークンを作成します](#getting-started-distribute-tokens-api)。

両方のアプローチを以下にて説明します。

## キーペアを使用したトークンの作成
<a name="getting-started-distribute-tokens-self-signed"></a>

サーバーアプリケーションでトークンを作成し、参加者に配布してステージに参加できます。ECDSA パブリック/プライベートキーペアを生成して JWT に署名し、パブリックキーを IVS にインポートします。その後、IVS はステージ結合時にトークンを検証できます。

IVS にはキーの有効期限はありません。プライベートキーが侵害された場合は、古いパブリックキーを削除する必要があります。

### 新しいキーペアの作成
<a name="getting-started-distribute-tokens-self-signed-create-key-pair"></a>

キーペアを作成するには、複数の方法があります。以下に 2 つの例を示します。

コンソールを使用して新しいキーペアを作成するには、次の手順に従います。

1. [Amazon IVS コンソール](https://console.aws.amazon.com/ivs)を開きます。ステージのリージョンを選択していない場合は、リージョンを選択します。

1. 左側のナビゲーションメニューで、**[リアルタイムストリーミング] > [パブリックキー]**を選択します。

1. **[パブリックキーを作成]** を選択します。**[パブリックキーの作成]** ダイアログが表示されます。

1. プロンプトに従って、[**Create (作成)**] を選択します。

1. Amazon IVS が新しいキーペアを生成します。パブリックキーはパブリックキーリソースとしてインポートされ、プライベートキーはすぐにダウンロードできるようになります。パブリックキーは、必要に応じて後でダウンロードすることもできます。

   Amazon IVS はクライアント側でキーを生成し、プライベートキーを保存しません。***キーは必ず保存してください。後で取得することはできません。***

OpenSSL で P384 EC キーペアを作成するには (最初に [OpenSSL](https://www.openssl.org/source/) のインストールが必要な場合があります)、次の手順を行います。このプロセスにより、プライベートキーとパブリックキーの両方にアクセスできます。パブリックキーは、トークンの検証をテストする場合にのみ必要です。

```
openssl ecparam -name secp384r1 -genkey -noout -out priv.pem
openssl ec -in priv.pem -pubout -out public.pem
```

次に、以下の手順に従い、新しいパブリックキーをインポートします。

### パブリックキーをインポートするには
<a name="getting-started-distribute-tokens-import-public-key"></a>

キーペアが作成できたら、パブリックキーを IVS にインポートできます。プライベートキーはシステムでは必要ありませんが、ユーザーがトークンを署名するのに使用されます。

コンソールで既存のパブリックキーをインポートするには

1. [Amazon IVS コンソール](https://console.aws.amazon.com/ivs)を開きます。ステージのリージョンを選択していない場合は、リージョンを選択します。

1. 左側のナビゲーションメニューで、**[リアルタイムストリーミング] > [パブリックキー]**を選択します。

1. [**インポート**] を選択します。**[パブリックキーのインポート]** ダイアログが表示されます。

1. プロンプトに従って、**[インポート]** を選択します。

1. Amazon IVS はパブリックキーをインポートし、パブリックキーリソースを生成します。

CLI で既存のパブリックキーをインポートするには、次のコマンドを実行します。

```
aws ivs-realtime import-public-key --public-key-material "`cat public.pem`" --region <aws-region>
```

リージョンがローカルの AWS 設定ファイルにある場合、`--region <aws-region>` を省略できます。

レスポンスの例を次に示します。

```
{
    "publicKey": {
        "arn": "arn:aws:ivs:us-west-2:123456789012:public-key/f99cde61-c2b0-4df3-8941-ca7d38acca1a",
        "fingerprint": "98:0d:1a:a0:19:96:1e:ea:0a:0a:2c:9a:42:19:2b:e7",
        "publicKeyMaterial": "-----BEGIN PUBLIC KEY-----\nMHYwEAYHKoZIzj0CAQYFK4EEACIDYgAEVjYMV+P4ML6xemanCrtse/FDwsNnpYmS\nS6vRV9Wx37mjwi02hObKuCJqpj7x0lpz0bHm5v1JBvdZYAd/r2LR5aChK+/GM2Wj\nl8MG9NJIVFaw1u3bvjEjzTASSfS1BDX1\n-----END PUBLIC KEY-----\n",
        "tags": {}
    }
}
```

### API リクエスト
<a name="getting-started-distribute-tokens-create-api"></a>

```
POST /ImportPublicKey HTTP/1.1
{
  "publicKeyMaterial": "<pem file contents>"
}
```

### トークンを生成して署名する
<a name="getting-started-distribute-tokens-self-signed-generate-sign"></a>

JWT およびトークン署名用にサポートされているライブラリの操作の詳細については、[jwt.io](https://jwt.io/) を参照してください。jwt.io インターフェイスでは、プライベートキーを入力してトークンに署名する必要があります。パブリックキーは、トークンを検証する場合にのみ必要です。

すべての JWT には、ヘッダー、ペイロード、署名の 3 つのフィールドがあります。

JWT のヘッダーとペイロードの JSON スキーマを以下に示します。または、IVS コンソールからサンプル JSON をコピーすることもできます。IVS コンソールからヘッダーとペイロード JSON を取得するには

1. [Amazon IVS コンソール](https://console.aws.amazon.com/ivs)を開きます。ステージのリージョンを選択していない場合は、リージョンを選択します。

1. 左側のナビゲーションメニューで、**[リアルタイムストリーミング] > [ステージ]**を選択します。

1. 使用するステージを選択します。**[詳細を表示]** 選択します。

1. **[参加者トークン]** セクションで、**[トークンの作成]** の横にあるドロップダウンを選択します。

1. **[トークンヘッダーとペイロードをビルドする]**を選択します。

1. フォームに入力し、ポップアップの下部に表示される JWT ヘッダーとペイロードをコピーします。

#### トークンスキーマ: ヘッダー
<a name="getting-started-distribute-tokens-self-signed-generate-sign-header"></a>

ヘッダーは以下を指定します。
+ `alg` は署名アルゴリズムです。これは、SHA-384 ハッシュアルゴリズムを使用する ECDSA 署名アルゴリズムの ES384 です。
+ `typ` はトークン型、JWT です。
+ `kid` は、トークンの署名に使用されるパブリックキーの ARN です。[GetPublicKey](https://docs.aws.amazon.com//ivs/latest/RealTimeAPIReference/API_GetPublicKey.html) API リクエストから返されるのと同じ ARN である必要があります。

```
{
  "alg": "ES384",
  "typ": "JWT"
  “kid”: “arn:aws:ivs:123456789012:us-east-1:public-key/abcdefg12345”
}
```

#### トークンスキーマ: ペイロード
<a name="getting-started-distribute-tokens-self-signed-generate-sign-payload"></a>

ペイロードには、IVS 固有のデータが含まれています。`user_id` を除くすべてのフィールドは必須です。
+ JWT 仕様の `RegisteredClaims` は、ステージトークンを有効にするために提供する必要がある予約クレームです。
  + `exp` (有効期限) は、トークンの有効期限を示す Unix UTC タイムスタンプです。(Unix タイムスタンプは、うるう秒を無視した、1970-01-01T00:00:00Z UTC から、指定された UTC 日付/時刻までの秒数を表す数値です。) トークンは、参加者がステージに参加するときに検証されます。IVS は、デフォルト (かつ推奨値) の 12 時間 TTL を持つトークンを提供します。これは、公開時点 (iat) から最大 14 日間まで延長できます。整数型の値である必要があります。
  + `iat` (発行時) は、JWT が発行されたときの Unix UTC タイムスタンプです。(Unix タイムスタンプについては、`exp` のメモを参照してください。) 整数型の値である必要があります。
  + `jti` (JWT ID) は、トークンが付与される参加者を追跡および参照するために使用される参加者 ID です。すべてのトークンには一意の参加者 ID が必要です。英数字、ハイフン (-)、アンダースコア (\$1) 文字のみを含む、最大 64 文字の大文字と小文字を区別する文字列である必要があります。他の特殊文字は使用できません。
+ `user_id` は、トークンを識別するのに役立つ、顧客に割り当てられたオプションの名前です。これは、参加者を顧客自身のシステム内のユーザーにリンクするために使用できます。これは、[CreateParticipantToken](https://docs.aws.amazon.com/ivs/latest/RealTimeAPIReference/API_CreateParticipantToken.html) API リクエストの `userId` フィールドと一致する必要があります。任意の UTF-8 エンコードテキストにすることができ、最大 128 文字の文字列です。*このフィールドはすべてのステージ参加者に公開されます。これらを個人を特定する情報、機密情報や機微な情報には使用しないでください。*
+ `resource` はステージの ARN です。例: `arn:aws:ivs:us-east-1:123456789012:stage/oRmLNwuCeMlQ`。
+ `topic` はステージの ID で、ステージ ARN から抽出できます。例えば、ステージ ARN が `arn:aws:ivs:us-east-1:123456789012:stage/oRmLNwuCeMlQ` の場合、ステージ ID は `oRmLNwuCeMlQ` です。
+ `events_url` は、CreateStage または GetStage オペレーションから返されるイベントエンドポイントである必要があります。この値はステージ作成時にキャッシュすることをお勧めします。この値は最大 14 日間キャッシュできます。値の例は `wss://global.events.live-video.net` です。
+ `whip_url` は、CreateStage または GetStage オペレーションから返される WHIP エンドポイントである必要があります。この値はステージ作成時にキャッシュすることをお勧めします。この値は最大 14 日間キャッシュできます。値の例は `https://453fdfd2ad24df.global-bm.whip.live-video.net` です。
+ `capabilities` はトークンの機能を指定します。有効な値は `allow_publish` および `allow_subscribe` です。サブスクライブ専用トークンの場合は、`allow_subscribe` を `true` に設定するだけにします。
+ `attributes` は、トークンにエンコードしてステージにアタッチするアプリケーション提供の属性を指定できるオプションのフィールドです。マップキーと値には、UTF-8 エンコードされたテキストを含めることができます。このフィールドの最大長は合計 1 KB です。*このフィールドはすべてのステージ参加者に公開されます。これらを個人を特定する情報、機密情報や機微な情報には使用しないでください。*
+ `version` は `1.0` である必要があります。

  ```
  {
    "exp": 1697322063,
    "iat": 1697149263,
    "jti": "Mx6clRRHODPy",
    "user_id": "<optional_customer_assigned_name>",
    "resource": "<stage_arn>",
    "topic": "<stage_id>",
    "events_url": "wss://global.events.live-video.net",
    "whip_url": "https://114ddfabadaf.global-bm.whip.live-video.net",
    "capabilities": {
      "allow_publish": true,
      "allow_subscribe": true
    },
    "attributes": {
      "optional_field_1": "abcd1234",
      "optional_field_2": "false"
    },
    "version": "1.0"
  }
  ```

#### トークンスキーマ: 署名
<a name="getting-started-distribute-tokens-self-signed-generate-sign-signature"></a>

署名を作成するには、ヘッダー (ES384) で指定されたアルゴリズムを使用して、エンコードされたヘッダーとエンコードされたペイロードに署名します。

```
ECDSASHA384(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  <private-key>
)
```

#### 指示
<a name="getting-started-distribute-tokens-self-signed-generate-sign-instructions"></a>

1. ES384 署名アルゴリズムと IVS に提供されるパブリックキーに関連付けられたプライベートキーを使用してトークンの署名を生成します。

1. トークンを組み立てます。

   ```
   base64UrlEncode(header) + "." +
   base64UrlEncode(payload) + "." +
   base64UrlEncode(signature)
   ```

## IVS Real-Time Streaming API を使用したトークンの作成
<a name="getting-started-distribute-tokens-api"></a>

![\[参加者トークンの配布:ステージトークンのワークフロー\]](http://docs.aws.amazon.com/ja_jp/ivs/latest/RealTimeUserGuide/images/Distribute_Participant_Tokens.png)


上記のように、クライアントアプリケーションからサーバー側のアプリケーションにトークンを要求し、サーバー側のアプリケーションは AWS SDK または SigV4 署名付きリクエストを使用して CreateParticipantToken を呼び出します。AWS 認証情報が API の呼び出しに使用されるため、トークンはクライアント側のアプリケーションではなく、安全なサーバー側のアプリケーションで生成する必要があります。

参加者トークンを作成するときは、オプションで属性や機能を指定できます。
+ アプリケーションが提供する属性を指定してトークンにエンコードし、ステージにアタッチできます。マップキーと値には、UTF-8 エンコードされたテキストを含めることができます。このフィールドの最大長は合計 1 KB です。*このフィールドはすべてのステージ参加者に公開されます。これらを個人を特定する情報、機密情報や機微な情報には使用しないでください。*
+ トークンで有効になっている機能を指定できます。デフォルトは `PUBLISH` および `SUBSCRIBE` であり、これにより参加者はオーディオとビデオを送受信できるようになりますが、機能のサブセットを持つトークンを発行することもできます。たとえば、モデレーター向けに `SUBSCRIBE` 機能のみを備えたトークンを発行することができます。その場合、モデレーターはビデオを送信している参加者を見ることができますが、自分のビデオを送信することはできません。

詳細については、「[CreateParticipantToken](https://docs.aws.amazon.com//ivs/latest/RealTimeAPIReference/API_CreateParticipantToken.html)」を参照してください。

テストや開発用に、コンソールまたは CLI を使用して参加者トークンを作成できますが、ほとんどの場合には、実稼働環境の AWS SDK を使用して作成することをお勧めします。

サーバーから各クライアントにトークンを配布する方法が必要になります (API リクエスト経由など)。この機能は提供していません。このガイドでは、以下の手順でトークンをコピーしてクライアントコードに貼り付けるだけです。

**重要**: トークンは不透明なものとして扱ってください。つまり、トークンの内容に基づいて機能を構築しないでください。トークンの形式は将来変更される可能性があります。

### コンソールでの手順
<a name="getting-started-distribute-tokens-console"></a>

1. 前のステップで作成したステージに移動します。

1. **[トークンの作成]** を選択します。**トークンの作成**ウィンドウが表示されます。

1. トークンに関連付けるユーザー ID を入力します。任意の UTF-8 でエンコードされたテキストを使用できます。

1. **[作成]** を選択します。

1. トークンをコピーします。*重要:トークンは必ず保存してください。IVS にトークンは保存されないため、後で取得することはできません*。

### CLI の手順
<a name="getting-started-distribute-tokens-cli"></a>

AWS CLI を使用してトークンを作成するには、最初に CLI をダウンロードし、コンピューターに設定する必要があります。詳細については、「[AWS Command Line Interface のユーザーガイド](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-welcome.html)」を参照してください。AWS CLI を使用してトークンを生成するのはテスト目的には適していますが、本番環境で使用する場合は、AWS SDK を使用してサーバー側でトークンを生成することをお勧めします (下記の手順を参照)。

1. ステージ ARN で `create-participant-token` コマンドを実行します。以下の機能のいずれか、またはすべてを含めます: `"PUBLISH"`、`"SUBSCRIBE"`。

   ```
   aws ivs-realtime create-participant-token --stage-arn arn:aws:ivs:us-west-2:376666121854:stage/VSWjvX5XOkU3 --capabilities '["PUBLISH", "SUBSCRIBE"]'
   ```

1. これにより、参加者トークンが返されます。

   ```
   {
       "participantToken": {
           "capabilities": [
               "PUBLISH",
               "SUBSCRIBE"
           ],
           "expirationTime": "2023-06-03T07:04:31+00:00",
           "participantId": "tU06DT5jCJeb",
           "token": "eyJhbGciOiJLTVMiLCJ0eXAiOiJKV1QifQ.eyJleHAiOjE2NjE1NDE0MjAsImp0aSI6ImpGcFdtdmVFTm9sUyIsInJlc291cmNlIjoiYXJuOmF3czppdnM6dXMtd2VzdC0yOjM3NjY2NjEyMTg1NDpzdGFnZS9NbzhPUWJ0RGpSIiwiZXZlbnRzX3VybCI6IndzczovL3VzLXdlc3QtMi5ldmVudHMubGl2ZS12aWRlby5uZXQiLCJ3aGlwX3VybCI6Imh0dHBzOi8vNjZmNzY1YWM4Mzc3Lmdsb2JhbC53aGlwLmxpdmUtdmlkZW8ubmV0IiwiY2FwYWJpbGl0aWVzIjp7ImFsbG93X3B1Ymxpc2giOnRydWUsImFsbG93X3N1YnNjcmliZSI6dHJ1ZX19.MGQCMGm9affqE3B2MAb_DSpEm0XEv25hfNNhYn5Um4U37FTpmdc3QzQKTKGF90swHqVrDgIwcHHHIDY3c9eanHyQmcKskR1hobD0Q9QK_GQETMQS54S-TaKjllW9Qac6c5xBrdAk"
       }
   }
   ```

1. このトークンを保存します。ステージに参加してビデオを送受信する際に必要となります。

### AWS SDK での手順
<a name="getting-started-distribute-tokens-sdk"></a>

AWS SDK を使用してトークンを作成することができます。以下は、JavaScript を使用する AWS SDK の手順です。

**重要:** このコードは、サーバー側で実行し、その出力をクライアントに渡す必要があります。

**前提条件:** 以下のコードサンプルを使用するには、aws-sdk/client-ivs-realtime パッケージをインストールする必要があります。詳細については、「[AWS SDK for JavaScript の開始](https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/getting-started.html)」を参照してください。

```
import { IVSRealTimeClient, CreateParticipantTokenCommand } from "@aws-sdk/client-ivs-realtime";

const ivsRealtimeClient = new IVSRealTimeClient({ region: 'us-west-2' });
const stageArn = 'arn:aws:ivs:us-west-2:123456789012:stage/L210UYabcdef';
const createStageTokenRequest = new CreateParticipantTokenCommand({
  stageArn,
});
const response = await ivsRealtimeClient.send(createStageTokenRequest);
console.log('token', response.participantToken.token);
```

# ステップ 4: IVS Broadcast SDK を統合する
<a name="getting-started-broadcast-sdk"></a>

IVS には、アプリケーションに統合できるウェブ、Android、iOS 用のブロードキャスト SDK が用意されています。ブロードキャストSDKは、ビデオの送信と受信の両方に使用されます。[ステージ に RTMP 取り込みを設定](https://docs.aws.amazon.com/ivs/latest/RealTimeUserGuide/rt-stream-ingest.html)している場合は、RTMP エンドポイント (OBS や ffmpeg など) にブロードキャストできる任意のエンコーダを使用できます。

このセクションでは、2 人以上の参加者がリアルタイムで対話できるようにする簡単なアプリケーションを作成します。以下の手順では、BasicRealTime というアプリを作成する手順を説明します。アプリの全コードは CodePen と GitHub にあります。
+  Web: [https://codepen.io/amazon-ivs/pen/ZEqgrpo](https://codepen.io/amazon-ivs/pen/ZEqgrpo) 
+  Android: [https://github.com/aws-samples/amazon-ivs-real-time-streaming-android-samples](https://github.com/aws-samples/amazon-ivs-real-time-streaming-android-samples) 
+  iOS: [https://github.com/aws-samples/amazon-ivs-real-time-streaming-ios-samples](https://github.com/aws-samples/amazon-ivs-real-time-streaming-ios-samples) 

## Web
<a name="getting-started-broadcast-sdk-web"></a>

### ファイルのセットアップ
<a name="getting-started-broadcast-sdk-web-setup"></a>

最初に、フォルダと最初の HTML および JS ファイルを作成してファイルを設定します。

```
mkdir realtime-web-example
cd realtime-web-example
touch index.html
touch app.js
```

ブロードキャスト SDK は、スクリプトタグまたは npm を使用してインストールできます。この例では、わかりやすくするためにスクリプトタグを使用していますが、後で npm を使用する場合でも簡単に変更できます。

### スクリプトタグを使用する
<a name="getting-started-broadcast-sdk-web-script"></a>

Web Broadcast SDK は JavaScript ライブラリとして分散されており、[https://web-broadcast.live-video.net/1.33.0/amazon-ivs-web-broadcast.js](https://web-broadcast.live-video.net/1.33.0/amazon-ivs-web-broadcast.js) で入手できます。

`<script>` タグを使用してロードすると、ライブラリは `IVSBroadcastClient` という名前のウィンドウスコープにグローバル変数を公開します。

### npmを使う
<a name="getting-started-broadcast-sdk-web-npm"></a>

npm パッケージをインストールします。

```
npm install amazon-ivs-web-broadcast
```

これで IVSBroadcastClient オブジェクトにアクセスできるようになりました。

```
const { Stage } = IVSBroadcastClient;
```

## Android
<a name="getting-started-broadcast-sdk-android"></a>

### Android プロジェクトの作成
<a name="getting-started-broadcast-sdk-android-project"></a>

1. Android Studio で **[新規プロジェクト]** を作成します。

1. **[空のビューアクティビティ]** を選択します。

   注: Android Studio の一部の古いバージョンでは、ビューベースのアクティビティが **[空のアクティビティ]** になっていることがあります。お使いの Android Studio ウィンドウに **[空のアクティビティ]** と表示されており、**[空のビュー]** アクティビティが*表示されない*場合は、**[空のアクティビティ]** を選択してください。それ以外の場合は **[空のアクティビティ]** を選択しないでください。View API (Jetpack Compose ではなく) を使います。

1. プロジェクトに **[名前]** を付けて、**[終了]** を選択します。

### ブロードキャスト SDK のインストール
<a name="getting-started-broadcast-sdk-android-install"></a>

Amazon IVS Android Broadcast ライブラリを Android 開発環境に追加するには、ここに説明されているように、ライブラリをモジュールの `build.gradle` ファイル (最新バージョンの Amazon IVS Broadcast SDK) に追加します。新しいプロジェクトの場合、`mavenCentral` リポジトリがすでに `settings.gradle` ファイルに含まれている場合があります。その場合は、`repositories` ブロックを省略することができます。このサンプルでは、`android` ブロック内でデータバインディングも有効にする必要があります。

```
android {
    dataBinding.enabled true
}

repositories {
    mavenCentral()
}
 
dependencies {
     implementation 'com.amazonaws:ivs-broadcast:1.40.0:stages@aar'
}
```

または、SDK を手動でインストールするには、次の場所から最新バージョンをダウンロードします。

[https://search.maven.org/artifact/com.amazonaws/ivs-broadcast](https://search.maven.org/artifact/com.amazonaws/ivs-broadcast)

## iOS
<a name="getting-started-broadcast-sdk-ios"></a>

### iOS プロジェクトの作成
<a name="getting-started-broadcast-sdk-ios-project"></a>

1. 新しい Xcode プロジェクトを作成します。

1. **[プラットフォーム]** で **iOS** を選択します。

1. **[アプリケーション]** では **[アプリ]** を選択します。

1. アプリの **[製品名]** を入力し、**[次へ]** を選択します。

1. プロジェクトを保存するディレクトリを選択 (移動) し、**[作成]** を選択します。

次に、SDK を導入する必要があります。手順については、「*iOS Broadcast SDK Guide*」の「[ライブラリのインストール](broadcast-ios-getting-started.md#broadcast-ios-install)」を参照してください。

### アクセス許可の設定
<a name="getting-started-broadcast-sdk-ios-config"></a>

プロジェクトの `Info.plist` を更新して、`NSCameraUsageDescription` および `NSMicrophoneUsageDescription` に 2 つの新しいエントリを追加する必要があります。値には、アプリがカメラとマイクへのアクセスを要求する理由を説明する、ユーザー向けの説明を入力します。

![\[iOS のアクセス許可を設定します。\]](http://docs.aws.amazon.com/ja_jp/ivs/latest/RealTimeUserGuide/images/iOS_Configure.png)


# ステップ 5: ビデオを公開およびサブスクライブする
<a name="getting-started-pub-sub"></a>

IVS に対する (リアルタイムの) 公開/サブスクライブを、
+ WebRTC および RTMPS をサポートする、ネイティブの [IVS Broadcast SDK](https://docs.aws.amazon.com//ivs/latest/LowLatencyUserGuide/getting-started-set-up-streaming.html#broadcast-sdk) を使用して行えます。特に本稼働シナリオでは、こちらをお勧めします。[Web](getting-started-pub-sub-web.md)、[Android](getting-started-pub-sub-android.md)、および [iOS](getting-started-pub-sub-ios.md) の詳細については、以下を参照してください。
+ Amazon IVS コンソール – ストリームのテストに適しています。以下の「」を参照してください。
+ その他のストリーミングソフトウェアおよびハードウェアエンコーダー — RTMP、RTMPS、または WHIP プロトコルをサポートする任意のストリーミングエンコーダーを使用できます。詳細については、「[ストリーミングの取り込み](rt-stream-ingest.md)」を参照してください。

## IVS コンソール
<a name="getting-started-pub-sub-console"></a>

1. [Amazon IVS コンソール](https://console.aws.amazon.com/ivs)を開きます。

   ([AWS マネジメントコンソール](https://console.aws.amazon.com/)から Amazon IVS コンソールにアクセスすることもできます。)

1. ナビゲーションペインで、**[ステージ]** を選択します。(ナビゲーションペインが折りたたまれている場合は、ハンバーガーアイコンを選択して展開します)

1. サブスクライブまたは公開するステージを選択して、詳細ページに移動します。

1. サブスクライブするには、ステージに 1 つ以上のパブリッシャーがある場合は、**[サブスクライブ]**タブのサブ**[スクライブ]**ボタンを押してサブスクライブできます。(これらのタブは、**[一般的な設定]** セクションの下にあります)

1. パブリッシュするには

   1. **[公開]** タブを選択します。

   1. カメラとマイクへの IVS コンソールアクセスを許可するように求められます。これらの権限を**許可**してください。

   1. **[公開]** タブの下部にあるドロップダウンボックスを使用して、マイクとカメラの入力デバイスを選択します。

   1. 公開を開始するには、**[公開を開始]** を選択します。

   1. 公開されたコンテンツを表示するには、**[サブスクライブ]** タブに戻ります。

   1. 公開を停止するには、**[公開]** タブに移動し、下部にある**[公開を停止]** ボタンを押します。

**注**: サブスクライブと公開はリソースを消費するため、ステージに接続した時間単位の料金が発生します。詳細については、IVS 料金表ページの「[リアルタイムストリーミング](https://aws.amazon.com/ivs/pricing/#Real-Time_Streaming)」を参照してください。

# IVS Web Broadcast SDK を使用してパブリッシュおよびサブスクライブする
<a name="getting-started-pub-sub-web"></a>

このセクションでは、ウェブアプリケーションを使用してステージに発行およびサブスクライブする手順について説明します。

## HTML 共通スクリプトの作成
<a name="getting-started-pub-sub-web-html"></a>

最初に、HTML 共通スクリプトを作成し、ライブラリをスクリプトタグとしてインポートします。

```
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Import the SDK -->
  <script src="https://web-broadcast.live-video.net/1.33.0/amazon-ivs-web-broadcast.js"></script>
</head>

<body>

<!-- TODO - fill in with next sections -->
<script src="./app.js"></script>

</body>
</html>
```

## トークンの入力の受け入れと、参加/退出ボタンの追加
<a name="getting-started-pub-sub-web-join"></a>

ここでは、Body に入力コントロールを入力します。これらはトークンを入力として受け取り、**[参加]** および **[退出]** ボタンを設定します。通常、アプリケーションはアプリケーションの API からトークンをリクエストしますが、この例では、トークンをコピーしてトークン入力に貼り付けます。

```
<h1>IVS Real-Time Streaming</h1>
<hr />

<label for="token">Token</label>
<input type="text" id="token" name="token" />
<button class="button" id="join-button">Join</button>
<button class="button" id="leave-button" style="display: none;">Leave</button>
<hr />
```

## メディアコンテナ要素の追加
<a name="getting-started-pub-sub-web-media"></a>

これらの要素は、ローカル参加者およびリモート参加者向けのメディアを保持します。スクリプトタグを追加して、`app.js` で定義されているアプリケーションのロジックを読み込みます。

```
<!-- Local Participant -->
<div id="local-media"></div>

<!-- Remote Participants -->
<div id="remote-media"></div>

<!-- Load Script -->
<script src="./app.js"></script>
```

これで HTML ページが完成しました。ブラウザに `index.html` を読み込むとこれが表示されるはずです。

![\[リアルタイムストリーミングをブラウザで表示 : HTML の設定が完了しました。\]](http://docs.aws.amazon.com/ja_jp/ivs/latest/RealTimeUserGuide/images/RT_Browser_View.png)


## app.js の作成
<a name="getting-started-pub-sub-web-appjs"></a>

次に、`app.js` ファイルのコンテンツを定義します。まず、SDK のグローバルから必要なすべてのプロパティをインポートします。

```
const {
  Stage,
  LocalStageStream,
  SubscribeType,
  StageEvents,
  ConnectionState,
  StreamType
} = IVSBroadcastClient;
```

## アプリケーション変数の作成
<a name="getting-started-pub-sub-web-vars"></a>

変数を構成し、**[参加]** および **[退出]** ボタンの HTML 要素への参照を保持し、アプリケーションの状態を保存します。

```
let joinButton = document.getElementById("join-button");
let leaveButton = document.getElementById("leave-button");

// Stage management
let stage;
let joining = false;
let connected = false;
let localCamera;
let localMic;
let cameraStageStream;
let micStageStream;
```

## joinStage 1 の作成: 関数の定義と入力の検証
<a name="getting-started-pub-sub-web-joinstage1"></a>

`joinStage` 関数は入力トークンを受け取り、ステージへの接続を作成して、`getUserMedia` から取得したビデオとオーディオの公開を開始します。

まず関数を定義し、状態とトークンの入力を検証します。この機能については、この後のいくつかのセクションで説明します。

```
const joinStage = async () => {
  if (connected || joining) {
    return;
  }
  joining = true;

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

  if (!token) {
    window.alert("Please enter a participant token");
    joining = false;
    return;
  }

  // Fill in with the next sections
};
```

## joinStage 2 の作成: メディアを公開する
<a name="getting-started-pub-sub-web-joinstage2"></a>

次のメディアをステージに公開します。

```
async function getCamera() {
  // Use Max Width and Height
  return navigator.mediaDevices.getUserMedia({
    video: true,
    audio: false
  });
}

async function getMic() {
  return navigator.mediaDevices.getUserMedia({
    video: false,
    audio: true
  });
}

// 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]);
```

## joinStage 3 の作成: ステージ戦略の定義とステージの作成
<a name="getting-started-pub-sub-web-joinstage3"></a>

このステージ戦略は、何を公開し、どの参加者にサブスクライブするかを決める際に SDK が使用する、決定ロジックの要となります。関数の目的の詳細については、「[戦略](web-publish-subscribe.md#web-publish-subscribe-concepts-strategy)」を参照してください。

この戦略はシンプルです。ステージに参加したら、直前に取得したストリームを公開し、リモート参加者全員のオーディオとビデオにサブスクライブします。

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

stage = new Stage(token, strategy);
```

## joinStage 4 の作成: ステージイベントの処理とメディアのレンダリング
<a name="getting-started-pub-sub-web-joinstage4"></a>

ステージでは多くのイベントが発生します。`STAGE_PARTICIPANT_STREAMS_ADDED` および `STAGE_PARTICIPANT_LEFT` をリッスンして、ページ間でメディアをレンダリングしたり削除したりする必要があります。より詳細なイベントの一覧については、「[イベント](web-publish-subscribe.md#web-publish-subscribe-concepts-events)」にあるリストを参照してください。

ここでは、必要となる DOM 要素の管理に役立つヘルパー関数を 4 つ作成しています：`setupParticipant`、`teardownParticipant`、`createVideoEl`、`createContainer`。

```
stage.on(StageEvents.STAGE_CONNECTION_STATE_CHANGED, (state) => {
  connected = state === ConnectionState.CONNECTED;

  if (connected) {
    joining = false;
    joinButton.style = "display: none";
    leaveButton.style = "display: inline-block";
  }
});

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

    let streamsToDisplay = streams;

    if (participant.isLocal) {
      // Ensure to exclude local audio streams, otherwise echo will occur
      streamsToDisplay = streams.filter(
        (stream) => stream.streamType === StreamType.VIDEO
      );
    }

    const videoEl = setupParticipant(participant);
    streamsToDisplay.forEach((stream) =>
      videoEl.srcObject.addTrack(stream.mediaStreamTrack)
    );
  }
);

stage.on(StageEvents.STAGE_PARTICIPANT_LEFT, (participant) => {
  console.log("Participant Left: ", participant);
  teardownParticipant(participant);
});


// Helper functions for managing DOM

function setupParticipant({ isLocal, id }) {
  const groupId = isLocal ? "local-media" : "remote-media";
  const groupContainer = document.getElementById(groupId);

  const participantContainerId = isLocal ? "local" : id;
  const participantContainer = createContainer(participantContainerId);
  const videoEl = createVideoEl(participantContainerId);

  participantContainer.appendChild(videoEl);
  groupContainer.appendChild(participantContainer);

  return videoEl;
}

function teardownParticipant({ isLocal, id }) {
  const groupId = isLocal ? "local-media" : "remote-media";
  const groupContainer = document.getElementById(groupId);
  const participantContainerId = isLocal ? "local" : id;

  const participantDiv = document.getElementById(
    participantContainerId + "-container"
  );
  if (!participantDiv) {
    return;
  }
  groupContainer.removeChild(participantDiv);
}

function createVideoEl(id) {
  const videoEl = document.createElement("video");
  videoEl.id = id;
  videoEl.autoplay = true;
  videoEl.playsInline = true;
  videoEl.srcObject = new MediaStream();
  return videoEl;
}

function createContainer(id) {
  const participantContainer = document.createElement("div");
  participantContainer.classList = "participant-container";
  participantContainer.id = id + "-container";

  return participantContainer;
}
```

## joinStage 5 の作成: ステージへの参加
<a name="getting-started-pub-sub-web-joinstage5"></a>

ステージに参加して、`joinStage` 関数を完成させましょう。

```
try {
  await stage.join();
} catch (err) {
  joining = false;
  connected = false;
  console.error(err.message);
}
```

## leaveStage の作成
<a name="getting-started-pub-sub-web-leavestage"></a>

[退出] ボタンで呼び出す `leaveStage` 関数を定義します。

```
const leaveStage = async () => {
  stage.leave();

  joining = false;
  connected = false;
};
```

## 入力イベントハンドラーの初期化
<a name="getting-started-pub-sub-web-handlers"></a>

最後にもう 1 つ、関数を `app.js` ファイルに追加します。この関数は、ページが読み込まれ、ステージへの参加と退出のためのイベントハンドラーが確立され次第すぐに呼び出されます。

```
const init = async () => {
  try {
    // Prevents issues on Safari/FF so devices are not blank
    await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
  } catch (e) {
    alert(
      "Problem retrieving media! Enable camera and microphone permissions."
    );
  }

  joinButton.addEventListener("click", () => {
    joinStage();
  });

  leaveButton.addEventListener("click", () => {
    leaveStage();
    joinButton.style = "display: inline-block";
    leaveButton.style = "display: none";
  });
};

init(); // call the function
```

## アプリケーションの実行とトークンの提供
<a name="getting-started-pub-sub-run-app"></a>

この時点でウェブページをローカルまたは他のユーザーと共有し、[ページを開き](#getting-started-pub-sub-web-media)、参加者トークンを入力してステージに参加できます。

## 次のステップ
<a name="getting-started-pub-sub-next"></a>

npm や React などに関する詳細な例については、「[IVS Broadcast SDK: Web ガイド (リアルタイムストリーミングガイド](broadcast-web.md)」を参照してください。

# IVS Android Broadcast SDK を使用してパブリッシュおよびサブスクライブする
<a name="getting-started-pub-sub-android"></a>

このセクションでは、Android アプリケーションを使用してステージに発行およびサブスクライブする手順について説明します。

## ビューの作成
<a name="getting-started-pub-sub-android-views"></a>

まず、自動作成された `activity_main.xml` ファイルを使用して、アプリの簡単なレイアウトを作成します。レイアウトには、トークンを追加する `EditText`、参加 `Button`、ステージの状態を表示する `TextView`、公開/非公開を切り替える `CheckBox` が含まれます。

![\[Android アプリでの公開レイアウトの設定。\]](http://docs.aws.amazon.com/ja_jp/ivs/latest/RealTimeUserGuide/images/Publish_Android_1.png)


ビューの背景となる XML は次のとおりです。

```
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:keepScreenOn="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".BasicActivity">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/main_controls_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/cardview_dark_background"
            android:padding="12dp"
            app:layout_constraintTop_toTopOf="parent">

            <EditText
                android:id="@+id/main_token"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:autofillHints="@null"
                android:backgroundTint="@color/white"
                android:hint="@string/token"
                android:imeOptions="actionDone"
                android:inputType="text"
                android:textColor="@color/white"
                app:layout_constraintEnd_toStartOf="@id/main_join"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <Button
                android:id="@+id/main_join"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:backgroundTint="@color/black"
                android:text="@string/join"
                android:textAllCaps="true"
                android:textColor="@color/white"
                android:textSize="16sp"
                app:layout_constraintBottom_toBottomOf="@+id/main_token"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@id/main_token" />

            <TextView
                android:id="@+id/main_state"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/state"
                android:textColor="@color/white"
                android:textSize="18sp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/main_token" />

            <TextView
                android:id="@+id/main_publish_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/publish"
                android:textColor="@color/white"
                android:textSize="18sp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@id/main_publish_checkbox"
                app:layout_constraintTop_toBottomOf="@id/main_token" />

            <CheckBox
                android:id="@+id/main_publish_checkbox"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:buttonTint="@color/white"
                android:checked="true"
                app:layout_constraintBottom_toBottomOf="@id/main_publish_text"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="@id/main_publish_text" />

        </androidx.constraintlayout.widget.ConstraintLayout>

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/main_recycler_view"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layout_constraintTop_toBottomOf="@+id/main_controls_container"
            app:layout_constraintBottom_toBottomOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>
<layout>
```

いくつかの文字列 ID を参照しました。全 `strings.xml` ファイルを作成しましょう。

```
<resources>
    <string name="app_name">BasicRealTime</string>
    <string name="join">Join</string>
    <string name="leave">Leave</string>
    <string name="token">Participant Token</string>
    <string name="publish">Publish</string>
    <string name="state">State: %1$s</string>
</resources>
```

XML 内のこれらのビューを `MainActivity.kt` にリンクしましょう。

```
import android.widget.Button
import android.widget.CheckBox
import android.widget.EditText
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

private lateinit var checkboxPublish: CheckBox
private lateinit var recyclerView: RecyclerView
private lateinit var buttonJoin: Button
private lateinit var textViewState: TextView
private lateinit var editTextToken: EditText

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    checkboxPublish = findViewById(R.id.main_publish_checkbox)
    recyclerView = findViewById(R.id.main_recycler_view)
    buttonJoin = findViewById(R.id.main_join)
    textViewState = findViewById(R.id.main_state)
    editTextToken = findViewById(R.id.main_token)
}
```

次に、`RecyclerView` のアイテムビューを作成します。これを実行するには、`res/layout` ディレクトリを右クリックして **[新規 > レイアウトリソースファイル]** を選択します。この新しいファイルの名前は `item_stage_participant.xml` にします。

![\[Android アプリの RecyclerView 用アイテムビューを作成します。\]](http://docs.aws.amazon.com/ja_jp/ivs/latest/RealTimeUserGuide/images/Publish_Android_2.png)


このアイテムのレイアウトはシンプルです。参加者のビデオストリームをレンダリングするためのビューと、参加者に関する情報を表示するためのラベルのリストが含まれています。

![\[Android アプリの RecyclerView 用アイテムビューを作成します - ラベル。\]](http://docs.aws.amazon.com/ja_jp/ivs/latest/RealTimeUserGuide/images/Publish_Android_3.png)


XML は次のようになります。

```
<?xml version="1.0" encoding="utf-8"?>
<com.amazonaws.ivs.realtime.basicrealtime.ParticipantItem xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/participant_preview_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:background="@android:color/darker_gray" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:background="#50000000"
        android:orientation="vertical"
        android:paddingLeft="4dp"
        android:paddingTop="2dp"
        android:paddingRight="4dp"
        android:paddingBottom="2dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/participant_participant_id"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@android:color/white"
            android:textSize="16sp"
            tools:text="You (Disconnected)" />

        <TextView
            android:id="@+id/participant_publishing"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@android:color/white"
            android:textSize="16sp"
            tools:text="NOT_PUBLISHED" />

        <TextView
            android:id="@+id/participant_subscribed"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@android:color/white"
            android:textSize="16sp"
            tools:text="NOT_SUBSCRIBED" />

        <TextView
            android:id="@+id/participant_video_muted"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@android:color/white"
            android:textSize="16sp"
            tools:text="Video Muted: false" />

        <TextView
            android:id="@+id/participant_audio_muted"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@android:color/white"
            android:textSize="16sp"
            tools:text="Audio Muted: false" />

        <TextView
            android:id="@+id/participant_audio_level"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@android:color/white"
            android:textSize="16sp"
            tools:text="Audio Level: -100 dB" />

    </LinearLayout>

</com.amazonaws.ivs.realtime.basicrealtime.ParticipantItem>
```

この XML ファイルは、まだ作成していないクラス `ParticipantItem` を展開します。XML にはフル名前空間が含まれているため、この XML ファイルを必ず自分の名前空間に更新してください。このクラスを作成してビューを設定しましょう。または、とりあえず空白のままにしておくこともできます。

新しい Kotlin クラス `ParticipantItem` の作成:

```
package com.amazonaws.ivs.realtime.basicrealtime

import android.content.Context
import android.util.AttributeSet
import android.widget.FrameLayout
import android.widget.TextView
import kotlin.math.roundToInt

class ParticipantItem @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0,
    defStyleRes: Int = 0,
) : FrameLayout(context, attrs, defStyleAttr, defStyleRes) {

    private lateinit var previewContainer: FrameLayout
    private lateinit var textViewParticipantId: TextView
    private lateinit var textViewPublish: TextView
    private lateinit var textViewSubscribe: TextView
    private lateinit var textViewVideoMuted: TextView
    private lateinit var textViewAudioMuted: TextView
    private lateinit var textViewAudioLevel: TextView

    override fun onFinishInflate() {
        super.onFinishInflate()
        previewContainer = findViewById(R.id.participant_preview_container)
        textViewParticipantId = findViewById(R.id.participant_participant_id)
        textViewPublish = findViewById(R.id.participant_publishing)
        textViewSubscribe = findViewById(R.id.participant_subscribed)
        textViewVideoMuted = findViewById(R.id.participant_video_muted)
        textViewAudioMuted = findViewById(R.id.participant_audio_muted)
        textViewAudioLevel = findViewById(R.id.participant_audio_level)
    }
}
```

## アクセス許可
<a name="getting-started-pub-sub-android-perms"></a>

カメラとマイクを使用するには、ユーザーにアクセス許可をリクエストする必要があります。ここでは標準のアクセス許可フローに従います。

```
override fun onStart() {
    super.onStart()
    requestPermission()
}

private val requestPermissionLauncher =
    registerForActivityResult(ActivityResultContracts.RequestMultiplePermissions()) { permissions ->
        if (permissions[Manifest.permission.CAMERA] == true && permissions[Manifest.permission.RECORD_AUDIO] == true) {
            viewModel.permissionGranted() // we will add this later
        }
    }

private val permissions = listOf(
    Manifest.permission.CAMERA,
    Manifest.permission.RECORD_AUDIO,
)

private fun requestPermission() {
    when {
        this.hasPermissions(permissions) -> viewModel.permissionGranted() // we will add this later
        else -> requestPermissionLauncher.launch(permissions.toTypedArray())
    }
}

private fun Context.hasPermissions(permissions: List<String>): Boolean {
    return permissions.all {
        ContextCompat.checkSelfPermission(this, it) == PackageManager.PERMISSION_GRANTED
    }
}
```

## アプリの状態
<a name="getting-started-pub-sub-android-app-state"></a>

このアプリケーションは、`MainViewModel.kt` で参加者をローカルで追跡し、状態を Kotlin の [StateFlow](https://kotlinlang.org/api/kotlinx.coroutines/kotlinx-coroutines-core/kotlinx.coroutines.flow/-state-flow/) を使用して `MainActivity` に返します。

新しい Kotlin クラス `MainViewModel` の作成:

```
package com.amazonaws.ivs.realtime.basicrealtime

import android.app.Application
import androidx.lifecycle.AndroidViewModel

class MainViewModel(application: Application) : AndroidViewModel(application), Stage.Strategy, StageRenderer {

}
```

`MainActivity.kt` で、ビューモデルを管理します。

```
import androidx.activity.viewModels

private val viewModel: MainViewModel by viewModels()
```

`AndroidViewModel` とこれらの Kotlin `ViewModel` 拡張機能を使用するには、モジュールの `build.gradle` ファイルに以下を追加する必要があります。

```
implementation 'androidx.core:core-ktx:1.10.1'
implementation "androidx.activity:activity-ktx:1.7.2"
implementation 'androidx.appcompat:appcompat:1.6.1'
implementation 'com.google.android.material:material:1.10.0'
implementation "androidx.lifecycle:lifecycle-extensions:2.2.0"

def lifecycle_version = "2.6.1"
implementation "androidx.lifecycle:lifecycle-livedata-ktx:$lifecycle_version"
implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:$lifecycle_version"
implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
```

### RecyclerView アダプター
<a name="getting-started-pub-sub-android-app-state-recycler"></a>

簡単な `RecyclerView.Adapter` サブクラスを作成して参加者を追跡し、ステージイベント上の `RecyclerView` を更新します。まずはその前に、参加者を表すクラスが必要です。新しい Kotlin クラス `StageParticipant` の作成:

```
package com.amazonaws.ivs.realtime.basicrealtime

import com.amazonaws.ivs.broadcast.Stage
import com.amazonaws.ivs.broadcast.StageStream

class StageParticipant(val isLocal: Boolean, var participantId: String?) {
    var publishState = Stage.PublishState.NOT_PUBLISHED
    var subscribeState = Stage.SubscribeState.NOT_SUBSCRIBED
    var streams = mutableListOf<StageStream>()

    val stableID: String
        get() {
            return if (isLocal) {
                "LocalUser"
            } else {
                requireNotNull(participantId)
            }
        }
}
```

このクラスは次に作成する `ParticipantAdapter` クラス内で使用します。まずクラスを定義し、参加者を追跡する変数を作成します。

```
package com.amazonaws.ivs.realtime.basicrealtime

import android.view.LayoutInflater
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView

class ParticipantAdapter : RecyclerView.Adapter<ParticipantAdapter.ViewHolder>() {

    private val participants = mutableListOf<StageParticipant>()
```

また、残りのオーバーライドを実装する前に、`RecyclerView.ViewHolder` を定義する必要があります。

```
class ViewHolder(val participantItem: ParticipantItem) : RecyclerView.ViewHolder(participantItem)
```

これを使用して、標準の `RecyclerView.Adapter` オーバーライドを実装できます。

```
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
    val item = LayoutInflater.from(parent.context)
        .inflate(R.layout.item_stage_participant, parent, false) as ParticipantItem
    return ViewHolder(item)
}

override fun getItemCount(): Int {
    return participants.size
}

override fun getItemId(position: Int): Long =
    participants[position]
        .stableID
        .hashCode()
        .toLong()

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    return holder.participantItem.bind(participants[position])
}

override fun onBindViewHolder(holder: ViewHolder, position: Int, payloads: MutableList<Any>) {
    val updates = payloads.filterIsInstance<StageParticipant>()
    if (updates.isNotEmpty()) {
        updates.forEach { holder.participantItem.bind(it) // implemented later }
    } else {
        super.onBindViewHolder(holder, position, payloads)
    }
}
```

最後に、参加者に変更が加えられたときに `MainViewModel` から呼び出す、新しいメソッドを追加します。これらのメソッドはアダプターの標準的な CRUD 操作です。

```
fun participantJoined(participant: StageParticipant) {
    participants.add(participant)
    notifyItemInserted(participants.size - 1)
}

fun participantLeft(participantId: String) {
    val index = participants.indexOfFirst { it.participantId == participantId }
    if (index != -1) {
        participants.removeAt(index)
        notifyItemRemoved(index)
    }
}

fun participantUpdated(participantId: String?, update: (participant: StageParticipant) -> Unit) {
    val index = participants.indexOfFirst { it.participantId == participantId }
    if (index != -1) {
        update(participants[index])
        notifyItemChanged(index, participants[index])
    }
}
```

`MainViewModel` に戻り、このアダプターへの参照を作成して保持する必要があります。

```
internal val participantAdapter = ParticipantAdapter()
```

## ステージの状態
<a name="getting-started-pub-sub-android-views-stage-state"></a>

また、`MainViewModel` 内のステージ状態も追跡する必要があります。これらのプロパティを定義しましょう。

```
private val _connectionState = MutableStateFlow(Stage.ConnectionState.DISCONNECTED)
val connectionState = _connectionState.asStateFlow()

private var publishEnabled: Boolean = false
    set(value) {
        field = value
        // Because the strategy returns the value of `checkboxPublish.isChecked`, just call `refreshStrategy`.
        stage?.refreshStrategy()
    }

private var deviceDiscovery: DeviceDiscovery? = null
private var stage: Stage? = null
private var streams = mutableListOf<LocalStageStream>()
```

ステージに参加する前に自分のプレビューを確認できるように、ローカル参加者をすぐに作成します。

```
init {
    deviceDiscovery = DeviceDiscovery(application)

    // Create a local participant immediately to render our camera preview and microphone stats
    val localParticipant = StageParticipant(true, null)
    participantAdapter.participantJoined(localParticipant)
}
```

これらのリソースは、`ViewModel` がクリーンアップされたときに確実にクリーンアップされるようにします。これらのリソースのクリーンアップを忘れないように、今すぐ `onCleared()` をオーバーライドします。

```
override fun onCleared() {
    stage?.release()
    deviceDiscovery?.release()
    deviceDiscovery = null
    super.onCleared()
}
```

次に、権限が付与されたらすぐに、先ほど呼び出した `permissionsGranted` メソッドを実装してローカル `streams` プロパティに入力します。

```
internal fun permissionGranted() {
    val deviceDiscovery = deviceDiscovery ?: return
    streams.clear()
    val devices = deviceDiscovery.listLocalDevices()
    // Camera
    devices
        .filter { it.descriptor.type == Device.Descriptor.DeviceType.CAMERA }
        .maxByOrNull { it.descriptor.position == Device.Descriptor.Position.FRONT }
        ?.let { streams.add(ImageLocalStageStream(it)) }
    // Microphone
    devices
        .filter { it.descriptor.type == Device.Descriptor.DeviceType.MICROPHONE }
        .maxByOrNull { it.descriptor.isDefault }
        ?.let { streams.add(AudioLocalStageStream(it)) }

    stage?.refreshStrategy()

    // Update our local participant with these new streams
    participantAdapter.participantUpdated(null) {
        it.streams.clear()
        it.streams.addAll(streams)
    }
}
```

## ステージ SDK の実装
<a name="getting-started-pub-sub-android-stage-sdk"></a>

リアルタイム機能には、ステージ、ストラテジー、レンダラーという 3 つのコア[コンセプト](android-publish-subscribe.md#android-publish-subscribe-concepts)があります。設計目標は、実際に動作する製品を構築するのに必要となるクライアント側ロジックの量を最小限に抑えることです。

### Stage.Strategy
<a name="getting-started-pub-sub-android-stage-sdk-strategy"></a>

`Stage.Strategy` の実装は簡単です。

```
override fun stageStreamsToPublishForParticipant(
    stage: Stage,
    participantInfo: ParticipantInfo
): MutableList<LocalStageStream> {
    // Return the camera and microphone to be published.
    // This is only called if `shouldPublishFromParticipant` returns true.
    return streams
}

override fun shouldPublishFromParticipant(stage: Stage, participantInfo: ParticipantInfo): Boolean {
    return publishEnabled
}

override fun shouldSubscribeToParticipant(stage: Stage, participantInfo: ParticipantInfo): Stage.SubscribeType {
    // Subscribe to both audio and video for all publishing participants.
    return Stage.SubscribeType.AUDIO_VIDEO
}
```

要約すると、内部の `publishEnabled` 状態に基づいて公開し、公開する場合には、以前に収集したストリームを公開します。このサンプルでは、常に他の参加者を購読して、オーディオとビデオの両方を受信しています。

### StageRenderer
<a name="getting-started-pub-sub-android-stage-sdk-renderer"></a>

`StageRenderer` の実装も比較的簡単ですが、関数の数が多いことから含まれるコードの数がかなり多くなっています。このレンダラーの全体的なアプローチは、SDK から参加者の変更を通知されたときに `ParticipantAdapter` を更新するというものです。ローカル参加者が、参加する前にカメラのプレビューを確認できるように自分たちで管理することにしたため、一部のシナリオではローカル参加者の扱い方が異なる場合があります。

```
override fun onError(exception: BroadcastException) {
    Toast.makeText(getApplication(), "onError ${exception.localizedMessage}", Toast.LENGTH_LONG).show()
    Log.e("BasicRealTime", "onError $exception")
}

override fun onConnectionStateChanged(
    stage: Stage,
    connectionState: Stage.ConnectionState,
    exception: BroadcastException?
) {
    _connectionState.value = connectionState
}

override fun onParticipantJoined(stage: Stage, participantInfo: ParticipantInfo) {
    if (participantInfo.isLocal) {
        // If this is the local participant joining the stage, update the participant with a null ID because we
        // manually added that participant when setting up our preview
        participantAdapter.participantUpdated(null) {
            it.participantId = participantInfo.participantId
        }
    } else {
        // If they are not local, add them normally
        participantAdapter.participantJoined(
            StageParticipant(
                participantInfo.isLocal,
                participantInfo.participantId
            )
        )
    }
}

override fun onParticipantLeft(stage: Stage, participantInfo: ParticipantInfo) {
    if (participantInfo.isLocal) {
        // If this is the local participant leaving the stage, update the ID but keep it around because
        // we want to keep the camera preview active
        participantAdapter.participantUpdated(participantInfo.participantId) {
            it.participantId = null
        }
    } else {
        // If they are not local, have them leave normally
        participantAdapter.participantLeft(participantInfo.participantId)
    }
}

override fun onParticipantPublishStateChanged(
    stage: Stage,
    participantInfo: ParticipantInfo,
    publishState: Stage.PublishState
) {
    // Update the publishing state of this participant
    participantAdapter.participantUpdated(participantInfo.participantId) {
        it.publishState = publishState
    }
}

override fun onParticipantSubscribeStateChanged(
    stage: Stage,
    participantInfo: ParticipantInfo,
    subscribeState: Stage.SubscribeState
) {
    // Update the subscribe state of this participant
    participantAdapter.participantUpdated(participantInfo.participantId) {
        it.subscribeState = subscribeState
    }
}

override fun onStreamsAdded(stage: Stage, participantInfo: ParticipantInfo, streams: MutableList<StageStream>) {
    // We don't want to take any action for the local participant because we track those streams locally
    if (participantInfo.isLocal) {
        return
    }
    // For remote participants, add these new streams to that participant's streams array.
    participantAdapter.participantUpdated(participantInfo.participantId) {
        it.streams.addAll(streams)
    }
}

override fun onStreamsRemoved(stage: Stage, participantInfo: ParticipantInfo, streams: MutableList<StageStream>) {
    // We don't want to take any action for the local participant because we track those streams locally
    if (participantInfo.isLocal) {
        return
    }
    // For remote participants, remove these streams from that participant's streams array.
    participantAdapter.participantUpdated(participantInfo.participantId) {
        it.streams.removeAll(streams)
    }
}

override fun onStreamsMutedChanged(
    stage: Stage,
    participantInfo: ParticipantInfo,
    streams: MutableList<StageStream>
) {
    // We don't want to take any action for the local participant because we track those streams locally
    if (participantInfo.isLocal) {
        return
    }
    // For remote participants, notify the adapter that the participant has been updated. There is no need to modify
    // the `streams` property on the `StageParticipant` because it is the same `StageStream` instance. Just
    // query the `isMuted` property again.
    participantAdapter.participantUpdated(participantInfo.participantId) {}
}
```

## カスタム RecyclerView LayoutManager の実装
<a name="getting-started-pub-sub-android-layout"></a>

異なる人数の参加者をレイアウトするのは複雑です。親ビューのフレーム全体を占めるようにしたいものの、各参加者の設定を個別に処理するのは面倒です。これを簡単にするために、`RecyclerView.LayoutManager` の実装について順を追って説明します。

別の新しいクラスとなる `StageLayoutManager` を作成します。これが、`GridLayoutManager` を拡張します。このクラスは、フローベースの行/列レイアウトの参加者数に基づいて、各参加者のレイアウトを計算するように設計されています。各行の高さは他の行と同じですが、列の幅は行ごとに異なる場合があります。この動作をカスタマイズする方法については、`layouts` 変数の上のあるコードコメントを参照してください。

```
package com.amazonaws.ivs.realtime.basicrealtime

import android.content.Context
import androidx.recyclerview.widget.GridLayoutManager
import androidx.recyclerview.widget.RecyclerView

class StageLayoutManager(context: Context?) : GridLayoutManager(context, 6) {

    companion object {
        /**
         * This 2D array contains the description of how the grid of participants should be rendered
         * The index of the 1st dimension is the number of participants needed to active that configuration
         * Meaning if there is 1 participant, index 0 will be used. If there are 5 participants, index 4 will be used.
         *
         * The 2nd dimension is a description of the layout. The length of the array is the number of rows that
         * will exist, and then each number within that array is the number of columns in each row.
         *
         * See the code comments next to each index for concrete examples.
         *
         * This can be customized to fit any layout configuration needed.
         */
        val layouts: List<List<Int>> = listOf(
            // 1 participant
            listOf(1), // 1 row, full width
            // 2 participants
            listOf(1, 1), // 2 rows, all columns are full width
            // 3 participants
            listOf(1, 2), // 2 rows, first row's column is full width then 2nd row's columns are 1/2 width
            // 4 participants
            listOf(2, 2), // 2 rows, all columns are 1/2 width
            // 5 participants
            listOf(1, 2, 2), // 3 rows, first row's column is full width, 2nd and 3rd row's columns are 1/2 width
            // 6 participants
            listOf(2, 2, 2), // 3 rows, all column are 1/2 width
            // 7 participants
            listOf(2, 2, 3), // 3 rows, 1st and 2nd row's columns are 1/2 width, 3rd row's columns are 1/3rd width
            // 8 participants
            listOf(2, 3, 3),
            // 9 participants
            listOf(3, 3, 3),
            // 10 participants
            listOf(2, 3, 2, 3),
            // 11 participants
            listOf(2, 3, 3, 3),
            // 12 participants
            listOf(3, 3, 3, 3),
        )
    }

    init {
        spanSizeLookup = object : SpanSizeLookup() {
            override fun getSpanSize(position: Int): Int {
                if (itemCount <= 0) {
                    return 1
                }
                // Calculate the row we're in
                val config = layouts[itemCount - 1]
                var row = 0
                var curPosition = position
                while (curPosition - config[row] >= 0) {
                    curPosition -= config[row]
                    row++
                }
                // spanCount == max spans, config[row] = number of columns we want
                // So spanCount / config[row] would be something like 6 / 3 if we want 3 columns.
                // So this will take up 2 spans, with a max of 6 is 1/3rd of the view.
                return spanCount / config[row]
            }
        }
    }

    override fun onLayoutChildren(recycler: RecyclerView.Recycler?, state: RecyclerView.State?) {
        if (itemCount <= 0 || state?.isPreLayout == true) return

        val parentHeight = height
        val itemHeight = parentHeight / layouts[itemCount - 1].size // height divided by number of rows.

        // Set the height of each view based on how many rows exist for the current participant count.
        for (i in 0 until childCount) {
            val child = getChildAt(i) ?: continue
            val layoutParams = child.layoutParams as RecyclerView.LayoutParams
            if (layoutParams.height != itemHeight) {
                layoutParams.height = itemHeight
                child.layoutParams = layoutParams
            }
        }
        // After we set the height for all our views, call super.
        // This works because our RecyclerView can not scroll and all views are always visible with stable IDs.
        super.onLayoutChildren(recycler, state)
    }

    override fun canScrollVertically(): Boolean = false
    override fun canScrollHorizontally(): Boolean = false
}
```

`MainActivity.kt` に戻り、`RecyclerView` のアダプターとレイアウトマネージャーを設定する必要があります。

```
// In onCreate after setting recyclerView.
recyclerView.layoutManager = StageLayoutManager(this)
recyclerView.adapter = viewModel.participantAdapter
```

## UI アクションの接続
<a name="getting-started-pub-sub-android-actions"></a>

もうすぐ完了です。接続する必要がある UI アクションがあと少しあるだけです。

まず、`MainActivity` に `MainViewModel` からの `StateFlow` の変更を観察させます。

```
// At the end of your onCreate method
lifecycleScope.launch {
    repeatOnLifecycle(Lifecycle.State.CREATED) {
        viewModel.connectionState.collect { state ->
            buttonJoin.setText(if (state == ConnectionState.DISCONNECTED) R.string.join else R.string.leave)
            textViewState.text = getString(R.string.state, state.name)
        }
    }
}
```

次に、[参加] ボタンと [公開] チェックボックスにリスナーを追加します。

```
buttonJoin.setOnClickListener {
    viewModel.joinStage(editTextToken.text.toString())
}
checkboxPublish.setOnCheckedChangeListener { _, isChecked ->
    viewModel.setPublishEnabled(isChecked)
}
```

上記の両方とも、`MainViewModel` の関数 (今から実装します) を呼び出します。

```
internal fun joinStage(token: String) {
    if (_connectionState.value != Stage.ConnectionState.DISCONNECTED) {
        // If we're already connected to a stage, leave it.
        stage?.leave()
    } else {
        if (token.isEmpty()) {
            Toast.makeText(getApplication(), "Empty Token", Toast.LENGTH_SHORT).show()
            return
        }
        try {
            // Destroy the old stage first before creating a new one.
            stage?.release()
            val stage = Stage(getApplication(), token, this)
            stage.addRenderer(this)
            stage.join()
            this.stage = stage
        } catch (e: BroadcastException) {
            Toast.makeText(getApplication(), "Failed to join stage ${e.localizedMessage}", Toast.LENGTH_LONG).show()
            e.printStackTrace()
        }
    }
}

internal fun setPublishEnabled(enabled: Boolean) {
    publishEnabled = enabled
}
```

## 参加者のレンダリング
<a name="getting-started-pub-sub-android-participants"></a>

最後に、SDK から受け取ったデータを、先ほど作成した参加者アイテムにレンダリングする必要があります。`RecyclerView` ロジックはすでに完了しているので、`ParticipantItem` の `bind` API を実装するだけです。

空の関数を追加することから始めて、1 つずつ見ていきましょう。

```
fun bind(participant: StageParticipant) {

}
```

まず、簡易状態、参加者 ID、公開状態、サブスクライブ状態を処理します。これらについては、`TextViews` を直接更新します。

```
val participantId = if (participant.isLocal) {
    "You (${participant.participantId ?: "Disconnected"})"
} else {
    participant.participantId
}
textViewParticipantId.text = participantId
textViewPublish.text = participant.publishState.name
textViewSubscribe.text = participant.subscribeState.name
```

次に、オーディオとビデオのミュート状態を更新します。ミュート状態を取得するには、ストリーム配列から `ImageDevice` と `AudioDevice` を見つける必要があります。パフォーマンスを最適化するために、最後にアタッチされたデバイス ID を記憶しています。

```
// This belongs outside the `bind` API.
private var imageDeviceUrn: String? = null
private var audioDeviceUrn: String? = null

// This belongs inside the `bind` API.
val newImageStream = participant
    .streams
    .firstOrNull { it.device is ImageDevice }
textViewVideoMuted.text = if (newImageStream != null) {
    if (newImageStream.muted) "Video muted" else "Video not muted"
} else {
    "No video stream"
}

val newAudioStream = participant
    .streams
    .firstOrNull { it.device is AudioDevice }
textViewAudioMuted.text = if (newAudioStream != null) {
    if (newAudioStream.muted) "Audio muted" else "Audio not muted"
} else {
    "No audio stream"
}
```

最後に、`imageDevice` のプレビューをレンダリングします。

```
if (newImageStream?.device?.descriptor?.urn != imageDeviceUrn) {
    // If the device has changed, remove all subviews from the preview container
    previewContainer.removeAllViews()
    (newImageStream?.device as? ImageDevice)?.let {
        val preview = it.getPreviewView(BroadcastConfiguration.AspectMode.FIT)
        previewContainer.addView(preview)
        preview.layoutParams = FrameLayout.LayoutParams(
            FrameLayout.LayoutParams.MATCH_PARENT,
            FrameLayout.LayoutParams.MATCH_PARENT
        )
    }
}
imageDeviceUrn = newImageStream?.device?.descriptor?.urn
```

そして、`audioDevice` からのオーディオ状態を表示します。

```
if (newAudioStream?.device?.descriptor?.urn != audioDeviceUrn) {
    (newAudioStream?.device as? AudioDevice)?.let {
        it.setStatsCallback { _, rms ->
            textViewAudioLevel.text = "Audio Level: ${rms.roundToInt()} dB"
        }
    }
}
audioDeviceUrn = newAudioStream?.device?.descriptor?.urn
```

# IVS iOS Broadcast SDK を使用してパブリッシュおよびサブスクライブする
<a name="getting-started-pub-sub-ios"></a>

このセクションでは、iOS アプリケーションを使用してステージに発行およびサブスクライブする手順について説明します。

## ビューの作成
<a name="getting-started-pub-sub-ios-views"></a>

まず、自動作成された `ViewController.swift` ファイルを使用して `AmazonIVSBroadcast` をインポートし、リンクにいくつか `@IBOutlets` を追加します。

```
import AmazonIVSBroadcast

class ViewController: UIViewController {

    @IBOutlet private var textFieldToken: UITextField!
    @IBOutlet private var buttonJoin: UIButton!
    @IBOutlet private var labelState: UILabel!
    @IBOutlet private var switchPublish: UISwitch!
    @IBOutlet private var collectionViewParticipants: UICollectionView!
```

次に、これらのビューを作成して `Main.storyboard` でリンクします。使用するビュー構造は次のとおりです。

![\[Main.storyboard を使用して iOS ビューを作成します。\]](http://docs.aws.amazon.com/ja_jp/ivs/latest/RealTimeUserGuide/images/Publish_iOS_1.png)


AutoLayout 設定では、3 つのビューをカスタマイズする必要があります。ズする必要があります。最初のビューは **[Collection View Participants]** (`UICollectionView`) です。**[Leading]**、**[Trailing]**、**[Bottom]** を **[Safe Area]** にバインドします。また、**[Top]** も **[Controls Container]** にバインドします。

![\[iOS コレクションビュー参加者ビューをカスタマイズします。\]](http://docs.aws.amazon.com/ja_jp/ivs/latest/RealTimeUserGuide/images/Publish_iOS_2.png)


2 番目のビューは **[コントロールコンテナ]** です。**[先頭]**、**[末尾]**、**[上]** を **[安全エリア]** にバインドしました。

![\[iOS コントロールコンテナビューをカスタマイズします。\]](http://docs.aws.amazon.com/ja_jp/ivs/latest/RealTimeUserGuide/images/Publish_iOS_3.png)


3 番目の最後のビューは **[垂直スタックビュー]** です。**[上]**、**[先頭]**、**[末尾]**、**[下]** を **[Superview]** にバインドしました。スタイルを設定するには、間隔を 0 ではなく 8 に設定します。

![\[iOS の垂直スタックビューをカスタマイズします。\]](http://docs.aws.amazon.com/ja_jp/ivs/latest/RealTimeUserGuide/images/Publish_iOS_4.png)


**[UIStackViews]** が残りのビューのレイアウトを処理します。3 つの **[UIStackViews]** すべてに対して、**[配置]** と **[配信]** には **[入力]** を使用します。

![\[残りの iOS ビューは UIStackViews でカスタマイズします。\]](http://docs.aws.amazon.com/ja_jp/ivs/latest/RealTimeUserGuide/images/Publish_iOS_5.png)


最後に、これらのビューを `ViewController` にリンクしましょう。上から、次のビューをマッピングします。
+ **[テキストフィールド結合]** を `textFieldToken` にバインドします。
+ **[ボタン結合]** を `buttonJoin` にバインドします。
+ **[ラベル状態]** を `labelState` にバインドします。
+ **[公開の切り替え]** を `switchPublish` にバインドします。
+ **[コレクションビュー参加者]** を `collectionViewParticipants` にバインドします。

また、この時間を利用して、**[コレクションビュー参加者]** 項目の `dataSource` を所有する `ViewController` に設定します。

![\[iOS アプリのコレクションビュー参加者の dataSource を設定します。\]](http://docs.aws.amazon.com/ja_jp/ivs/latest/RealTimeUserGuide/images/Publish_iOS_6.png)


次に、参加者をレンダリングする `UICollectionViewCell` サブクラスを作成します。まず、新しい**[Cocoa Touch Class]** ファイルを作成します。

![\[UICollectionViewCell を作成して iOS リアルタイム参加者をレンダリングします。\]](http://docs.aws.amazon.com/ja_jp/ivs/latest/RealTimeUserGuide/images/Publish_iOS_7.png)


`ParticipantUICollectionViewCell` と名前を付けて、Swift 内にある `UICollectionViewCell` のサブクラスにします。もう一度、Swift ファイルから始めます。リンクする `@IBOutlets` を作成します。

```
import AmazonIVSBroadcast

class ParticipantCollectionViewCell: UICollectionViewCell {

    @IBOutlet private var viewPreviewContainer: UIView!
    @IBOutlet private var labelParticipantId: UILabel!
    @IBOutlet private var labelSubscribeState: UILabel!
    @IBOutlet private var labelPublishState: UILabel!
    @IBOutlet private var labelVideoMuted: UILabel!
    @IBOutlet private var labelAudioMuted: UILabel!
    @IBOutlet private var labelAudioVolume: UILabel!
```

関連付けられている XIB ファイルに、次のビュー階層を作成します。

![\[関連付けられている XIB ファイルに iOS ビュー階層を作成します。\]](http://docs.aws.amazon.com/ja_jp/ivs/latest/RealTimeUserGuide/images/Publish_iOS_8.png)


AutoLayout では、もう一度 3 つのビューを変更します。最初のビューは **[ビュープレビューコンテナ]** です。**[末尾]**、**[先頭]**、**[上]**、**[下]** を **[参加者コレクションビューセル]** に設定します。

![\[iOS ビュープレビューコンテナのビューをカスタマイズします。\]](http://docs.aws.amazon.com/ja_jp/ivs/latest/RealTimeUserGuide/images/Publish_iOS_9.png)


2 番目のビューは **[ビュー]** です。**[先頭]** および **[上]** を **[参加者コレクションビューセル]** に設定して、値を 4 に変更します。

![\[iOS ビューのビューをカスタマイズします。\]](http://docs.aws.amazon.com/ja_jp/ivs/latest/RealTimeUserGuide/images/Publish_iOS_10.png)


3 番目のビューは **[スタックビュー]** です。**[末尾]**、**[先頭]**、**[上]**、**[下]** を **[スーパービュー]** に設定して、値を 4 に変更します。

![\[iOS スタックビューのビューをカスタマイズします。\]](http://docs.aws.amazon.com/ja_jp/ivs/latest/RealTimeUserGuide/images/Publish_iOS_11.png)


## アクセス許可とアイドルタイマー
<a name="getting-started-pub-sub-ios-perms"></a>

`ViewController` に戻り、アプリケーションの使用中にデバイスがスリープ状態にならないように、システムのアイドルタイマーを無効にします。

```
override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    // Prevent the screen from turning off during a call.
    UIApplication.shared.isIdleTimerDisabled = true
}

override func viewDidDisappear(_ animated: Bool) {
    super.viewDidDisappear(animated)
    UIApplication.shared.isIdleTimerDisabled = false
}
```

次に、システムにカメラとマイクへのアクセス許可をリクエストします。

```
private func checkPermissions() {
    checkOrGetPermission(for: .video) { [weak self] granted in
        guard granted else {
            print("Video permission denied")
            return
        }
        self?.checkOrGetPermission(for: .audio) { [weak self] granted in
            guard granted else {
                print("Audio permission denied")
                return
            }
            self?.setupLocalUser() // we will cover this later
        }
    }
}

private func checkOrGetPermission(for mediaType: AVMediaType, _ result: @escaping (Bool) -> Void) {
    func mainThreadResult(_ success: Bool) {
        DispatchQueue.main.async {
            result(success)
        }
    }
    switch AVCaptureDevice.authorizationStatus(for: mediaType) {
    case .authorized: mainThreadResult(true)
    case .notDetermined:
        AVCaptureDevice.requestAccess(for: mediaType) { granted in
            mainThreadResult(granted)
        }
    case .denied, .restricted: mainThreadResult(false)
    @unknown default: mainThreadResult(false)
    }
}
```

## アプリの状態
<a name="getting-started-pub-sub-ios-app-state"></a>

`collectionViewParticipants` を、先ほど作成したレイアウトファイルで設定する必要があります。

```
override func viewDidLoad() {
    super.viewDidLoad()
    // We render everything to exactly the frame, so don't allow scrolling.
    collectionViewParticipants.isScrollEnabled = false
    collectionViewParticipants.register(UINib(nibName: "ParticipantCollectionViewCell", bundle: .main), forCellWithReuseIdentifier: "ParticipantCollectionViewCell")
}
```

各参加者を表すために、`StageParticipant` という名の単純な構造体を作成します。これは `ViewController.swift` ファイルに記述することができますが、新しいファイルを作成してもかまいません。

```
import Foundation
import AmazonIVSBroadcast

struct StageParticipant {
    let isLocal: Bool
    var participantId: String?
    var publishState: IVSParticipantPublishState = .notPublished
    var subscribeState: IVSParticipantSubscribeState = .notSubscribed
    var streams: [IVSStageStream] = []

    init(isLocal: Bool, participantId: String?) {
        self.isLocal = isLocal
        self.participantId = participantId
    }
}
```

これらの参加者を追跡するために、参加者の配列を `ViewController` にプライベートプロパティとして保持します。

```
private var participants = [StageParticipant]()
```

このプロパティは、先ほどストーリーボードからリンクされた `UICollectionViewDataSource` に使用します。

```
extension ViewController: UICollectionViewDataSource {

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return participants.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        if let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ParticipantCollectionViewCell", for: indexPath) as? ParticipantCollectionViewCell {
            cell.set(participant: participants[indexPath.row])
            return cell
        } else {
            fatalError("Couldn't load custom cell type 'ParticipantCollectionViewCell'")
        }
    }

}
```

ステージに参加する前に自分のプレビューを確認できるように、ローカル参加者をすぐに作成します。

```
override func viewDidLoad() {
    /* existing UICollectionView code */
    participants.append(StageParticipant(isLocal: true, participantId: nil))
}
```

これにより、アプリが実行されるとすぐに、ローカル参加者を表す参加者セルがレンダリングされます。

ユーザーには、ステージに参加する前に自分自身を確認する機能が必要です。このため、次に、先程のアクセス許可処理コードから呼び出されれる `setupLocalUser()` メソッドを実装します。カメラとマイクのリファレンスは `IVSLocalStageStream` オブジェクトとして保存します。。

```
private var streams = [IVSLocalStageStream]()
private let deviceDiscovery = IVSDeviceDiscovery()

private func setupLocalUser() {
    // Gather our camera and microphone once permissions have been granted
    let devices = deviceDiscovery.listLocalDevices()
    streams.removeAll()
    if let camera = devices.compactMap({ $0 as? IVSCamera }).first {
        streams.append(IVSLocalStageStream(device: camera))
        // Use a front camera if available.
        if let frontSource = camera.listAvailableInputSources().first(where: { $0.position == .front }) {
            camera.setPreferredInputSource(frontSource)
        }
    }
    if let mic = devices.compactMap({ $0 as? IVSMicrophone }).first {
        streams.append(IVSLocalStageStream(device: mic))
    }
    participants[0].streams = streams
    participantsChanged(index: 0, changeType: .updated)
}
```

ここでは、SDK を通してデバイスのカメラとマイクを検出し、それらをローカルの `streams` オブジェクトに格納し、その後、最初の参加者 (先ほど作成したローカル参加者) の `streams` 配列を `streams` に割り当てています。最後に、0 の `index` と`updated` の `changeType` で `participantsChanged` を呼び出します。この関数は、適切なアニメーション付きで `UICollectionView` を更新するヘルパー関数です。以下のようになります。

```
private func participantsChanged(index: Int, changeType: ChangeType) {
    switch changeType {
    case .joined:
        collectionViewParticipants?.insertItems(at: [IndexPath(item: index, section: 0)])
    case .updated:
        // Instead of doing reloadItems, just grab the cell and update it ourselves. It saves a create/destroy of a cell
        // and more importantly fixes some UI flicker. We disable scrolling so the index path per cell
        // never changes.
        if let cell = collectionViewParticipants?.cellForItem(at: IndexPath(item: index, section: 0)) as? ParticipantCollectionViewCell {
            cell.set(participant: participants[index])
        }
    case .left:
        collectionViewParticipants?.deleteItems(at: [IndexPath(item: index, section: 0)])
    }
}
```

`cell.set` については後で説明しますが、ここで参加者に基づいてセルの内容をレンダリングします。

`ChangeType` は単純な列挙型です。

```
enum ChangeType {
    case joined, updated, left
}
```

最後に、ステージが接続されているかどうかを追跡しましょう。追跡にはシンプルな `bool` を使用します。これ自身が更新されると、UI も自動的に更新されます。

```
private var connectingOrConnected = false {
    didSet {
        buttonJoin.setTitle(connectingOrConnected ? "Leave" : "Join", for: .normal)
        buttonJoin.tintColor = connectingOrConnected ? .systemRed : .systemBlue
    }
}
```

## ステージ SDK の実装
<a name="getting-started-pub-sub-ios-stage-sdk"></a>

リアルタイム機能には、ステージ、ストラテジー、レンダラーという 3 つのコア[コンセプト](ios-publish-subscribe.md#ios-publish-subscribe-concepts)があります。設計目標は、実際に動作する製品を構築するのに必要となるクライアント側ロジックの量を最小限に抑えることです。

### IVSStageStrategy
<a name="getting-started-pub-sub-ios-stage-sdk-strategy"></a>

`IVSStageStrategy` の実装は簡単です。

```
extension ViewController: IVSStageStrategy {
    func stage(_ stage: IVSStage, streamsToPublishForParticipant participant: IVSParticipantInfo) -> [IVSLocalStageStream] {
        // Return the camera and microphone to be published.
        // This is only called if `shouldPublishParticipant` returns true.
        return streams
    }

    func stage(_ stage: IVSStage, shouldPublishParticipant participant: IVSParticipantInfo) -> Bool {
        // Our publish status is based directly on the UISwitch view
        return switchPublish.isOn
    }

    func stage(_ stage: IVSStage, shouldSubscribeToParticipant participant: IVSParticipantInfo) -> IVSStageSubscribeType {
        // Subscribe to both audio and video for all publishing participants.
        return .audioVideo
    }
}
```

簡単に説明すると、公開スイッチが「オン」の位置にある場合にのみ公開し、公開する場合には、以前に収集したストリームが公開されます。このサンプルでは、常に他の参加者をサブスクライブして、オーディオとビデオの両方を受信しています。

### IVSStageRenderer
<a name="getting-started-pub-sub-ios-stage-sdk-renderer"></a>

`IVSStageRenderer` の実装も比較的簡単ですが、関数の数が多いことから含まれるコードの数がかなり多くなっています。このレンダラーの全体的なアプローチは、SDK から参加者の変更を通知されたときに `participants` 配列を更新するというものです。ローカル参加者が、参加する前にカメラのプレビューを確認できるように自分たちで管理することにしたため、一部のシナリオではローカル参加者の扱い方が異なる場合があります。

```
extension ViewController: IVSStageRenderer {

    func stage(_ stage: IVSStage, didChange connectionState: IVSStageConnectionState, withError error: Error?) {
        labelState.text = connectionState.text
        connectingOrConnected = connectionState != .disconnected
    }

    func stage(_ stage: IVSStage, participantDidJoin participant: IVSParticipantInfo) {
        if participant.isLocal {
            // If this is the local participant joining the Stage, update the first participant in our array because we
            // manually added that participant when setting up our preview
            participants[0].participantId = participant.participantId
            participantsChanged(index: 0, changeType: .updated)
        } else {
            // If they are not local, add them to the array as a newly joined participant.
            participants.append(StageParticipant(isLocal: false, participantId: participant.participantId))
            participantsChanged(index: (participants.count - 1), changeType: .joined)
        }
    }

    func stage(_ stage: IVSStage, participantDidLeave participant: IVSParticipantInfo) {
        if participant.isLocal {
            // If this is the local participant leaving the Stage, update the first participant in our array because
            // we want to keep the camera preview active
            participants[0].participantId = nil
            participantsChanged(index: 0, changeType: .updated)
        } else {
            // If they are not local, find their index and remove them from the array.
            if let index = participants.firstIndex(where: { $0.participantId == participant.participantId }) {
                participants.remove(at: index)
                participantsChanged(index: index, changeType: .left)
            }
        }
    }

    func stage(_ stage: IVSStage, participant: IVSParticipantInfo, didChange publishState: IVSParticipantPublishState) {
        // Update the publishing state of this participant
        mutatingParticipant(participant.participantId) { data in
            data.publishState = publishState
        }
    }

    func stage(_ stage: IVSStage, participant: IVSParticipantInfo, didChange subscribeState: IVSParticipantSubscribeState) {
        // Update the subscribe state of this participant
        mutatingParticipant(participant.participantId) { data in
            data.subscribeState = subscribeState
        }
    }

    func stage(_ stage: IVSStage, participant: IVSParticipantInfo, didChangeMutedStreams streams: [IVSStageStream]) {
        // We don't want to take any action for the local participant because we track those streams locally
        if participant.isLocal { return }
        // For remote participants, notify the UICollectionView that they have updated. There is no need to modify
        // the `streams` property on the `StageParticipant` because it is the same `IVSStageStream` instance. Just
        // query the `isMuted` property again.
        if let index = participants.firstIndex(where: { $0.participantId == participant.participantId }) {
            participantsChanged(index: index, changeType: .updated)
        }
    }

    func stage(_ stage: IVSStage, participant: IVSParticipantInfo, didAdd streams: [IVSStageStream]) {
        // We don't want to take any action for the local participant because we track those streams locally
        if participant.isLocal { return }
        // For remote participants, add these new streams to that participant's streams array.
        mutatingParticipant(participant.participantId) { data in
            data.streams.append(contentsOf: streams)
        }
    }

    func stage(_ stage: IVSStage, participant: IVSParticipantInfo, didRemove streams: [IVSStageStream]) {
        // We don't want to take any action for the local participant because we track those streams locally
        if participant.isLocal { return }
        // For remote participants, remove these streams from that participant's streams array.
        mutatingParticipant(participant.participantId) { data in
            let oldUrns = streams.map { $0.device.descriptor().urn }
            data.streams.removeAll(where: { stream in
                return oldUrns.contains(stream.device.descriptor().urn)
            })
        }
    }

    // A helper function to find a participant by its ID, mutate that participant, and then update the UICollectionView accordingly.
    private func mutatingParticipant(_ participantId: String?, modifier: (inout StageParticipant) -> Void) {
        guard let index = participants.firstIndex(where: { $0.participantId == participantId }) else {
            fatalError("Something is out of sync, investigate if this was a sample app or SDK issue.")
        }

        var participant = participants[index]
        modifier(&participant)
        participants[index] = participant
        participantsChanged(index: index, changeType: .updated)
    }
}
```

このコードでは、拡張機能を使って接続状態をわかりやすいテキストへと変換しています。

```
extension IVSStageConnectionState {
    var text: String {
        switch self {
        case .disconnected: return "Disconnected"
        case .connecting: return "Connecting"
        case .connected: return "Connected"
        @unknown default: fatalError()
        }
    }
}
```

## カスタム UICollectionViewLayout の実装
<a name="getting-started-pub-sub-ios-layout"></a>

異なる人数の参加者をレイアウトするのは複雑です。親ビューのフレーム全体を占めるようにしたいものの、各参加者の設定を個別に処理するのは面倒です。これを簡単にするために、`UICollectionViewLayout` の実装について順を追って説明します。

別の新しいファイル `ParticipantCollectionViewLayout.swift` を作成します。これを使用して `UICollectionViewLayout` を拡張します。このクラスは、`StageLayoutCalculator` という別のクラスを使用します。これについては後ほど説明します。このクラスは、各参加者の計算されたフレーム値を受け取り、その後、必要な `UICollectionViewLayoutAttributes` オブジェクトを生成します。

```
import Foundation
import UIKit

/**
 Code modified from https://developer.apple.com/documentation/uikit/views_and_controls/collection_views/layouts/customizing_collection_view_layouts?language=objc
 */
class ParticipantCollectionViewLayout: UICollectionViewLayout {

    private let layoutCalculator = StageLayoutCalculator()

    private var contentBounds = CGRect.zero
    private var cachedAttributes = [UICollectionViewLayoutAttributes]()

    override func prepare() {
        super.prepare()

        guard let collectionView = collectionView else { return }

        cachedAttributes.removeAll()
        contentBounds = CGRect(origin: .zero, size: collectionView.bounds.size)

        layoutCalculator.calculateFrames(participantCount: collectionView.numberOfItems(inSection: 0),
                                         width: collectionView.bounds.size.width,
                                         height: collectionView.bounds.size.height,
                                         padding: 4)
        .enumerated()
        .forEach { (index, frame) in
            let attributes = UICollectionViewLayoutAttributes(forCellWith: IndexPath(item: index, section: 0))
            attributes.frame = frame
            cachedAttributes.append(attributes)
            contentBounds = contentBounds.union(frame)
        }
    }

    override var collectionViewContentSize: CGSize {
        return contentBounds.size
    }

    override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
        guard let collectionView = collectionView else { return false }
        return !newBounds.size.equalTo(collectionView.bounds.size)
    }

    override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
        return cachedAttributes[indexPath.item]
    }

    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        var attributesArray = [UICollectionViewLayoutAttributes]()

        // Find any cell that sits within the query rect.
        guard let lastIndex = cachedAttributes.indices.last, let firstMatchIndex = binSearch(rect, start: 0, end: lastIndex) else {
            return attributesArray
        }

        // Starting from the match, loop up and down through the array until all the attributes
        // have been added within the query rect.
        for attributes in cachedAttributes[..<firstMatchIndex].reversed() {
            guard attributes.frame.maxY >= rect.minY else { break }
            attributesArray.append(attributes)
        }

        for attributes in cachedAttributes[firstMatchIndex...] {
            guard attributes.frame.minY <= rect.maxY else { break }
            attributesArray.append(attributes)
        }

        return attributesArray
    }

    // Perform a binary search on the cached attributes array.
    func binSearch(_ rect: CGRect, start: Int, end: Int) -> Int? {
        if end < start { return nil }

        let mid = (start + end) / 2
        let attr = cachedAttributes[mid]

        if attr.frame.intersects(rect) {
            return mid
        } else {
            if attr.frame.maxY < rect.minY {
                return binSearch(rect, start: (mid + 1), end: end)
            } else {
                return binSearch(rect, start: start, end: (mid - 1))
            }
        }
    }
}
```

もっと重要となるのは `StageLayoutCalculator.swift` クラスです。このクラスは、フローベースの行/列レイアウトの参加者数に基づいて、各参加者のフレームを計算するように設計されています。各行の高さは他の行と同じですが、列の幅は行ごとに異なる場合があります。この動作をカスタマイズする方法については、`layouts` 変数の上のあるコードコメントを参照してください。

```
import Foundation
import UIKit

class StageLayoutCalculator {

    /// This 2D array contains the description of how the grid of participants should be rendered
    /// The index of the 1st dimension is the number of participants needed to active that configuration
    /// Meaning if there is 1 participant, index 0 will be used. If there are 5 participants, index 4 will be used.
    ///
    /// The 2nd dimension is a description of the layout. The length of the array is the number of rows that
    /// will exist, and then each number within that array is the number of columns in each row.
    ///
    /// See the code comments next to each index for concrete examples.
    ///
    /// This can be customized to fit any layout configuration needed.
    private let layouts: [[Int]] = [
        // 1 participant
        [ 1 ], // 1 row, full width
        // 2 participants
        [ 1, 1 ], // 2 rows, all columns are full width
        // 3 participants
        [ 1, 2 ], // 2 rows, first row's column is full width then 2nd row's columns are 1/2 width
        // 4 participants
        [ 2, 2 ], // 2 rows, all columns are 1/2 width
        // 5 participants
        [ 1, 2, 2 ], // 3 rows, first row's column is full width, 2nd and 3rd row's columns are 1/2 width
        // 6 participants
        [ 2, 2, 2 ], // 3 rows, all column are 1/2 width
        // 7 participants
        [ 2, 2, 3 ], // 3 rows, 1st and 2nd row's columns are 1/2 width, 3rd row's columns are 1/3rd width
        // 8 participants
        [ 2, 3, 3 ],
        // 9 participants
        [ 3, 3, 3 ],
        // 10 participants
        [ 2, 3, 2, 3 ],
        // 11 participants
        [ 2, 3, 3, 3 ],
        // 12 participants
        [ 3, 3, 3, 3 ],
    ]

    // Given a frame (this could be for a UICollectionView, or a Broadcast Mixer's canvas), calculate the frames for each
    // participant, with optional padding.
    func calculateFrames(participantCount: Int, width: CGFloat, height: CGFloat, padding: CGFloat) -> [CGRect] {
        if participantCount > layouts.count {
            fatalError("Only \(layouts.count) participants are supported at this time")
        }
        if participantCount == 0 {
            return []
        }
        var currentIndex = 0
        var lastFrame: CGRect = .zero

        // If the height is less than the width, the rows and columns will be flipped.
        // Meaning for 6 participants, there will be 2 rows of 3 columns each.
        let isVertical = height > width

        let halfPadding = padding / 2.0

        let layout = layouts[participantCount - 1] // 1 participant is in index 0, so `-1`.
        let rowHeight = (isVertical ? height : width) / CGFloat(layout.count)

        var frames = [CGRect]()
        for row in 0 ..< layout.count {
            // layout[row] is the number of columns in a layout
            let itemWidth = (isVertical ? width : height) / CGFloat(layout[row])
            let segmentFrame = CGRect(x: (isVertical ? 0 : lastFrame.maxX) + halfPadding,
                                      y: (isVertical ? lastFrame.maxY : 0) + halfPadding,
                                      width: (isVertical ? itemWidth : rowHeight) - padding,
                                      height: (isVertical ? rowHeight : itemWidth) - padding)

            for column in 0 ..< layout[row] {
                var frame = segmentFrame
                if isVertical {
                    frame.origin.x = (itemWidth * CGFloat(column)) + halfPadding
                } else {
                    frame.origin.y = (itemWidth * CGFloat(column)) + halfPadding
                }
                frames.append(frame)
                currentIndex += 1
            }

            lastFrame = segmentFrame
            lastFrame.origin.x += halfPadding
            lastFrame.origin.y += halfPadding
        }
        return frames
    }

}
```

`Main.storyboard` に戻り、`UICollectionView` のレイアウトクラスを先ほど作成したクラスに設定してください。

![\[Xcode interface showing storyboard with UICollectionView and its layout settings.\]](http://docs.aws.amazon.com/ja_jp/ivs/latest/RealTimeUserGuide/images/Publish_iOS_12.png)


## UI アクションの接続
<a name="getting-started-pub-sub-ios-actions"></a>

もうすぐ完了です。作成する必要のある `IBActions` がいくつかあります。

まず、参加ボタンを処理しましょう。レスポンスは `connectingOrConnected` の値によって異なります。すでに接続されている場合は、ステージを離れるだけです。接続されていない場合は、トークン `UITextField` からテキストを読み取り、そのテキストを使用して新しい `IVSStage` を作成します。次に、`ViewController` を `strategy`、`errorDelegate`、`IVSStage` のレンダラーとして追加し、最後にステージを非同期で結合します。

```
@IBAction private func joinTapped(_ sender: UIButton) {
    if connectingOrConnected {
        // If we're already connected to a Stage, leave it.
        stage?.leave()
    } else {
        guard let token = textFieldToken.text else {
            print("No token")
            return
        }
        // Hide the keyboard after tapping Join
        textFieldToken.resignFirstResponder()
        do {
            // Destroy the old Stage first before creating a new one.
            self.stage = nil
            let stage = try IVSStage(token: token, strategy: self)
            stage.errorDelegate = self
            stage.addRenderer(self)
            try stage.join()
            self.stage = stage
        } catch {
            print("Failed to join stage - \(error)")
        }
    }
}
```

もう 1 つの接続する必要がある UI アクションは、公開スイッチです。

```
@IBAction private func publishToggled(_ sender: UISwitch) {
    // Because the strategy returns the value of `switchPublish.isOn`, just call `refreshStrategy`.
    stage?.refreshStrategy()
}
```

## 参加者のレンダリング
<a name="getting-started-pub-sub-ios-participants"></a>

最後に、SDK から受け取ったデータを、先ほど作成した参加者セルにレンダリングする必要があります。`UICollectionView` ロジックはすでに完了しているので、`ParticipantCollectionViewCell.swift` の `set` API を実装するだけです。

まず `empty` 関数を追加した後に、1 つずつ見ていきましょう。

```
func set(participant: StageParticipant) {
   
}
```

まず、簡易状態、参加者 ID、公開状態、サブスクライブ状態を処理します。これらについては、`UILabels` を直接更新します。

```
labelParticipantId.text = participant.isLocal ? "You (\(participant.participantId ?? "Disconnected"))" : participant.participantId
labelPublishState.text = participant.publishState.text
labelSubscribeState.text = participant.subscribeState.text
```

公開列挙型とサブスクライブ列挙型のテキストプロパティは、ローカル拡張機能から取得します。

```
extension IVSParticipantPublishState {
    var text: String {
        switch self {
        case .notPublished: return "Not Published"
        case .attemptingPublish: return "Attempting to Publish"
        case .published: return "Published"
        @unknown default: fatalError()
        }
    }
}

extension IVSParticipantSubscribeState {
    var text: String {
        switch self {
        case .notSubscribed: return "Not Subscribed"
        case .attemptingSubscribe: return "Attempting to Subscribe"
        case .subscribed: return "Subscribed"
        @unknown default: fatalError()
        }
    }
}
```

次に、オーディオとビデオのミュート状態を更新します。ミュート状態を取得するには、`streams` 配列から `IVSImageDevice` と `IVSAudioDevice` を見つける必要があります。パフォーマンスを最適化するために、最後にアタッチされたデバイスを記憶しています。

```
// This belongs outside `set(participant:)`
private var registeredStreams: Set<IVSStageStream> = []
private var imageDevice: IVSImageDevice? {
    return registeredStreams.lazy.compactMap { $0.device as? IVSImageDevice }.first
}
private var audioDevice: IVSAudioDevice? {
    return registeredStreams.lazy.compactMap { $0.device as? IVSAudioDevice }.first
}

// This belongs inside `set(participant:)`
let existingAudioStream = registeredStreams.first { $0.device is IVSAudioDevice }
let existingImageStream = registeredStreams.first { $0.device is IVSImageDevice }

registeredStreams = Set(participant.streams)

let newAudioStream = participant.streams.first { $0.device is IVSAudioDevice }
let newImageStream = participant.streams.first { $0.device is IVSImageDevice }

// `isMuted != false` covers the stream not existing, as well as being muted.
labelVideoMuted.text = "Video Muted: \(newImageStream?.isMuted != false)"
labelAudioMuted.text = "Audio Muted: \(newAudioStream?.isMuted != false)"
```

最後に、`imageDevice` のプレビューをレンダリングして、`audioDevice` からのオーディオ状態を表示しましょう。

```
if existingImageStream !== newImageStream {
    // The image stream has changed
    updatePreview() // We’ll cover this next
}

if existingAudioStream !== newAudioStream {
    (existingAudioStream?.device as? IVSAudioDevice)?.setStatsCallback(nil)
    audioDevice?.setStatsCallback( { [weak self] stats in
        self?.labelAudioVolume.text = String(format: "Audio Level: %.0f dB", stats.rms)
    })
    // When the audio stream changes, it will take some time to receive new stats. Reset the value temporarily.
    self.labelAudioVolume.text = "Audio Level: -100 dB"
}
```

作成する必要のある最後の関数は `updatePreview()` です。この関数で参加者のプレビューをビューに追加します。

```
private func updatePreview() {
    // Remove any old previews from the preview container
    viewPreviewContainer.subviews.forEach { $0.removeFromSuperview() }
    if let imageDevice = self.imageDevice {
        if let preview = try? imageDevice.previewView(with: .fit) {
            viewPreviewContainer.addSubviewMatchFrame(preview)
        }
    }
}
```

上記では、`UIView` のヘルパー関数を使用して、サブビューの埋め込みを容易にしています。

```
extension UIView {
    func addSubviewMatchFrame(_ view: UIView) {
        view.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(view)
        NSLayoutConstraint.activate([
            view.topAnchor.constraint(equalTo: self.topAnchor, constant: 0),
            view.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: 0),
            view.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 0),
            view.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: 0),
        ])
    }
}
```