4-3.Mute ボタンの追加

4-2で作成したカスタム CCP の機能追加例として、Mute/Unmute ボタンを追加します。 lab3

htmlファイルの編集

  1. CCPCource.html を開き、操作するボタンを追加します。
  2. customCCPDiv 内の Answer Call/Drop Call ボタンを定義している箇所に、Mute と Unmute ボタンを追加し、上書き保存します。
<tr>
	<td>
		<button type="button" id="ansCall" value="Answer Call">Answer Call</button>
	</td>
	<td>
		<button type="button" id="dropCall" value="Drop Call">Drop Call</button>
	</td>
	<td>
		<button type="button" id="mute" value="Mute">Mute</button>
	</td>
	<td>
		<button type="button" id="unmute" value="Unmute">Unmute</button>
	</td>
</tr>

js ファイルの編集

  1. CCPCourse.js を開きます。
  2. loadCCP 関数内の var 定義で、以下の2行を追加します。
var muteButton = document.getElementById("mute");
var unmuteButton = document.getElementById("unmute");
  1. subscribeToAgentEvents 関数に以下を追加します。ボタンをクリックした際に使用する関数を定義しています。

subscribeToContactEvents 関数と間違えないようにご注意ください。

function subscribeToAgentEvents(agent) {
	// Subscribing to Streams API Long Polling Agent events
	window.myCPP.agent = agent;
	agent.onRefresh(handleAgentRefresh);
	agent.onRoutable(handleAgentRoutable);
	agent.onNotRoutable(handleAgentNotRoutable);
	agent.onOffline(handleAgentOffline);
	agent.onStateChange(handleAgentStateChange);
	// Set the DOM button elements behaviour 
	$("#setReady").click(() => {
		goAvailable();
	});

	$("#setOffline").click(() => {
		goOffline();
	});
	
	$("#dropCall").click(() => {
		disconnectContact();
	});

	$("#ansCall").click(() => {
		acceptContact();
	});

	$("#mute").click(() => {
		goMute();
	});

	$("#unmute").click(() => {
		goUnmute();
	});
}
  1. setButtonUi 関数内の case ごとに、以下の行を break; の前に追加します。エージェントのステータスを条件( case )として、表示する色やボタンの有効/無効を変えています。通話中( Busy )時は Mute / Unmute ボタンを赤色にして有効化し、それ以外の case では白色で無効化しています。
  • case ‘Available’
  • case ‘Offline’
  • case ‘Ringing’
muteButton.style.backgroundColor = '#FFFFFF';
muteButton.style.color = '#000000';
unmuteButton.style.backgroundColor = '#FFFFFF';
unmuteButton.style.color = '#000000';
muteButton.disabled = true;
unmuteButton.disabled = true;
  • case ‘Busy’
muteButton.style.backgroundColor = '#FF0000';
muteButton.style.color = '#FFFFFF';
unmuteButton.style.backgroundColor = '#FF0000';
unmuteButton.style.color = '#FFFFFF';
muteButton.disabled = false;
unmuteButton.disabled = false;
  1. 以下の2つの関数を編集します。こちらは通話の accept/disconnect の際に、Mute/Unmute ボタンの表示/非表示を定義しています。
function acceptContact() {
	// Streams API call to Accept the Incoming Contact
	window.myCPP.contact.accept({
		success: function () {
			muteButton.style.display ="inline-block";
			unmuteButton.style.display ="none";
			console.log('Accepted via Streams');
		},
		failure: function () {
			console.log('Failed to establish connection via Streams');
		}
	});
}

function disconnectContact() {
	// Streams API call to Drop a Connected Contact
	window.myCPP.contact.getAgentConnection().destroy({
		success: function () {
			muteButton.style.display ="inline-block";
			unmuteButton.style.display ="inline-block";
			console.log('Contact disconnected via Streams');
		},
		failure: function () {
			console.log('Failed to disconnect the contact via Streams');
		}
	});
}
  1. 以下の2つの関数を追加します。こちらは Mute/Unmute ボタンを押した際のアクションを定義しています。
function goMute() {
	window.myCPP.agent.mute();
	muteButton.style.display ="none";
	unmuteButton.style.display ="inline-block";
	console.log("muted");
}

function goUnmute() {
	window.myCPP.agent.unmute();
	muteButton.style.display ="inline-block";
	unmuteButton.style.display ="none";
	console.log("unmuted");
}

S3 バケットのファイルを更新する

  1. この章で更新した以下の2つのファイルを、4-1 で作成した S3 バケットにアップロードし、上書きします。
  2. CCPCourse.js
  3. CCPCourse.html lab3

テスト

カスタム CCP ウェブサイトにアクセスする

  1. Chrome または Firefox ブラウザを開き、CloudFront ドメイン URL を開きます。
  2. 別のウインドウまたはタブで Amazon Connect のログイン画面が開くため、作成したエージェントのログイン名とパスワードを入力し、サインインをクリックします。
  3. ログインに成功するとウィンドウが閉じ、サンプルのカスタム CCP がログイン状態となります。 lab3

テストコールを発信する

  1. Set Ready ボタンをクリックして、エージェントを Available 状態であることを確認します。携帯電話等から、Amazon Connect の Custom-CCP コンタクトフローに割り当てた DID 番号にテストコールを行います。
  2. Answer Call ボタンを押し、通話が接続され Busy 状態になることを確認します。
  3. Agent Controls が変化しMute、Unmuteボタンが有効化されます。ボタンを押してミュート/アンミュートが機能することをご確認ください。 lab3 lab3
  4. 確認したら、通話を切断します。

このラボで更新したファイルのサンプルはこちらです。