Integra le videochiamate e la condivisione dello schermo nel tuo desktop personalizzato per agenti utilizzando Amazon Connect Streams JS - Amazon Connect
Aggiungi il supporto per i videoAggiungi il supporto per la condivisione dello schermo

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à.

Integra le videochiamate e la condivisione dello schermo nel tuo desktop personalizzato per agenti utilizzando Amazon Connect Streams JS

Questo argomento è destinato agli sviluppatori. Per i desktop personalizzati per agenti, è necessario apportare modifiche per supportare le videochiamate e la condivisione dello schermo. Di seguito sono riportati i passaggi di alto livello.

Nota

Se incorpori il CCP direttamente nella tua applicazione agente personalizzata, assicurati che allowFramedVideoCall sia impostato su true quando avvii il CCP utilizzando Amazon Connect Streams JS.

  1. Usa Amazon Connect Streams JS per verificare se il contatto in arrivo è un contatto WebRTC. Usa il sottotipo di contatto "connect:WebRTC" come visualizzato nel codice di esempio seguente:

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

  2. Puoi recuperare il nome visualizzato del cliente utilizzando il campo del nome in contact contact.getName().

Aggiungi il supporto per i video

Completa i seguenti passaggi per aggiungere il supporto per la gestione dei video quando i tuoi clienti lo hanno abilitato.

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

  2. Per verificare se l'agente dispone dell'autorizzazione video per gestire le videochiamate:

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

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

  4. Per partecipare a una sessione video, chiama getVideoConnectionInfo:

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

  5. Per creare un'interfaccia utente video e partecipare a una sessione di videoconferenza, consulta:

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

  7. Per eseguire il rendering della griglia video, utilizza la VideoTileGridlibreria Amazon Chime SDK React Components o personalizza il comportamento dell'interfaccia utente utilizzando. RemoteVideoTileProvider

  8. Per eseguire il rendering di un'anteprima video, puoi utilizzare VideoPreviewi CameraSelectioncomponenti. Per scegliere o modificare il video di una videocamera, puoi utilizzare meetingManager.selectVideoInputDevice o meetingManager.startVideoInput se la riunione è in corso.

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

  9. Per implementare la sfocatura dello sfondo, consulta useBackgroundBlur.

  10. Per un esempio di codice su come creare un'esperienza video personalizzata, guarda questo esempio dell'SDK di Amazon Chime : demo della conferenza React di Amazon Chime.

Aggiungere il supporto per la condivisione dello schermo

Nota

Se utilizzi il out-of-box CCP direttamente nella tua applicazione agente personalizzata, assicurati che allowFramedScreenSharing sia allowFramedScreenSharingPopUp impostato su true quando avvii il CCP utilizzando Amazon Connect Streams JS.

L'impostazione su allowFramedScreenSharing true abilita il pulsante di condivisione dello schermo su un solo CCP in una finestra o scheda. L'impostazione allowFramedScreenSharingPopUp su true avvia l'app per la condivisione dello schermo in una finestra separata quando l'agente sceglie il pulsante di condivisione dello schermo. Per ulteriori dettagli, consulta la documentazione di Amazon Connect Streams JS.

Completa i seguenti passaggi per abilitare la condivisione dello schermo sui desktop degli agenti personalizzati.

  1. Verifica se un contatto dispone della funzionalità di condivisione dello schermo. 

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

  2. Verifica se l'agente dispone dell'autorizzazione video.

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

  3. Verifica se l'agente può avviare una sessione di condivisione dello schermo per il contatto idoneo.

    fun canStartScreenSharingSession() {
    return contactgetContactSubtype() === "connect:WebRTC" &&
    contact.hasScreenShareCapability() &&
    agent.getPermissions().includes('videoContact');
}

  4. Chiama startScreenSharing per avviare la sessione di condivisione dello schermo. Ciò si aggiunge ScreenSharingActivated al contatto, consentendoti di cercarlo nel record del contatto. 

    contact.startScreenSharing();

  5. Chiama getVideoConnectionInfo per partecipare alla sessione. Puoi saltare il passaggio se l'agente si è unito alla sessione video per gestire il video.

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

  6. Partecipa alla sessione utilizzando la libreria React Components di Amazon Chime SDK. Per un frammento di codice, consulta il passaggio 6. Aggiungi il supporto per i video

  7. Usa lo stesso VideoTileGriddi Amazon Chime SDK React Components per eseguire il rendering del riquadro video di condivisione dello schermo. Per ulteriori informazioni, consulta useContentShareState and Controls useContentShare

  8. Chiama al stopScreenSharing termine della sessione.

    contact.stopScreenSharing();

  9. Puoi ricevere eventi relativi all'attività di condivisione dello schermo iscrivendoti ai seguenti callback:

    initScreenSharingListeners() {
    this.contact.onScreenSharingStarted(() => {
        // Screen sharing session started
    });

    this.contact.onScreenSharingStopped(() => {
        // Screen sharing session ended
    });

    this.contact.onScreenSharingError((error) => {
        // Screen sharing session error occurred
    });
  }
}