Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.
Integrazione delle videochiamate nel desktop personalizzato per agenti
Per i desktop per agenti personalizzati, devi apportare delle modifiche per supportare le videochiamate. Di seguito sono riportati i passaggi di alto livello.
Nota
Se lo incorpori CCP direttamente nella tua applicazione agente personalizzata, assicurati che allowFramedVideoCall
sia impostato su true quando avvii l'CCPutilizzo di Amazon Connect Streams
-
Usa Amazon Connect Streams JS
per verificare se il contatto in entrata è un contatto WebRTC. Usa il sottotipo di contatto "connect:WebRTC"
come visualizzato nel codice di esempio seguente:contact.getContactSubtype() === "connect:WebRTC"
-
Puoi recuperare il nome visualizzato del cliente utilizzando il campo del nome in
contact contact.getName()
.
Di seguito sono riportati i passaggi aggiuntivi per la gestione dei video nel caso in cui i clienti l'abbiano abilitata da parte loro:
-
Per verificare se un contatto dispone di funzionalità video:
// 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()
-
Per verificare se l'agente dispone dell'autorizzazione video per gestire le videochiamate:
agent.getPermissions().includes('videoContact');
-
Per accettare una videochiamata, il contatto deve disporre della funzionalità video e l'agente deve disporre dell'autorizzazione video.
function shouldRenderVideoUI() { return contact.getContactSubtype() === "connect:WebRTC" && contact.hasVideoRTCCapabilities() && agent.getPermissions().includes('videoContact'); }
-
Per partecipare a una sessione video, chiama
getVideoConnectionInfo
:if (shouldRenderVideoUI()) { const response = await contact.getAgentConnection().getVideoConnectionInfo(); }
-
Per creare un'interfaccia utente video e partecipare a una sessione di videoconferenza, consulta:
-
Amazon Chime SDKLibreria React Components
attiva GitHub
-
Per semplicità, i seguenti frammenti di codice utilizzano esempi tratti dalla libreria Amazon Chime SDK React Components.
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(); } }
-
Per renderizzare la griglia video, usa la libreria dei componenti VideoTileGrid
di Amazon Chime SDK React o personalizza il comportamento dell'interfaccia utente utilizzando. RemoteVideoTileProvider -
Per eseguire il rendering di un'anteprima video, puoi utilizzare VideoPreview
i CameraSelection componenti. Per scegliere o modificare il video di una videocamera, puoi utilizzare meetingManager.selectVideoInputDevice
omeetingManager.startVideoInput
se la riunione è in corso.const meetingManager = useMeetingManager(); const { isVideoEnabled } = useLocalVideo(); if (isVideoEnabled) { await meetingManager.startVideoInputDevice(current); } else { meetingManager.selectVideoInputDevice(current); }
-
Per implementare la sfocatura dello sfondo, consulta useBackgroundBlur
. -
Per un codice di esempio su come creare un'esperienza video personalizzata, guarda questo Amazon Chime SDK esempio: demo di Amazon Chime React Meeting
.