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
<a name="integrate-video-calling-for-agents"></a>

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](https://github.com/aws/amazon-connect-streams).

1. Usa [Amazon Connect Streams JS](https://github.com/aws/amazon-connect-streams) 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"`

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

## Aggiungere il supporto per il video
<a name="support-video"></a>

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

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

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

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

1. Per partecipare a una sessione video, chiama `getVideoConnectionInfo`:

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

1. Per creare un'interfaccia utente video e partecipare a una sessione di videoconferenza, consulta:
   + Amazon Chime SDK [per JavaScript](https://github.com/aws/amazon-chime-sdk-js) on GitHub 
   + Amazon Chime Libreria di [componenti SDK React](https://github.com/aws/amazon-chime-sdk-component-library-react) su GitHub

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

1. Per eseguire il rendering della griglia video, utilizza la [VideoTileGrid](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-videotilegrid--page)libreria Amazon Chime SDK React Components o personalizza il comportamento dell'interfaccia utente utilizzando. [RemoteVideoTileProvider](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-providers-remotevideotileprovider--page) 

1. Per eseguire il rendering di un'anteprima video, puoi utilizzare [VideoPreview](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-previewvideo--page)i [CameraSelection](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-deviceselection-camera-cameraselection--page)componenti. 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);
   }
   ```

1. Per implementare la sfocatura dello sfondo, consulta [useBackgroundBlur](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-hooks-usebackgroundblur--page). 

1. 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](https://github.com/aws-samples/amazon-chime-sdk/tree/main/apps/meeting). 

## Aggiungere il supporto per la condivisione dello schermo
<a name="support-screen-sharing"></a>

**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](https://github.com/aws/amazon-connect-streams) 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](https://github.com/aws/amazon-connect-streams).

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

1. Verifica se l’agente dispone dell’autorizzazione video.

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

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

1. 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](ctr-data-model.md). 

   ```
   contact.startScreenSharing();
   ```

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

1. 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](#support-video).

1. Usa lo stesso [VideoTileGrid](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-videotilegrid--page)di Amazon Chime SDK React Components per eseguire il rendering del riquadro video di condivisione dello schermo. [Per ulteriori informazioni, consulta [useContentShareState and Controls](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-hooks-usecontentsharestate--page) useContentShare](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-hooks-usecontentsharecontrols--page) 

1. Chiama `stopScreenSharing` quando termina la sessione.

   ```
   contact.stopScreenSharing();
   ```

1. 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
       });
     }
   }
   ```