amazon-chime-sdk でWebとReact Nativeでビデオ通話ができるアプリを作る(前編)
要約
- amazon-chime-sdk を web + react-native で使う機会があって色々調べたのでまとめた
- API は素直で使いやすい。が、高機能な割にドキュメントがまとまりきっていない
- aws のコンソールに管理画面もなく準備しなくてはいけないことはそこそこある
- amazon-chime と amazon-chime-sdk は別物だが、ドキュメントは一つにまとまっている
- とりあえず最初は web版/React版のサンプルを触って基本的なアーキテクチャを理解する。
- React Native 対応については後編に続く
- 後編ネタバレ : 結構大変なので0から作るなら普通にios/androidアプリとして作った方がいいかも
amazon-chime と amazon-chime-sdk の違いについて
この辺がわかりづらくてハマったのでメモ
amazon-chime とは
aws の提供する「ビデオ会議や音声通話やチャットなどを行う事ができる web アプリケーション」です。
管理画面やアカウント作成機能が用意されており、ユーザは実装なしでビデオ通話を利用できます。
web API は公開されていますが、原則 web ページやアプリなどに組み込んで利用することはできない。
類似製品: Google Meet、Zoom、Whereby など
amazon-chime-sdk とは
aws の提供する「amazon-chime みたいなツールを簡単に実装できる SaaS」です。
実装なしで利用することはできません。
自身で環境を構築し、ホスティングする必要があります（大抵はその他の aws サービスと組み合わせて使うことになります）
公式ドキュメントで
Developers can leverage the same communication infrastructure and services that power Amazon Chime
と言われているように、amazon-chime を作成するのに社内で使っている sdk を外部公開したのが(たぶん)amazon-chime-sdk です。
「巨大 EC サイトである amazon の運営に必要な社内ツールを社外にも公開している」という、aws らしいツールだと思います。
類似製品: Twilio、SkyWay、Agora など
つまり
amazon-chime と amazon-chime-sdk は別ものです。
amazon-chime で作成したアカウントと amazon-chime-sdk で作ったアプリは通話する事ができません。
自前で amazon-chime に類似するものを実装してホスティングする必要が出てきます。
とはいえ、amazon-chime-sdk の最も優れた実装サンプルの一つが aws-chime なので、触ってみたりドキュメントに目を通すこ必要はあると思います
amazon-chime-sdk を理解する
web のデモを動かしてみる
- amazon-chime-sdk-js/demos/serverless
- amazon-chime-sdk-js/demos/browser
- amazon-chime-sdk-component-library-react/demo
最初はこの辺りの web 用のデモを触って雰囲気を掴みました。
react ができるなら一番下の component-library の実装がわかりやすくてお勧めです。
どちらもかなりリッチな構成になっている(SIP 通信やテキストチャット機能などもついている)ので、そういった機能を試しに外してみながら触ってみると全貌が把握しやすいです。
結構な頻度で更新されているので、ここではあえて中身には触れません。
代わりに一般的な構成について軽く触れておきます。
一般的な amazon-chime-sdk の構成
バックエンド(①Dynamo DB/②Lambda/③API Gateway)
aws-sdk/Chime を使って amazon-chime のリソースを生成/管理します。
aws を利用しているサービスに組み込む場合、この部分は既存のバックエンドをそのまま利用して問題ありません。
① の永続化層はなくても通話が可能ですが、後述の Meeting の情報を会議に参加するメンバーで共有するため、なんかしらの永続化が必要になってくると思います。
会議の参加へ認可機能をなどをつける場合、この部分に実装することになります。
最低限の通話機能を実装するだけならば、利用するリソースは Meeting と Attendee の 2 つだけ です。AppInstance などの迫力がある名前のリソースがありますが、これはチャット用なので一旦無視して OK です。
バックエンド自体はどのリージョンにあっても大丈夫ですが、amazon-chime-sdk のエンドポイントは、は 2021 年 7 月現在 us-east-1(バージニア北部)にしか存在しないため、aws-sdk の Chime のリージョンは us-east-1 を指定する必要があります。
Meeting
web 会議そのもののに当たるリソースです。
createMeeting や createMeetingWithAttendee などで作成されます。
会議の参加に必要な MeetingId を管理するほか、ロギング用の SNS／SQS の ARN を指定する事ができます。
Attendee
web 会議の参加者にあたるリソースです
createAttendee や createMeetingWithAttendee などで作成されます。
attendee は必ず Meeting に紐づくリソースで、作成がそのまま会議への参加となります。
フロントエンド(④Amazon Chime SDK endpoint/⑤web frontend)
バックエンドから発行された Meeting Attendee のリソースを、フロントエンド側のライブラリに引数として渡すと、よしなに指定した Meeting への通信接続をやってくれます。
component-library-react のデモで実際に接続処理をしている部分
Chrome Dev Tools でネットワークを覗いてみましたが、どうも amazon-chime の web socket エンドポイントとよしなに接続してくれているようでした。
ややこしい通信周りの処理をまるっと抽象化してくれるのはありがたいですね。
なお、ここで接続するエンドポイントのリージョンは、② の Lambda での Meeting 作成時に Media Region として指定できます。
ロギングなど(⑥Cloud Watch/⑦SQS/⑧Amazon Chime SDK endpoint/他)
amazon-chime-sdk は 2021 年 7 月現在 AWS コンソールに管理画面がありません。
特にコンソール側で操作することはなく、いきなり aws-sdk から createMeeting などの API をコールすることができます。(無論、実行環境に適切な IAM の設定がされている必要はありますが)
amazon-chime-sdk 自体の実行ログを取得したい場合は、 ⑦SQS or SNS を amazon-chime-sdk と同じリージョン(現時点では us-east-1 一択)に作成し、それ経由で自前でログをハンドリングしてやる必要があります。
なお、出力先の指定は ② の lambda 内で createMeeting をする度に、SQS か SNS の ARN を設定することになります。
参考: Amazon Chime SDK event notifications
とまあ、web はこんな感じです。
React Native 対応に関しては後編に続きます。
Discussion