Intégrez l'application, le Web, les appels vidéo et le partage d'écran de manière native dans votre application - Amazon Connect

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

Intégrez l'application, le Web, les appels vidéo et le partage d'écran de manière native dans votre application

Pour intégrer Amazon Connect dans l'application, le Web, les appels vidéo et le partage d'écran à votre application :

  1. Utilisez l'StartWebRTCContactAPI Amazon Connect pour créer le contact.

  2. Utilisez ensuite les informations renvoyées par l'appel d'API pour rejoindre l'appel à l'aide de la bibliothèque Amazon Chime cliente pour iOS, Android ou JavaScript.

Pour plus d'informations sur la création de participants supplémentaires, voirActivez les appels multi-utilisateurs intégrés à l'application, le Web et les appels vidéo.

Consultez le référentiel Github suivant pour des exemples d'applications : amazon-connect-in-app-calling-examples.

Comment un appareil client lance un appel intégré ou Web

Le schéma suivant montre la séquence d’événements permettant à un appareil client (application mobile ou navigateur) de lancer un appel intégré ou Web.

Schéma conceptuel montrant comment un appareil client lance un appel
  1. Votre client utilise l’application client (site Web ou application) pour commencer un appel intégré ou Web.

  2. L'application cliente (site Web ou application mobile) ou le serveur Web utilise l' Amazon Connect StartWebRTCContactAPI pour démarrer le contact en transmettant les attributs ou le contexte à Amazon Connect.

  3. L'application cliente rejoint l'appel en utilisant les informations renvoyées StartWebRTCContactà l'étape 2.

  4. (Facultatif) Le client utilise l'CreateParticipantConnectionAPI pour recevoir un ConnectionToken message utilisé pour envoyer du DTMF via l'SendMessageAPI.

  5. Le contact atteint le flux, est routé en fonction du flux et placé dans la file d’attente.

  6. L’agent accepte le contact.

  7. (Facultatif) Si la vidéo est activée pour le client et l’agent, ils peuvent commencer leur vidéo.

  8. (Facultatif, non illustré dans le schéma) Des participants supplémentaires peuvent être ajoutés à l'aide des CreateParticipanttouches et CreateParticipantConnection APIs.

Mise en route

Voici les principales étapes pour bien démarrer :

  1. Utilisez l'StartWebRTCContactAPI pour créer le contact. L'API renvoie les informations nécessaires pour que le client Amazon Chime SDK puisse participer à l'appel.

  2. Instanciez l'objet MeetingSessionConfiguration client Amazon Chime SDK à l'aide des configurations renvoyées par. StartWebRTCContact

  3. Instanciez le DefaultMeetingSession client Amazon Chime SDK MeetingSessionConfiguration avec, créé à l'étape 2 pour créer une session de réunion client.

    • 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. Utilisez la méthode meetingSession.audioVideo.start() pour rejoindre le contact WebRTC par audio.

    • iOS/Android

      meetingSession.audioVideo.start()
    • JavaScript

      await meetingSession.audioVideo.start();
  5. Utilisez la méthode meetingSession.audioVideo.stop() pour raccrocher le contact WebRTC.

    • iOS/Android

      meetingSession.audioVideo.stop()
    • JavaScript

      meetingSession.audioVideo.stop();

Étapes facultatives

Pour des opérations supplémentaires et une documentation complète sur les API, reportez-vous aux guides de présentation des API spécifiques à la plate-forme :

Envoyer des tonalités DTMF

Pour envoyer du DTMF à l'appel, deux Amazon Connect Participant Service APIs sont nécessaires : CreateParticipantConnectionet SendMessagerespectivement.

Note

contentTypecar l' SendMessage API doit êtreaudio/dtmf.

  1. Invoquez CreateParticipantConnectionpour récupérerConnectionToken. (ParticipantTokenest nécessaire pour appeler cette API. Vous pouvez le trouver dans la StartWebRTCContactréponse.)

  2. Avec leConnectionToken, appelez SendMessagepour envoyer des chiffres DTMF.

Sélectionnez les appareils audio

Pour sélectionner le input/output périphérique audio, vous pouvez utiliser les méthodes du client Amazon Chime SDK pour Android et iOS ou les fonctionnalités iOS natives pour 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);

Désactiver et rétablir le son

Pour activer ou désactiver le son, utilisez meetingSession.audioVideo.realtimeLocalMute() et meetingSession.audioVideo.realtimeLocalUnmute().

iOS/Android

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

JavaScript

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

Lancer une vidéo personnelle

Pour démarrer l'auto-vidéo, utilisez lemeetingSession.audioVideo.startLocalVideo(). Consultez les guides de l'API de la bibliothèque cliente pour plus d'informations sur la façon d'énumérer et de choisir des appareils spécifiques.

iOS/Android

meetingSession.audioVideo.startLocalVideo()

JavaScript

meetingSession.audioVideo.startLocalVideoTile();

Arrêter l'auto-vidéo

Pour arrêter l'auto-vidéo, utilisez lemeetingSession.audioVideo.stopLocalVideo().

iOS/Android

meetingSession.audioVideo.stopLocalVideo()

JavaScript

meetingSession.audioVideo.stopLocalVideoTile();

Activer la vidéo de l'agent

Pour autoriser la réception et le chargement de vidéos de l'agent dans l'application, utilisez lemeetingSession.audioVideo.startRemoteVideo(). Vous devrez également implémenter des observateurs de vignettes vidéo et lier des vignettes vidéo pour afficher les vues.

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

Consultez les guides du SDK spécifiques à la plate-forme pour obtenir des informations complètes sur la mise en œuvre des vignettes vidéo.

Désactiver la vidéo de l'agent

Pour interdire la réception et le chargement de vidéos de l'agent dans l'application, utilisez lemeetingSession.audioVideo.stopRemoteVideo().

iOS/Android

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

JavaScript

meetingSession.audioVideo.unbindVideoElement(tileId);

Utiliser des messages de données

Vous pouvez utiliser des messages de données si vous devez envoyer un statut du côté agent à l'utilisateur final. Par exemple, lorsque des clients sont en attente, vous pouvez envoyer un message de données à l'application du client pour afficher un message l'informant qu'ils sont en attente et que leur video/screen partage est toujours en cours d'envoi, ou vous pouvez désactiver le video/screen partage.

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

Soyez à l'affût des événements interrompus

Vous pouvez écouter les événements lorsque la participation d'un contact prend fin par l'intermédiaire de l'audioVideoDidStopobservateur. Les codes de statut spécifiques peuvent varier d'une plateforme à l'autre.

L'appel atteint sa capacité maximale

Lorsque plus de 6 personnes tentent de rejoindre l'appel, les autres participants recevront le message d'erreur suivant et ne pourront pas participer tant que les autres ne partiront pas.

  • iOS : MeetingSessionStatusCode.audioCallAtCapacity ou MeetingSessionStatusCode.audioAuthenticationRejected

  • Android : MeetingSessionStatusCode.AudioCallAtCapacity ou MeetingSessionStatusCode.AudioAuthenticationRejected

  • JavaScript: MeetingSessionStatusCode.AudioCallAtCapacity ou MeetingSessionStatusCode.AudioAuthenticationRejected

Participant retiré de l'appel

Lorsqu'un participant est retiré de l'appel par l'agent mais que le contact se poursuit pour les autres participants, ils reçoivent le code de statut suivant. Notez que si le retrait du participant entraîne la fin du contact, il recevra soit ce statut, soit le statut de fin de contact.

  • iOS : MeetingSessionStatusCode.audioServerHungup ou MeetingSessionStatusCode.audioAuthenticationRejected

  • Android : MeetingSessionStatusCode.AudioServerHungup ou MeetingSessionStatusCode.AudioAuthenticationRejected

  • JavaScript: MeetingSessionStatusCode.AudioAttendeeRemoved ou MeetingSessionStatusCode.AudioAuthenticationRejected

Fin du contact

Lorsque le contact sera complètement terminé pour tous les participants, ils recevront le code de statut suivant.

  • iOS : MeetingSessionStatusCode.audioCallEnded

  • Android : MeetingSessionStatusCode.AudioCallEnded

  • JavaScript: MeetingSessionStatusCode.AudioCallEnded