Support & information center

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-sdkCode language: CSS (css)

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>Code language: HTML, XML (xml)

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
...
Code language: JavaScript (javascript)

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
}, Code language: JavaScript (javascript)

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});Code language: JavaScript (javascript)

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
  });

...
}Code language: JavaScript (javascript)