この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
こんにちは、CX事業本部の若槻です。
前回までは、Amazon Chime SDKを使用したWeb会議アプリのデモを頑張って自力で実装していましたが、実のところAmazon Chime SDKの機能を"ほぼ"全部盛りしたデモアプリのソースコードがAWS公式によりGitHubに公開されています。
今回は、このソースコードをもとにデモアプリを構築し、実際に使ってみてAmazon Chime SDKではどんなことができるのか確認してみました。
結論
結論からいきますと、デモアプリを使って次のようなことができました。
- 会議の準備、参加
- 会議タイトル（会議URL）の作成
- URLを使用した会議招待
- 自分の会議参加者名の設定
- クライアントが接続するメディアリージョンの自動選択・手動選択
- メディア入出力の準備
- 音声入力デバイス（マイク）の選択
- 映像入力デバイス（カメラ、画像）の選択
- 映像入力クオリティ（幅、高さ、フレームレート、最大通信帯域幅）の調節
- 音声出力デバイス（スピーカー、イヤホン）の選択
- 音声・映像入出力のプレビュー
- 音声出力のテスト
- 会議の実施
- Web会議（音声、ビデオ）
- 音声入力のミュート
- 会議参加者の一覧の表示
- 会議参加者のステータスの表示（「発言中」「ミュート」など）
- 画面共有（デスクトップ、コンテンツ）
- テキストチャット
- メディアメトリクス（送信・受信可能帯域幅）の確認
- 会議の退出
- 会議の終了
- その他
- サイマル配信
- Web Audio
- SIPによる会議参加
デモアプリのデプロイ
まず始めに、demos/serverlessのREADMEに従ってデモアプリをAWSアカウントにデプロイします。
$ git clone https://github.com/aws/amazon-chime-sdk-js.git
$ cd demos/serverless
$ npm install
$ npm run deploy -- -r us-east-1 -b <my-bucket> -s <my-stack-name> -a meetingnpm run deployによるデプロイが成功したらデモアプリのURLがコンソールに出力されます。末尾にv2とある方はより開発が進んでいるデモアプリのURLです。今回はv2アプリの方を試してみます。
...
Successfully created/updated stack - demo-serverless-stack in us-east-1
Amazon Chime SDK Meeting Demo URL:
https://xxxxxxxxxx.execute-api.us-east-1.amazonaws.com/Prod/
https://xxxxxxxxxx.execute-api.us-east-1.amazonaws.com/Prod/v2/※aws/amazon-chime-sdk-js リポジトリは頻繁に更新が続けられているため、cloneしたタイミングによっては仕様が大きく異る場合があります。今回確認したのはコミットd5e9d4dをもとにデプロイしたデモアプリとなります。
デモアプリを使ってみる
会議の準備、参加
払い出されたデモアプリv2のURLhttps://xxxxxxxxxx.execute-api.us-east-1.amazonaws.com/Prod/v2/にブラウザでアクセスします。[Join a meeting]画面が開き、会議参加フォームが表示されます。
会議タイトル（会議URL）の作成
上から1番目の入力欄[Meeting Title]では任意の会議タイトルを指定します。会議タイトルはダブルバイト文字なども指定可能です。今回のデモアプリでは会議の一意性を会議タイトルで管理しており、参加者は会議参加時に同じ会議タイトルを指定することにより同じ会議に参加できます。
URLを使用した会議招待
例えば、会議タイトルaaa-bbb-cccの会議に招待したい場合は、会議タイトルをmクエリパラメータとして付け足したURLhttps://xxxxxxxxxx.execute-api.us-east-1.amazonaws.com/Prod/v2?m=aaa-bbb-cccを参加者に事前に共有しておきます。会議の予定時間になり参加者がURLにアクセスすると、会議参加フォームで入力欄に会議IDが自動でセットされるので、参加者を会議に招待する際に便利です。
自分の会議参加者名の設定
2番目の入力欄[Your Name]では、会議参加時の自分の表示名を指定します。ビデオタイルやテキストチャット上で他の会議参加者に対して表示される名前となります。
クライアントが接続するメディアリージョンの自動選択・手動選択
3番目の入力欄では、メディアリージョンを指定します。メディアリージョンとは、クライアントが会議セッションを接続し、音声通話、ビデオ通話、画面共有をサポートする「Amazon Chimeメディアサービス」が位置するリージョンのことです。既定ではアクセス元から一番近いリージョンが自動で選択されます。
自動選択されている以外のリージョンも選択可能ですが、アクセス元から遠いリージョンが指定されると通信品質に支障が出る可能性があるので、特に理由がなければ自動選択されたリージョンのままで良いかと思います。
会議タイトル、表示名、メディアリージョンが指定できたら[Continue]をクリックします。
プログレスバーが表示され、会議セッションの作成が始まります。
メディア入出力の準備
会議セッションが作成されると、[Select devices]画面が開き、メディアデバイスの選択や入出力のプレビューなどを行うページが表示されます。
次のような機能があるので、それぞれについて見ていきます。
音声入力デバイス（マイク）の選択
[Microphone]では、会議で使用するマイクを、使用可能な音声入力デバイスの一覧、Noneおよび440 Hzから選択できます。
Noneを選択するとデバイスへの音声入力がオフとなります。440 Hzを選択すると擬似的に440Hzの音声の入力を行えます。音声プレビューも反応するので端末が内部的に適切に音声入力を受け付けているかどうかのデバッグに役立つかと思います。
映像入力デバイス（カメラ、画像）の選択
[Camera]では、会議で使用するカメラを、使用可能な映像入力デバイスの一覧、None、BlueおよびSMPTE Color Barsから選択できます。
Noneを選択すると映像入力は行われなくなります。BlueおよびSMPTE Color Barsは出力される映像が予め用意された画像となります。ただしここで選択してもプレビュー映像には反映されないので、詳しくは後ほど確認します。
映像入力クオリティ（幅、高さ、フレームレート、最大通信帯域幅）の調節
映像クオリティも選択できます。既定は540p (qHD) @ 15 fps (1.4 Mbps max)です。
それぞれ次のようなスペックとなります。
| width | height | frameRate | maxBandwidthKbps | |
|---|---|---|---|---|
| 360p (nHD) @ 15 fps (600 Kbps max) | 640 | 360 | 15 | 600 |
| 540p (qHD) @ 15 fps (1.4 Mbps max) | 960 | 540 | 15 | 1400 |
| 720p (HD) @ 15 fps (1.4 Mbps max) | 1280 | 720 | 15 | 1400 |
360p (nHD) @ 15 fps (600 Kbps max)に変更すると、映像プレビューでも高さと幅が小さくなることが確認できます。
音声出力デバイス（スピーカー、イヤホン）の選択
[Speaker]では、会議で使用する音声出力デバイスを選択できます。
音声・映像入出力のプレビュー
[Preview]では音声入力デバイスと映像入力デバイスのプレビューが確認できます。上部のプログレスバーは入力された音声の大きさにより緑色のパラメータの長さが伸縮するので選択中のデバイスが問題なく動作しているかどうかを確認できます。
音声出力のテスト
[Test]ボタンをクリックするとビープ音が鳴り、音声出力のテストが行えます。
メディア入出力の準備が問題なければ、[Join]をクリックして会議に参加します。
会議の実施
会議に参加すると次のような会議実施画面が開きます。会議参加時は映像入力は既定ではオフとなるため、手動でオンにする必要があります。
次のような機能があるので、それぞれについて見ていきます。
Web会議（音声、ビデオ）
ビデオカメラボタンをクリックすると、ビデオタイルへのカメラ映像の出力の開始・終了をトグル制御できます。開始すると下記のように自分のカメラ映像がタイルに表示されます。
ビデオカメラボタン右隣の[▽]をクリックすると、会議で使用するカメラを、使用可能な映像入力デバイスの一覧、None、BlueおよびSMPTE Color Barsから選択できます。
Noneを選択すると、デバイスからの映像入力自体がオフとなり、自分のビデオタイルに何も表示されなくなります。
BlueおよびSMPTE Color Barsを選択すると、映像出力がSDK側で用意されたブルー画像およびSMTPEカラーバー画像となります。これを利用すればユーザーが好きな画像を登録して表示されられる使い方も実装次第でできそうです。
マイクボタン右隣の[▽]をクリックすると、会議で使用するマイクを、使用可能な音声入力デバイスの一覧、Noneおよび440 Hzから選択できます。
Noneを選択すると、ステータス表示はSPEKINGのままですが、デバイスからの音声入力がオフとなります。
440 Hzを選択すると、同様にステータス表示は「SPEKING」のままデバイスへの音声入力がオフとなりますが、他の参加者へビープ音が音声出力されます。用途はデバッグ時くらいかと思います。
複数人で会議参加している様子です。このデモアプリでは1画面にすべての会議参加者のビデオタイルを表示させる仕様のため、人数が増えるほどタイルサイズが狭くなってしまいますが、スクロール可能とするなどタイルサイズの調整は実装次第でできそうです。
自分や他の参加者のビデオタイル右下の[Pause]をクリックすると、自分の会議画面上での映像出力をポーズできます。ポーズを行ってもステータスや他の参加者への画面出力の変更は行われません。ポーズしたタイルはボタンが[Resume]に変わるので、クリックすると映像出力を再開できます。
音声入力のミュート
マイクボタンをクリックすると、入力音声のミュート・アンミュートをトグル制御できます。ミュートするとステータス表示がMUTEDとなり自分の入力音声が他の参加者へ出力されなくなります。ただしミュートにしてもデバイスへの音声入力自体は続くようです。
会議参加者の一覧の表示、ステータスの表示（「発言中」「ミュート」など）
会議参加者の一覧やステータスの表示も可能です。
ステータスには次の種類があります。
SPEAKING：発言中MUTED：音声入力のミュート状態- なし：発言中でない
画面共有
画面共有により、デスクトップでの操作画面やコンテンツを会議参加者に共有することも可能です。
カメラボタン右隣の[▽]をクリックすると、選択メニューから実施したい画面共有を選択できます。選択できるのは[Screen Capture...]、[Test Video]および[ファイルを選択]です。
[Screen Capture...]はデスクトップ共有ができます。選択すると、[画面を共有する]ダイアログが開き、共有方法を[あなたの全画面]、[アプリケーション ウィンドウ]および[Chrome タブ]から選択できます。ちなみに今回はGoogle Chromeから使用している場合の動作のため、ブラウザの画面共有APIによる動作となるため、Google Chrome以外のブラウザであれば動作は異なります。
共有したい画面を選択し、[共有]をクリックします。
デスクトップでの操作をビデオタイルに映像出力できます。
[Test Video]を選択すると、SDK側で用意されたテスト動画が再生され、ビデオタイルに映像出力されます。この機能を利用すれば動画をアップロードして同じ再生画面を見ながら会議するという使い方も実装次第ではできそうです。
[ファイルを選択]を選択すると、ローカルファイルを選択できます。しかし、これで選択したファイルを画面共有できると思ったのですが、今回のデモアプリではファイルを選択して[開く]をクリックしても映像出力は何も追加されませんでした。ここは別の機会に実装を詳しく見てみたいと思います。
画面共有中に一時停止ボタンをクリックすると、画面共有の映像出力が真っ黒となり一時停止状態になります。再度クリックすると映像出力が再開されます。
画面共有中にカメラボタンをクリックすると、画面共有を終了できます。
テキストチャット
会議参加者同士で利用可能なテキストチャットも実装可能です。入力テキストはマークダウン記法もサポートできます。
メディアメトリクス（送信・受信可能帯域幅）の確認
SDKのメディアメトリクスを使用すれば、Available Uplink Bandwidth：送信可能帯域幅（Kbps）、Available Uplink Bandwidth：受信可能帯域幅（Kbps）をリアルタイムで取得することも可能です。
会議の退出
画面右上のLeaveボタンをクリックすると、会議を退出できます。
退出した参加者は会議からログアウトされ、会議参加画面に戻ります。会議自体は残った参加者で引き続き実施できます。退出後も会議が終了していない限り再度参加することは可能です。
会議の終了
画面右上の電源ボタンをクリックすると、会議を終了できます。
すべての参加者は会議からログアウトされ、会議参加画面に戻ります。再度同じタイトルの会議に参加しようとしても、[Unable to find meeting]と表示され参加はできなくなります。
その他
サイマル配信
会議参加画面の[Optional Features]でEnable Simulcast For Chromeを選択すると、サイマル配信を使用することができます。
サイマル配信を選択すると、メディア入出力の準備画面で既定で映像入力クオリティが720p (HD) @ 15 fps (1.4 Mbps max)が選択されます。（変更は可能）
サイマル配信を使用すると、会議に参加しているクライアントに応じてより高品質で最適なメディア配信ができるようです。
Amazon Chime SDK の会議に接続するためのアプリケーションを準備するときに、MeetingSessionConfiguration オブジェクトでサイマル放送を有効にすることができます。サイマル放送を有効にすると、クライアントは、最大 1280x720 および 1200 kbps までの異なる解像度とビットレートを使用して、同じ動画ソースから複数の動画ストリームをアップロードします。リモート動画タイルを表示するクライアントの場合、VideoAdaptiveProbePolicy は、ダウンリンク帯域幅や会議で共有される動画ストリームの数を考慮に入れ、ウェブカメラ動画ストリームよりもコンテンツ共有を優先することにより、サブスクライブするストリームを選択します。
Web Audio
会議参加画面の[Optional Features]でUse WebAudioを選択すると、Web Audioを使用することができます。
しかし実際にUse WebAudioを選択してみても会議の実施においてはUIの違いは見受けられず、また選択時にSDKによる処理で使用されるenableWebAudioのソースコードも見てみましたが、未選択時との具体的な違いは分かりませんでした。おそらく、ブラウザのWeb Audio APIを使用するようになっていると思われます。
SIPによる会議参加
会議参加画面の[Joining via SIP?]をクリックすると、
SIPによる会議参加画面が開きます。
あらかじめ購入したVoice Connector IDとなる電話番号を使用することで、SIPによる会議参加が可能となるようです。
Amazon Chime で、インターネット接続または AWS Direct Connect を使用してオンプレミスの電話システムから 100 か国以上の国に低コストで安全な電話をかけることができるようになりました。お客様は、低コストのインバウンドコール、アウトバウンドコール、または両方を購入することを選択できます。Voice Connector を使用すると、固定電話網のコストが不要になり、AWS に移行することで音声ネットワークの管理が簡単になるため、音声通話のコストを最大 50% 削減できます。Voice Connector には一部のトラフィックまたはすべてのトラフィックを送信できるため、ビジネスのニーズに応じて使用量をスケールできます。Voice Connector には前払い料金も長期契約も必要ありません。料金は、通話時間と使用した電話番号に対してのみ発生します。音声同時通話や暗号化に料金はかかりません。Chime 会議へのダイヤルインまたは Voice Connector をご利用の他のお客様への通話は無料です。
Amazon Chime コンソールにログインし、電話番号を購入して Voice Connector をプロビジョニングするだけで、今日から Voice Connector をお使いいただけます。このサービスでは、業界標準の Session Initiation Protocol (SIP) を使用してお客様のオンプレミスの電話システムと通信します。SIP 信号には Transport Layer Security (TLS) を使用して、音声メディアには Secure Real-time Transport Protocol (SRTP) を使用して通話が暗号化されます。
おわりに
AWSが公開しているソースコードからデモアプリを構築し、実際に使ってみてAmazon Chime SDKではどんなことができるのか確認してみました。
Amazon Chimeで出来ることはAmazon Chime SDKでもほとんど出来そうですね。これだけの豊富な機能を自由に自社のアプリケーションに追加できるのはすごいですね。
以上
8
