(小ネタ) [Amazon Connect] CCPを自前のボタンで操作(接続及び、切断)をしてみる

93件のシェア(ちょっぴり話題の記事)

1 はじめに

AIソリューション部の平内(SIN)です。

amazon-connect-streamsを使用すると、Amazon Connect(以下、Connect)で使用するソフトフォンを拡張することができます。

参考 :[Amazon Connect] amazon-connect-streamsを使用して、CCPにLOGINボタンとユーザー表示を追加してみました。

今回は、CCPを自前で用意したボタンで操作(接続及び、切断のみ)するものを試してみました。

下記は、動作を確認している様子です。

2 接続及び、切断

(1) accept()

着信した電話に応答するには、contact.accept()を使用します。

contact.accept({
   success: function() { ... },
   failure: function() { ... }
});

ここで、contactオブジェクトは、着信時にコールされるconnect.contact()イベントで取得しておきます。

connect.contact(function(contact) { ... });

(2) destroy()

接続中の呼を切断するには、connection.destroy()を使用します。

connection.destroy({
   success: function() { ... },
   failure: function() { ... }
});

ここで、登場するconnectionオブジェクトは、contactオブジェクトのメソッドgetAgentConnection()で取得しておきます。

(3) contact及び、connection

contact及び、connectionオブジェクトを初期化しているコードは、以下のとおりです。

let current_contact = undefined;
let current_connection = undefined;

connect.contact( (contact) => {
    current_contact = contact;
    current_connection = current_contact.getAgentConnection();
});

新しい呼び出しが始まる毎に、上記のイベントconnect.contact()で初期化されます。

3 実装

作成したhtml(JavaScript)は、以下のとおりです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Extened CCP</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="amazon-connect-1.3.js"></script>
</head>

<body>
    <div id="header">
        <button id="login_button" onclick="login()">Login</button>
        <div id=user_name></div>
    </div>
    <center>
        <table>
            <tr>
                <td>
                    <div id="containerDiv" style="width: 320px; height: 465px;"></div>
                </td>
                <td>
                    <button class="btn" id="acceptCallButotn" onClick="acceptCall()">接続</button>
                    <button class="btn" id="destroyCallButotn" onClick="destroyCall()">切断</button>
                </td>
            </tr>
        </table>
    </center>
</body>

<script type="text/javascript">
    let login_agent = undefined;
    let current_contact = undefined;
    let current_connection = undefined;
    const ccpUrl = "https://sample.awsapps.com/connect/ccp#/";
    connect.core.initCCP(containerDiv, {
        ccpUrl:ccpUrl,
        loginPopup:alse, // ログイン画面をポップアップしない
        softphone: {
            allowFramedSoftphone: true
        },
    });
    connect.agent( agent => {
        login_agent = agent; //エージェントオブジェクトを取得
    });
    connect.agent(function(agent) {
        const config = agent.getConfiguration();
        $("#user_name").text(config.username);
    });

    connect.contact( (contact) => {
        $('#acceptCallButotn').css({'background-color': 'Lime'});
        current_contact = contact;
        current_connection = current_contact.getAgentConnection();
    });

    let bus = connect.core.getEventBus();
    bus.subscribe(connect.EventType.TERMINATED, function () {
        $('#user_name').text('');
        $('#login_button').show();
        location.reload();
    });
    bus.subscribe(connect.AgentEvents.INIT, function (){
        $('#login_button').hide();
        handleWin.close();
    });

    function login() {
        handleWin = window.open('https://sample.awsapps.com/connect/login?');
    }
    // 接続
    function acceptCall() {
        current_contact.accept( {
            success: function() {
                $('#acceptCallButotn').css({'background-color': 'Silver'});
                $('#destroyCallButotn').css({'background-color': 'Red'});
                console.log("destroy success")
            },
            failure: function() { 
                console.log("accept failure")
            }
        });
    }
    // 切断
    function destroyCall() {
        current_connection.destroy({
            success: function() {
                $('#destroyCallButotn').css({'background-color': 'Silver'});
                console.log("destroy success")
            },
            failure: function() { 
                console.log("destroy failure")
            }
        });
    }

</script>
</html>

4 最後に

CCPは、amazon-connect-streamsのイベント及び、メソッドを使用して、全て自前で実装する事が可能です。

CCP自体を非表示にして、必要な機能のみを実装した、独自のCCPを作成することも可能です。本格的に実装するとなると、結構、気合入りそうですが・・・

コメントは受け付けていません。