Integrare le chiamate video e la condivisione dello schermo nel desktop personalizzato per agenti utilizzando Amazon Connect Streams JS - Amazon Connect
Aggiungere il supporto per il videoAggiungere 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à.

Integrare le chiamate video e la condivisione dello schermo nel desktop personalizzato per agenti utilizzando Amazon Connect Streams JS

Questo argomento è destinato agli sviluppatori. Per i desktop personalizzati per agenti, devi apportare delle modifiche per supportare le chiamate video 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().

Aggiungere il supporto per il video

Completa i seguenti passaggi per aggiungere il supporto per la gestione del 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.

Impostando allowFramedScreenSharing su true il pulsante di condivisione dello schermo viene abilitato su un solo CCP in una finestra o in una scheda. Impostando allowFramedScreenSharingPopUp su true l’app per la condivisione dello schermo viene avviata 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 personalizzati per agenti.

  1. Verifica se un contatto dispone di 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. In questo modo ScreenSharingActivated viene aggiunto al contatto e quindi puoi cercare tale valore nel record del contatto. 

    contact.startScreenSharing();

  5. Chiama getVideoConnectionInfo per partecipare alla sessione. Puoi saltare il passaggio se l’agente ha effettuato l’accesso alla sessione video per gestire il video.

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

  6. Effettua l’accesso alla sessione utilizzando la libreria React Components dell’SDK di Amazon Chime. Per un frammento di codice, consulta il passaggio 6 in Aggiungere il supporto per il 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 stopScreenSharing quando termina la sessione.

    contact.stopScreenSharing();

  9. Puoi ricevere eventi per l’attività di condivisione dello schermo effettuando la sottoscrizione 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
    });
  }
}