Integre las videollamadas integradas en la aplicación, las videollamadas y el uso compartido de pantalla de forma nativa en su aplicación

Para integrar Amazon Connect en la aplicación, la web, las videollamadas y el uso compartido de pantalla con tu aplicación:

1. Usa la StartWebRTCContactAPI Amazon Connect para crear el contacto.

2. 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, Android o JavaScript.

Para obtener información sobre la creación de participantes adicionales, consulteHabilita las videollamadas multiusuario dentro de la aplicación, la web y las videollamadas.

Consulte el siguiente repositorio de Github para ver ejemplos de aplicaciones: amazon-connect-in-app-calling-examples.

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.

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.

2. La aplicación cliente (sitio web o aplicación móvil) o el servidor web utilizan la Amazon Connect StartWebRTCContactAPI para iniciar el contacto al que se le transfiere cualquier atributo o contexto. Amazon Connect

3. La aplicación cliente se une a la llamada utilizando los detalles devueltos StartWebRTCContacten el paso 2.

4. (Opcional) El cliente usa la CreateParticipantConnectionAPI para recibir una ConnectionToken que se usa para enviar el DTMF a través de la SendMessageAPI.

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

6. El agente acepta el contacto.

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

8. (Opcional, no se muestra en el diagrama) Se pueden añadir participantes adicionales con las CreateParticipantteclas y. CreateParticipantConnection APIs

Introducción

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

1. Usa la StartWebRTCContactAPI para crear el contacto. La API devuelve los detalles necesarios para que el cliente del SDK de Amazon Chime se una a la llamada.

2. Cree una instancia del objeto de MeetingSessionConfiguration cliente del SDK de Amazon Chime con las configuraciones devueltas por. StartWebRTCContact

3. Cree una instancia del DefaultMeetingSession cliente Amazon Chime SDK MeetingSessionConfiguration con, que se creó 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
     );

4. 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();

5. 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: descripción general de la API

• Android: descripción general de la API

• JavaScript: Descripción general de la API

Enviar tonos DTMF

Para enviar DTMF a la llamada, se necesitan dos servicios APIs de participación de Amazon Connect: CreateParticipantConnectiony SendMessagerespectivamente.

nota

contentTypeya que la SendMessage API debe ser. audio/dtmf

1. Invoca CreateParticipantConnectionpara recuperarConnectionToken. (ParticipantTokenes necesario para llamar a esta API. Puedes encontrarlo en la StartWebRTCContactrespuesta.)

2. Con laConnectionToken, llame SendMessagepara enviar dígitos del DTMF.

Seleccione los 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 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);

Silenciar y volver a silenciar el 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();

Inicie su propio vídeo

Para iniciar el vídeo propio, utilice elmeetingSession.audioVideo.startLocalVideo(). Consulte las guías de 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();

Detenga el vídeo propio

Para detener el vídeo propio, utilice lameetingSession.audioVideo.stopLocalVideo().

iOS/Android

meetingSession.audioVideo.stopLocalVideo()

JavaScript

meetingSession.audioVideo.stopLocalVideoTile();

Habilitar el vídeo del agente

Para poder recibir y cargar el vídeo del agente dentro de la aplicación, utilice elmeetingSession.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 del SDK específicas de la plataforma para obtener detalles completos sobre la implementación de los mosaicos de vídeo.

Desactiva el vídeo del agente

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

iOS/Android

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

JavaScript

meetingSession.audioVideo.unbindVideoElement(tileId);

Usa mensajes de datos

Puede utilizar mensajes de datos si necesita enviar cualquier estado desde el lado del 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 la video/screen información compartida, o puedes desactivar la opción de video/screen compartir.

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

Escuche los eventos más destacados

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

La llamada alcanza su capacidad máxima

Cuando más de 6 personas intenten unirse a la convocatoria, 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: MeetingSessionStatusCode.AudioCallAtCapacity o MeetingSessionStatusCode.AudioAuthenticationRejected

Participante eliminado 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á 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

Extremos de contacto

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