AWS Kinesis Video Streamsを使って、ブラウザでビデオチャットをしてみます。
通信プロトコルは、WebRTCです。
最近のブラウザは、カメラやマイクも使えるので、ブラウザだけでビデオチャットできてしまいます。
以下の環境で、動作を確認しました。
・Windows10：Chromeブラウザ
・Amazon Fire：Silkブラウザ
・Android：Chromeブラウザ
・iPhone：Safari、Chromeブラウザ
以下は、Windows10のChromeブラウザでの画面です。こんな感じで、同時に接続している端末の画面を並べてみることができます。すべての端末でこのような画面でみれるのは、WebRTCのおかげです。
以下の構成となりまして、御覧の通り、AWSを使うことで、ブラウザだけで実現できます。
ソースコードもろもろは、以下のGitHubに上げておきました。
poruruba/WebRTC_VideoChat
また、ブラウザだけで実現できるので、皆さんがすぐに触れるように、Webページとして公開しておきました。
準備
AWSを利用するため、事前にAWS側に設定が必要です。
① IAMアカウントの作成
② シグナリングチャネルの作成
① IAMアカウントの作成
まずは、IAMアカウントを作成します。
以下の、AWS管理コンソールからユーザを作成します。AWS認証情報タイプは、アクセスキー - プログラムによるアクセスです。
AmazonKinesisVideoStreamsReadOnlyAccess と、インラインポリシで kinesisvideo:ConnectAsMasterとkinesisvideo:ConnectAsViewer を加えます。
そうすると、アクセスキーIDとアクセスキーシークレットが払い出されます。後で使うので覚えておきます。
② シグナリングチャネルの作成
次に、Kinesis Video Streamsの管理コンソールから、シグナリングチャネルを作成します。
名前は、接頭辞として、「VC-」の後に、好きな名前を付けてください。今回は、適当に、VC-Client1、VC-Client2、VC-Client3、VC-Client4の4つを作成しておきます。
準備はこれだけです。
使い方
以下のページにアクセスして下さい。
最初に、端末ごとに名前等を設定します。
さきほど、Client1から4まで作成しましたので、そのうちの1つを選択してください。選択したものはlocalStorageに記憶します。他の端末からアクセスする場合は同じものを選択しないようにしてください。
また、IAMで払い出したアカウントのアクセスキーIDとアクセスシークレットをAWS_ACCESSKEY_IDとAWS_SECRET_ACCESSKEYに指定します。
これで設定は完了です。
開始ボタンを押すと、カメラ録画が開始され、Client1にアップロードされます。
別の端末から同じようにアクセスします。名前はかぶらないようにClient2を選択します。
今度は、左上のセレクトから、Client1を選択し、追加ボタンを押下します。
そうすると、パネルが表示され、そこに別の端末でアップロードした動画が表示されます。
動画を双方向に送受信することも可能で、開始ボタンを押下します。
もとに端末に戻って、左上のセレクトからClient2を選択して追加ボタンを押下すれば、双方の動画が表示されたはずです。
さらに、別の端末で、Client3を選択して開始ボタンを押下して動画をアップロードした状態で、元の端末で、左上のセレクトからClient3を選択して追加ボタンを押下すれば、さらに動画表示のパネルが増えたかと思います。
各パネルの右上のセレクトで、パネルの大きさを変えられます。
3番目の動画は、スマホからの動画であり、縦画面の動画になっています。
仕組み
特に難しいことはしておらず、以下のページに書いてある通りです。
AWS Kinesis Video StreamsでMMDをWebRTCで配信する
補足
・音声もアップしていますが、PCのスピーカとマイクで再生すると、エコーが発生してしまうため、その場合は、ヘッドホンで使うとよいです。右上のmuteのチェックボックスをOffにしてください。
・チャットもできるようにしています。各パネルの右下のチャットボタンを押して、メッセージを入力すると、対象の端末にメッセージが送信され、対象の端末ではトーストが表示されるようにしてあります。
以上