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.
Table of contents
- 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
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:
Step 2: Initialize Connect Contact Panel (CCP)
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
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():
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():