Integrazione delle videochiamate nel desktop personalizzato per agenti

Per i desktop per agenti personalizzati, devi apportare delle modifiche per supportare le videochiamate. Di seguito sono riportati i passaggi di alto livello.

Nota

Se lo incorpori CCP direttamente nella tua applicazione agente personalizzata, assicurati che allowFramedVideoCall sia impostato su true quando avvii l'CCPutilizzo di Amazon Connect Streams JS.

1. Usa Amazon Connect Streams JS per verificare se il contatto in entrata è un contatto WebRTC. Usa il sottotipo di contatto "connect:WebRTC" come visualizzato nel codice di esempio seguente:

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

2. Puoi recuperare il nome visualizzato del cliente utilizzando il campo del nome in contact contact.getName().

Di seguito sono riportati i passaggi aggiuntivi per la gestione dei video nel caso in cui i clienti l'abbiano abilitata da parte loro:

1. Per verificare se un contatto dispone di funzionalità video:

   // 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. Per verificare se l'agente dispone dell'autorizzazione video per gestire le videochiamate:

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

3. Per accettare una videochiamata, il contatto deve disporre della funzionalità video e l'agente deve disporre dell'autorizzazione video.

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

4. Per partecipare a una sessione video, chiama getVideoConnectionInfo:

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

5. Per creare un'interfaccia utente video e partecipare a una sessione di videoconferenza, consulta:

   • Amazon Chime SDKper uno JavaScript GitHub

   • Amazon Chime SDKLibreria React Components attiva GitHub

6. Per semplicità, i seguenti frammenti di codice utilizzano esempi tratti dalla libreria Amazon Chime SDK React Components.

   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. Per renderizzare la griglia video, usa la libreria dei componenti VideoTileGriddi Amazon Chime SDK React o personalizza il comportamento dell'interfaccia utente utilizzando. RemoteVideoTileProvider

8. Per eseguire il rendering di un'anteprima video, puoi utilizzare VideoPreviewi CameraSelectioncomponenti. Per scegliere o modificare il video di una videocamera, puoi utilizzare meetingManager.selectVideoInputDevice o meetingManager.startVideoInput se la riunione è in corso.

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

9. Per implementare la sfocatura dello sfondo, consulta useBackgroundBlur.

10. Per un codice di esempio su come creare un'esperienza video personalizzata, guarda questo Amazon Chime SDK esempio: demo di Amazon Chime React Meeting.