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égration des appels intégrés, Web et vidéo de manière native dans votre application mobile
Pour intégrer Amazon Connect intégré, Web, vidéo et partage d’écran à votre application :
1. Utilisez l'[StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API Amazon Connect pour créer le contact.
1. 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](https://github.com/aws/amazon-chime-sdk-ios), [Android](https://github.com/aws/amazon-chime-sdk-android) ou [JavaScript](https://github.com/aws/amazon-chime-sdk-js).
Pour plus d’informations sur la création de participants supplémentaires, consultez [Activation des appels intégrés, Web et vidéo](enable-multiuser-inapp.md).
Consultez le référentiel Github suivant pour des exemples d'applications : [amazon-connect-in-app-calling-examples](https://github.com/amazon-connect/amazon-connect-in-app-calling-examples).
**Topics**
+ [Comment un appareil client lance un appel intégré ou Web](#diagram-option2)
+ [Mise en route](#diagram-option2-gs)
+ [Étapes facultatives](#optional-steps)
## 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\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/netra-gs-diagram.png)
1. Votre client utilise l’application client (site Web ou application) pour commencer un appel intégré ou Web.
1. L'application client (site Web ou application mobile) ou le serveur Web utilise l' Amazon Connect [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API pour démarrer le contact en transmettant les attributs ou le contexte à Amazon Connect.
1. L'application cliente rejoint l'appel en utilisant les informations renvoyées [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)à l'étape 2.
1. (Facultatif) Le client utilise l'[CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)API pour recevoir un `ConnectionToken` message utilisé pour envoyer du DTMF via l'[SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html)API.
1. Le contact atteint le flux, est routé en fonction du flux et placé dans la file d’attente.
1. L’agent accepte le contact.
1. (Facultatif) Si la vidéo est activée pour le client et l’agent, ils peuvent commencer leur vidéo.
1. (Facultatif, non illustré dans le schéma) Des participants supplémentaires peuvent être ajoutés à l'aide des [CreateParticipant](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipant.html)touches et [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html) APIs.
## Mise en route
Voici les principales étapes pour bien démarrer :
1. Utilisez l'[StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API pour créer le contact. L’API renvoie les informations nécessaires pour que le client du kit SDK Amazon Chime rejoigne l’appel.
1. Instanciez l'objet `MeetingSessionConfiguration` client Amazon Chime SDK à l'aide des configurations renvoyées par. [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)
1. Instanciez l’élément `DefaultMeetingSession` du client du kit SDK Amazon Chime avec `MeetingSessionConfiguration`, qui a été 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
);
```
1. Utilisez la méthode `meetingSession.audioVideo.start()` pour rejoindre le contact WebRTC par audio.
+ iOS, Android
```
meetingSession.audioVideo.start()
```
+ JavaScript
```
await meetingSession.audioVideo.start();
```
1. 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 plateforme :
+ **iOS** : [présentation de l’API](https://aws.github.io/amazon-chime-sdk-ios/guides/api_overview.html)
+ **Android** : [présentation de l’API](https://aws.github.io/amazon-chime-sdk-android/guides/api_overview.html)
+ **JavaScript**: [Présentation de l'API](https://github.com/aws/amazon-chime-sdk-js/blob/main/guides/03_API_Overview.md)
### Envoi des tonalités DTMF
Pour envoyer du DTMF à l'appel, deux Amazon Connect Participant Service APIs sont nécessaires : [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)et [SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html)respectivement.
**Note**
`contentType`car l' SendMessage API doit être`audio/dtmf`.
1. Invoquez [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)pour récupérer`ConnectionToken`. (`ParticipantToken`est nécessaire pour appeler cette API. Vous pouvez le trouver dans la [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)réponse.)
1. Avec le`ConnectionToken`, appelez [SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html)pour envoyer des chiffres DTMF.
### Sélection d’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](https://developer.apple.com/documentation/avkit/avroutepickerview).
**iOS, Android**
```
meetingSession.audioVideo.listAudioDevices()
meetingSession.audioVideo.chooseAudioDevice(mediaDevice)
```
**JavaScript**
```
await meetingSession.audioVideo.listAudioInputDevices();
await meetingSession.audioVideo.listAudioOutputDevices();
await meetingSession.audioVideo.startAudioInput(device);
await meetingSession.audioVideo.chooseAudioOutput(deviceId);
```
### Désactivation et rétablissement du 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();
```
### Démarrage d’une vidéo
Pour démarrer l’auto-vidéo, utilisez `meetingSession.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êt de la vidéo
Pour arrêter l’auto-vidéo, utilisez `meetingSession.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 la vidéo de l’agent dans l’application, utilisez `meetingSession.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 plateforme 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 la vidéo de l’agent dans l’application, utilisez `meetingSession.audioVideo.stopRemoteVideo()`.
**iOS, Android**
```
meetingSession.audioVideo.stopRemoteVideo()
meetingSession.audioVideo.unbindVideoView(tileId)
```
**JavaScript**
```
meetingSession.audioVideo.unbindVideoElement(tileId);
```
### Utilisation de messages de données
Vous pouvez utiliser des [messages de données](https://github.com/aws/amazon-chime-sdk-js/blob/main/guides/03_API_Overview.md#9-send-and-receive-data-messages-optional) 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);
```
### Écoute d’événements interrompus
Vous pouvez écouter les événements lorsque la participation d’un contact prend fin par l’intermédiaire de l’observateur `audioVideoDidStop`. 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 reçoit 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`
#### Événement de contact
Lorsque le contact est complètement terminé pour tous les participants, ils reçoivent le code de statut suivant.
+ **iOS :** `MeetingSessionStatusCode.audioCallEnded`
+ **Android :** `MeetingSessionStatusCode.AudioCallEnded`
+ **JavaScript:** `MeetingSessionStatusCode.AudioCallEnded`