Intégration des appels vidéo dans votre bureau d’agent personnalisé

Pour les bureaux d’agent personnalisés, vous devez apporter des modifications pour prendre en charge les appels vidéo. En voici les principales étapes.

Note

Si vous l'intégrez CCP directement dans votre application d'agent personnalisé, assurez-vous qu'allowFramedVideoCallil est défini sur true lorsque vous lancez l'CCPutilisation d'Amazon Connect Streams JS.

1. Utilisez Amazon Connect Streams JS pour vérifier si le contact entrant est un RTC contact Web. Utilisez le sous-type de contact "connect:WebRTC", comme illustré dans l’exemple de code suivant :

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

2. Vous pouvez extraire le nom d’affichage du client en utilisant le champ de nom dans contact contact.getName().

Vous trouverez ci-dessous des étapes supplémentaires pour la gestion de la vidéo si vos clients l’ont activée de leur côté :

1. Pour vérifier si un contact dispose de la fonctionnalité vidéo :

   // 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. Pour vérifier si l’agent dispose de l’autorisation vidéo nécessaire pour traiter un appel vidéo :

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

3. Pour accepter un appel vidéo, le contact doit disposer de la fonctionnalité vidéo et l’agent doit disposer de l’autorisation vidéo.

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

4. Pour rejoindre une session vidéo, appelez getVideoConnectionInfo :

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

5. Pour créer une interface utilisateur vidéo et rejoindre une session de visioconférence, consultez :

   • Amazon Chime SDKpour JavaScript un GitHub

   • Amazon Chime SDKBibliothèque de composants React sur GitHub

6. Pour des raisons de simplicité, les extraits de code suivants utilisent des exemples de la bibliothèque de composants Amazon Chime SDK React.

   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. Pour afficher la grille vidéo, utilisez celle VideoTileGridde la bibliothèque de composants Amazon Chime SDK React ou personnalisez le comportement de l'interface utilisateur à l'aide de RemoteVideoTileProvider.

8. Pour afficher un aperçu vidéo, vous pouvez utiliser VideoPreviewdes CameraSelectioncomposants. Pour choisir ou changer une caméra vidéo, vous pouvez utiliser meetingManager.selectVideoInputDevice ou meetingManager.startVideoInput si la visioconférence est en cours.

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

9. Pour implémenter le flou d'arrière-plan, voir useBackgroundBlur.

10. Pour un exemple de code expliquant comment créer une expérience vidéo personnalisée, consultez cet Amazon Chime SDK exemple : démo de Amazon Chime React Meeting.