Integración de las videollamadas en el escritorio de agente personalizado

Para los escritorios de agente personalizados, debe realizar cambios para admitir las videollamadas. Los siguientes son pasos de alto nivel.

nota

Si lo inserta CCP directamente en su aplicación de agente personalizado, asegúrese de que allowFramedVideoCall esté establecido en true cuando inicie el CCP uso de Amazon Connect Streams JS.

1. Utilice Amazon Connect Streams JS para comprobar si el contacto entrante es un RTC contacto web. Utilice el subtipo de contacto de "connect:WebRTC" tal y como se muestra en el ejemplo siguiente:

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

2. Puede recuperar el nombre mostrado del cliente utilizando el campo de nombre de contact contact.getName().

Los siguientes son pasos adicionales para la gestión del vídeo si sus clientes lo han activado en su lado:

1. Para comprobar si un contacto tiene capacidad de vídeo:

   // 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. Para comprobar si el agente tiene permiso de vídeo para gestionar una videollamada:

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

3. Para aceptar una videollamada, el contacto debe poder recibir vídeo y el agente debe tener permiso para ver vídeo.

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

4. Para unirse a una sesión de vídeo, llame a getVideoConnectionInfo:

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

5. Para crear una interfaz de usuario de vídeo y unirse a una sesión de videoconferencia, consulte:

   • Amazon Chime SDKpara JavaScript uno GitHub

   • Amazon Chime SDKBiblioteca de componentes de React en GitHub

6. Para simplificar, los siguientes fragmentos de código utilizan ejemplos de la biblioteca de componentes de 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. Para renderizar la cuadrícula de vídeo, usa la biblioteca de componentes VideoTileGridde Amazon Chime SDK React o personaliza el comportamiento de la interfaz de usuario utilizando. RemoteVideoTileProvider

8. Para renderizar una vista previa de vídeo, puedes usar CameraSelectionlos componentes VideoPreviewy. Para elegir o cambiar el vídeo de una cámara, puede utilizar meetingManager.selectVideoInputDevice o meetingManager.startVideoInput si la reunión está en curso.

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

9. Para implementar el desenfoque de fondo, consulte useBackgroundBlur.

10. Para ver un ejemplo de código sobre cómo crear una experiencia de vídeo personalizada, consulta este Amazon Chime SDK ejemplo: Demo de Amazon Chime React Meeting.