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 chamadas de vídeo e compartilhamento de tela na área de trabalho personalizada do atendente usando o Amazon Connect Streams JS
Este tópico é destinado a desenvolvedores. Para áreas de trabalho personalizadas de atendente, é preciso fazer alterações para dar suporte a chamadas de vídeo e compartilhamento de tela. Estas são as etapas de alto nível.
nota
Se você incorporar diretamente o CCP à aplicação de atendente personalizada, verifique se allowFramedVideoCall
está definido como verdadeiro ao iniciar o CCP usando 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()
.
Adicionar suporte para vídeo
Conclua as etapas a seguir para adicionar suporte ao processamento de vídeo quando os clientes o habilitarem.
-
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 VideoTileGrid
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 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
.
Adicionar suporte para compartilhamento de tela
nota
Se você usar a out-of-box CCP diretamente em seu aplicativo de agente personalizado, certifique-se allowFramedScreenSharing
de configurá-la como verdadeira ao iniciar a CCP usando o Amazon ConnectallowFramedScreenSharingPopUp
Definir allowFramedScreenSharing
como “true” habilita o botão de compartilhamento de tela em apenas um CCP em uma janela ou guia. Definir allowFramedScreenSharingPopUp
como “true” inicia a aplicação de compartilhamento de tela em uma janela separada quando o atendente escolhe o botão de compartilhamento de tela. Para obter instruções, consulte a documentação do Amazon Connect Streams JS
Conclua as etapas a seguir para habilitar o compartilhamento de tela nas áreas de trabalho personalizadas do atendente.
-
Verifique se um contato tem capacidade de compartilhamento de tela.
// Return true if any connection has screen sharing send capability contact.hasScreenShareCapability() // Return true if the agent connection has screen sharing send capability contact.canAgentSendScreenShare() // Return true if customer connection has screen sharing send capability contact.canCustomerSendScreenShare()
-
Verifique se o atendente tem permissão de vídeo.
agent.getPermissions().includes('videoContact');
-
Verifique se o atendente pode iniciar uma sessão de compartilhamento de tela para o contato qualificado.
fun canStartScreenSharingSession() { return contactgetContactSubtype() === "connect:WebRTC" && contact.hasScreenShareCapability() && agent.getPermissions().includes('videoContact'); }
-
Chame
startScreenSharing
para iniciar a sessão de compartilhamento de tela. Isso adicionaScreenSharingActivated
ao contato, permitindo que você o pesquise no registro do contato.contact.startScreenSharing();
-
Chame
getVideoConnectionInfo
para participar da sessão. Você pode pular a etapa se o atendente tiver entrado na sessão de vídeo para lidar com o vídeo.if (canStartScreenSharingSession) { contact.startScreenSharing(); const response = await contact.getAgentConnection().getVideoConnectionInfo(); }
-
Participe da sessão usando a biblioteca de componentes do React do SDK do Amazon Chime. Para obter um trecho de código, consulte a etapa 6 em Adicionar suporte para vídeo.
-
Use o mesmo dos componentes React VideoTileGrid
do SDK do Amazon Chime para renderizar um bloco de vídeo de compartilhamento de tela. Para obter mais informações, consulte useContentShareEstado e useContentSharecontroles -
Chame
stopScreenSharing
ao encerrar a sessão.contact.stopScreenSharing();
-
Você pode receber eventos da atividade de compartilhamento de tela assinando os seguintes retornos de chamada:
initScreenSharingListeners() { this.contact.onScreenSharingStarted(() => { // Screen sharing session started }); this.contact.onScreenSharingStopped(() => { // Screen sharing session ended }); this.contact.onScreenSharingError((error) => { // Screen sharing session error occurred }); } }