Integración de las videollamadas y la pantalla compartida en el escritorio personalizado del agente mediante Amazon Connect Streams JS

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

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

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

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()

Para comprobar si el agente tiene permiso de vídeo para gestionar una videollamada:

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

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');
}

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

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

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

Para simplificar, en los siguientes fragmentos de código se utilizan ejemplos de la biblioteca de componentes de React del Amazon Chime SDK.

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();
    }
}    

Para renderizar la cuadrícula de vídeo, usa la biblioteca de componentes VideoTileGridde React del Amazon Chime SDK o personaliza el comportamiento de la interfaz de usuario mediante. RemoteVideoTileProvider

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);
}

Para implementar el desenfoque de fondo, consulte useBackgroundBlur.

Para ver un ejemplo de código sobre cómo crear una experiencia de vídeo personalizada, consulte este ejemplo del SDK de Amazon Chime : demostración de Amazon Chime React Meeting.