この記事は公開されてから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>
4 最後に
CCPは、amazon-connect-streamsのイベント及び、メソッドを使用して、全て自前で実装する事が可能です。
CCP自体を非表示にして、必要な機能のみを実装した、独自のCCPを作成することも可能です。本格的に実装するとなると、結構、気合入りそうですが・・・