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

# Configurar recursos de chamadas na aplicação, pela web e por vídeo e recursos de compartilhamento de tela
<a name="inapp-calling"></a>

Os recursos de chamada Amazon Connect no aplicativo, pela web e por vídeo permitem que seus clientes entrem em contato com você sem sair do seu aplicativo web ou móvel. Você pode usar esses recursos para transmitir informações contextuais para o Amazon Connect. Isso permite que você personalize a experiência do cliente com base em atributos como o perfil do cliente ou outras informações, como ações realizadas anteriormente no aplicativo.

## O que é importante saber
<a name="inapp-calling-important"></a>
+ Durante uma videochamada ou sessão de compartilhamento de tela, os atendentes podem ver o vídeo ou o compartilhamento de tela do cliente mesmo quando este está em espera. É responsabilidade do cliente lidar com as informações de identificação pessoal (PII) adequadamente. Se quiser alterar esse comportamento, crie um CCP personalizado e um widget de comunicação. Para obter mais informações, consulte [Integrar chamadas na aplicação, pela web, por vídeo e compartilhamento de tela de maneira nativa à sua aplicação](config-com-widget2.md).

## Widget de comunicação: configurar chat, voz e vídeo tudo em um só lugar
<a name="one-page"></a>

Para configurar chamadas na aplicação, pela web e por vídeo, você usa a página **Widgets de comunicação**. Ela dá suporte a chat, voz, vídeo e compartilhamento de tela. A imagem a seguir mostra a seção **Opções de comunicação** da página quando está configurada para todas essas opções. 

![\[A seção Opções de comunicação da página Criar um widget de comunicação.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/comm-widget-all.png)


## Chamadas na aplicação, pela web e por vídeo com vários usuários
<a name="multi-user"></a>

É possível adicionar até quatro usuários a uma chamada de vídeo em andamento ou agendada na web ou na aplicação, com um total de seis participantes: o atendente, o primeiro usuário e quatro outros participantes (usuários ou atendentes).

Por exemplo, para ajudar a fechar uma transação hipotecária, você pode chamar o atendente e o cliente, o cônjuge do cliente, um tradutor e até mesmo um supervisor (ou seja, outro atendente) na chamada para ajudar a resolver qualquer problema rapidamente.

Para saber como habilitar chamadas via web, na aplicação e videochamadas com vários usuários, consulte [Habilitar chamadas na aplicação, pela web e por vídeo com vários usuários](enable-multiuser-inapp.md).

## Como configurar chamadas na aplicação, pela web e por vídeo e compartilhamento de tela
<a name="inapp-options"></a>

Há duas maneiras de incorporar chamadas Amazon Connect no aplicativo, chamadas pela web e por vídeo e compartilhamento de tela em seu site ou aplicativo móvel: 
+ Opção 1: [configurar um widget de out-of-the-box comunicação](config-com-widget1.md). Você pode usar o criador de interface do usuário para personalizar a fonte e as cores e proteger o widget para que ele possa ser lançado somente a partir do seu site. 
+ Opção 2: [integrar chamadas na aplicação, pela web e por vídeo de maneira nativa no aplicativo móvel](config-com-widget2.md). Escolha esta opção para criar um widget de comunicação do zero e integrá-lo ao aplicativo móvel ou site. Use o cliente Amazon Connect APIs e Amazon Chime SDK APIs para integrar-se de forma nativa ao seu aplicativo móvel ou site.

**nota**  
Se tiver áreas de trabalho de atendente personalizadas, você não precisará fazer nenhuma alteração para as chamadas na aplicação e pela web do Amazon Connect. No entanto, você precisa [integrar chamadas de vídeo e compartilhamento de tela](integrate-video-calling-for-agents.md).

# Configurar um widget de out-of-the-box comunicação no Amazon Connect
<a name="config-com-widget1"></a>

Use esta opção para criar widgets de comunicação para [navegadores](connect-supported-browsers.md#browsers-inapp) desktop e de dispositivos móveis. Ao final desse procedimento, o Amazon Connect gera um trecho de código HTML personalizado que você copia no código-fonte do site.

1. Faça login no site do Amazon Connect administrador usando uma conta de administrador ou uma conta de usuário que tenha **canais e fluxos**, **widget de comunicação - Crie** permissão em seu perfil de segurança.

1. Em Amazon Connect, no menu de navegação à esquerda, escolha **Canais**, **widgets de comunicação**. 

1. O assistente orienta você ao longo das três próximas etapas. 

## Etapa 1: selecionar canais de comunicação
<a name="widgetdetails"></a>

1. Na página **Widgets de comunicação**, insira um **Nome** e uma **Descrição** para o widget de comunicação. 
**nota**  
O nome deve ser exclusivo para cada widget de comunicação criado em uma instância do Amazon Connect.

1. Na seção **Opções de comunicação**, escolha como os clientes podem interagir com o widget. A imagem a seguir mostra opções para permitir chamadas pela web, por vídeo e compartilhamento de tela para clientes.   
![\[A página do widget de comunicação configurada para chamadas pela web, por vídeo e compartilhamento de tela.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/comm-widget-page-call.png)

1. Na seção **Chamada pela Web**, escolha se você deseja habilitar experiências de vídeo ou compartilhamento de tela para os clientes. A imagem anterior mostra opções nas quais os clientes podem ver o vídeo do atendente, ativar o vídeo e permitir que atendentes e clientes compartilhem suas telas. Para obter informações sobre como definir restrições no compartilhamento de tela, consulte [Habilitar restrição de URL para compartilhamento de tela](screen-sharing-url-restriction.md).

1. Escolha **Save and continue**.

## Etapa 2: personalizar widget
<a name="customizewidget"></a>

Conforme você escolhe essas opções, a visualização do widget é atualizada automaticamente para que você possa ver como vai ficar a experiência para os clientes.

![\[A visualização do widget de comunicação.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/netra-call-preview.png)


**Definir estilos de botão de acesso ao widget**

1. Escolha as cores do plano de fundo do botão inserindo valores hexadecimais ([códigos de cores HTML](https://htmlcolorcodes.com/)).

1. Escolha **Branco** ou **Preto** para a cor do ícone. A cor do ícone não pode ser personalizada.

**Personalizar nomes e estilos de exibição**

1. Forneça valores para a mensagem e a cor do cabeçalho, além da cor de fundo do widget. 

1. **URL do logotipo**: insira um URL no banner do seu logotipo a partir de um bucket do Amazon S3 ou de outra fonte online.
**nota**  
A visualização do widget de comunicação na página de personalização não exibirá o logotipo se for de uma fonte online que não seja um bucket do Amazon S3. No entanto, o logotipo será exibido quando o widget de comunicação personalizado for implementado em sua página.

   O banner deve estar no formato .svg, .jpg ou .png. A imagem pode ter 280 px (largura) por 60 px (altura). Qualquer imagem maior que essas dimensões será dimensionada para caber no espaço do componente do logotipo de 280 x 60.

   1. Para obter instruções sobre como fazer o upload de um arquivo, como o banner do seu logotipo, para o S3, consulte [Carregamento de objetos](https://docs.aws.amazon.com/AmazonS3/latest/userguide/upload-objects.html) no *Guia do usuário do Amazon Simple Storage Service*.

   1. Certifique-se de que as permissões da imagem estejam definidas corretamente para que o widget de comunicação tenha permissões para acessar a imagem. Para obter informações sobre como tornar um objeto do S3 acessível ao público, consulte [Etapa 2: adicionar uma política de bucket](https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html#bucket-policy-static-site) no tópico *Configurar permissões para acesso ao site*.

## Etapa 3: adicionar o domínio do widget
<a name="widgetdomain"></a>

Esta etapa permite a você proteger o widget de comunicação para que ele só possa ser lançado no site.

1. Insira os domínios do site em que você deseja colocar o widget de comunicação. O widget de comunicação só é carregado em sites selecionados nesta etapa. 

   Escolha **Adicionar domínio** para adicionar até 50 domínios.  
![\[A opção de adicionar domínio.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/chatwidget-add-domain.png)
**Importante**  
Verifique se seu site URLs é válido e não contém erros. Inclua o URL completo começando com https://.
Recomendamos usar https:// para sites e aplicações de produção.

1. Em **Adicionar segurança para solicitações do widget de comunicação**, para a experiência de configuração mais rápida, escolha **Não - Vou ignorar**.

   É recomendável escolher **Sim** para verificar se o usuário está autenticado. Para obter mais informações, consulte [Personalizar a experiência do cliente para chamadas na aplicação, pela web e por vídeo no Amazon Connect](optional-widget-steps.md). 

1. Escolha **Save and continue**.

   Êxito\$1 O widget foi criado. Copie o código gerado e o cole em cada página do site no qual você deseja que o widget de comunicação seja exibido.

## Habilitar os atendentes para chamadas na aplicação, pela web e por vídeo e compartilhamento de tela
<a name="agent-cx-cw"></a>

Para permitir que os atendentes usem a chamada por vídeo e o compartilhamento de tela, atribua as permissões do **Painel de controle do contato (CCP)**, **Chamadas de vídeo - Acessar** ao perfil de segurança.

O espaço de trabalho do Amazon Connect agente oferece suporte a chamadas Amazon Connect no aplicativo, pela web e por vídeo, além de compartilhamento de tela. Você pode usar a mesma configuração, roteamento, análise e aplicação do atendente das chamadas telefônicas e chat. Para começar, a única etapa é habilitar os perfis de segurança do atendente com as permissões para realizar chamadas de vídeo e compartilhar telas.

Para desktops de agentes personalizados, não há necessidade de alterações nas chamadas Amazon Connect no aplicativo e na web. Habilite os perfis de segurança do atendente com as permissões para fazer chamadas de vídeo e compartilhar telas e siga o guia abaixo sobre como integrar a chamada de vídeo à área de trabalho do atendente.

## Como um dispositivo cliente inicia uma chamada na aplicação ou na web
<a name="diagram-option1"></a>

O diagrama a seguir mostra a sequência de eventos de um dispositivo cliente (aplicativo móvel ou navegador) para iniciar uma chamada na aplicação ou pela web.

![\[Um diagrama conceitual que mostra como um dispositivo cliente inicia uma chamada.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/netra-gs-diagram-option1.png)


1. (Opcional) Você pode transmitir atributos capturados no site e validá-los com o token web JSON (JWT). 

1. O cliente clica no widget de comunicação no site ou na aplicação móvel. 

1. O widget de comunicação inicia a chamada web Amazon Connect transmitindo atributos contidos no JWT. 

1. O contato atinge o fluxo, é encaminhado e colocado na fila. 

1. O atendente aceita o contato.

1. (Opcional) Se o vídeo estiver habilitado para o cliente e o atendente, eles poderão iniciar o vídeo.

## Mais informações
<a name="cw-more-resources"></a>

Para obter informações adicionais sobre os requisitos de recursos de chamada de vídeo na aplicação, pela Web e por vídeo, consulte os seguintes tópicos:
+ [Requisitos de estação de trabalho do atendente para chamadas na aplicação, pela web e por vídeo no Amazon Connect](videocalling-networking-requirements.md)
+ [Navegadores compatíveis e sistema operacional móvel para recursos de videochamada no aplicativo, pela web e por vídeo](connect-supported-browsers.md#browsers-inapp) 

# Integrar chamadas na aplicação, pela web, por vídeo e compartilhamento de tela de maneira nativa à sua aplicação
<a name="config-com-widget2"></a>

Para integrar chamadas na aplicação, pela web, por vídeo e compartilhamento de tela do Amazon Connect à sua aplicação:

1. Use a [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API Amazon Connect para criar o contato.

1. Em seguida, use os detalhes retornados pela chamada de API para participar da chamada usando a biblioteca Amazon Chime cliente para [iOS](https://github.com/aws/amazon-chime-sdk-ios), [Android](https://github.com/aws/amazon-chime-sdk-android) ou [JavaScript](https://github.com/aws/amazon-chime-sdk-js). 

Para acessar informações sobre a criação de participantes adicionais, consulte [Habilitar chamadas na aplicação, pela web e por vídeo com vários usuários](enable-multiuser-inapp.md). 

[Consulte o seguinte repositório do Github para exemplos de aplicativos: amazon-connect-in-app -calling-examples.](https://github.com/amazon-connect/amazon-connect-in-app-calling-examples) 

**Topics**
+ [Como um dispositivo cliente inicia uma chamada na aplicação ou na web](#diagram-option2)
+ [Conceitos básicos](#diagram-option2-gs)
+ [Etapas opcionais](#optional-steps)

## Como um dispositivo cliente inicia uma chamada na aplicação ou na web
<a name="diagram-option2"></a>

O diagrama a seguir mostra a sequência de eventos de um dispositivo cliente (aplicativo móvel ou navegador) para iniciar uma chamada na aplicação ou pela web.

![\[Um diagrama conceitual que mostra como um dispositivo cliente inicia uma chamada.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/netra-gs-diagram.png)


1. O cliente usa a aplicação cliente (site ou aplicação) para iniciar uma chamada na aplicação ou na web.

1. O aplicativo cliente (site ou aplicativo móvel) ou servidor da web usa a Amazon Connect [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API para iniciar o contato, passando quaisquer atributos ou contexto para Amazon Connect o.

1. O aplicativo cliente ingressa na chamada usando os detalhes retornados [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)na etapa 2.

1. (Opcional) O cliente usa a [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)API para receber uma `ConnectionToken` que é usada para enviar DTMF por meio da API. [SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html)

1. O contato atinge o fluxo é encaminhado com base no fluxo e colocado na fila.

1. O atendente aceita o contato.

1. (Opcional) Se o vídeo estiver habilitado para o cliente e o atendente, eles poderão iniciar o vídeo.

1. (Opcional - não mostrado no diagrama) Participantes adicionais podem ser adicionados usando o [CreateParticipant[CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipant.html) APIse. 

## Conceitos básicos
<a name="diagram-option2-gs"></a>

Estas são as etapas de alto nível para começar:

1. Use a [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API para criar o contato. A API exibe os detalhes necessários para que o SDK do Amazon Chime participe da chamada.

1. Instancie o objeto `MeetingSessionConfiguration` cliente do Amazon Chime SDK usando as configurações retornadas por. [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)

1. Instancie `DefaultMeetingSession` cliente do SDK do Amazon Chime com `MeetingSessionConfiguration`, que foi criado na etapa 2 para criar uma sessão de reunião com o cliente. 
   + iOS

     ```
     let logger = ConsoleLogger(name: "logger") 
     let meetingSession = DefaultMeetingSession(
         configuration: meetingSessionConfig, 
         logger: logger
     )
     ```
   + Android

     ```
     val logger = ConsoleLogger()
     val meetingSession = DefaultMeetingSession(
         configuration = meetingSessionConfig,
         logger = logger,
         context = applicationContext
     )
     ```
   + JavaScript

     ```
     const logger = new ConsoleLogger('MeetingLogs', LogLevel.INFO);
     const deviceController = new DefaultDeviceController(logger);
     const configuration = new MeetingSessionConfiguration(
         meetingResponse, 
         attendeeResponse
     );
     const meetingSession = new DefaultMeetingSession(
         configuration, 
         logger, 
         deviceController
     );
     ```

1. Use o método `meetingSession.audioVideo.start()` para unir o contato WebRTC ao áudio.
   + iOS/Android

     ```
     meetingSession.audioVideo.start()
     ```
   + JavaScript

     ```
     await meetingSession.audioVideo.start();
     ```

1. Use o método `meetingSession.audioVideo.stop()` para desligar o contato WebRTC.
   + iOS/Android

     ```
     meetingSession.audioVideo.stop()
     ```
   + JavaScript

     ```
     meetingSession.audioVideo.stop();
     ```

## Etapas opcionais
<a name="optional-steps"></a>

Para operações adicionais e documentação abrangente da API, consulte os guias de visão geral de APIs específicas da plataforma:
+ **iOS**: [visão geral da API](https://aws.github.io/amazon-chime-sdk-ios/guides/api_overview.html).
+ **Android**: [visão geral da API](https://aws.github.io/amazon-chime-sdk-android/guides/api_overview.html)
+ **JavaScript**: [Visão geral da API](https://github.com/aws/amazon-chime-sdk-js/blob/main/guides/03_API_Overview.md)

### Enviar tons DTMF
<a name="send-dtmf-tones"></a>

Para enviar o DTMF para a chamada, APIs são necessários dois Amazon Connect Participant Service: [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)e respectivamente. [SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html)

**nota**  
`contentType`para a SendMessage API deve ser`audio/dtmf`.

1. Invoque [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)para recuperar`ConnectionToken`. (`ParticipantToken`é necessário para chamar essa API. Você pode encontrá-la na [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)resposta.)

1. Com o`ConnectionToken`, ligue [SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html)para enviar dígitos DTMF.

### Selecionar dispositivos de áudio
<a name="select-audio-devices"></a>

Para selecionar o input/output dispositivo de áudio, você pode usar os métodos do cliente Amazon Chime SDK para Android e iOS ou os recursos nativos do [iOS para iOS](https://developer.apple.com/documentation/avkit/avroutepickerview).

**iOS/Android**

```
meetingSession.audioVideo.listAudioDevices()
meetingSession.audioVideo.chooseAudioDevice(mediaDevice)
```

**JavaScript**

```
await meetingSession.audioVideo.listAudioInputDevices();
await meetingSession.audioVideo.listAudioOutputDevices();
await meetingSession.audioVideo.startAudioInput(device);
await meetingSession.audioVideo.chooseAudioOutput(deviceId);
```

### Silenciar e ativar o áudio
<a name="mute-unmute-audio"></a>

Para ativar e desativar o som, use `meetingSession.audioVideo.realtimeLocalMute()` e `meetingSession.audioVideo.realtimeLocalUnmute()`.

**iOS/Android**

```
meetingSession.audioVideo.realtimeLocalMute()
meetingSession.audioVideo.realtimeLocalUnmute()
```

**JavaScript**

```
meetingSession.audioVideo.realtimeMuteLocalAudio();
meetingSession.audioVideo.realtimeUnmuteLocalAudio();
```

### Iniciar vídeo próprio
<a name="start-self-video"></a>

Para iniciar o vídeo próprio, use o `meetingSession.audioVideo.startLocalVideo()`. Consulte os guias de APIs da biblioteca cliente para acessar mais informações sobre como enumerar e escolher dispositivos específicos.

**iOS/Android**

```
meetingSession.audioVideo.startLocalVideo()
```

**JavaScript**

```
meetingSession.audioVideo.startLocalVideoTile();
```

### Parar vídeo próprio
<a name="stop-self-video"></a>

Para interromper o vídeo próprio, use o `meetingSession.audioVideo.stopLocalVideo()`.

**iOS/Android**

```
meetingSession.audioVideo.stopLocalVideo()
```

**JavaScript**

```
meetingSession.audioVideo.stopLocalVideoTile();
```

### Habilitar vídeo do atendente
<a name="enable-agent-video"></a>

Para permitir o recebimento e o carregamento de vídeo do atendente dentro da aplicação móvel, use `meetingSession.audioVideo.startRemoteVideo()`. Você também precisará implementar observadores de blocos de vídeo e vincular blocos de vídeo para exibir visualizações.

**iOS/Android**

```
meetingSession.audioVideo.startRemoteVideo()
// Implement VideoTileObserver to handle video tiles
meetingSession.audioVideo.addVideoTileObserver(observer)
// In videoTileDidAdd callback:
meetingSession.audioVideo.bindVideoView(videoView, tileId: tileState.tileId)
```

**JavaScript**

```
// Remote video is received automatically when available
// Implement AudioVideoObserver to handle video tiles
meetingSession.audioVideo.addObserver(observer);
// In videoTileDidUpdate callback:
meetingSession.audioVideo.bindVideoElement(tileId, videoElement);
```

Consulte os guias de SDKs específicos da plataforma para ver detalhes completos da implementação do bloco de vídeos.

### Desabilitar vídeo do atendente
<a name="disable-agent-video"></a>

Para não permitir o recebimento e o carregamento de vídeo do atendente dentro da aplicação móvel, use `meetingSession.audioVideo.stopRemoteVideo()`.

**iOS/Android**

```
meetingSession.audioVideo.stopRemoteVideo()
meetingSession.audioVideo.unbindVideoView(tileId)
```

**JavaScript**

```
meetingSession.audioVideo.unbindVideoElement(tileId);
```

### Usar mensagens de dados
<a name="use-data-messages"></a>

Você poderá usar [mensagens de dados](https://github.com/aws/amazon-chime-sdk-js/blob/main/guides/03_API_Overview.md#9-send-and-receive-data-messages-optional) se precisar enviar qualquer status do lado do atendente para o usuário final. Por exemplo, quando os clientes estão em espera, você pode enviar uma mensagem de dados ao aplicativo do cliente para exibir uma mensagem informando que eles estão em espera e que o video/screen compartilhamento ainda está sendo enviado, ou você pode desativar o video/screen compartilhamento.

**iOS/Android**

```
meetingSession.audioVideo.realtimeSendDataMessage(topic, data, lifetimeMs)
meetingSession.audioVideo.addRealtimeDataMessageObserver(topic, observer)
```

**JavaScript**

```
meetingSession.audioVideo.realtimeSendDataMessage(topic, data, lifetimeMs);
meetingSession.audioVideo.realtimeSubscribeToReceiveDataMessage(topic, callback);
```

### Ouvir eventos interrompidos
<a name="listen-for-stop-events"></a>

Você pode ouvir os eventos quando a participação de um contato termina por meio do observador `audioVideoDidStop`. Os códigos de status específicos podem variar de acordo com a plataforma.

#### A chamada atinge a capacidade
<a name="call-reaches-capacity"></a>

Quando mais de seis pessoas tentarem participar da chamada, outros participantes receberão o erro a seguir e não poderão participar até que outros saiam.
+ **iOS:** `MeetingSessionStatusCode.audioCallAtCapacity` ou `MeetingSessionStatusCode.audioAuthenticationRejected`
+ **Android:** `MeetingSessionStatusCode.AudioCallAtCapacity` ou `MeetingSessionStatusCode.AudioAuthenticationRejected`.
+ **JavaScript:** `MeetingSessionStatusCode.AudioCallAtCapacity` ou `MeetingSessionStatusCode.AudioAuthenticationRejected`

#### Participante removido da chamada
<a name="participant-removed-from-call"></a>

Quando um participante é removido da chamada pelo atendente, mas o contato continua para outros participantes, ele recebe o código de status a seguir. Observe que, se a remoção do participante causar o término do contato, ele receberá esse status ou o status de término do contato.
+ **iOS:** `MeetingSessionStatusCode.audioServerHungup` ou `MeetingSessionStatusCode.audioAuthenticationRejected`
+ **Android:** `MeetingSessionStatusCode.AudioServerHungup` ou `MeetingSessionStatusCode.AudioAuthenticationRejected`.
+ **JavaScript:** `MeetingSessionStatusCode.AudioAttendeeRemoved` ou `MeetingSessionStatusCode.AudioAuthenticationRejected`

#### Fim do contato
<a name="contact-ends"></a>

Quando o contato real terminar completamente para todos os participantes, eles receberão o código de status a seguir.
+ **iOS:** `MeetingSessionStatusCode.audioCallEnded`
+ **Android:** `MeetingSessionStatusCode.AudioCallEnded`
+ **JavaScript:** `MeetingSessionStatusCode.AudioCallEnded`

# Habilitar chamadas na aplicação, pela web e por vídeo com vários usuários
<a name="enable-multiuser-inapp"></a>

Amazon Connect suporta a adição de usuários adicionais para participar da chamada no aplicativo, na web e em vídeo em uma chamada existente. É possível adicionar até quatro usuários a uma chamada de vídeo em andamento ou agendada pela web ou na aplicação, com um total de seis participantes: o atendente, o primeiro usuário e quatro outros participantes (usuários ou atendentes).

## Como adicionar participantes a uma chamada com vários usuários
<a name="how-to-add-participants"></a>

1. Para habilitar chamadas multiusuário, você precisa ativar o [monitoramento aprimorado de contatos multipartidários](monitor-conversations.md) a Amazon Connect partir do console.

1. Depois que isso for concluído, você poderá aproveitar a Amazon Connect [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API existente para criar um contato e encaminhar esse contato para um agente.

1. Para adicionar mais um participante, primeiro crie um participante passando `ContactId` da resposta da [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API para a [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)API. [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)não terá êxito até que o chamador original se conecte ao agente. Os recursos de vídeo e compartilhamento de tela do participante podem ser configurados no campo `ParticipantDetails.ParticipantCapabilities`.

1. Quando [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)concluído com sucesso, ele retorna um [token de participante](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html#connect-CreateParticipant-response-ParticipantCredentials). Esse token pode ser usado em uma solicitação para [CreateParticipantConnection](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html)com `Type` definido como`WEBRTC_CONNECTION`. A resposta inclui o [ConnectionData](https://docs.aws.amazon.com/connect/latest/APIReference/API_ConnectionData.html#connect-Type-ConnectionData-Meeting)que pode ser usado para participar da reunião usando as [bibliotecas de cliente do SDK do Amazon Chime](https://docs.aws.amazon.com/chime-sdk/latest/dg/mtgs-sdk-client-lib.html) para o participante adicional criado. Siga as [instruções de integração](config-com-widget2.md) para permitir que o usuário final da aplicação participe da reunião.
**nota**  
[CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)retorna um erro de Solicitação inválida se o agente ainda não estiver conectado ao contato. Para aplicações de negócios nas quais os usuários podem tentar ingressar antes que o atendente esteja conectado, consulte [Processar a participação de usuários simultâneos](#handling-concurrent-joins).

1. Os clientes adicionais podem se conectar a qualquer momento após as [CreateParticipantConnection](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html)devoluções. Depois que os participantes ingressam, [todo o comportamento adicional de voz e gravação é semelhante ao recurso com vários participantes](multi-party-calls.md). Os novos participantes podem ativar o compartilhamento de vídeo e tela, se seus recursos tiverem sido ativados na [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)solicitação.
**nota**  
Um total de apenas seis participantes (clientes e atendentes) podem participar de uma chamada ativa a qualquer momento. As bibliotecas cliente do SDK do Amazon Chime exibem um código de status indicando que a chamada está lotada quando uma ação é realizada para adicionar mais participantes além do limite que ocorre durante o ingresso na reunião.

1. Depois que os participantes se conectam à chamada e, depois, são desconectados normalmente ou não por um tempo pré-configurado, as credenciais de participante deles não são mais válidas. Se o `onAudioVideoDidStop` observador da biblioteca cliente receber um código de status indicando que o participante não é mais válido, os aplicativos podem acionar uma nova chamada de [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)e para o back-end [CreateParticipantConnection](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html)da sua empresa para participar novamente da chamada.

1. Para cada conexão de usuário adicional, Amazon Connect cria um novo contato e [registro de contato](ctr-data-model.md). Todos os contatos adicionais foram PreviousContactId configurados como InitialContactId (ou seja, aquele que foi criado pela [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API) para rastreá-lo até o contato original. cada registro de contato:
   + Tem um **"InitiationMethod“: “WEBRTC\$1API**”
   + Tem os seguintes atributos de segmento:

     ```
        "SegmentAttributes": {
           "connect:Subtype": {
             "ValueString": "connect:WebRTC"
           }
         },
     ```

   Além disso, cada registro de contato tem o nome de exibição fornecido em `CreateParticipant`. As informações do atendente não são preenchidas para nenhum contato adicional do usuário. Isso é para evitar a duplicação das informações do atendente.

   O diagrama a seguir ilustra como o contato anterior e o próximo IDs são mapeados em um cenário em que vários participantes e agentes são adicionados em uma chamada pela web, no aplicativo ou por vídeo.  
![\[Diagrama mostrando como IDs os contatos são mapeados para chamadas WebRTC de várias partes\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/multiparty-webrtc-contact-mapping.png)

## Processar a participação de usuários simultâneos
<a name="handling-concurrent-joins"></a>

É possível que as empresas queiram criar aplicações nas quais os usuários possam participar em qualquer ordem, a qualquer momento. Por exemplo, sua aplicação pode enviar por e-mail um link com um ID de compromisso externo a vários usuários, que deve ser usado para participar de uma chamada em um horário agendado. Para ter esse comportamento, os backends comerciais devem garantir que:
+ O primeiro usuário que entra aciona uma solicitação. StartWeb RTCContact 
+ Todos os usuários adicionais usam CreateParticipant e CreateParticipantConnection **somente depois que o primeiro usuário se conecta a um agente**.

Esta seção descreve uma possível implementação, supondo que o backend da sua empresa contenha uma loja (como o DynamoDB) que possa armazenar metadados sobre compromissos agendados. Observe que os compromissos agendados não são um recurso da implementação Amazon Connect, mas sim do exemplo.

Quando o usuário navega até a página, ele deve enviar uma solicitação ao backend. O backend confere:
+ Se o usuário pode iniciar o compromisso e se é o horário correto.
+ Se o Amazon Connect contato já foi criado por meio de uma chamada [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html).

**Se o contato ainda não tiver sido criado**, o cliente deve chamar a [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API com um [fluxo](connect-contact-flows.md) personalizado e um [atributo](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html#connect-StartWebRTCContact-request-Attributes) indicando a fila de agentes do agente correspondente que deveria participar da chamada. O fluxo deve incluir um bloco [Definir fila de trabalho](set-working-queue.md) configurado para usar a fila de atendentes fornecida nos atributos. O fluxo deve então encerrar com um bloco [Transferir para a fila](transfer-to-queue.md). Antes de a API ser chamada, o backend deve atualizar atomicamente o armazenamento para mover a chamada do estado “Nenhuma” para “Criando” e lidar com quaisquer exceções de modificação simultânea.

As credenciais do [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)devem ser devolvidas ao cliente e ele deve entrar imediatamente na chamada. O contato deve ser marcado como “Criado” no armazenamento comercial, junto com o ID do contato. **Essa API de negócios precisa ser sincronizada entre todos os possíveis participantes que ingressam**. Isso pode ser feito usando as operações atômicas fornecidas por um banco de dados.

**Se o contato estiver no estado “criando”**, o usuário adicional deverá retornar a esse estado, exibir as informações relevantes e tentar novamente após uma breve espera.

**Se o contato for criado**: eles devem recuperar o ID do contato e chamar a [DescribeContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_DescribeContact.html)API. O backend de negócios deve procurar o campo **`Contact.AgentInfo.ConnectedToAgentTimestamp`**. Se não existir, o primeiro usuário não se conectou ao atendente, e o usuário adicional deverá exibir as informações relevantes e tentar novamente após uma breve espera.

Se o campo existir, o back-end deve chamar e [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html), em seguida [CreateParticipantConnection](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html), obter [ConnectionData](https://docs.aws.amazon.com/connect/latest/APIReference/API_ConnectionData.html#connect-Type-ConnectionData-Meeting), conforme descrito nas seções anteriores.

O fluxo de backend deve ser semelhante ao seguinte.

![\[Fluxograma de backend para processar participações de usuários simultâneos\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/multiparty-backend-flow.png)


Você pode consultar os [exemplos de chamadas no aplicativo do Amazon Connect](https://github.com/amazon-connect/amazon-connect-in-app-calling-examples/tree/main/Web) GitHub para implementação.

**O atendente não vai ingressar usando o mesmo site**. O atendente deve definir o status no [Painel de controle de contatos](launch-ccp.md) como **Disponível**. Quando o primeiro cliente entra, o atendente é chamado automaticamente.

## Faturamento
<a name="multiuser-billing"></a>

O faturamento para participantes adicionais é equivalente ao faturamento existente para o cliente inicial e qualquer atendente na chamada. Áudio, vídeo e compartilhamento de tela geram suas próprias cobranças específicas correspondentes a cada participante.

## Comportamento da espera
<a name="multiuser-hold-behavior"></a>

Durante uma videochamada ou sessão de compartilhamento de tela, os atendentes podem ver o vídeo ou o compartilhamento de tela do participante mesmo quando ele está em espera. É responsabilidade do participante lidar com as PII adequadamente. Se estiver usando o aplicativo CCP nativo, o vídeo do atendente será desabilitado se algum participante que não seja atendente estiver em espera. Se quiser alterar esse comportamento, crie um CCP personalizado e um widget de comunicação. 

Para obter mais informações, consulte [Integrar chamadas na aplicação, pela web, por vídeo e compartilhamento de tela de maneira nativa à sua aplicação](config-com-widget2.md). 

## Limitação
<a name="multiuser-limitations"></a>

A seguinte limitação existe ao criar participantes adicionais na aplicação, pela web e por vídeo e de compartilhamento de tela:
+ Os participantes adicionais não poderão ter os recursos de vídeo definidos como **Enviar**, se o contato original tiver sido criado com os recursos de vídeo do cliente definidos como **Nenhum**.

# Personalizar a experiência do cliente para chamadas na aplicação, pela web e por vídeo no Amazon Connect
<a name="optional-widget-steps"></a>

As etapas deste tópico são opcionais, mas recomendadas. Elas permitem que você personalize a experiência do cliente com base nas ações realizadas anteriormente na aplicação. Esta opção fornece mais controle ao iniciar novas chamadas, inclusive a capacidade de transmitir informações contextuais como atributos.

 Depois de seguir essas etapas, você precisará trabalhar com o administrador do site para configurar seus servidores web para emitir JSON Web Tokens (JWTs) para novas chamadas

1. Se você já criou o widget de comunicação, na página **Widgets de comunicação**, escolha o widget para editá-lo. 

1. Na seção **Domínio e segurança**, escolha **Editar**. 

1. Em **Adicionar segurança às solicitações do widget de comunicação**, escolha **Sim**.  
![\[A opção Sim.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/chatwidget-choose-security.png)

1. Escolha **Save and continue**. O Amazon Connect cria o widget com o seguinte:
   + O Amazon Connect fornece uma chave de segurança de 44 caracteres na próxima página que você pode usar para criar. JWTs
   + O Amazon Connect adiciona uma função de retorno de chamada ao script de incorporação do widget de comunicação que verifica a existência de um JWT quando uma chamada é iniciada.

     É necessário implementar a função de retorno de chamada no snippet incorporado, conforme mostrado no exemplo a seguir.

     ```
     amazon_connect('authenticate', function(callback) {
       window.fetch('/token').then(res => {
         res.json().then(data => {
           callback(data.data);
         });
       });
     });
     ```

   Na próxima etapa, você receberá uma chave de segurança para todas as chamadas iniciadas nos sites. Peça ao administrador do site que configure seus servidores web para emitir JWTs o uso dessa chave de segurança. 

1. Escolha **Save and continue**.

1. Copie o trecho de código HTML personalizado e o insira no código-fonte do site.

## Método alternativo: transmitir atributos de contato diretamente do código do trecho
<a name="pass-attrib-from-code"></a>

**nota**  
Embora esses atributos estejam no escopo do prefixo `HostedWidget-`, eles ainda são mutáveis no lado do cliente. Use a configuração do JWT se precisar de PII ou dados imutáveis no fluxo de contatos. 

O exemplo a seguir mostra como transmitir atributos de contato diretamente do código do trecho sem habilitar a segurança do widget. 

```
<script type="text/javascript">
  (function(w, d, x, id){ /* ... */ })(window, document, 'amazon_connect', 'widgetId');
  amazon_connect('snippetId', 'snippetId');
  amazon_connect('styles', /* ... */);
  // ...
  
  amazon_connect('contactAttributes', {
   foo: 'bar'
  })
<script/>
```

### Usar os atributos em fluxos de contato
<a name="contact-flow-usage-voice"></a>

O bloco de fluxo [Verificar atributos do contato](check-contact-attributes.md) fornece acesso a esses atributos por meio do namespace **definido pelo usuário**, conforme mostrado na imagem a seguir. Você pode usar o bloco de fluxo para adicionar lógica de ramificação. O caminho completo é `$Attribute.HostedWidget-attributeName`. 

![\[Imagem mostrando um bloco de fluxo se ramificando em prompts válidos e inválidos.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/flow-check-contact-attrib.png)


## Copiar o código do widget de comunicação e as chaves de segurança
<a name="copy-widget-script4"></a>

Nesta etapa, você confirma suas seleções, copia o código do widget de comunicação e o incorpora ao seu site. Você também pode copiar as chaves secretas para criar JWTs o. 

### Chave de segurança
<a name="widget-security-key4"></a>

Use essa chave de segurança de 44 caracteres para gerar tokens Web JSON a partir do seu servidor Web. Você também pode atualizar ou girar as chaves se precisar alterá-las. Quando você faz isso, o Amazon Connect fornece uma nova chave e mantém a chave anterior até que você tenha a chance de substituí-la. Depois de implantar a nova chave, você pode voltar ao Amazon Connect e excluir a chave anterior.

![\[A chave de segurança.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/chatwidget-security-key.png)


Quando os clientes interagem com o ícone Iniciar chamada em seu site, o widget de comunicação solicita um JWT ao servidor Web. Quando esse JWT for fornecido, o widget o incluirá como parte da chamada do cliente final para o Amazon Connect. Em seguida, o Amazon Connect usa a chave secreta para descriptografar o token. Se for bem-sucedido, isso confirma que o JWT foi emitido pelo seu servidor Web e que o Amazon Connect encaminha a chamada para os atendentes da sua central de atendimento.

#### Especificações do token Web JSON
<a name="jwts4"></a>
+ Algoritmo: **HS256**
+ Reivindicações: 
  + **sub:** *widgetId*

    Substitua `widgetId` por seu próprio widgetId. Para encontrar seu widgetID, veja o exemplo [Script do widget de comunicação](add-chat-to-website.md#chat-widget-script).
  + **iat**: \$1emitido no momento.
  + **exp**: \$1expiração (máximo de 10 minutos).

  \$1 Para obter informações sobre o formato de data, consulte o seguinte documento da Internet Engineering Task Force (IETF) [JSON Web Token (JWT)](https://tools.ietf.org/html/rfc7519), página 5. 

O snippet de código a seguir mostra um exemplo de como gerar um JWT em Python:

```
payload = {
'sub': widgetId, // don't add single quotes, such as 'widgetId'
'iat': datetime.utcnow(),
'exp': datetime.utcnow() + timedelta(seconds=JWT_EXP_DELTA_SECONDS)
}

header = {
'typ': "JWT",
'alg': 'HS256'
}

encoded_token = jwt.encode((payload), CONNECT_SECRET, algorithm=JWT_ALGORITHM, headers=header) // CONNECT_SECRET is the security key provided by Amazon Connect
```

#### Script do widget de comunicação
<a name="chat-widget-script4"></a>

A imagem a seguir mostra um exemplo do JavaScript que você incorpora nos sites em que deseja que os clientes possam ligar para sua central de atendimento. Esse script exibe o widget no canto inferior direito do seu site. 

A imagem a seguir mostra um exemplo de onde encontrar o widgetID.

![\[O script do widget de comunicação.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/chatwidget-code.png)


Quando seu site carrega, os clientes veem primeiro o ícone **Iniciar**. Quando eles escolhem esse ícone, o widget de comunicação é aberto e os clientes podem chamar os atendentes.

Para fazer alterações no widget de comunicação a qualquer momento, escolha **Editar**.

**nota**  
As alterações salvas atualizam a experiência do cliente em alguns minutos. Confirme a configuração do widget antes de salvá-lo. 

![\[O link de edição na visualização do widget.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/chatwidget-call-edit.png)


Para fazer alterações nos ícones do widget no site, você receberá um novo snippet de código para atualizar seu site diretamente.

# Personalizações adicionais para seu widget de chamadas pela web do Amazon Connect
<a name="more-customizations-web-calling-widget"></a>

Você pode adicionar as seguintes personalizações ao widget de chamadas pela web:
+ Aplique [desfoque de fundo](#background-blur) ao bloco de vídeo do seu cliente.
+ Defina o widget como [tela cheia](#fullscreen-mode).
+ Selecione o [dispositivo de câmera padrão](#choose-default-camera).
+ [Redimensione o vídeo](#resize-video) para caber em seu contêiner.

As seções a seguir explicam os detalhes das personalizações, os casos de uso e como configurá-las. Para gerenciar essas personalizações, configure `WebCallingCustomizationObject`.

**Topics**
+ [Desfoque de plano de fundo](#background-blur)
+ [Modo de tela cheia](#fullscreen-mode)
+ [Escolher o dispositivo de câmera padrão](#choose-default-camera)
+ [Redimensionar vídeo](#resize-video)
+ [Configurar o objeto de personalização](#configure-customization-object-web)
+ [Restrições e opções com suporte](#supported-options-web-calling)

## Desfoque de plano de fundo
<a name="background-blur"></a>

Essa personalização controla o comportamento de desfoque de fundo do vídeo do cliente. Quando habilitado, o fundo do cliente fica desfocado quando o vídeo está ativo. Isso ajuda a proteger as informações pessoais ou espaços privados que podem estar visíveis em segundo plano durante a videochamada.

Para habilitar o desfoque de fundo, defina `videoFilter.backgroundBlur.option` como `ENABLED_ON_BY_DEFAULT` em `WebCallingCustomizationObject`.

## Modo de tela cheia
<a name="fullscreen-mode"></a>

Use essa personalização para controlar o comportamento de tela cheia do widget. Você pode habilitar a tela cheia de duas maneiras: 
+ Adicione um botão de tela cheia ao widget. O cliente pode usar o botão para ativar e desativar a tela cheia.

  Para adicionar um botão de tela cheia, defina `fullscreen.displayButton` como `ENABLED`. 

OU
+ Defina o widget como tela cheia ao carregar.

  Para habilitar a tela cheia durante o carregamento, defina `fullscreen.fullscreenOnLoad` como `ENABLED`.

É particularmente útil usar o modo de tela cheia quando o cliente precisa se concentrar no widget, por exemplo, durante o compartilhamento de tela.

Você pode usar essas duas opções individualmente ou juntas.

## Escolher o dispositivo de câmera padrão
<a name="choose-default-camera"></a>

Essa personalização permite que o widget selecione o dispositivo de câmera padrão quando o cliente habilita o vídeo, oferecendo opções para câmera frontal ou traseira. Essa capacidade é útil para diagnosticar dispositivos remotamente, por exemplo. O cliente pode usar a câmera traseira para mostrar o aparelho ao atendente.

Para selecionar a câmera traseira como padrão, defina `devices.defaultCamera` como `Back`.

## Redimensionar vídeo
<a name="resize-video"></a>

Essa personalização controla como os blocos de vídeo do cliente e do atendente são redimensionados no widget. Por exemplo, o quadro de vídeo pode ser redimensionado para preencher todo o bloco ou dimensionado para caber no quadro de vídeo, deixando espaços vazios se a proporção do quadro de não corresponder ao bloco de vídeo.
+ Para redimensionar o vídeo para o cliente, defina `videoTile.localVideoObjectFit` como o valor pretendido.
+ Para redimensionar o vídeo para o atendente, defina `videoTile.remoteVideoObjectFit` como o valor pretendido.

Para obter mais informações, consulte [Restrições e opções com suporte](#supported-options-web-calling).

## Configurar o objeto de personalização
<a name="configure-customization-object-web"></a>

Este exemplo mostra como implementar personalizações opcionais para chamada pela web. Para ver uma descrição detalhada dessas opções, consulte [Restrições e opções com suporte](#supported-options-web-calling). 

É possível implementar alguns ou todos os campos mostrados no exemplo a seguir. Quando você não implementa personalizações, os comportamentos padrão são usados para os campos ausentes.

```
amazon_connect('webCallingCustomizationObject', { 
        videoFilter: { 
            backgroundBlur: { 
                option: "ENABLED_OFF_BY_DEFAULT" 
            }
        },
        fullscreen: {
            displayButton: "ENABLED",
            fullscreenOnLoad: "DISABLED"
        },
        devices: { 
            defaultCamera: "Front" 
        },
        videoTile: {
            localVideoObjectFit: "cover",
            remoteVideoObjectFit: "cover"
        },
        copyDisplayNameFromAuthenticatedChat: true
});
```

A imagem a seguir mostra a aparência das personalizações quando o modo de tela cheia não está ativado. 

![\[Personalizações quando o modo de tela cheia não está ativado.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/fullscreenmode.png)


A imagem a seguir mostra a aparência das personalizações no modo de tela cheia.

![\[Personalizações no modo de tela cheia.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/nonfullscreenmode.png)


## Restrições e opções com suporte
<a name="supported-options-web-calling"></a>

A tabela a seguir lista os campos de personalização compatíveis e as restrições de valores recomendadas.


| Opção de layout personalizado | Tipo | Valores | Description | 
| --- | --- | --- | --- | 
|  `videoFilter.backgroundBlur.option`  |  string  |  `ENABLED_ON_BY_DEFAULT` \$1 `ENABLED_OFF_BY_DEFAULT`  |  Define o desfoque do fundo do bloco de vídeo do seu cliente. Por padrão, quando seu cliente habilita o vídeo, o filtro de desfoque de fundo é aplicado ao bloco de vídeo. Se você não quiser habilitar o filtro por padrão, poderá defini-lo como `ENABLED_OFF_BY_DEFAULT`. Seu cliente ainda poderá habilitar manualmente o filtro na página de preferências do widget. | 
|  `fullscreen.displayButton`  |  string  |  `ENABLED`  |  Adiciona um botão ao canto superior direito do widget para que ele fique em tela cheia no navegador. Por padrão, esse botão não será adicionado ao widget. Se você quiser adicioná-lo, poderá defini-lo como `ENABLED`. | 
|  `fullscreen.fullscreenOnLoad`  |  string  |  `ENABLED`  |  Torna o widget em tela cheia no navegador. Por padrão, o widget será ancorado no canto inferior direito da página da web. Defini–lo como `ENABLED` vai fazer com que o widget fique em tela cheia no navegador. | 
|  `devices.defaultCamera`  |  string  |  `Front` \$1 `Back`  | Define o dispositivo de câmera padrão quando seu cliente habilita o vídeo. Isso se destina aos casos de uso de dispositivos móveis ou tablets. Por padrão, a câmera padrão é selecionada ([detalhe](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices)). (Para obter mais informações, consulte o [métodoMediaDevices: enumerateDevices ()](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices) na documentação para desenvolvedores da Mozilla.) Quando você a define como `Front\|Back`, ela seleciona a câmera correspondente, se disponível. | 
|  `copyDisplayNameFromAuthenticatedChat`  |  booleano  |  `true` \$1 `false`  | Caso o cliente final seja autenticado usando o bloco de fluxo [Autenticar Cliente](authenticate-customer.md), definir o valor como `true` copiará o nome de exibição para o contato de voz. O padrão é `false`. | 
|  `videoTile.localVideoObjectFit`  |  string  |  `fill` \$1 `contain` \$1 `cover` \$1 `none` \$1 `scale-down`  |  Define a propriedade [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) do bloco de vídeo do seu cliente no widget. Por padrão, o valor é determinado pela largura e altura da resolução do vídeo: se a altura for maior que a largura, será `contain`, caso contrário, será `cover`. Para ver uma descrição detalhada de cada valor, consulte [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) na documentação do desenvolvedor da Mozilla.  Esse atributo é aplicado somente à altura e largura de exibição do vídeo do cliente no widget. A altura e a largura do vídeo do cliente enviado ao atendente permanecem inalteradas.  | 
|  `videoTile.remoteVideoObjectFit`  |  string  |  `fill` \$1 `contain` \$1 `cover` \$1 `none` \$1 `scale-down`  | Define a propriedade [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) do bloco de vídeo do seu cliente no widget. Por padrão, o valor é determinado pela largura e altura da resolução do vídeo: se a altura for maior que a largura, será `contain`, caso contrário, será `cover`. Para ver uma descrição detalhada de cada valor, consulte [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) na documentação do desenvolvedor da Mozilla.  Esse atributo é aplicado somente à altura e largura de exibição do vídeo do atendente no widget.   | 

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

# Habilitar restrição de URL para compartilhamento de tela
<a name="screen-sharing-url-restriction"></a>

Você pode gerenciar o URLs que seus clientes e agentes podem compartilhar durante o contato. Isso permite que você tenha maior segurança e privacidade. Quando um cliente ou atendente compartilha um URL que não está na lista de permissões, ele recebe uma mensagem de erro e o vídeo de compartilhamento de tela é automaticamente pausado e apagado. 

**Importante**  
Os seguintes navegadores são compatíveis:   
Chrome versão 109 e posterior
Edge versão 109 e posterior
Atendentes e clientes podem compartilhar somente a guia do navegador. Eles não podem compartilhar a janela ou a tela inteira. Se você habilitar esse recurso e os clientes ou atendentes usarem um navegador, uma janela ou uma tela inteira não compatível, eles receberão uma mensagem de erro.

Conclua as etapas a seguir para habilitar a restrição de URL para compartilhamento de tela.

## Etapa 1: criar uma URLs lista permitida
<a name="step1-url-restriction"></a>

Você configura as listas de permitidos URLs usando atributos predefinidos. Execute as etapas a seguir.

1. No site do Amazon Connect administrador, escolha **** Roteamento, Atributos **predefinidos****, Adicionar atributo** **predefinido**.

1. Na seção **Adicionar atributos predefinidos**, na caixa **Atributo predefinido**, adicione um dos seguintes:
   + Para criar uma lista de permissões para compartilhamento de tela do cliente, insira `screensharing:customer-allowed-urls`.
   + Para criar uma lista de permissões para compartilhamento de tela do atendente, insira `screensharing:agent-allowed-urls`.

1. Na caixa **Valor**, insira o URL permitido. Pode ser um URL totalmente formatado ou um padrão de string para correspondência de substring, como ` https://mycompany` ou ` /mytransactions`. A tabela a seguir mostra exemplos de formatos válidos.    
[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/screen-sharing-url-restriction.html)

1. Salve a lista. Eles URLs aparecem na página de **atributos predefinidos**, conforme mostrado no exemplo a seguir.   
![\[A página Atributos predefinidos.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/screen-sharing-restricted-urls.png)

## Etapa 2: Adicionar um script à lista de sites
<a name="step2-url-restriction"></a>

Você precisa incorporar um script ao site para que o URL da página possa ser exposto à aplicação de captura. Você obtém o manipulador de captura de um arquivo no CloudFront endpoint da Amazon que o Amazon Connect hospeda. Siga estas as instruções.

1. No site do Amazon Connect administrador, escolha **Canais**, **widgets de comunicação**. Na página de resumo do Widget de comunicação, procure o script do widget. Obtenha o endpoint do atributo `s.src`, conforme mostrado no exemplo a seguir.   
![\[O script do Widget.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/screen-sharing-restricted-urls-step2.png)

   O endpoint pode estar em uma AWS região diferente da sua instância do Amazon Connect. Para obter o melhor desempenho, é recomendável usar a mesma região da sua instância do Amazon Connect. 

1. Substitua o espaço reservado `${endpoint}` a seguir pelo valor da etapa anterior. Copie o trecho de código inteiro e cole-o no nível superior do site.

   ```
   <script type="text/javascript" src='${endpoint}/amazon-connect-url-restriction.js'></script>
   ```