Amazon ConnectとAmazon Chime SDKを連携してビデオ機能が利用できる問合せシステムを試してみた

# 1.はじめに
コンタクトセンター最適化支援チームのbayashiです。

一般的にコンタクトセンターでは電話音声やテキストチャットを通してお客様と応対することが多いですが、ビデオ機能としてWebカメラ、またはPCの画面共有を活用できればより利便性の高いカスタマーサービスを提供できると思います。
AWSサービスのAmazon Connectでは標準でビデオ機能は提供されていませんが、AWS公式ブログにAmazon Chime SDKと連携してビデオ機能が使えるシステムを紹介されていたので、実際に構築して動かしてみました。

・Video-Call Escalation powered by Amazon Connect and Amazon Chime SDK
https://aws.amazon.com/jp/blogs/business-productivity/video-call-escalation-powered-by-amazon-connect-and-amazon-chime-sdk/
https://github.com/amazon-connect/video-call-escalation


# 2.Amazon Chime SDKとは
オンラインミーティングやビデオ会議を行うためのAWSサービスにAmazon Chimeがあります。その技術を利用したAmazon Chime SDKを使うことで、「Amazon Chimeの通信基盤を利用した音声、ビデオ、画面共有などの機能」を自社アプリケーションに追加することができます。

詳細は以下のリンク先よりご確認ください。
・Amazon Chime SDKとは？〜BtoCサービスにおけるデジタルCXをさらに進化させるソリューションになりそう！〜
https://dev.classmethod.jp/articles/what-is-the-amazon-chime-sdk/

・Amazon Chime SDKとは？
https://ac.geekfeed.co.jp/what-is-chime-sdk/	

# 3.システム構成
冒頭で紹介した「Video-Call Escalation powered by Amazon Connect and Amazon Chime SDK」を構築した場合のシステム構成です。

![a1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2605350/ead7703b-09f3-f1a5-ea9e-8977726e7a6b.jpeg)


[転載元] https://aws.amazon.com/jp/blogs/business-productivity/video-call-escalation-powered-by-amazon-connect-and-amazon-chime-sdk/

ほえぇぇ…なかなか広大な構成となっております。
全ての構成を理解しているわけではないため細かい制御は割愛しますが、システムの動作概要です。（構築時に認証の方式を選択ができ、SSOなしログインの場合です。）

①オペレーター：Amazon Cognito経由でAmazon Connectへログイン
　▽AWSサービス：Amazon Cognito、API Gateway/CCPLoginLambda、AWS STS、Amazon Connect、API Gateway/Lambda putConnectUserCache、DynamoDB
②問い合わせ者：問合せホームページへアクセス
　▽AWSサービス：Amazon CloudFront、Amazon S3
③チャットでAmazon Connectオペレーターへ問い合わせ
　▽AWSサービス：API Gateway ChatAPI、StartChatLambda、Amazon Connect（Chat SDK）
④会議通話を開始
　▽AWSサービス：Amazon Chime Media Services、API Gateway MeetingAPI、DynamoDB、ChimeAPI Lambdas、API Gateway ChimeAPI

[概要詳細] https://github.com/amazon-connect/video-call-escalation/blob/main/diagrams/vceAuthentication.jpg

# 4.構築前提条件

・AWSアカウント
・管理者権限を持つAWS IAMユーザー
・Amazon Connectインスタンス（SSO / SAMLが有効）
・コンピューターにインストールおよび構成されたNode (v14) 、 NPM (v8.5)
・コンピューターにインストールおよび設定されたAWS CLI（v2）
・コンピューターにインストールおよび設定されたAWS CDK（1.150）

# 5.構築
構築方法の紹介がメインではないことと、作業手順ボリュームが多いため割愛します。

試してみたい方は、冒頭のリンク先”Solution setup”以降の手順に沿って実施してみてください。筆者は慣れない作業だったため、初回構築に4時間ほどかかりましたが、一度慣れてしまえば1時間ほどで構築できるのではないでしょうか。


### ■構築補足事項

・ログインユーザーの作成
Amazon Cognitoの「VideoCallEscalation-UserPool」ユーザープール内にユーザーを作成します。
![a3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2605350/a51a063d-e538-7068-1cc9-2a06b54a5058.png)

Amazon Connectにも同じメールアドレスでユーザーを作成します。
![a5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2605350/91ddb08a-25b2-e5ce-0b4a-0a6dd1cc4369.png)


・問い合わせフロー
この後に説明する "6.問い合わせを試してみる-問い合わせ方法" の項番③で利用する問い合わせフローです。
![a10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2605350/7ae789f9-b120-a76c-ecd2-2b9c9cdb1162.png)
![a11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2605350/680d0446-f528-0f93-18e5-3211670a9222.png)

 
作業キューの設定で登録されている [videoRouteToAgent]の説明です。
デモサイトで問い合わせ者によって指定したメールアドレス（ログインユーザー）がLambda（VideoCallEscalation-StartChatLambda）から渡されてオペレーター指定で着信が入る仕組みとなります。
 
![a12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2605350/7e0dc910-f748-b06e-fd94-1775c7ed3859.png)

キュー別から"BasicQueue"など任意キューを指定してフローを公開し、デモサイトでは適当なメールアドレス形式を入力することでも着信動作として問題ありませんでした。
※メールアドレス形式ではない文字列だとLambda判定でNGになり、問い合わせ画面に進みませんでした。


・顧客キューフロー

![a13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2605350/f6f9240e-a815-4568-f3be-03168520d59d.png)


オペレーターがCCPで応答するまで、以下のメッセージが画面に表示されます。
「エージェントへお繋ぎします。→ (20秒経過) →お待たせしました。次はあなたの担当者と話す番です。→ (20秒経過) → お待たせしました。次は…(以降ループ」」



# 6.問い合わせを試してみる
### ■オペレーターログイン
①CloudFrontの説明に「CloudFront for VideoCallEscalation」と記載されている項目を選択し、
ディストリビューションドメイン名をコピーして、ブラウザでアクセスします。

![a2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2605350/df925a70-01bf-ca48-71bf-4f4d48bc9393.png)



アクセスするとログイン画面が表示されます。
ユーザープールで登録したメールアドレスとパスワードを入力します。

![a4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2605350/9a333a82-ea51-1711-b502-553d5b92c7c0.png)



③ログインに成功すると左側にCCP、右側にAmazon Chime SDKを利用したビデオ通話ができる画面が表示されます。

![a6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2605350/fd4cda91-18c3-a506-6cea-e705fc96f9c6.png)


### ■問い合わせ方法
①エージェントがログインした画面右上に[Demo website]があるのでアクセスします。

②デモサイトは問い合わせ者が使用するページとなります。右下の[Video Call now]ボタンを押下し、顧客名としての名前とメールアドレスを入力して[Continue]を押下します。」
このデモでは、Amazon Connectオペレーターのメールアドレスを指定することで問い合わせができる仕組みとなります。
 
![a7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2605350/634ee3ad-1b86-cbb5-5db0-e2b5872678fa.png)

デモサイトはスマートフォンからアクセスするとモバイル向けの画面幅には対応しておらず、適切な操作ができませんでした。そのため、以降の操作は全てPCからのアクセスです。


③オペレーターが呼び出されます。
オペレーターのステータスは着信可能な状態にしておきます。

【オペレーター画面】
![a8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2605350/3618954d-d258-52c3-31ff-c12014a021d4.png)


【問合せ者の画面】
![a9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2605350/9db6822b-9c86-e0d1-c231-ae828ffb9091.png)

 

④オペレーターは着信を受諾し、チャットで応対ができます。
Amazon Chime SDKで利用するMeeting IDは自動的に表示されます。

【オペレーター画面】
![a14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2605350/4d7933fe-f0a5-fde8-30c4-235336cb5c04.png)
 

【問合せ者の画面】
![a15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2605350/4fe6beff-6472-3664-a6f1-3a01b68c40cd.png)

 

⑤ビデオ通話を行います。
オペレーター画面右側の[START]を押下し、カメラのデバイス権限許可表示がされた場合は許可します。

【オペレーター画面】
![a16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2605350/9e4542af-d1e3-aa07-0bb5-340555fed618.png)
![a17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2605350/19790ae2-0b82-1cdf-b5bc-4008871eb63c.png)



⑥デバイスの設定を行い、[Join meeting]を押下するとビデオ通話が利用できます。

【オペレーター画面】
![a18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2605350/f94562aa-e06f-9ddf-661c-478cab1302f2.png)
![a19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2605350/41e89cbe-e5fe-3ab8-8a45-57fe6b21314d.png)


 
【問い合わせ者画面】
オペレーターで[Join meeting]を押下すると、問い合わせ者にも自動でデバイスの選択が表示されます。[Join]から接続できます。
![a20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2605350/4e526ffb-d9a2-84ac-ab3e-02ab3f43ac12.png)
![a21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2605350/6575ecce-ad65-6c3f-8c7f-3a947b63fc7e.png)

 

画像の例だとオペレーター、問い合わせ者ともにマイクとスピーカーはオン、カメラはオフで起動しました。
会議通話の開始後は、音声での問い合わせ対応が可能です。


⑦オペレーターのカメラデバイスを起動する場合、下部[Video]から選択します。
イメージ画像はカメラデバイス選択肢からSMTPE Color Barsを選択したのでカラーバーの画像が表示されていますが、通常はカメラデバイスを通して映像を共有できます。

【オペレーター画面】
![a22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2605350/f4f1e5d8-0435-80da-3ca2-993c7a8b3855.png)
![a23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2605350/4821f767-e9b5-d3a3-a951-cbe7ac93792f.png)

 

【問い合わせ者画面】
![a24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2605350/f084ee5a-9346-43b5-ca63-2743eb32946a.png)

 

問い合わせ者もカメラボタンで同様の操作が可能です。


⑧PCのデスクトップ画面全体、または特定のアプリケーション画面は[Contents]から共有対象物を選択で共有することができます。
![a25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2605350/2b4c45e2-0303-5765-b0dc-01bffeac0bec.png)

【問い合わせ者画面】
![a26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2605350/5d662472-ec94-d888-cc40-2a645d9efcdd.png)

問い合わせ者もPCアイコンから画面共有することができます。


⑨オペレーター画面の[Leave]からMeetingを終了できます。
![a27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2605350/36e71ea6-513d-2b7b-bcfb-93b827854cf3.png)


# 7.ビデオ通話の録音について
構築手順のConfigure CDK stacksにおいて”deploy-recording-stack”をtrue、その他のrecording項目も適切に設定、及びAmazon Connectの問い合わせフロー（問い合わせ属性で録音に関する箇所をtrue）設定で、ビデオ通話録音を有効にできるようです。
今回は録音機能を無効にして上記の検証を行いました。その後、改めて録音機能有効にして構築を行おうとしましたが、CloudFormationの展開時にpipeline関連のエラーが発生して検証することができませんでした。

詳細はこちらをご確認ください。
https://github.com/amazon-connect/video-call-escalation/blob/main/cdk-stacks/README.md#Video-Call-Recording

# 8.最後に
今回のソリューションを応用して実際のお問合せホームページに組み込んで利用する場合は、動作の仕組みを理解した上で作り込み（スマートフォンでの問い合わせにも対応含む）が必要になると思います。
将来、Amazon Connectの標準機能でビデオ通話が追加されると開発者は少ない工数で構築ができ、より身近にオムニチャネル化が進んでいくのではないでしょうか。