As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.
Integrar a chamada de vídeo ao desktop do atendente personalizado
Para desktops de atendente personalizados, você precisa fazer alterações para dar suporte à chamada de vídeo. Estas são as etapas de alto nível.
nota
Se você incorporar o CCP diretamente em seu aplicativo de agente personalizado, certifique-se de que allowFramedVideoCall
esteja definido como verdadeiro ao iniciar o CCP uso do Amazon Connect Streams
-
Use o Amazon Connect Streams JS
para verificar se o contato recebido é um contato da 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()
.
Estas serão etapas adicionais para o tratamento de vídeos, se os clientes o tiverem habilitado por si:
-
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:
-
Amazon Chime SDKpara JavaScript
um GitHub -
Amazon Chime SDKBiblioteca de componentes do React
em GitHub
-
-
Para simplificar, os trechos de código a seguir usam exemplos da Biblioteca de Componentes do 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(); } }
-
Para renderizar a grade de vídeo, use o VideoTileGrid
da Biblioteca de 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 VideoPreview
os CameraSelection componentes. Para escolher ou alterar um vídeo da câmera, você pode usar meetingManager.selectVideoInputDevice
oumeetingManager.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 ver um exemplo de código sobre como criar uma experiência de vídeo personalizada, veja este Amazon Chime SDK exemplo: Demonstração do Amazon Chime React Meeting
.