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

SIN

2019.05.30

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

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)は、以下のとおりです。

<br /><br /><br /><br /><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>

 
<div id="header"><button id="login_button">Login</button>
<div id="user_name"></div>
</div>
 
<table>
<tbody>
<tr>
<td>
<div id="containerDiv" style="width: 320px; height: 465px;"></div></td>
<td><button id="acceptCallButotn" class="btn">接続</button>
<button id="destroyCallButotn" class="btn">切断</button></td>
</tr>
</tbody>
</table>
 

<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>