Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

# Configuración de las funciones de videollamada y pantalla compartida dentro de la aplicación y en la web
<a name="inapp-calling"></a>

Las funciones de videollamadas Amazon Connect integradas en la aplicación, web y videollamadas permiten a tus clientes ponerse en contacto contigo sin tener que salir de la aplicación web o móvil. Puede utilizar estas funciones para transferir información contextual a Amazon Connect. De este modo, puede personalizar la experiencia del cliente en función de atributos tales como el perfil del cliente u otra información, como las acciones realizadas anteriormente en la aplicación.

## Cosas importantes que debe saber
<a name="inapp-calling-important"></a>
+ Durante una videollamada o una sesión de pantalla compartida, los agentes pueden ver el vídeo o la pantalla compartida del cliente, aunque el cliente esté en espera. El cliente debe gestionar la PII en consecuencia. Si quiere cambiar este comportamiento, puede crear un CCP personalizado y un widget de comunicación. Para obtener más información, consulte [Integración de la pantalla compartida, las videollamadas, las llamadas web y las llamadas dentro de la aplicación de forma nativa en su aplicación](config-com-widget2.md).

## Widget de comunicación: configuración de chat, voz y vídeo en un solo lugar
<a name="one-page"></a>

Para configurar las videollamadas, llamadas web y llamadas dentro de la aplicación, use la página **Widgets de comunicación** Es compatible con chat, voz, video y pantalla compartida. La siguiente imagen muestra la sección **Opciones de comunicación** de la página cuando está configurada para todas estas opciones. 

![\[La sección Opciones de comunicación de la página Crear un widget de comunicación.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/comm-widget-all.png)


## Videollamadas, llamadas web y llamadas multiusuario dentro de la aplicación
<a name="multi-user"></a>

Puede agregar hasta cuatro usuarios adicionales a una videollamada, llamada web o llamada dentro de la aplicación, hasta un total de seis participantes: el agente, el primer usuario y cuatro participantes más (usuarios o agentes).

Por ejemplo, para cerrar una transacción hipotecaria, puede hacer que el agente y el cliente, el cónyuge del cliente, un traductor e incluso un supervisor (es decir, otro agente) estén en la llamada a fin de resolver rápidamente cualquier problema.

Para obtener más información sobre cómo habilitar las videollamadas web, las llamadas integradas en la aplicación y las llamadas con varios usuarios, consulte [Habilitación de videollamadas, llamadas web y llamadas multiusuario dentro de la aplicación](enable-multiuser-inapp.md).

## Cómo configurar la pantalla compartida, las videollamadas, las llamadas web y las llamadas dentro de la aplicación
<a name="inapp-options"></a>

Hay dos formas de integrar las videollamadas Amazon Connect integradas en la aplicación, las videollamadas y la pantalla compartida en tu sitio web o aplicación móvil: 
+ Opción 1: [configurar un widget de out-of-the-box comunicaciones](config-com-widget1.md). Puede usar el generador de interfaz de usuario para personalizar la fuente y los colores, y proteger el widget para que solo se pueda iniciar desde su sitio web. 
+ Opción 2: [integrar las videollamadas, llamadas web y llamadas dentro de la aplicación de forma nativa en su aplicación móvil](config-com-widget2.md). Elija esta opción para crear un widget de comunicaciones desde cero e integrarlo en su aplicación móvil o sitio web. Usa el cliente Amazon Connect APIs y el Amazon Chime SDK APIs para integrarlos de forma nativa en tu aplicación móvil o sitio web.

**nota**  
Si tiene escritorios de agente personalizados, no deberá realizar ningún cambio en las llamadas web ni en las llamadas dentro de la aplicación de Amazon Connect. Sin embargo, deberá [integrar las videollamadas y la pantalla compartida](integrate-video-calling-for-agents.md).

# Configurar un widget out-of-the-box de comunicación en Amazon Connect
<a name="config-com-widget1"></a>

Utilice esta opción para crear widgets de comunicación para [navegadores](connect-supported-browsers.md#browsers-inapp) de escritorio y de móvil. Al final de este procedimiento, Amazon Connect genera un fragmento de código HTML personalizado que debe copiar en el código fuente del sitio web.

1. Inicie sesión en el sitio web de administración con una cuenta de administrador o una cuenta de usuario que tenga **Canales y flujos**. El **widget de comunicación permite crear un** permiso en su perfil de seguridad. Amazon Connect 

1. En Amazon Connect el menú de navegación de la izquierda, selecciona **Canales**, **widgets de comunicación**. 

1. El asistente le guía a través de los siguientes tres pasos. 

## Paso 1: seleccionar los canales de comunicación
<a name="widgetdetails"></a>

1. En la página **Widgets de comunicación**, introduzca un **Nombre** y una **Descripción** para el widget de comunicaciones. 
**nota**  
El nombre debe ser único para cada widget de comunicaciones creado en una instancia de Amazon Connect.

1. En la sección **Opciones de comunicación**, elija cómo pueden interactuar sus clientes con el widget. La siguiente imagen muestra las opciones que permiten a los clientes compartir la pantalla y realizar videollamadas y llamadas web.   
![\[La página del widget de comunicación configurada para pantalla compartida, videollamadas y llamadas web.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/comm-widget-page-call.png)

1. En la sección **Llamadas web**, elija si desea habilitar las experiencias de pantalla compartida y video para sus clientes. La imagen anterior muestra las opciones que permiten a los clientes ver los vídeos de los agentes, activar sus vídeos y permitir que los agentes y los clientes compartan sus pantallas. Para obtener información sobre cómo establecer restricciones para compartir la pantalla, consulte [Activación de la restricción de URL para compartir pantalla](screen-sharing-url-restriction.md).

1. Elija **Guardar y continuar**.

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

A medida que elija estas opciones, la versión preliminar del widget se actualizará automáticamente para que pueda ver el aspecto de la experiencia para los clientes.

![\[Versión preliminar del widget de comunicaciones.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/netra-call-preview.png)


**Definir los estilos de los botones de acceso al widget**

1. Para elegir los colores del fondo del botón, introduzca valores hexadecimales ([códigos de color HTML](https://htmlcolorcodes.com/)).

1. Elija **Blanco** o **Negro** para el color del icono. El color del icono no se puede personalizar.

**Personalizar los nombres y estilos para mostrar**

1. Proporcione valores para el mensaje y el color del encabezado y el color de fondo del widget. 

1. **URL del logotipo**: inserte una URL en el banner de su logotipo desde un bucket de Amazon S3 u otro origen en línea.
**nota**  
La versión preliminar del widget de comunicaciones en la página de personalización no mostrará el logotipo si procede de un origen que no sea un bucket de Amazon S3. No obstante, el logotipo se mostrará cuando se implemente el widget de comunicaciones personalizado en su página.

   El banner debe estar en formato .svg, .jpg o .png. La imagen puede tener 280 píxeles (ancho) por 60 píxeles (alto). Cualquier imagen que supere esas dimensiones se escalará para ajustarse al espacio del componente de logotipo de 280 x 60.

   1. Para obtener instrucciones sobre cómo cargar en S3 un archivo como el banner de su logotipo, consulte [Carga de objetos](https://docs.aws.amazon.com/AmazonS3/latest/userguide/upload-objects.html) en la *Guía del usuario de Amazon Simple Storage Service*.

   1. Asegúrese de que los permisos de imagen estén configurados correctamente para que el widget de comunicaciones tenga permisos para acceder a la imagen. Para obtener más información sobre cómo hacer que un objeto S3 sea de acceso público, consulte [Paso 2: agregar una política de bucket](https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html#bucket-policy-static-site) en el tema *Configuración de permisos para el acceso al sitio web*.

## Paso 3: agregar su dominio al widget
<a name="widgetdomain"></a>

Este paso le permite proteger el widget de comunicaciones para que solo pueda lanzarse desde su sitio web.

1. Introduzca los dominios del sitio web en los que desea colocar el widget de comunicaciones. El widget de comunicaciones se cargará únicamente en los sitios web que seleccione en este paso. 

   Seleccione **Agregar dominio** para agregar hasta 50 dominios.  
![\[La opción de agregar dominio.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/chatwidget-add-domain.png)
**importante**  
Comprueba que tu sitio web URLs sea válido y no contenga errores. Incluya la URL completa que comience por https://.
Le recomendamos utilizar https:// para sus sitios web y aplicaciones de producción.

1. En **Añadir seguridad a las solicitudes de widgets de comunicaciones**, seleccione **No, omitiré este paso** para obtener una experiencia de configuración más rápida.

   Recomendamos seleccionar **Sí** para poder verificar que el usuario está autenticado. Para obtener más información, consulte [Personalización de la experiencia del cliente para las videollamadas, llamadas web y llamadas dentro de la aplicación en Amazon Connect](optional-widget-steps.md). 

1. Elija **Guardar y continuar**.

   ¡Bien hecho\$1 Se ha creado el widget. Copie el código generado y péguelo en cada página de su sitio web en la que quiera que aparezca el widget de comunicaciones.

## Cómo permitir que los agentes compartan la pantalla y realicen videollamadas, llamadas web y llamadas dentro de la aplicación
<a name="agent-cx-cw"></a>

Para permitir que los agentes utilicen las videollamadas y compartan la pantalla, asigne los permisos **Panel de control de contacto (CCP)**, **Videollamadas - Acceso** a su perfil de seguridad.

El espacio de trabajo del Amazon Connect agente admite las videollamadas Amazon Connect integradas en la aplicación, la web y el uso compartido de la pantalla. Puede usar la misma aplicación de configuración, enrutamiento, análisis y agente que con las llamadas telefónicas y los chats. Para empezar, el único paso es habilitar los perfiles de seguridad del agente con los permisos necesarios para realizar videollamadas y compartir la pantalla.

En el caso de los escritorios de los agentes personalizados, no es necesario realizar cambios en las llamadas desde la Amazon Connect aplicación ni en la web. Habilite los perfiles de seguridad de su agente con los permisos necesarios para realizar videollamadas y compartir la pantalla y siga esta guía sobre cómo integrar las videollamadas en el escritorio de su agente.

## Cómo inicia un dispositivo de cliente una llamada desde la aplicación o web
<a name="diagram-option1"></a>

El siguiente diagrama muestra la secuencia de eventos para que un dispositivo de cliente (aplicación móvil o navegador) inicie una llamada desde la aplicación o desde la web.

![\[Diagrama conceptual que muestra cómo un dispositivo de cliente inicia una llamada.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/netra-gs-diagram-option1.png)


1. (Opcional) Puede trasladar los atributos capturados en el sitio web y validarlos con el token web JSON (JWT). 

1. El cliente hace clic en el widget de comunicaciones de su sitio web o aplicación móvil. 

1. El widget de comunicaciones inicia la llamada web pasando Amazon Connect los atributos contenidos en el JWT. 

1. El contacto llega al flujo, se enruta y se coloca en la cola. 

1. El agente acepta el contacto.

1. (Opcional) Si el vídeo está activado para el cliente y el agente, estos podrán iniciar su vídeo.

## Más información
<a name="cw-more-resources"></a>

Para obtener información adicional sobre los requisitos de las funciones de videollamadas, llamadas web y llamadas dentro de la aplicación, consulte los siguientes temas:
+ [Requisitos de la estación de trabajo del agente para las llamadas a aplicaciones, web y video en Amazon Connect](videocalling-networking-requirements.md)
+ [Navegadores y sistemas operativos móviles compatibles con las funciones de videollamadas, llamadas web y llamadas dentro de la aplicación](connect-supported-browsers.md#browsers-inapp) 

# Integración de la pantalla compartida, las videollamadas, las llamadas web y las llamadas dentro de la aplicación de forma nativa en su aplicación
<a name="config-com-widget2"></a>

Cómo integrar la pantalla compartida, las videollamadas, las llamadas web y las llamadas dentro de la aplicación de Amazon Connect en su aplicación:

1. Usa la [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API Amazon Connect para crear el contacto.

1. A continuación, utilice los detalles devueltos por la llamada a la API para unirse a la llamada mediante la biblioteca de Amazon Chime clientes para [iOS](https://github.com/aws/amazon-chime-sdk-ios), [Android](https://github.com/aws/amazon-chime-sdk-android) o [JavaScript](https://github.com/aws/amazon-chime-sdk-js). 

Para obtener más información sobre cómo crear participantes adicionales, consulte [Habilitación de videollamadas, llamadas web y llamadas multiusuario dentro de la aplicación](enable-multiuser-inapp.md). 

Consulta el siguiente repositorio de Github para ver ejemplos de aplicaciones: [amazon-connect-in-app-calling-examples](https://github.com/amazon-connect/amazon-connect-in-app-calling-examples). 

**Topics**
+ [Cómo inicia un dispositivo de cliente una llamada desde la aplicación o web](#diagram-option2)
+ [Introducción](#diagram-option2-gs)
+ [Pasos de la opción](#optional-steps)

## Cómo inicia un dispositivo de cliente una llamada desde la aplicación o web
<a name="diagram-option2"></a>

El siguiente diagrama muestra la secuencia de eventos para que un dispositivo de cliente (aplicación móvil o navegador) inicie una llamada desde la aplicación o desde la web.

![\[Diagrama conceptual que muestra cómo un dispositivo de cliente inicia una llamada.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/netra-gs-diagram.png)


1. El cliente usa la aplicación de cliente (sitio web o aplicación) para iniciar una llamada desde la aplicación o desde la web.

1. La aplicación cliente (sitio web o aplicación móvil) o el servidor web utilizan la Amazon Connect [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API para iniciar el contacto al que se le transfiere cualquier atributo o contexto. Amazon Connect

1. La aplicación cliente se une a la llamada utilizando los detalles devueltos [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)en el paso 2.

1. (Opcional) El cliente usa la [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)API para recibir una `ConnectionToken` que se usa para enviar el DTMF a través de la [SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html)API.

1. El contacto llega al flujo, se enruta en función del flujo y se coloca en la cola.

1. El agente acepta el contacto.

1. (Opcional) Si el vídeo está activado para el cliente y el agente, estos podrán iniciar su vídeo.

1. (Opcional, no se muestra en el diagrama) Se pueden añadir participantes adicionales con las [CreateParticipant](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipant.html)teclas y. [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html) APIs 

## Introducción
<a name="diagram-option2-gs"></a>

A continuación se muestran los pasos de alto nivel para comenzar:

1. Usa la [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API para crear el contacto. La API devuelve los detalles necesarios para que el cliente de Amazon Chime SDK se una a la llamada.

1. Cree una instancia del objeto de `MeetingSessionConfiguration` cliente del SDK de Amazon Chime con las configuraciones devueltas por. [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)

1. Cree una instancia del objeto `DefaultMeetingSession` de cliente de Amazon Chime SDK con `MeetingSessionConfiguration`, creada en el paso 2, para crear una sesión de reunión con el 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. Utilice el método `meetingSession.audioVideo.start()` para unir el contacto de WebRTC con el audio.
   + iOS/Android

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

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

1. Utilice el método `meetingSession.audioVideo.stop()` para colgar el contacto de WebRTC.
   + iOS/Android

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

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

## Pasos de la opción
<a name="optional-steps"></a>

Para obtener más información sobre las operaciones y la documentación completa sobre las API, consulte las guías de descripción general de las API específicas de la plataforma:
+ **iOS**: [API Overview](https://aws.github.io/amazon-chime-sdk-ios/guides/api_overview.html)
+ **Android**: [API Overview](https://aws.github.io/amazon-chime-sdk-android/guides/api_overview.html)
+ **JavaScript**[: Descripción general de la API](https://github.com/aws/amazon-chime-sdk-js/blob/main/guides/03_API_Overview.md)

### Envío de tonos DTMF
<a name="send-dtmf-tones"></a>

Para enviar DTMF a la llamada, se necesitan dos servicios APIs de participación de Amazon Connect: [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)y [SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html)respectivamente.

**nota**  
`contentType`ya que la SendMessage API debe ser. `audio/dtmf`

1. Invoca [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)para recuperar`ConnectionToken`. (`ParticipantToken`es necesario para llamar a esta API. Puedes encontrarlo en la [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)respuesta).

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

### Selección de dispositivos de audio
<a name="select-audio-devices"></a>

Para seleccionar el input/output dispositivo de audio, puede usar los métodos del cliente SDK de Amazon Chime para Android e iOS o las [capacidades nativas de iOS](https://developer.apple.com/documentation/avkit/avroutepickerview) para iOS.

**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);
```

### Activación y desactivación del audio
<a name="mute-unmute-audio"></a>

Para silenciar y dejar de silenciar, use `meetingSession.audioVideo.realtimeLocalMute()` y `meetingSession.audioVideo.realtimeLocalUnmute()`.

**iOS/Android**

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

**JavaScript**

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

### Inicio de autovideo
<a name="start-self-video"></a>

Para iniciar el autovideo, utilice `meetingSession.audioVideo.startLocalVideo()`. Consulte las guías sobre API de la biblioteca de clientes para obtener más información sobre cómo enumerar y elegir dispositivos específicos.

**iOS/Android**

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

**JavaScript**

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

### Detención de autovideo
<a name="stop-self-video"></a>

Para detener el autovideo, utilice `meetingSession.audioVideo.stopLocalVideo()`.

**iOS/Android**

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

**JavaScript**

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

### Activación del vídeo del agente
<a name="enable-agent-video"></a>

Para permitir la recepción y carga del vídeo del agente dentro de la aplicación, utilice `meetingSession.audioVideo.startRemoteVideo()`. También necesitará implementar observadores de mosaicos de vídeo y vincular los mosaicos de vídeo a las vistas de la pantalla.

**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 las guías de SDK específicas de la plataforma para obtener más información sobre la implementación de los mosaicos de vídeo.

### Desactivación del vídeo del agente
<a name="disable-agent-video"></a>

Para impedir la recepción y carga del vídeo del agente dentro de la aplicación, utilice `meetingSession.audioVideo.stopRemoteVideo()`.

**iOS/Android**

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

**JavaScript**

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

### Uso de mensajes de datos
<a name="use-data-messages"></a>

Puede utilizar [mensajes de datos](https://github.com/aws/amazon-chime-sdk-js/blob/main/guides/03_API_Overview.md#9-send-and-receive-data-messages-optional) si necesita enviar cualquier estado desde el agente al usuario final. Por ejemplo, cuando los clientes están en espera, puedes enviar un mensaje de datos a la aplicación del cliente para que muestre un mensaje en el que se le informe de que están en espera y que se sigue enviando el contenido video/screen compartido, o puedes desactivar el video/screen uso compartido.

**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);
```

### Cómo escuchar eventos de detención
<a name="listen-for-stop-events"></a>

Puede escuchar los eventos en los que finaliza la participación de un contacto a través del observador `audioVideoDidStop`. Los códigos de estado específicos pueden variar según la plataforma.

#### La llamada alcanza su capacidad máxima
<a name="call-reaches-capacity"></a>

Cuando más de seis personas intenten unirse a la llamada, otros participantes recibirán el siguiente error y no podrán unirse hasta que otros se vayan.
+ **iOS:** `MeetingSessionStatusCode.audioCallAtCapacity` o `MeetingSessionStatusCode.audioAuthenticationRejected`
+ **Android:** `MeetingSessionStatusCode.AudioCallAtCapacity` o `MeetingSessionStatusCode.AudioAuthenticationRejected`
+ **JavaScript: o** `MeetingSessionStatusCode.AudioCallAtCapacity` `MeetingSessionStatusCode.AudioAuthenticationRejected`

#### Se elimina a un participante de la llamada
<a name="participant-removed-from-call"></a>

Cuando el agente retire a un participante de la llamada, pero el contacto continúe, los demás participantes recibirán el siguiente código de estado. Tenga en cuenta que, si la eliminación de un participante provoca la finalización del contacto, recibirán este estado o el estado de cierre del contacto.
+ **iOS:** `MeetingSessionStatusCode.audioServerHungup` o `MeetingSessionStatusCode.audioAuthenticationRejected`
+ **Android:** `MeetingSessionStatusCode.AudioServerHungup` o `MeetingSessionStatusCode.AudioAuthenticationRejected`
+ **JavaScript:** `MeetingSessionStatusCode.AudioAttendeeRemoved` o `MeetingSessionStatusCode.AudioAuthenticationRejected`

#### El contacto finaliza
<a name="contact-ends"></a>

Cuando el contacto real finalice por completo, todos los participantes recibirán el siguiente código de estado.
+ **iOS:** `MeetingSessionStatusCode.audioCallEnded`
+ **Android:** `MeetingSessionStatusCode.AudioCallEnded`
+ **JavaScript:** `MeetingSessionStatusCode.AudioCallEnded`

# Habilitación de videollamadas, llamadas web y llamadas multiusuario dentro de la aplicación
<a name="enable-multiuser-inapp"></a>

Amazon Connect permite añadir usuarios adicionales para que se unan a la videollamada dentro de la aplicación, a la web o a la videollamada de una llamada existente. Puede agregar hasta cuatro usuarios adicionales a una videollamada, llamada web o llamada dentro de la aplicación, hasta un total de seis participantes: el agente, el primer usuario y cuatro participantes más (usuarios o agentes).

## Cómo agregar participantes a una llamada de varios usuarios
<a name="how-to-add-participants"></a>

1. Para habilitar las llamadas entre varios usuarios, debes habilitar la [supervisión mejorada de los contactos entre varios](monitor-conversations.md) usuarios desde la Amazon Connect consola.

1. Una vez hecho esto, puedes aprovechar la Amazon Connect [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API existente para crear un contacto y redirigirlo a un agente.

1. Para añadir un participante adicional, primero cree un participante que pase `ContactId` de la respuesta de la [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API a la [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)no tendrá éxito hasta que la persona que llamó originalmente se haya conectado al agente. Las capacidades de vídeo y de pantalla compartida del participante se pueden configurar en el campo `ParticipantDetails.ParticipantCapabilities`.

1. Cuando se [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)completa correctamente, devuelve un [token de participante](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html#connect-CreateParticipant-response-ParticipantCredentials). Este token se puede usar en una solicitud [CreateParticipantConnection](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html)con el valor `Type` establecido en`WEBRTC_CONNECTION`. La respuesta incluye información [ConnectionData](https://docs.aws.amazon.com/connect/latest/APIReference/API_ConnectionData.html#connect-Type-ConnectionData-Meeting)que se puede utilizar para unirse a la reunión mediante las [bibliotecas de cliente del SDK de Amazon Chime](https://docs.aws.amazon.com/chime-sdk/latest/dg/mtgs-sdk-client-lib.html) para el participante adicional creado. Siga las [instrucciones de integración](config-com-widget2.md) para permitir que el usuario final de la aplicación se una a la reunión.
**nota**  
[CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)devuelve un error de solicitud errónea si el agente aún no está conectado al contacto. Para ver cuáles son las aplicaciones empresariales a las que los usuarios pueden intentar unirse antes de que el agente esté conectado, consulte [Gestión de las uniones simultáneas de usuarios](#handling-concurrent-joins).

1. Los clientes adicionales pueden conectarse en cualquier momento después de la [CreateParticipantConnection](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html)devolución. Cuando los participantes se unen, [todo el comportamiento adicional de voz y grabación es similar al de la función de varios participantes](multi-party-calls.md). Los nuevos participantes pueden habilitar el uso compartido de vídeo y pantalla si sus capacidades están habilitadas en la [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)solicitud.
**nota**  
En una llamada activa, solo pueden unirse seis participantes (clientes y agentes) como máximo. Cuando se lleva a cabo una acción para añadir más participantes de modo que se supere el límite, las bibliotecas de clientes de Amazon Chime SDK devuelven un código de estado que indica que la llamada está llena.

1. Cuando los participantes se hayan conectado a la llamada y, a continuación, se hayan desconectado, de un modo controlado o no controlado, durante un tiempo preconfigurado, sus credenciales de participante dejarán de ser válidas. Si el `onAudioVideoDidStop` observador de la biblioteca cliente recibe un código de estado que indica que el asistente ya no es válido, las solicitudes pueden activar una nueva llamada [CreateParticipantConnection](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html)desde [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)y hacia el back-end de su empresa para volver a unirse a la llamada.

1. [Por cada conexión de usuario adicional, Amazon Connect crea un nuevo contacto y registro de contactos.](ctr-data-model.md) Todos los contactos adicionales PreviousContactId se han establecido en el InitialContactId (es decir, el que creó la [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API) para rastrearlo hasta el contacto original. Todos los registros de contacto disponen de lo siguiente:
   + Tiene un **"InitiationMethod«: «WEBRTC\$1API**»
   + Tienen los siguientes atributos de segmento:

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

   Además, cada registro de contacto tiene el nombre público suministrado en `CreateParticipant`. La información del agente no se rellena para ningún contacto de usuario adicional. Esto se hace para evitar la duplicación de la información del agente.

   El siguiente diagrama ilustra cómo IDs se mapean el contacto anterior y el siguiente en un escenario en el que se agregan varios participantes y agentes en una llamada web, en la aplicación o por videollamada.  
![\[Diagrama que muestra cómo IDs se mapean los contactos para las llamadas WebRTC multipartitas\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/multiparty-webrtc-contact-mapping.png)

## Gestión de las uniones simultáneas de usuarios
<a name="handling-concurrent-joins"></a>

Es posible que las empresas deseen crear aplicaciones en las que los usuarios puedan unirse en cualquier orden y en cualquier momento. Por ejemplo, su aplicación puede enviar por correo electrónico un enlace con un identificador de cita externo a varios usuarios, lo que debería usarse para unirse a una llamada a una hora programada. Para lograr este comportamiento, los backends empresariales deben confirmar lo siguiente:
+ El primer usuario que se une activa una solicitud. StartWeb RTCContact 
+ Todos los usuarios adicionales lo utilizan CreateParticipant CreateParticipantConnection, pero **solo después de que el primer usuario se haya conectado a un agente**.

En esta sección, se describe una posible implementación, suponiendo que el backend de su empresa contenga un almacén (como DynamoDB) que pueda almacenar metadatos sobre las citas programadas. Tenga en cuenta que las citas programadas no son una característica de la implementación Amazon Connect, sino una característica de la misma.

Cuando el usuario navegue a la página, debe enviar una solicitud al backend. El backend comprueba lo siguiente:
+ Si el usuario puede iniciar la cita y si es la hora correcta.
+ Si el Amazon Connect contacto ya se creó al llamar [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html).

**Si el contacto aún no se ha creado**, el cliente debe llamar a la [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API con un [flujo](connect-contact-flows.md) personalizado y un [atributo](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html#connect-StartWebRTCContact-request-Attributes) que indique la cola de agentes del agente correspondiente que se esperaba que se uniera a la llamada. El flujo debe incluir un bloque [Establecer cola de trabajo](set-working-queue.md) configurado para usar la cola de agente suministrada en atributos. A continuación, el flujo debe terminar con un bloque [Transferir a la cola](transfer-to-queue.md). Antes de llamar a la API, el backend debe actualizar la tienda de forma granular para pasar la llamada del estado “Ninguna” al estado “Creando” y gestionar cualquier excepción de modificación simultánea.

Las credenciales de [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)deben devolverse al cliente y este debe unirse inmediatamente a la llamada. El contacto debe estar marcado como “Creado” en la tienda de la empresa, junto con su ID de contacto. **Esta API empresarial debe estar sincronizada entre todos los posibles asistentes que se unan**. Esto se puede hacer utilizando las operaciones granulares proporcionadas por una base de datos.

**Si el contacto se encuentra en estado de creación**, se debe devolver este estado al usuario adicional, mostrar la información relevante y volver a intentarlo tras un breve periodo de espera.

**Si se crea el contacto**: deben recuperar el ID del contacto y llamar a la [DescribeContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_DescribeContact.html)API. El backend empresarial debe buscar el campo **`Contact.AgentInfo.ConnectedToAgentTimestamp`**. Si no existe, esto significa que el primer usuario no se ha conectado al agente, y el usuario adicional debería mostrar la información pertinente y volver a intentarlo tras un breve periodo de espera.

Si el campo existe, el backend debería llamar y, después [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html), a get [CreateParticipantConnection[ConnectionData](https://docs.aws.amazon.com/connect/latest/APIReference/API_ConnectionData.html#connect-Type-ConnectionData-Meeting)](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html), tal y como se ha descrito en las secciones anteriores.

El flujo del backend debe ser similar a lo siguiente.

![\[Diagrama del flujo de backend para gestionar las uniones de usuarios simultáneas\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/multiparty-backend-flow.png)


Puedes consultar los [ejemplos de llamadas integradas en la aplicación de Amazon Connect](https://github.com/amazon-connect/amazon-connect-in-app-calling-examples/tree/main/Web) GitHub para obtener información sobre la implementación.

**El agente no se unirá a través del mismo sitio web**. El agente debe establecer su estado en el [panel de control de contacto](launch-ccp.md) como **Disponible**. Cuando el primer cliente se una, se llamará automáticamente al agente.

## Facturación
<a name="multiuser-billing"></a>

La facturación para los participantes adicionales equivale a la facturación existente para el cliente inicial y cualquier agente que participe en la llamada. El audio, el vídeo y la pantalla compartida conllevan sus propios cargos, específicos para cada participante.

## Comportamiento de espera
<a name="multiuser-hold-behavior"></a>

Durante una videollamada o una sesión de pantalla compartida, los agentes pueden ver el vídeo o la pantalla compartida del participante, aunque este esté en espera. El participante debe gestionar la PII en consecuencia. Si utiliza la aplicación CCP nativa, el vídeo del agente se desactiva si algún participante que no sea un agente está en espera. Si quiere cambiar este comportamiento, puede crear un CCP personalizado y un widget de comunicación. 

Para obtener más información, consulte [Integración de la pantalla compartida, las videollamadas, las llamadas web y las llamadas dentro de la aplicación de forma nativa en su aplicación](config-com-widget2.md). 

## Limitación
<a name="multiuser-limitations"></a>

Existe la siguiente limitación al crear participantes adicionales para la aplicación, la web, las videollamadas y el uso compartido de pantalla:
+ Los participantes adicionales no pueden tener las funciones de vídeo configuradas en **Enviar** si el contacto original se creó con las funciones de vídeo del cliente configuradas en **Ninguna**.

# Personalización de la experiencia del cliente para las videollamadas, llamadas web y llamadas dentro de la aplicación en Amazon Connect
<a name="optional-widget-steps"></a>

Los pasos de este tema son opcionales, pero se recomiendan pues permiten personalizar la experiencia del cliente en función de las acciones que haya realizado anteriormente en la aplicación. Esta opción le proporciona un mayor control a la hora de iniciar nuevas llamadas, incluida la posibilidad de transmitir información contextual en forma de atributos.

 Tras realizar estos pasos, tendrás que trabajar con el administrador de tu sitio web para configurar tus servidores web de forma que emitan los JSON Web Tokens (JWTs) para las nuevas llamadas

1. Si ya ha creado su widget de comunicaciones, en la página **Widgets de comunicación**, elija el widget para editarlo. 

1. En la sección **Dominio y seguridad**, elija **Editar**. 

1. En **Añadir seguridad a las solicitudes de widgets de comunicaciones**, seleccione **Sí**.  
![\[La opción Sí.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/chatwidget-choose-security.png)

1. Elija **Guardar y continuar**. Amazon Connect crea el widget junto con lo siguiente:
   + Amazon Connect proporciona una clave de seguridad de 44 caracteres en la página siguiente que puedes usar para crear. JWTs
   + Amazon Connect agrega una función de devolución de llamada en el script de inserción del widget de comunicaciones que comprueba si hay un JWT cuando se inicia una llamada.

     Debe implementar la función de devolución de llamada en el fragmento insertado, como se muestra en el siguiente ejemplo.

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

   Si elige esta opción, en el siguiente paso obtendrá una clave de seguridad para todas las solicitudes de chat iniciadas en sus sitios web. Pídale al administrador de su sitio web que configure sus servidores web para JWTs utilizar esta clave de seguridad. 

1. Elija **Guardar y continuar**.

1. Copie el fragmento de código HTML personalizado e insértelo en el código fuente de su sitio web.

## Método alternativo: transferir los atributos de contacto directamente desde el código del fragmento
<a name="pass-attrib-from-code"></a>

**nota**  
Aunque estos atributos están definidos con el prefijo `HostedWidget-`, se pueden modificar en el sitio del cliente. Utilice la configuración JWT si necesita información confidencial o datos no modificables en su flujo de contactos. 

En el ejemplo siguiente, se muestra cómo transferir atributos de contacto directamente desde el código del fragmento sin activar la seguridad del 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/>
```

### Uso de los atributos en los flujos de contacto
<a name="contact-flow-usage-voice"></a>

El bloque de flujo [Comprobar atributos de contacto](check-contact-attributes.md) proporciona acceso a estos atributos a través del espacio de nombres **Definido por el usuario**, como se muestra en la siguiente imagen. Puede utilizar el bloque de flujo para añadir una lógica de ramificación. La ruta completa es `$Attribute.HostedWidget-attributeName`. 

![\[Imagen que muestra un bloque de flujo que se deriva a las peticiones Válido y No válido.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/flow-check-contact-attrib.png)


## Copia del código del widget de comunicaciones y las claves de seguridad
<a name="copy-widget-script4"></a>

En este paso, confirme las selecciones y copie el código para el widget de comunicaciones e insértelo en su sitio web. También puede copiar las claves secretas para crear el JWTs. 

### Clave de seguridad
<a name="widget-security-key4"></a>

Utilice esta clave de seguridad de 44 caracteres para generar tokens web JSON desde su servidor web. También puede actualizar, o rotar, las claves si necesita cambiarlas. Al hacerlo, Amazon Connect le proporciona una clave nueva y conserva la clave anterior hasta que tenga la oportunidad de reemplazarla. Una vez implementada la nueva clave, puede volver a Amazon Connect y eliminar la clave anterior.

![\[La clave de seguridad.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/chatwidget-security-key.png)


Cuando sus clientes interactúan con el icono de iniciar llamada en su página web, el widget de comunicaciones solicita a su servidor web un JWT. Cuando se proporcione este JWT, el widget lo incluirá como parte de la llamada del cliente final a Amazon Connect. A continuación, Amazon Connect utiliza la clave secreta para descifrar el token. Si se realiza correctamente, esto confirma que el JWT lo ha emitido su servidor web y Amazon Connect enruta la llamada a los agentes de su centro de contacto.

#### Aspectos específicos del token web JSON
<a name="jwts4"></a>
+ Algoritmo: **HS256**
+ Notificaciones: 
  + **sub**: *widgetId*

    Reemplace `widgetId` por su propio widgetId. Para encontrar su widgetId, consulte el ejemplo [Script del widget de comunicaciones](add-chat-to-website.md#chat-widget-script).
  + **iat**: \$1hora de emisión.
  + **exp**: \$1vencimiento (10 minutos máximo).

  \$1 Para obtener información sobre el formato de fecha, consulte el siguiente documento del grupo de trabajo de ingeniería de Internet (IETF): [Token web JSON (JWT)](https://tools.ietf.org/html/rfc7519), página 5. 

El siguiente fragmento de código muestra un ejemplo de cómo generar un JWT en 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 del widget de comunicaciones
<a name="chat-widget-script4"></a>

La siguiente imagen muestra un ejemplo de lo JavaScript que incluyes en los sitios web a los que quieres que los clientes puedan llamar a tu centro de contacto. Este script muestra el widget en la esquina inferior derecha de su página web. 

En la imagen siguiente se muestra un ejemplo de dónde aparece el widgetId.

![\[Script del widget de comunicaciones.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/chatwidget-code.png)


Cuando se carga la página web, los clientes ven primero el icono **Iniciar**. Si eligen este icono, se abre el widget de comunicaciones y los clientes pueden llamar a sus agentes.

Para realizar cambios en el widget de comunicaciones en cualquier momento, elija **Editar**.

**nota**  
Los cambios guardados actualizan la experiencia del cliente en pocos minutos. Confirme la configuración de su widget antes de guardarla. 

![\[Enlace de edición de la versión preliminar del widget.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/chatwidget-call-edit.png)


Para realizar cambios en los iconos de los widgets de la página web, recibirá un nuevo fragmento de código para actualizar directamente su página web.

# Personalizaciones adicionales del widget de llamadas web de Amazon Connect
<a name="more-customizations-web-calling-widget"></a>

Puede agregar las siguientes personalizaciones adicionales a su widget de llamadas web:
+ Aplique un [desenfoque de fondo](#background-blur) al mosaico de vídeo del cliente.
+ Configure el widget en [pantalla completa](#fullscreen-mode).
+ Seleccione el [dispositivo de cámara predeterminado](#choose-default-camera).
+ Cambie [el tamaño del vídeo](#resize-video) para que se ajuste a su contenedor.

En las siguientes secciones, se explican los detalles de las personalizaciones, sus casos de uso y cómo configurarlas. Estas personalizaciones se gestionan mediante la configuración de `WebCallingCustomizationObject`.

**Topics**
+ [Desenfoque de fondo](#background-blur)
+ [Modo de pantalla completa](#fullscreen-mode)
+ [Elección del dispositivo de cámara predeterminado](#choose-default-camera)
+ [Cambio de tamaño de vídeo](#resize-video)
+ [Configuración del objeto de personalización](#configure-customization-object-web)
+ [Restricciones y opciones admitidas](#supported-options-web-calling)

## Desenfoque de fondo
<a name="background-blur"></a>

Esta personalización controla el comportamiento de desenfoque del fondo del vídeo del cliente. Cuando está habilitada, el fondo del cliente se difumina cuando el vídeo está activo. Esto ayuda a proteger su información personal o los espacios privados que puedan estar visibles en segundo plano durante la videollamada.

Para activar el desenfoque del fondo, configure `videoFilter.backgroundBlur.option` como `ENABLED_ON_BY_DEFAULT` en `WebCallingCustomizationObject`.

## Modo de pantalla completa
<a name="fullscreen-mode"></a>

Use esta personalización para controlar el comportamiento del widget en pantalla completa. Es posible activar la pantalla completa de dos formas: 
+ Añada un botón de pantalla completa al widget. El cliente puede usar el botón para activar y desactivar la pantalla completa.

  Para añadir un botón de pantalla completa, configure `fullscreen.displayButton` en `ENABLED`. 

OR
+ Configure el widget en pantalla completa en la carga.

  Para activar la pantalla completa al cargar, configure `fullscreen.fullscreenOnLoad` en `ENABLED`.

Resulta especialmente útil utilizar el modo de pantalla completa cuando el cliente necesita centrarse en el widget, por ejemplo, cuando comparte la pantalla.

Puede utilizar estas dos opciones de forma individual o en combinación.

## Elección del dispositivo de cámara predeterminado
<a name="choose-default-camera"></a>

Esta personalización permite que el widget seleccione el dispositivo de cámara predeterminado cuando su cliente habilite el vídeo, y ofrece opciones para la cámara frontal o trasera. Esta capacidad resulta útil, por ejemplo, para diagnosticar aparatos de forma remota. El cliente puede usar la cámara trasera para mostrar el aparato al agente.

Para seleccionar la cámara trasera como predeterminada, ponga `devices.defaultCamera` como `Back`.

## Cambio de tamaño de vídeo
<a name="resize-video"></a>

Esta personalización controla el cambio de tamaño de los mosaicos de vídeo del cliente y del agente en el widget. Por ejemplo, se puede cambiar el tamaño del fotograma de vídeo para que ocupe todo el mosaico de vídeo, o se puede escalar para que quepa en él, dejando espacios vacíos si la relación de aspecto del fotograma de vídeo no coincide con el mosaico de vídeo.
+ Para cambiar el tamaño del vídeo para el cliente, ponga `videoTile.localVideoObjectFit` en el valor deseado.
+ Para cambiar el tamaño del vídeo para el agente, ponga `videoTile.remoteVideoObjectFit` en el valor deseado.

Para obtener más información, consulte [Restricciones y opciones admitidas](#supported-options-web-calling).

## Configuración del objeto de personalización
<a name="configure-customization-object-web"></a>

El siguiente ejemplo muestra cómo implementar personalizaciones opcionales para las llamadas web. Para ver una descripción detallada de estas opciones, consulte [Restricciones y opciones admitidas](#supported-options-web-calling). 

Puede implementar algunos de los campos que se muestran en el siguiente ejemplo o todos ellos. Cuando no se implementan personalizaciones, se utilizan los comportamientos predeterminados para los campos que faltan.

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

En la siguiente imagen, se muestra el aspecto de las personalizaciones sin el modo de pantalla completa. 

![\[Personalizaciones sin el modo de pantalla completa\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/fullscreenmode.png)


En la siguiente imagen, se muestra el aspecto de las personalizaciones en el modo de pantalla completa.

![\[Personalizaciones en el modo de pantalla completa\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/nonfullscreenmode.png)


## Restricciones y opciones admitidas
<a name="supported-options-web-calling"></a>

En la siguiente tabla se enumeran los nombres de personalización admitidos y las restricciones de valor recomendadas.


| Opción de diseño personalizado | Tipo | Valores | Description (Descripción) | 
| --- | --- | --- | --- | 
|  `videoFilter.backgroundBlur.option`  |  cadena  |  `ENABLED_ON_BY_DEFAULT` \$1 `ENABLED_OFF_BY_DEFAULT`  |  Aplica un desenfoque de fondo al mosaico de vídeo del cliente. De forma predeterminada, cuando el cliente habilita el vídeo, el filtro de desenfoque del fondo se aplicará al mosaico del vídeo. Si no quiere activar el filtro de forma predeterminada, puede configurarlo en `ENABLED_OFF_BY_DEFAULT`. El cliente podrá seguir activando el filtro manualmente en la página de preferencias del widget. | 
|  `fullscreen.displayButton`  |  cadena  |  `ENABLED`  |  Añade un botón en la esquina superior derecha del widget para que aparezca en pantalla completa en el navegador. De forma predeterminada, este botón no se añadirá al widget. Si quiere añadirlo, puede configurarlo en `ENABLED`. | 
|  `fullscreen.fullscreenOnLoad`  |  cadena  |  `ENABLED`  |  Hace que el widget aparezca en pantalla completa en el navegador. De forma predeterminada, el widget estará anclado en la esquina inferior derecha de la página web. Si se configura en `ENABLED`, aparecerá en pantalla completa en el navegador. | 
|  `devices.defaultCamera`  |  cadena  |  `Front` \$1 `Back`  | Establece el dispositivo de cámara predeterminado cuando el cliente habilita el vídeo. Se emplea para casos de uso con dispositivos móviles o tabletas. De forma predeterminada, se selecciona la cámara predeterminada ([detalle](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices)). (Para obtener más información, consulta el [MediaDevicesmétodo enumerateDevices ()](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices) en la documentación para desarrolladores de Mozilla). Al configurarlo en `Front\|Back`, se selecciona la cámara correspondiente si está disponible. | 
|  `copyDisplayNameFromAuthenticatedChat`  |  booleano  |  `true` \$1 `false`  | En caso de que el cliente final se autentique mediante el bloque de flujo [Autenticar al cliente](authenticate-customer.md), si el valor se pone en `true` se copiará el nombre público al contacto de voz. El valor predeterminado es `false`. | 
|  `videoTile.localVideoObjectFit`  |  cadena  |  `fill` \$1 `contain` \$1 `cover` \$1 `none` \$1 `scale-down`  |  Establece la propiedad [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) del mosaico de vídeo del cliente en el widget. De forma predeterminada, el valor viene determinado por la anchura y la altura de la resolución del vídeo: si la altura es mayor que la anchura, será `contain`; de lo contrario, será `cover`. Para obtener una descripción detallada de cada valor, consulte [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) en la documentación para desarrolladores de Mozilla.  Este atributo se aplica únicamente a la altura y el ancho de visualización del vídeo del cliente en el widget. La altura y el ancho del vídeo del cliente enviado al agente no se modifican.  | 
|  `videoTile.remoteVideoObjectFit`  |  cadena  |  `fill` \$1 `contain` \$1 `cover` \$1 `none` \$1 `scale-down`  | Establece la propiedad [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) del mosaico de vídeo del cliente en el widget. De forma predeterminada, el valor viene determinado por la anchura y la altura de la resolución del vídeo: si la altura es mayor que la anchura, será `contain`; de lo contrario, será `cover`. Para obtener una descripción detallada de cada valor, consulte [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) en la documentación para desarrolladores de Mozilla.  Este atributo se aplica únicamente a la altura y el ancho de visualización del vídeo del agente en el widget.   | 

# Integración de las videollamadas y la pantalla compartida en el escritorio personalizado del agente mediante Amazon Connect Streams JS
<a name="integrate-video-calling-for-agents"></a>

Este tema va dirigido a los desarrolladores. Para los escritorios personalizados de los agentes, debe realizar cambios para admitir las videollamadas y la pantalla compartida. Los siguientes son pasos de alto nivel.

**nota**  
Si incrusta el CCP directamente en su aplicación de agente personalizado, asegúrese de que `allowFramedVideoCall` esté establecido en true cuando inicie el CCP con [Amazon Connect Streams JS](https://github.com/aws/amazon-connect-streams).

1. Utilice [Amazon Connect Streams JS](https://github.com/aws/amazon-connect-streams) para comprobar si el contacto entrante es un contacto de WebRTC. Utilice el subtipo de contacto de `"connect:WebRTC"` tal y como se muestra en el ejemplo siguiente:

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

1. Puede recuperar el nombre mostrado del cliente utilizando el campo de nombre de ` contact contact.getName()`.

## Agregación de soporte para video
<a name="support-video"></a>

Complete los siguientes pasos para añadir compatibilidad con la gestión de video cuando sus clientes la tengan activada.

1. Para comprobar si un contacto tiene capacidad 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 comprobar si el agente tiene permiso de vídeo para gestionar una videollamada:

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

1. Para aceptar una videollamada, el contacto debe poder recibir vídeo y el agente debe tener permiso para ver vídeo.

   ```
   function shouldRenderVideoUI() {
       return contact.getContactSubtype() === "connect:WebRTC" &&
       contact.hasVideoRTCCapabilities() &&
       agent.getPermissions().includes('videoContact');
   }
   ```

1. Para unirse a una sesión de vídeo, llame a `getVideoConnectionInfo`:

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

1. Para crear una interfaz de usuario de vídeo y unirse a una sesión de videoconferencia, consulte:
   + [Amazon Chime SDK para uno JavaScript](https://github.com/aws/amazon-chime-sdk-js) GitHub 
   + [Amazon Chime Biblioteca de componentes de React del SDK](https://github.com/aws/amazon-chime-sdk-component-library-react) en GitHub

1. Para simplificar, en los siguientes fragmentos de código se utilizan ejemplos de la biblioteca de componentes de React del Amazon Chime SDK.

   ```
   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 la cuadrícula de vídeo, usa la biblioteca de componentes [VideoTileGrid](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-videotilegrid--page)de React del Amazon Chime SDK o personaliza el comportamiento de la interfaz de usuario mediante. [RemoteVideoTileProvider](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-providers-remotevideotileprovider--page) 

1. Para renderizar una vista previa de vídeo, puedes usar [CameraSelection](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-deviceselection-camera-cameraselection--page)los componentes [VideoPreview](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-previewvideo--page)y. Para elegir o cambiar el vídeo de una cámara, puede utilizar `meetingManager.selectVideoInputDevice` o `meetingManager.startVideoInput ` si la reunión está en curso.

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

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

1. Para ver un ejemplo de código sobre cómo crear una experiencia de vídeo personalizada, consulte este ejemplo del SDK de Amazon Chime : [demostración de Amazon Chime React Meeting](https://github.com/aws-samples/amazon-chime-sdk/tree/main/apps/meeting). 

## Agregación de compatibilidad con la pantalla compartida
<a name="support-screen-sharing"></a>

**nota**  
Si usa el out-of-box CCP directamente en su aplicación de agente personalizado, asegúrese de que `allowFramedScreenSharingPopUp` estén `allowFramedScreenSharing` configurados en true cuando inicie el CCP con [Amazon Connect Streams JS](https://github.com/aws/amazon-connect-streams).   
Si `allowFramedScreenSharing` se establece en true, se habilita el botón para compartir pantalla solo en un CCP de una ventana o pestaña. Si `allowFramedScreenSharingPopUp` se establece en true, se inicia la aplicación para compartir pantalla en una ventana independiente cuando el agente selecciona el botón para compartir pantalla. Para obtener más información, consulte la documentación de [Amazon Connect Streams JS](https://github.com/aws/amazon-connect-streams).

Complete los siguientes pasos para habilitar la pantalla compartida en los escritorios personalizados de los agentes. 

1. Compruebe si un contacto puede compartir la pantalla. 

   ```
   // 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. Compruebe si el agente tiene permiso de video.

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

1. Compruebe si el agente puede iniciar una sesión de pantalla compartida para el contacto que cumpla los requisitos.

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

1. Llame a `startScreenSharing` para iniciar la sesión de pantalla compartida. Esto añade `ScreenSharingActivated` al contacto, lo que le permite buscarlo en el [registro de contactos](ctr-data-model.md). 

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

1. Llame a `getVideoConnectionInfo` para unirse a la sesión. Puede omitir este paso si el agente se ha unido a la sesión de video para gestionar el video.

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

1. Únase a la sesión mediante React Components Library de Amazon Chime SDK. Para ver un fragmento de código, consulte el paso 6 de [Agregación de soporte para video](#support-video).

1. Use lo mismo [VideoTileGrid](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-videotilegrid--page)de los componentes de React del SDK de Amazon Chime para renderizar el mosaico de vídeo para compartir pantalla. [Para obtener más información, consulte [useContentShareEstado](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-hooks-usecontentsharestate--page) y controles useContentShare](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-hooks-usecontentsharecontrols--page) 

1. Llame a `stopScreenSharing` cuando finalice la sesión.

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

1. Puede recibir eventos para la actividad de pantalla compartida suscribiéndose a las siguientes devoluciones de llamadas:

   ```
   initScreenSharingListeners() {
       this.contact.onScreenSharingStarted(() => {
           // Screen sharing session started
       });
   
       this.contact.onScreenSharingStopped(() => {
           // Screen sharing session ended
       });
   
       this.contact.onScreenSharingError((error) => {
           // Screen sharing session error occurred
       });
     }
   }
   ```

# Activación de la restricción de URL para compartir pantalla
<a name="screen-sharing-url-restriction"></a>

Puede administrar lo URLs que sus clientes y agentes pueden compartir durante el contacto. Esto le permite mejorar la seguridad y la privacidad. Cuando un cliente o un agente comparte una URL que no está en la lista de permitidos, recibe un mensaje de error y el video de pantalla compartida se detiene automáticamente y se bloquea. 

**importante**  
Los navegadores web admitidos son los siguientes:   
Chrome, versión 109 y posteriores
Edge, versión 109 y posteriores
Los agentes y los clientes solo pueden compartir la pestaña del navegador. No pueden compartir la ventana o toda la pantalla. Si habilita esta característica y sus clientes o agentes utilizan un navegador, una ventana o la pantalla completa que no son compatibles, recibirán un mensaje de error.

Complete los siguientes pasos para habilitar la restricción de URL para compartir la pantalla.

## Paso 1: Crea una URLs lista de permitidos
<a name="step1-url-restriction"></a>

Las listas de permitidos se configuran URLs mediante atributos predefinidos. Siga estos pasos:

1. En el sitio web de Amazon Connect administración, elija **** Enrutamiento****, **Atributos predefinidos** **y Agregar atributo predefinido**.

1. En la sección **Agregar atributos predefinidos**, en el cuadro **Atributo predefinido**, añada uno de los siguientes elementos.
   + Para crear una lista de permitidos para compartir la pantalla con los clientes, introduzca `screensharing:customer-allowed-urls`.
   + Para crear una lista de permitidos para compartir la pantalla con los agentes, introduzca `screensharing:agent-allowed-urls`.

1. En el cuadro **Valor**, introduzca la URL permitida. Puede ser una URL con formato completo o un patrón de cadena para la coincidencia de subcadenas, como por ejemplo ` https://mycompany` o ` /mytransactions`. A continuación se proporcionan ejemplos de formatos válidos.    
[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/screen-sharing-url-restriction.html)

1. Guarde la lista. URLs Aparecen en la página de **atributos predefinidos**, como se muestra en el siguiente ejemplo.   
![\[La página Atributos predefinidos.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/screen-sharing-restricted-urls.png)

## Paso 2: agregar un script a la lista de sitios web
<a name="step2-url-restriction"></a>

Debe incrustar un script en su sitio web para que la URL de la página pueda quedar expuesta a la aplicación de captura. El controlador de captura se obtiene de un archivo del CloudFront punto de conexión de Amazon que aloja Amazon Connect. Complete las siguientes instrucciones.

1. En el sitio web de Amazon Connect administración, selecciona **Canales**, **comunica widgets**. En la página de resumen del widget de comunicación, busque el script del widget. Obtenga el punto de conexión del atributo `s.src`, tal y como se muestra en el siguiente ejemplo.   
![\[El script del widget.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/screen-sharing-restricted-urls-step2.png)

   El punto de conexión puede estar en una AWS región diferente a la de su instancia de Amazon Connect. Para obtener el mejor rendimiento, le recomendamos usar la misma región que su instancia de Amazon Connect. 

1. Sustituya el siguiente marcador de posición `${endpoint}` por el valor del paso anterior. Copie el fragmento de código completo y péguelo en el nivel superior de su sitio web.

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