AWS Amplify と Amazon Chime SDK を使ってサーバーレスビデオミーティングアプリを作ってみた

今回ご紹介するアプリケーションは主に Amazon Chime SDK を使用しています。
Amazon Chime SDK はビデオミーティングの機能をご自身で開発した Web/Mobile アプリケーションに組み込むことができる開発キットです。

以前ご紹介した Amazon Interactive Vide Service(IVS) も、同じ様にご自身の開発したアプリケーションに動画配信機能を組み込むことができますが、実現できる機能に違いがありますので、こちらにイメージを記載します。

このように、 IVS では、単一の配信者が一方通行で複数の視聴者に動画を配信できるのに対して、 Chime SDK では双方向の通信 = ビデオミーティング機能を実現することができます。

その際の通信は WebRTC SFU (Selective Forwarding Unit) という仕組みになっており、P2P の通信と違い、クライアント同士がメッシュ状の経路で通信せず、あくまで単一の SFU サーバー のみと各クライアントが通信するため、ミーティング参加者が増えても各々の回線や端末に高い負荷がかかることがない様になっています。

もう一つ重要なツールとして、今回は AWS Amplify を使用しています。Amplify は、Web / モバイル 向けのアプリケーションを迅速に構築するための機能を備えたサービス、 SDK 、 CLI 、などを含む一連のツールチェーンです。

今回は Amplify を使用し、実際にミーティングに参加するための Web フロントエンドのデプロイとホスティング、ユーザーの登録・ログイン、権限に基づいたミーティングに必要な情報の CRUD (データの読み書き) 機能を構築していきます。

ユーザーがビデオミーティングに参加するためにはクライアントアプリケーションが必要になります。

今回は Vue.js を使って Web アプリケーションとしてフロントエンドを構築し、 Amplify Console のホスティング機能を使ってデプロイしています。

静的コンテンツとしてフロントエンドのアプリケーションをデプロイできれば、例えば Amazon S3 と Amazon CloudFront を組み合わせても良いのですが、 Amplify Console を使って GitHub と連携させ、アプリケーションのデプロイからホスティング、 CI/CD のパイプラインまでをまとめて構成できるので非常に便利です。 サンプルコードはこちら です。

トップページ

ミーティングの一覧画面

ミーティング参加画面

ユーザーがビデオミーティングを作成して主催したり参加したりする際に、ミーティング自体の作成や削除をする必要があります。

また、例えば作成したミーティングを削除する際に、ミーティングを作ったユーザーのみが削除できる様にしたい場合などに権限管理なども必要になってきます。

そのために今回は Amazon Cognito を使ってユーザー登録・ログイン機能を実現しています。こちらは Amplify CLI からリソースを作成しており、前述の ミーティングクライアント(Web フロントエンド) のサンプルコード に含まれているため、別途リソースを作成したりする必要はありません。

各種フレームワークに対応した基本的なユーザー登録・ログイン機能については こちら にサンプルが紹介されています。

ユーザーがミーティングを作成したり、作成済みのミーティングを一覧表示したり、その中からミーティングを選択して参加したりといった機能を実現するために、ミーティングの ID を保存する必要があります。

今回は Amazon DynamoDB をデータソースとし、 AWS AppSync を経由してフロントエンドにミーティング ID の更新をリアルタイムに反映する機能を実現しました。

こちらもユーザー登録・ログイン機能と同様、 Amplify CLI を使ってリソースを作成しており、 サンプルコード にも含まれています。

Chime SDK を使ってミーティングを作成したり、参加者としての ID を発行し、実際にミーティングに参加するための API を AWS Lambda と Amazon API Gateway を使って構築しました。こちらは Serverless Framework を使って構築しており、サンプルコードは こちら です。

また、前述のミーティングの ID を保持するDynamo DB のレコードが削除された際に別の Lambda 関数を呼び出し、 Chime 上に存在するミーティングも連動して削除する機能も追加しました。こちらは、仕様上 5 分以上ミーティングへの接続がない場合自動的にミーティング自体が削除される仕様になっているのでさほど重要ではないですが、 DynamoDB Streams を活用したイベントドリブンなアーキテクチャの検討のために追加してみました。