Integrar chamadas de vídeo e compartilhamento de tela na área de trabalho personalizada do atendente usando o Amazon Connect Streams JS

Use o Amazon Connect Streams JS para verificar se o contato recebido é um contato WebRTC. Use o subtipo de contato "connect:WebRTC" conforme mostrado no seguinte exemplo de código:

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

Você pode recuperar o nome de exibição do cliente usando o campo de nome em contact contact.getName().

Para verificar se um contato tem capacidade 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 verificar se o atendente tem permissão de vídeo para realizar videochamadas:

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

Para aceitar uma videochamada, o contato deve ter capacidade de vídeo e o atendente deve ter permissão de vídeo.

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

Para participar de uma sessão de vídeo, chame getVideoConnectionInfo:

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

Para criar uma interface do usuário de vídeo e participar de uma sessão de videoconferência, consulte:

Para simplificar, os trechos de código a seguir usam exemplos da 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();
    }
}    

Para renderizar a grade de vídeo, use a da biblioteca VideoTileGridde componentes do Amazon Chime SDK React ou personalize o comportamento da interface do usuário usando RemoteVideoTileProvider.

Para renderizar uma pré-visualização de vídeo, você pode usar VideoPreviewos CameraSelectioncomponentes. Para escolher ou alterar um vídeo da câmera, você pode usar meetingManager.selectVideoInputDevice ou meetingManager.startVideoInput se a reunião estiver em andamento.

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

Para implementar o desfoque de fundo, consulte useBackgroundBlur.

Para obter um exemplo de código sobre como criar uma experiência de vídeo personalizada, consulte este exemplo de Amazon Chime SDK: demonstração do Amazon Chime React Meeting.