Integrate video calling into your custom agent desktop

For custom agent desktops, you need to make changes to support video calling. Following are high level steps.

Note

If you embed the CCP directly into your custom agent application make sure allowFramedVideoCall is set to true when you initiate the CCP using Amazon Connect Streams JS.

1. Use Amazon Connect Streams JS to check if the incoming contact is an WebRTC contact. Use contact subtype "connect:WebRTC", as shown in the following code example:

   contact.getContactSubtype() === "connect:WebRTC"

2. You can retrieve the customer display name by using the name field in contact contact.getName().

Following are additional steps for video handling if your customers have enabled it on their end:

1. To check whether a contact has video capability:

   // Return true if any connection has video send capability
   contact.hasVideoRTCCapabilities()
   
   // Return true if the agent connection has video send capability
   contact.canAgentSendVideo()
   
   // Return true if other non-agent connection has video send capability
   contact.canAgentReceiveVideo()

2. To check on whether the agent has video permission to handle video call:

   agent.getPermissions().includes('videoContact');

3. To accept a video call, the contact must have video capability and the agent must have video permission.

   function shouldRenderVideoUI() {
       return contact.getContactSubtype() === "connect:WebRTC" &&
       contact.hasVideoRTCCapabilities() &&
       agent.getPermissions().includes('videoContact');
   }

4. In order to join a video session, call getVideoConnectionInfo:

   if (shouldRenderVideoUI()) {
      const response = await
      contact.getAgentConnection().getVideoConnectionInfo();
   }

5. To build a video UI and join a video meeting session, see:

   • Amazon Chime SDK for JavaScript on GitHub

   • Amazon Chime SDK React Components Library on GitHub

6. For simplicity, the following code snippets use examples from the Amazon Chime SDK React Components Library.

   import { MeetingSessionConfiguration } from "amazon-chime-sdk-js";
   import {
     useMeetingStatus,
     useMeetingManager,
     MeetingStatus,
     DeviceLabels,
     useLocalAudioOutput
   } from 'amazon-chime-sdk-component-library-react';
   
   const App = () => (
     <MeetingProvider>
       <MyVideoManager />
     </MeetingProvider>
   );
   
   const MyVideoManager = () => {
       const meetingManager = useMeetingManager();
       if (shouldRenderVideoUI()) {
           const response = await contact.getAgentConnection().getVideoConnectionInfo();
           const configuration = new MeetingSessionConfiguration(
               response.meeting, response.attendee);
           await meetingManager.join(configuration, { deviceLabels: DeviceLabels.Video });
           await meetingManager.start();
       }
       
       function endContact() {
           meetingManager.leave();
       }
   }    

7. To render the video grid, use the VideoTileGrid from the Amazon Chime SDK React Components Library or customize the UI behavior using RemoteVideoTileProvider.

8. To render a video preview, you can use VideoPreview and CameraSelection components. To choose or change a camera video, you can use meetingManager.selectVideoInputDevice or meetingManager.startVideoInput if the meeting is in progress.

   const meetingManager = useMeetingManager();
   const { isVideoEnabled } = useLocalVideo();
   if (isVideoEnabled) {
       await meetingManager.startVideoInputDevice(current);
    } else {
       meetingManager.selectVideoInputDevice(current);
   }

9. To implement background blur, see useBackgroundBlur.

10. For sample code on how to build a custom video experience, see this Amazon Chime SDK sample: Amazon Chime React Meeting demo.