Amazon Kinesis Video Streams WebRTC をiOSとAndroid動かしてみた

## はじめに

Amazon Kinesis Video Streams に ビデオチャットサービスが加わりました。
ブラウザ(JavaScript)向けのSDKだけでなく、組み込み用途のC言語SDKや、iOS/Androidといったモバイルアプリ向けのSDKも用意されており、ビデオチャットサービスを実装することができます。
今回は iOS, Android のサンプルを動かし、iOS <-> Android アプリ間でビデオ通話をしてみようと思います。

[Getting Started](https://docs.aws.amazon.com/kinesisvideostreams-webrtc-dg/latest/devguide/kvswebrtc-getting-started.html)
[iOS SDK](https://github.com/awslabs/amazon-kinesis-video-streams-webrtc-sdk-ios)
[Android SDK](https://github.com/awslabs/amazon-kinesis-video-streams-webrtc-sdk-android)


## AWSでリソースを作成する

AndroidのSDKのREADMEの手順が分かりやすかったので、それに倣って進めていきます。

[Amazon Kinesis Video Streams Android WebRTC SDK README.md](https://github.com/awslabs/amazon-kinesis-video-streams-webrtc-sdk-android/blob/master/README.md)


### シグナリングチャンネルを作成する

Kinesis Video Streams でシグナリングチャンネルを作ります。

- [シグナリングチャンネルを作成]を選択します。今回は東京リージョンに作りました。
![channel1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/6408854f-3bd1-59bf-d8e8-bd08f4d0d7d8.png)

- シグナリングチャンネル名を入力します。今回は[demo-channnel]としました。
![channel2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/8a64e9e2-de3d-2b50-3315-d8a8153bc551.png)


### CognitoUserPool を作成する

CognitoUserPool を作成します。

- [ユーザープールの管理]を選択し、次のページで[ユーザープールの作成]を選択します。
![user1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/bda42941-9ea3-c231-c1d5-d207f785035d.png)

- プール名を入力します。今回は[MyUserPool]としました。プール名を入力したら[デフォルトを確認する]を選択し、次のページでデフォルト値を変えずに[プールを作成]を選択します。
<img width="1426" alt="user3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/63f6e8fd-964a-0892-f67c-73c73d5683a6.png">

- オレンジの矢印の先にある[プールId]をメモし、左のナビゲーションから [アプリクライアント]を選択します。
![user5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/d6326941-a232-2ddf-3b01-a14c45faf1af.png)

- 新しいアプリクライアントを作成します。まずアプリクライアント名を入力します。ここでは[MyAppClient]という名前で作成しました。
- アプリクライアントの作成が完了したら[アプリクライアント ID]と[アプリクライアントのシークレット]をメモします。[詳細を表示]を選択すると表示されます。
![user6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/2ed2c7c3-6501-8774-0bf3-fcb619e9c81a.png)


### CognitoIdentityPool を作成する

CognitoIdentityPool を作成します。

- [IDプールの管理]を選択し、[新しいIDプールの作成]を選択します。
![user1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/bda42941-9ea3-c231-c1d5-d207f785035d.png)

- プール名を入力します。今回は[MyIdentityPool]としました。
![identity1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/09296002-d2cc-28b3-dcf0-03200e35e598.png)

- [認証プロバイダー]の[Cognito]のタブを開き、[ユーザープールId]と[アプリクライアントId]に先ほどメモをした値を入力し、作成します。
![identity2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/cde08d27-b8bb-2209-11ae-2336ac33736e.png)

- `Cognito_MyIdentityPoolAuth_Role` と `Cognito_MyIdentityPoolUnauth_Role` の2つロールが作成されます、一つはログイン済みユーザーに付与されるロールで、もう一つはログインされていないユーザーに付与されるロールです。つまりログイン済みのユーザーは `kinesisvideo` にアクセスできるように以下のポリシーをアタッチします。

```
{
   "Version":"2012-10-17",
   "Statement":[
      {
         "Effect":"Allow",
         "Action":[
            "cognito-identity:*",
            "kinesisvideo:*"
         ],
         "Resource":[
            "*"
         ]
      }
   ]
}
```

![identity3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/8cc49df5-1f2a-10bd-0359-8ea58abcbb7f.png)


### Android

AWSのリソースの作成ができたので、Android のサンプルアプリをビルドしていきます

- Androidのサンプルプロジェクトをダウンロードします。

```
$ git clone https://github.com/awslabs/amazon-kinesis-video-streams-webrtc-sdk-android.git
```

- AndroidStudio を起動し、 Open an existing Android Studio project で先ほどダウンロードしたサンプルプロジェクトを開きます。

- `/res/raw/awsconfiguration.json` にメモした `IdentityPoolId`, `UserPoolId`, `UserPoolAppClientSecret`, `UserPoolAppClientSecret`, `UserPoolAppClientId` を貼り付けます。`IdentityPoolId`はリージョンも含めて入力する必要があるので気をつけてください。

- 実機にインストールし、ユーザーを作成します。入力したメールアドレスに二要素認証のコードが送られてくるので間違えずに入力します。

- ユーザーの作成とログインができたら [Start Viewer]でビデオチャットを始めます。

- PCで Kinesis の demo-channel を開き、Master でビデオを流すと PC と Android アプリでビデオチャットができます。

カビゴンがPCのカメラで、エヴァ初号機がAndroidのカメラで撮ってます。
ブラウザ <-> Androidアプリ間でビデオ通信ができました。

![pc-to-android.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/43f166cb-3b59-76c7-c0ec-28c59ff81e67.jpeg)



## iOS

基本的な設定はAndroidで既に終わっているので、設定を追加してビルドします。

```
$ git clone git@github.com:awslabs/amazon-kinesis-video-streams-webrtc-sdk-ios.git
$ cd amazon-kinesis-video-streams-webrtc-sdk-ios
$ cd Swift
$ pod install  # もし cocoapods が入っていなかったらインストールが必要
```

`awsconfiguration.json`を追加。

```json:awsconfiguration.json
{
  "Version": "1.0",
  "CredentialsProvider": {
    "CognitoIdentity": {
      "Default": {
        "PoolId": "YOUR_IDENTITY_POOL_ID",
        "Region": "ap-northeast-1"
      }
    }
  },
  "IdentityManager": {
    "Default": {}
  },
  "CognitoUserPool": {
    "Default": {
      "AppClientSecret": "YOUR_APP_CLIENT_SECRET",
      "AppClientId": "YOUR_APP_CLIENT_ID",
      "PoolId": "YOUR_USER_POOL_ID",
      "Region": "ap-northeast-1"
    }
  }
}

```

`Constants.swift` を開いて入力

```swift
let CognitoIdentityUserPoolRegion: AWSRegionType = AWSRegionType.APNortheast1
let CognitoIdentityUserPoolId = "YOUR_USER_POOL_ID"
let CognitoIdentityUserPoolAppClientId = "YOUR_APP_CLIENT_ID"
let CognitoIdentityUserPoolAppClientSecret = "YOUR_APP_CLIENT_SECRET"
let cognitoIdentityPoolId = "YOUR_IDENTITY_POOL_ID"
```

ログインし、ビデオ通話を開始します。
先ほど作成したユーザーを使いまわしても大丈夫です。


<img width="375" alt="ios-to-android.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/a538be91-f221-9453-f89e-af4811e66fcc.png">


## TODO: Twilio との料金の比較


## 参考にさせて頂いた記事

[Amazon Kinesis Video Streams WebRTC を動かしてみたた](https://qiita.com/massie_g/items/b6d3513d06a28ba89677)