Aamzon Connectでウェブページ上へ音声通話、および、ビデオ通話機能を埋め込む機能がリリースされました。
簡単に自分のWebサイトへ埋め込むことが可能で、公衆電話回線(PSTN)を経由せずに音声通話・ビデオ通話が実現できます。
試してみましたので、手順を紹介します。
ドキュメント
公式ドキュメントに手順があるので、それに沿って進めます。
以前からAmazon Connectにはチャットウィジェットを埋め込む仕組みがありましたが、そこにウェブ通話機能も追加されたイメージになるようです。
環境・構成など
- 東京リージョンの検証用Amazon Connectインスタンスを使用
- 検証用のWebサイト
- S3+Cloudfront+カスタムドメインでのホスティング
- サーバーワークスのWebページに問い合わせウィジェットを埋め込むイメージ
設定手順
コミュニケーションウィジェットを作成
新しく増えた[コミュニケーションウィジェット]ページより [ウィジェットを追加] 操作します。
ウェブ通話機能を有効に設定、コンタクトフローを選択します。
（今回はオフにしますが、チャット機能も組み合わせることができるようです）
ウィジェットの色やタイトルなどをカスタマイズ登録します。
（今回はサーバーワークス色とロゴを指定してみます）
埋め込み先のドメインを指定します。
ウィジェットが作成されたら、スクリプトをコピーしてWebページへ埋め込みます。
セキュリティプロファイルでビデオ通話を許可
ビデオ通話対応するエージェントについては、セキュリティプロファイル→コンタクトコントロールパネル(CCP)→ビデオ通話のアクセスを許可するように設定します。
許可されたエージェントのCCPの設定画面では、カメラプレビューと背景をぼかす機能の設定が可能になりました。
動作確認
Webページから通話を確認
まず、エージェント（オペレーター）として、Amazon Connectへログインし、CCPを開いてAvailable待機します。
次に、顧客として別のブラウザで作成したWebページを開き、設置したウィジェットをクリックします。
ウィジェットを開くと即座に呼び出しが開始し、エージェントのCCPへ着信します。
エージェントが応答すると音声通話が開始し、顧客側、エージェント側各々ビデオ通話を開始する操作を行うとビデオ通話できます。
1台のPCで実行しているため同じカメラ画像になっており、分かりにくいのですが、動作の様子をスクリーンショットしてみました。
スマートフォンからのアクセスを確認
顧客がスマートフォンからWebページを開いている場合を想定して、iPhone(iOS17)の標準ブラウザSafariからもビデオ通話を確認できました。
最後に
リモート会議・Webミーティングも日常の風景となった今では、「電話を掛ける」よりも気軽に使えるツールになる可能性を感じました。
