If you integrate directly with the Amazon Connect API , then you need to take the following steps in order for watchRTC to be able to capture the WebRTC metrics in Amazon Connect sessions.
In general
- The watchRTC SDK needs to be initialized prior to any WebRTC calls take place
- Amazon Connect connect-rtc-js opens its WebRTC sessions inside an iframe
- In order to collect metrics from that iframe, you will need to modify the initial configuration of the Amazon Connect Streams API a bit
Integration steps
Step 1: Create the sample application and include watchRTC in it
For the purpose of this explanation, we will be using the Amazon Connect React sample application. You can apply a similar approach to your own application.
npx create-react-app amazon-wrtcsdk-intergraion
cd amazon-wrtcsdk-intergraion
yarn add amazon-connect-streams
yarn add @testrtc/watchrtc-sdk
<script type="text/javascript" src="https://github.com/aws/connect-rtc-js/blob/gh-pages/connect-rtc-1.1.6.min.js">
</script>
Step 2: Initialize Connect Contact Panel (CCP)
{
...
connect.core.initCCP(document.getElementById("ccp"),
{
ccpUrl: "https://${company}.my.connect.aws/ccp-v2",
region: "${region}",
loginPopup: true,
loginPopupAutoClose: true,
softphone: {
allowFramedSoftphone: false // make sure it’s false
},
pageOptions: {
enableAudioDeviceSettings: true,
enablePhoneTypeSettings: true
}
});
connect.core.initSoftphoneManager({ allowFramedSoftphone: true }); // make sure
...
Step 3: Disallow framed softphone
To allow watchRTC to access and collect the WebRTC metrics it needs, we will need to disallow the framed softphone feature and then add it once the manager gets initialized.
softphone: {
allowFramedSoftphone: false
},
This would stop embedded CCP from handling softphone call automatically.
Step 4: Initialize the softphone manager explicitly
connect.core.initSoftphoneManager({allowFramedSoftphone: true});
This allows your page to handle softphone calls with the connect-rtc.js loaded by your web page. allowFramedSoftphone : true is necessary if your page also lives in a frame, otherwise, you can remove this parameter.
Step 5: Initialize watchRTC
connect.agent(subscribeToAgentEvents);
function subscribeToAgentEvents(agent) {
...
const agentName = agent.getName();
watchRTC.init({
rtcApiKey: {apiKey}
rtcRoomId: {roomName},
rtcPeerId: agentName
});
...
}