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.
# 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
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
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 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
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
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
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
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
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
Para detener el autovideo, utilice `meetingSession.audioVideo.stopLocalVideo()`.
**iOS/Android**
```
meetingSession.audioVideo.stopLocalVideo()
```
**JavaScript**
```
meetingSession.audioVideo.stopLocalVideoTile();
```
### Activación del vídeo del agente
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
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
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
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
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
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
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`