7
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-08-23

はじめに

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

Getting Started
iOS SDK
Android SDK

AWSでリソースを作成する

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

Amazon Kinesis Video Streams Android WebRTC SDK README.md

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

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

  • [シグナリングチャンネルを作成]を選択します。今回は東京リージョンに作りました。
    channel1.png

  • シグナリングチャンネル名を入力します。今回は[demo-channnel]としました。
    channel2.png

CognitoUserPool を作成する

CognitoUserPool を作成します。

  • [ユーザープールの管理]を選択し、次のページで[ユーザープールの作成]を選択します。
    user1.png

  • プール名を入力します。今回は[MyUserPool]としました。プール名を入力したら[デフォルトを確認する]を選択し、次のページでデフォルト値を変えずに[プールを作成]を選択します。

user3.png
  • オレンジの矢印の先にある[プールId]をメモし、左のナビゲーションから [アプリクライアント]を選択します。
    user5.png

  • 新しいアプリクライアントを作成します。まずアプリクライアント名を入力します。ここでは[MyAppClient]という名前で作成しました。

  • アプリクライアントの作成が完了したら[アプリクライアント ID]と[アプリクライアントのシークレット]をメモします。[詳細を表示]を選択すると表示されます。
    user6.png

CognitoIdentityPool を作成する

CognitoIdentityPool を作成します。

  • [IDプールの管理]を選択し、[新しいIDプールの作成]を選択します。
    user1.png

  • プール名を入力します。今回は[MyIdentityPool]としました。
    identity1.png

  • [認証プロバイダー]の[Cognito]のタブを開き、[ユーザープールId]と[アプリクライアントId]に先ほどメモをした値を入力し、作成します。
    identity2.png

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

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

identity3.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

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を追加。

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 を開いて入力

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"

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

ios-to-android.png

TODO: Twilio との料金の比較

参考にさせて頂いた記事

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

7
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?