[Amazon Connect]VDI上の音声品質を向上させるためにメディアレスのCCPを作成する (Amazon Connect Streams API)

VDI環境でAmazon Connectを利用する際、音声品質に課題がある方はメディアレス設定で解決できます。

#Amazon Connect

#Amazon CloudFront

#Amazon S3

#Amazon WorkSpaces Web

#AWS

洲崎義人

2023.05.11

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、洲崎です。
WorkSpaces等、VDI環境でAmazon Connectを利用する際、そのまま利用すると音声の品質に影響を与える可能性があります。その回避策(メディアレス設定)について共有します。

VDI環境でのAmazon Connectの利用

Amazon Connectはブラウザベースのソフトフォンを利用するため、VDI上でも利用することが可能です。
一方、音声パケットもVDIのネットワークに乗せて処理を行うと、通話品質の問題・遅延等が発生しやすくなります。
ドキュメント上でも「VDI環境でリモート接続でソフトフォンを使用すると、オーディオ品質に影響を与える可能性があります。」と記載があります。

上記の事象を避けるために、音声パケットのみVDIのネットワークを通さずにシグナリングさせる方法があります。
VDI上で音声パケットは通信しないAmazon ConnectのCCPを操作しながら、裏で音声パケット用のCCPを起動し通話をさせる方法です。
音声パケットの通信をさけることから、メディアレスと呼ばれています。
AWSのbuilders.flashからの引用ですが、②VoIP直方式がこの手法に当てはまります。

(AWSを使った働き方改革:第2回-Amazon Connectで実現する在宅勤務より参照)

メディアレスのCCPを用意するには、Amazon Connect Streams APIを使ってカスタムCCPを作成するか、Salesforceと連携している場合はSalesforce Adapterで設定を行う必要があります。
今回は前者のAmazon Connect Streams APIでメディアレス機能を搭載したカスタムCCPを作成します。

構成図

今回の構成イメージはこちらです。

VDIの対象として、今回はAmazon WorkSpaces webを起動しその中でカスタムCCPを起動します。
カスタムCCPはJavascriptで構成されている為、S3にindex.htmlとconnect-streams-min.jsを置いてCloudFront経由で静的サイトとして表示させるようにします。
ローカル環境で音声パケットを通す為のCCPを起動します。
カスタムCCPと通常のCCPは同じAmazon Connect ユーザーでログインしているとステータスが同期されるため、エージェントはVDI上のカスタムCCPのみ触る形です。

やってみる

S3の作成

カスタムCCPのJavaScriptとhtmlファイルを格納するS3バケットを作成します。
「パブリックアクセスブロックはすべてブロック」とし、一意の名前でバケットを作成します。

CloudFrontの作成

作成したS3バケットをオリジンドメインとして、CloudFrontのディストリビューションを作成します。
オリジンアクセスは「Origin access control settings (recommended)」、ビューワーは「Redirect HTTP to HTTPS」を選択します。
デフォルトルートオブジェクトは「index.html」と入力します。

作成できたらS3のバケットポリシー内容が表示されるので、コピーしてS3のバケットポリシーを更新します。

Amazon ConnectにCloudFrontディストリビューションのドメイン名を登録

CloudFrontのディストリビューションドメイン名を確認し、控えておきます。

Amazon Connectのコンソールの「承認済みドメイン」に移動し、控えたドメイン名を登録します。

カスタムCCPの作成

Amazon Connect Streams APIを使ったカスタムCCPの作成を行います。
今回は下記二つのファイルを利用します。

index.html
connect-streams-min.js

index.html

Webブラウザでアクセスする「index.html」ページを作成します。
今回はメディアレス以外の設定は行わない為、実際に動作する最小構成がベースとなっています。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript"src="connect-streams-min.js"></script>
    </head>
    <body onload="init()">
        <div id="container-div" style="width: 400px; height: 600px;"></div>
        <script type="text/javascript">
            const containerDiv = document.getElementById("container-div");
            const instanceURL = "https://your-instance-ailias.my.connect.aws/ccp-v2/";    
        
            function init() {
                connect.core.initCCP(containerDiv, {
                    ccpUrl: instanceURL,
                    loginPopup: true,
                    loginOptions: {
                    autoClose: true,
                    },
                    softphone: {
                        allowFramedSoftphone: false,
                    },
                });
            }
        </script>
    </body>
</html>

変更している点はハイライトしているallowFramedSoftphoneの部分です。
通常はtrueですが、falseに変更することで音声パケットを通さない設定になります。

ライブラリファイルのconnect-streams-min.jsはGithubから入手するか、npmから入手できます。
今回はGithubにあるconnect-streams-min.jsからダウンロードして保存します。

用意したindex.htmlとconnect-streams-min.jsをS3にアップロードします。

これで設定完了です。

(補足)Amazon WorkSpaces Webの準備

今回VDI環境として、WorkSpaces Webを利用しますが、別記事で作成方法を記載しているので、こちらをご確認ください。

動作確認

WorkSpaces Webを立ち上げて、CloudFrontドメインからカスタムCCPを起動します。
ポップアップがブロックされるので、許可すると、Amazon Connectのログイン画面がポップアップします。

ログインが成功すると、メディアレス機能を搭載したカスタムCCPが表示されます。

※なお、メディアレス機能があるカスタムCCPのみのログインで電話がかかってきても「接続中」の処理から先に進まず応答できません。

次に、ローカル環境で標準のCCPを立ち上げて、同じユーザーでログインします。

電話をかけるとカスタムCCP・標準CCPどちらでも電話を取ることができて、会話することができました！
音声の品質についても会話している時と、録音ファイルを聞き起こした時、双方とも違和感ありませんでした。

今は動作を伝えるために、標準CCP・カスタムCCPどちらも表示していますが、エージェントが利用する際はカスタムCCPのみ全面に表示させ、裏で標準CCPを起動する形が望ましいと思います。