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

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

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

1. Você pode recuperar o nome de exibição do cliente usando o campo de nome em ` contact contact.getName()`.

## Adicionar suporte para vídeo
<a name="support-video"></a>

Conclua as etapas a seguir para adicionar suporte ao processamento de vídeo quando os clientes o habilitarem.

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

1. Para verificar se o atendente tem permissão de vídeo para realizar videochamadas:

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

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

1. Para participar de uma sessão de vídeo, chame `getVideoConnectionInfo`:

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

1. Para criar uma interface do usuário de vídeo e participar de uma sessão de videoconferência, consulte:
   + [Amazon Chime SDK para um JavaScript](https://github.com/aws/amazon-chime-sdk-js) GitHub 
   + [Amazon Chime Biblioteca de componentes do SDK React](https://github.com/aws/amazon-chime-sdk-component-library-react) em GitHub

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

1. Para renderizar a grade de vídeo, use a da biblioteca [VideoTileGrid](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-videotilegrid--page)de componentes do Amazon Chime SDK React ou personalize o comportamento da interface do usuário usando [RemoteVideoTileProvider](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-providers-remotevideotileprovider--page). 

1. Para renderizar uma pré-visualização de vídeo, você pode usar [VideoPreview](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-previewvideo--page)os [CameraSelection](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-deviceselection-camera-cameraselection--page)componentes. Para escolher ou alterar um vídeo da câmera, você pode usar `meetingManager.selectVideoInputDevice` ou `meetingManager.startVideoInput ` se a reunião estiver em andamento.

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

1. Para implementar o desfoque de fundo, consulte [useBackgroundBlur](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-hooks-usebackgroundblur--page). 

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

## Adicionar suporte para compartilhamento de tela
<a name="support-screen-sharing"></a>

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

Conclua as etapas a seguir para habilitar o compartilhamento de tela nas áreas de trabalho personalizadas do atendente. 

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

1. Verifique se o atendente tem permissão de vídeo.

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

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

1. Chame `startScreenSharing` para iniciar a sessão de compartilhamento de tela. Isso adiciona `ScreenSharingActivated` ao contato, permitindo que você o pesquise no [registro do contato](ctr-data-model.md). 

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

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

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

1. Use o mesmo dos componentes React [VideoTileGrid](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-videotilegrid--page)do SDK do Amazon Chime para renderizar um bloco de vídeo de compartilhamento de tela. Para obter mais informações, consulte [useContentShareEstado](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-hooks-usecontentsharestate--page) e [useContentSharecontroles](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-hooks-usecontentsharecontrols--page) 

1. Chame `stopScreenSharing` ao encerrar a sessão.

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

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