Skip to main content

How to integrate watchRTC with Amazon Connect

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.

Start by creating the sample:
npx create-react-app amazon-wrtcsdk-intergraion
cd amazon-wrtcsdk-intergraion
Add the Amazon dependency to the package.json:
yarn add amazon-connect-streams
Add our watchRTC SDK dependency to the package.json:
yarn add @testrtc/watchrtc-sdk
Add connect-rtc.js dependency to the head tag in the index.html file:
<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)

When initializing Amazon CCP, we need to make sure watchRTC gets called properly. For that purpose, we follow Amazon Connect Streams PI instructions to initialize CCP. JavaScript example:
{
...
  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.

First things first here – make sure to have the softphone parameter (within the second parameter of connect.core.initCCP()) with
softphone: {
  allowFramedSoftphone: false
}, 

This would stop embedded CCP from handling softphone call automatically.

Step 4: Initialize the softphone manager explicitly

Now make sure to add this line after the call to initCCP():
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

Now that we explicitly create the softphone manager, it is time to make sure that once it initializes it also initializes watchRTC. For that purpose, add the following code into subscribeToAgentEvents():
connect.agent(subscribeToAgentEvents);

function subscribeToAgentEvents(agent) {
...
  
  const agentName = agent.getName();
  watchRTC.init({
    rtcApiKey: {apiKey}
    rtcRoomId: {roomName},
    rtcPeerId: agentName
  });

...
}

Was this article helpful?

0 out of 0 found this helpful