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.

# Configuration des fonctionnalités d’appels intégrés à l’application, Web et vidéo et de partage d’écran
<a name="inapp-calling"></a>

Les fonctionnalités d'appels Amazon Connect intégrés, Web et vidéo permettent à vos clients de vous contacter sans jamais quitter votre application Web ou mobile. Vous pouvez utiliser ces fonctionnalités pour transmettre des informations contextuelles à Amazon Connect. Cela vous permet de personnaliser l’expérience client en fonction d’attributs tels que le profil du client ou d’autres informations, comme les actions effectuées précédemment dans l’application.

## Points importants à connaître
<a name="inapp-calling-important"></a>
+ Lors d’un appel vidéo ou d’une session de partage d’écran, les agents peuvent voir la vidéo ou le partage d’écran du client même lorsque le client est en attente. Il revient au client de traiter les données d’identification personnelle (PII) en conséquence. Si vous souhaitez modifier ce comportement, vous pouvez créer un CCP personnalisé et un widget de communication. Pour de plus amples informations, veuillez consulter [Intégration des appels intégrés, Web et vidéo de manière native dans votre application mobile](config-com-widget2.md).

## Widget de communication : configuration du chat, de la voix et de la vidéo dans un seul emplacement
<a name="one-page"></a>

Pour configurer les appels intégrés, Web et vidéo, vous utilisez la page **Widgets de communication**. Elle prend en charge le chat, la voix, la vidéo et le partage d’écran. L’image suivante montre la section **Options de communication** de la page lorsqu’elle est configurée pour toutes ces options. 

![\[Section Options de communication de la page de création d’un widget de communication\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/comm-widget-all.png)


## Appels intégrés, Web et vidéo multi-utilisateur
<a name="multi-user"></a>

Vous pouvez ajouter jusqu’à quatre utilisateurs supplémentaires à un appel Web, intégré à l’application ou vidéo en cours ou planifié, pour un total de six participants : l’agent, le premier utilisateur et quatre autres participants (utilisateurs ou agents).

Par exemple, pour aider à conclure une transaction de prêt, vous pouvez demander à l’agent et au client, au conjoint du client, à un traducteur et même à un superviseur (c’est-à-dire un autre agent) de vous appeler pour aider à résoudre rapidement les problèmes.

Pour savoir comment activer les appels Web, intégrés à l’application et vidéo multi-utilisateurs, consultez [Activation des appels intégrés, Web et vidéo](enable-multiuser-inapp.md).

## Comment configurer les appels intégrés, Web et vidéo
<a name="inapp-options"></a>

Il existe deux manières d'intégrer les appels Amazon Connect intégrés, le Web et les appels vidéo, ainsi que le partage d'écran à votre site Web ou à votre application mobile : 
+ Option 1 : [configurer un widget out-of-the-box de communication](config-com-widget1.md). Vous pouvez utiliser le générateur d'interface utilisateur pour personnaliser la police et les couleurs, et sécuriser le widget afin qu'il ne puisse être lancé que depuis votre site Web. 
+ Option 2 : [Intégration des appels intégrés, Web et vidéo de manière native dans votre application mobile](config-com-widget2.md). Choisissez cette option pour créer un widget de communication à partir de zéro et l’intégrer à votre application mobile ou à votre site Web. Utilisez le client Amazon Connect APIs et le Amazon Chime SDK APIs pour l'intégrer nativement à votre application mobile ou à votre site Web.

**Note**  
Si vous disposez de bureaux d’agents personnalisés, vous n’avez pas besoin d’apporter de modifications pour les appels Amazon Connect intégrés et Web. Toutefois, vous devez [intégrer les appels vidéo et le partage d’écran](integrate-video-calling-for-agents.md).

# Configurer un widget out-of-the-box de communication dans Amazon Connect
<a name="config-com-widget1"></a>

Utilisez cette option pour créer des widgets de communication pour les [navigateurs](connect-supported-browsers.md#browsers-inapp) de bureau et mobiles. À la fin de cette procédure, Amazon Connect génère un extrait de code HTML personnalisé que vous copiez dans le code source de votre site Web.

1. Connectez-vous au site Web Amazon Connect d'administration à l'aide d'un compte administrateur ou d'un compte utilisateur doté de **canaux et de flux**, **widget de communication - Créez une** autorisation dans son profil de sécurité.

1. Dans Amazon Connect le menu de navigation de gauche, choisissez **Canaux**, **Widgets de communication**. 

1. L’assistant vous guide à travers les trois prochaines étapes. 

## Étape 1 : sélectionner des canaux de communication
<a name="widgetdetails"></a>

1. Sur la page **Widgets de communication**, entrez un **nom** et une **description** pour le widget de communication. 
**Note**  
Le nom doit être unique pour chaque widget de communication créé dans une instance Amazon Connect.

1. Dans la section **Options de communication**, choisissez la manière dont vos clients peuvent interagir avec votre widget. L’image suivante illustre les options autorisant les appels Web, vidéo et le partage d’écran pour les clients.   
![\[Page Widget de communication configurée pour les appels Web et vidéo et le partage d’écran.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/comm-widget-page-call.png)

1. Dans la section **Appels sur le Web**, choisissez d’activer les expériences vidéo et de partage d’écran pour vos clients. L’image précédente illustre les options permettant aux clients de voir la vidéo des agents, d’activer leur vidéo et d’autoriser les agents et les clients à partager leurs écrans. Pour plus d’informations sur la définition des restrictions relatives au partage d’écran, consultez [Activer la restriction d’URL pour le partage d’écran](screen-sharing-url-restriction.md).

1. Choisissez **Save and continue (Enregistrer et continuer)**.

## Étape 2 : personnaliser le widget
<a name="customizewidget"></a>

À mesure que vous choisissez ces options, l’aperçu du widget est automatiquement mis à jour afin que vous puissiez voir à quoi ressemblera l’expérience pour vos clients.

![\[Aperçu du widget de communication\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/netra-call-preview.png)


**Définition des styles des boutons d’accès aux widgets**

1. Choisissez les couleurs de l’arrière-plan des boutons en saisissant des valeurs hexadécimales ([codes couleur HTML](https://htmlcolorcodes.com/)).

1. Choisissez **Blanc** ou **Noir** comme couleur d’icône. La couleur d’icône ne peut pas être personnalisée.

**Personnalisation des noms et des styles d’affichage**

1. Fournissez des valeurs pour le message et la couleur d’en-tête, ainsi que pour la couleur d’arrière-plan du widget. 

1. **URL du logo** : insérez une URL vers la bannière de votre logo depuis un compartiment Amazon S3 ou une autre source en ligne.
**Note**  
L’aperçu du widget de communication sur la page de personnalisation n’affichera pas le logo s’il provient d’une source en ligne autre qu’un compartiment Amazon S3. Cependant, le logo sera affiché lorsque le widget de communication personnalisé sera implémenté sur votre page.

   La bannière doit être au format .svg, .jpg ou .png. L’image peut mesurer 280 pixels (largeur) par 60 pixels (hauteur). Toute image supérieure à ces dimensions sera redimensionnée pour s’adapter à l’espace des composants de logo de 280 x 60.

   1. Pour obtenir des instructions sur le chargement d’un fichier tel que la bannière de votre logo sur S3, consultez [Chargement d’objets](https://docs.aws.amazon.com/AmazonS3/latest/userguide/upload-objects.html) dans le *Guide de l’utilisateur Amazon Simple Storage Service*.

   1. Assurez-vous que les autorisations pour les images sont correctement définies afin que le widget de communication soit autorisé à accéder à l’image. Pour plus d’informations sur la façon de rendre un objet S3 accessible au public, consultez [Étape 2 : ajouter une stratégie de compartiment](https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html#bucket-policy-static-site) dans la rubrique *Définition des autorisations pour l’accès au site Web*.

## Étape 3 : ajouter votre domaine pour le widget
<a name="widgetdomain"></a>

Cette étape vous permet de sécuriser le widget de communication pour qu’il puisse être lancé uniquement depuis votre site Web.

1. Entrez les domaines du site Web où vous souhaitez placer le widget de communication. Le widget de communication se charge uniquement sur les sites Web que vous sélectionnez dans cette étape. 

   Choisissez **Ajouter un domaine** pour ajouter jusqu’à 50 domaines.  
![\[Option Ajouter un domaine.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/chatwidget-add-domain.png)
**Important**  
Vérifiez que votre site Web URLs est valide et ne contient pas d'erreurs. Incluez l’URL complète commençant par https://.
Nous vous recommandons d’utiliser https:// pour vos sites Web et applications de production.

1. Sous **Renforcer la sécurité pour les demandes de votre widget de communication**, l’expérience de configuration la plus rapide consiste à choisir **Non, je vais ignorer cette étape**.

   Nous vous recommandons de choisir **Oui** pour pouvoir vérifier que l’utilisateur est authentifié. Pour de plus amples informations, veuillez consulter [Personnalisation de l’expérience client pour les appels intégrés à l’application, Web et vidéo dans Amazon Connect](optional-widget-steps.md). 

1. Choisissez **Save and continue (Enregistrer et continuer)**.

   Félicitations \$1 Votre widget a été créé. Copiez le code généré et collez-le sur chaque page de votre site Web où vous souhaitez que le widget de communication apparaisse.

## Permettre aux agents de passer des appels intégrés, Web et vidéo
<a name="agent-cx-cw"></a>

Pour permettre aux agents d’utiliser les appels vidéo et le partage d’écran, attribuez les autorisations **Panneau de configuration des contacts (CCP)** **Appels vidéo – Accéder** à leur profil de sécurité.

L'espace de travail de l' Amazon Connect agent prend Amazon Connect en charge les appels intégrés, le Web et les appels vidéo, ainsi que le partage d'écran. Vous pouvez utiliser les mêmes configuration, routage, analytique et application d’agent que pour les appels téléphoniques et les chats. Pour commencer, la seule étape consiste à activer les profils de sécurité de votre agent avec les autorisations nécessaires pour passer des appels vidéo.

Pour les postes de travail des agents personnalisés, aucune modification n'est requise pour les appels Amazon Connect intégrés à l'application et sur le Web. Activez les profils de sécurité de votre agent avec les autorisations nécessaires pour passer des appels vidéo et partager l’écran, et suivez le guide ci-dessous pour savoir comment intégrer les appels vidéo dans le bureau de votre agent.

## Comment un appareil client lance un appel intégré ou Web
<a name="diagram-option1"></a>

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-option1.png)


1. (Facultatif) Vous pouvez transmettre les attributs capturés sur le site Web et les valider avec un jeton Web JSON (JWT). 

1. Le client clique sur le widget de communication de votre site Web ou de votre application mobile. 

1. Le widget de communication lance l'appel Web à Amazon Connect en transmettant les attributs contenus dans le JWT. 

1. Le contact atteint le flux, est routé 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.

## En savoir plus
<a name="cw-more-resources"></a>

Pour plus d’informations sur les exigences relatives aux fonctionnalités des appels intégrés, Web et vidéo, consultez les rubriques suivantes :
+ [Configuration requise pour la station de travail de l’agent pour les appels applicatifs, Web et vidéo dans Amazon Connect](videocalling-networking-requirements.md)
+ [Navigateurs et système d’exploitation mobile pris en charge pour les fonctionnalités d’appels intégrés, Web et vidéo](connect-supported-browsers.md#browsers-inapp) 

# Intégration des appels intégrés, Web et vidéo de manière native dans votre application mobile
<a name="config-com-widget2"></a>

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
<a name="diagram-option2"></a>

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
<a name="diagram-option2-gs"></a>

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
<a name="optional-steps"></a>

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
<a name="send-dtmf-tones"></a>

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
<a name="select-audio-devices"></a>

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
<a name="mute-unmute-audio"></a>

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
<a name="start-self-video"></a>

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
<a name="stop-self-video"></a>

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
<a name="enable-agent-video"></a>

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
<a name="disable-agent-video"></a>

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
<a name="use-data-messages"></a>

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
<a name="listen-for-stop-events"></a>

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
<a name="call-reaches-capacity"></a>

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
<a name="participant-removed-from-call"></a>

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
<a name="contact-ends"></a>

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`

# Activation des appels intégrés, Web et vidéo
<a name="enable-multiuser-inapp"></a>

Amazon Connect prend en charge l'ajout d'utilisateurs supplémentaires pour rejoindre l'appel intégré à l'application, le Web et l'appel vidéo dans le cadre d'un appel existant. Vous pouvez ajouter jusqu’à quatre utilisateurs supplémentaires à un appel interne, Web ou vidéo en cours ou planifié, pour un total de six participants : l’agent, le premier utilisateur et quatre autres participants (utilisateurs ou agents).

## Comment ajouter des participants à un appel multi-utilisateur
<a name="how-to-add-participants"></a>

1. Pour activer les appels multi-utilisateurs, vous devez activer la [surveillance améliorée des contacts multipartites](monitor-conversations.md) depuis la Amazon Connect console.

1. Une fois cette opération terminée, vous pouvez utiliser l' Amazon Connect [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API existante pour créer un contact et acheminer ce contact vers un agent.

1. Pour ajouter un participant supplémentaire, créez d'abord un participant `ContactId` passant de la réponse de l'[StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API à l'[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)ne réussira pas tant que l'appelant initial ne sera pas connecté à l'agent. Les fonctionnalités de vidéo et de partage d’écran pour le participant peuvent être définies dans le champ `ParticipantDetails.ParticipantCapabilities`.

1. [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)Une fois terminé avec succès, il renvoie un [jeton de participant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html#connect-CreateParticipant-response-ParticipantCredentials). Ce jeton peut être utilisé dans une requête to [CreateParticipantConnection](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html)avec `Type` set to`WEBRTC_CONNECTION`. La réponse indique ce [ConnectionData](https://docs.aws.amazon.com/connect/latest/APIReference/API_ConnectionData.html#connect-Type-ConnectionData-Meeting)qui peut être utilisé pour rejoindre la réunion à l'aide des [bibliothèques clientes du SDK Amazon Chime](https://docs.aws.amazon.com/chime-sdk/latest/dg/mtgs-sdk-client-lib.html) pour le participant supplémentaire créé. Suivez les [instructions d’intégration](config-com-widget2.md) pour permettre à l’utilisateur final de votre application de rejoindre la réunion.
**Note**  
[CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)renvoie une erreur Bad Request si l'agent n'est pas encore connecté au contact. Pour les applications professionnelles auxquelles les utilisateurs peuvent tenter de se connecter avant que l’agent ne soit connecté, consultez [Gestion des jointures d’utilisateurs simultanées](#handling-concurrent-joins).

1. Les clients supplémentaires peuvent se connecter à tout moment après les [CreateParticipantConnection](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html)retours. Une fois les participants inscrits, [tous les autres comportements vocaux et d’enregistrement sont semblables à ceux de la fonctionnalité multi-partie](multi-party-calls.md). Les nouveaux participants peuvent activer leur vidéo et leur partage d'écran, si leurs fonctionnalités ont été activées dans la [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)demande.
**Note**  
Au total, seuls 6 participants (clients et agents) peuvent rejoindre un appel actif à tout moment. Les bibliothèques clientes du kit SDK Amazon Chime renvoient un code d’état indiquant que l’appel est à pleine capacité lorsqu’une action est entreprise pour ajouter des participants supplémentaires au-delà de la limite fixée lors de la participation à une réunion.

1. Une fois que les participants sont connectés à l’appel, puis qu’ils sont déconnectés de manière régulière ou irrégulière pendant une durée préconfigurée, leurs informations d’identification de participant ne sont plus valides. Si l'`onAudioVideoDidStop`observateur de la bibliothèque cliente reçoit un code d'état indiquant que le participant n'est plus valide, les applications peuvent déclencher un nouvel appel vers [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)et [CreateParticipantConnection](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html)depuis le backend de votre entreprise pour rejoindre l'appel.

1. Pour chaque connexion utilisateur supplémentaire, Amazon Connect crée un nouveau contact et un [enregistrement de contact](ctr-data-model.md). Tous les contacts supplémentaires ont été PreviousContactId définis sur le InitialContactId (c'est-à-dire celui qui a été créé par l'[StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API) afin de le retracer jusqu'au contact d'origine. Chaque enregistrement de contact :
   + Possède un **": InitiationMethod « WEBRTC\$1API** »
   + Possède les attributs de segment suivants :

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

   En outre, le nom d’affichage de chaque enregistrement de contact est fourni dans `CreateParticipant`. Les informations sur l’agent ne sont pas renseignées pour tout contact utilisateur supplémentaire. Cela permet d’éviter la duplication des informations sur les agents.

   Le schéma suivant montre comment les contacts précédents et suivants IDs sont mappés dans un scénario dans lequel plusieurs participants et agents sont ajoutés lors d'un appel Web, intégré à une application ou vidéo.  
![\[Schéma montrant comment IDs les contacts sont mappés pour les appels WebRTC multipartites\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/multiparty-webrtc-contact-mapping.png)

## Gestion des jointures d’utilisateurs simultanées
<a name="handling-concurrent-joins"></a>

Les entreprises peuvent souhaiter créer des applications auxquelles les utilisateurs peuvent s’inscrire dans n’importe quel ordre, à tout moment. Par exemple, votre application peut envoyer par e-mail un lien contenant un numéro de rendez-vous externe à plusieurs utilisateurs, qui doit être utilisé pour rejoindre un appel à une heure planifiée. Pour obtenir ce comportement, les systèmes dorsaux d’entreprise doivent s’assurer que :
+ Le premier utilisateur qui rejoint le groupe déclenche une StartWeb RTCContact demande.
+ Tous les utilisateurs supplémentaires utilisent CreateParticipant et CreateParticipantConnection **uniquement une fois que le premier utilisateur s'est connecté à un agent**.

Cette section décrit une implémentation possible, en supposant que le système dorsal de votre entreprise contienne un magasin (tel que DynamoDB) capable de contenir des métadonnées relatives aux rendez-vous planifiés. Notez que les rendez-vous planifiés ne sont pas une fonctionnalité Amazon Connect, mais une fonctionnalité de l'exemple d'implémentation.

Lorsque l’utilisateur accède à la page, il doit envoyer une demande au système dorsal. Le système dorsal vérifie :
+ Si l’utilisateur peut commencer le rendez-vous et si c’est la bonne heure.
+ Si le Amazon Connect contact a déjà été créé en appelant [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html).

**Si le contact n'a pas encore été créé**, le client doit appeler [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)l'API avec un [flux](connect-contact-flows.md) personnalisé et un [attribut](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html#connect-StartWebRTCContact-request-Attributes) indiquant la file d'attente de l'agent correspondant censé rejoindre l'appel. Le flux doit inclure un bloc [Définir une file d’attente](set-working-queue.md) configuré pour utiliser la file d’attente d’agents fournie dans les attributs. Le flux doit ensuite se terminer par un bloc [Transférer vers la file d’attente](transfer-to-queue.md). Avant que l’API ne soit appelée, le système dorsal doit automatiquement mettre à jour le magasin pour faire passer l’appel de l’état « Aucun » à « Création », et gérer toutes les exceptions de modification simultanées.

Les informations d'identification [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)doivent être renvoyées au client et celui-ci doit immédiatement rejoindre l'appel. Le contact doit être marqué comme « Créé » dans le magasin, avec l’identifiant de contact. **Cette API métier doit être synchronisée entre tous les participants potentiels qui rejoignent**. Cela peut être fait en utilisant les opérations atomiques fournies par une base de données.

**Si le contact est à l’état de création**, cet état doit être renvoyé à l’utilisateur supplémentaire, afficher les informations pertinentes et réessayer après une courte attente.

**Si le contact est créé** : ils doivent récupérer l'identifiant du contact et appeler l'[DescribeContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_DescribeContact.html)API. Le système dorsal de l’entreprise doit rechercher le champ **`Contact.AgentInfo.ConnectedToAgentTimestamp`**. S’il n’existe pas, le premier utilisateur ne s’est pas connecté à l’agent et l’utilisateur supplémentaire doit afficher les informations pertinentes et réessayer après une courte attente.

Si le champ existe, le backend doit appeler [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html), puis obtenir [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), comme décrit dans les sections précédentes.

Le flux de système dorsal doit ressembler à ce qui suit.

![\[Schéma de flux de système dorsal pour gérer les connexions simultanées d’utilisateurs\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/multiparty-backend-flow.png)


Vous pouvez consulter les [exemples d'appels intégrés à l'application Amazon Connect](https://github.com/amazon-connect/amazon-connect-in-app-calling-examples/tree/main/Web) GitHub pour les implémenter.

**L’agent ne se joindra pas en utilisant le même site Web**. L’agent a défini son statut dans le [Panneau de configuration des contacts](launch-ccp.md) (CCP) sur **Disponible**. Lorsque le premier client rejoint l’appel, l’agent est appelé automatiquement.

## Facturation
<a name="multiuser-billing"></a>

La facturation pour les participants supplémentaires est équivalente à la facturation existante pour le client initial et pour tous les agents participant à l’appel. L’audio, la vidéo et le partage d’écran entraînent tous des frais spécifiques aux participants.

## Conservation
<a name="multiuser-hold-behavior"></a>

Lors d’un appel vidéo ou d’une session de partage d’écran, les agents peuvent voir la vidéo ou le partage d’écran du participant même lorsque celui-ci est en attente. Il revient au participant de traiter les données d’identification personnelle (PII) en conséquence. Si vous utilisez l’application CCP native, la vidéo de l’agent est désactivée si un participant non agent est en attente. Si vous souhaitez modifier ce comportement, vous pouvez créer un CCP personnalisé et un widget de communication. 

Pour de plus amples informations, veuillez consulter [Intégration des appels intégrés, Web et vidéo de manière native dans votre application mobile](config-com-widget2.md). 

## Limitation
<a name="multiuser-limitations"></a>

La limite suivante s’applique lors de la création de participants supplémentaires à l’appel intégré à l’application, Web, vidéo et au partage d’écran :
+ Les fonctionnalités vidéo des participants supplémentaires ne peuvent pas être définies sur **Envoyer** si le contact d’origine a été créé avec les fonctionnalités vidéo du client définies sur **Aucun**.

# Personnalisation de l’expérience client pour les appels intégrés à l’application, Web et vidéo dans Amazon Connect
<a name="optional-widget-steps"></a>

Les étapes décrites dans cette rubrique sont facultatives mais recommandées. Elles vous permettent de personnaliser l’expérience du client en fonction des actions qu’il a déjà effectuées dans votre application. Cette option vous offre plus de contrôle lors du lancement de nouveaux appels, notamment la possibilité de transmettre des informations contextuelles sous forme d’attributs.

 Après avoir effectué ces étapes, vous devrez travailler avec l'administrateur de votre site Web pour configurer vos serveurs Web afin qu'ils émettent des jetons Web JSON (JWTs) pour les nouveaux appels

1. Si vous avez déjà créé votre widget de communication, sur la page **Widgets de communication**, choisissez-le pour le modifier. 

1. Dans la section **Domaine et sécurité**, choisissez **Modifier**. 

1. Sous **Renforcer la sécurité pour les demandes de votre widget de communication**, choisissez **Oui**.  
![\[Option Oui.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/chatwidget-choose-security.png)

1. Choisissez **Save and continue (Enregistrer et continuer)**. Amazon Connect crée le widget, ainsi que les éléments suivants :
   + Amazon Connect fournit une clé de sécurité à 44 caractères sur la page suivante que vous pouvez utiliser pour créer JWTs.
   + Amazon Connect ajoute une fonction de rappel dans le script d’incorporation du widget de communication, qui vérifie la présence d’un jeton JWT lorsqu’un appel est initié.

     Vous devez implémenter la fonction de rappel dans l’extrait incorporé, comme illustré dans l’exemple suivant.

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

   À l’étape suivante, vous obtiendrez une clé de sécurité pour tous les appels initiés sur vos sites Web. Demandez à l'administrateur de votre site Web de configurer vos serveurs Web pour qu'ils JWTs utilisent cette clé de sécurité. 

1. Choisissez **Save and continue (Enregistrer et continuer)**.

1. Copiez l’extrait de code HTML personnalisé et insérez-le dans le code source de votre site Web.

## Méthode alternative : Transmettre les attributs de contact directement depuis un extrait de code
<a name="pass-attrib-from-code"></a>

**Note**  
Bien que ces attributs soient délimités par le préfixe `HostedWidget-`, ils restent des attributs client-site mutables. Utilisez la configuration JWT si vous avez besoin de données d’identification personnelle ou de données immuables dans votre flux de contacts. 

L’exemple suivant illustre comment transmettre des attributs de contact directement depuis un extrait de code sans activer la sécurité des widgets. 

```
<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/>
```

### Utilisation des attributs dans les flux de contacts
<a name="contact-flow-usage-voice"></a>

Le bloc de flux [Vérifier les attributs de contact](check-contact-attributes.md) permet d’accéder à ces attributs via l’espace de noms **Défini par l’utilisateur**, comme indiqué dans l’image suivante. Vous pouvez utiliser le bloc de flux pour ajouter une logique de branchement. Le chemin complet est `$Attribute.HostedWidget-attributeName`. 

![\[Image montrant un bloc de flux se branchant vers des invites valides et non valides.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/flow-check-contact-attrib.png)


## Copie du code du widget de communication et des clés de sécurité
<a name="copy-widget-script4"></a>

Au cours de cette étape, vous confirmez vos sélections, copiez le code du widget de communication et l’incorporez dans votre site Web. Vous pouvez également copier les clés secrètes pour créer le JWTs. 

### Clé de sécurité
<a name="widget-security-key4"></a>

Utilisez cette clé de sécurité de 44 caractères pour générer des jetons Web JSON à partir de votre serveur Web. Vous pouvez également mettre à jour ou faire pivoter les clés si vous devez les modifier. Dans ce cas, Amazon Connect vous fournit une nouvelle clé et conserve la clé précédente jusqu’à ce que vous ayez l’occasion de la remplacer. Une fois la nouvelle clé déployée, vous pouvez revenir dans Amazon Connect et supprimer la clé précédente.

![\[Clé de sécurité.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/chatwidget-security-key.png)


Lorsque vos clients interagissent avec l’icône de démarrage d’appel sur votre site Web, le widget de communication demande un jeton JWT à votre serveur Web. Quand ce jeton JWT est fourni, le widget l’inclut dans l’appel du client final à Amazon Connect. Amazon Connect utilise ensuite la clé secrète pour déchiffrer le jeton. En cas de succès, cela confirme que le jeton JWT a été émis par votre serveur Web et Amazon Connect route l’appel vers les agents de votre centre de contact.

#### Spécificités du jeton Web JSON
<a name="jwts4"></a>
+ Algorithme : **HS256**
+ Demandes : 
  + **sous** : *widgetId*

    Remplacez `widgetId` par votre propre identifiant de widget. Pour trouver votre identifiant de widget, consultez l’exemple [Script de widget de communication](add-chat-to-website.md#chat-widget-script).
  + **iat** : \$1pour Issued At Time (Émis à).
  + **exp** : \$1Expiration (10 minutes au maximum).

  \$1 Pour plus d’informations sur le format de date, consultez le document Internet Engineering Task Force (IETF) : [JSON Web Token (JWT)](https://tools.ietf.org/html/rfc7519), page 5. 

L’extrait de code suivant illustre comment générer 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 de widget de communication
<a name="chat-widget-script4"></a>

L'image suivante montre un exemple de JavaScript ce que vous intégrez aux sites Web sur lesquels vous souhaitez que les clients puissent appeler votre centre d'appels. Ce script affiche le widget dans le coin inférieur droit de votre site Web. 

L’image suivante montre un exemple de l’endroit où se trouve votre widgetId.

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


Lorsque votre site Web se charge, les clients voient d’abord l’icône **Démarrer**. Lorsqu’ils choisissent cette icône, le widget de communication s’ouvre et les clients peuvent appeler vos agents.

Pour apporter des modifications au widget de communication à tout moment, choisissez **Modifier**.

**Note**  
Les modifications enregistrées mettent à jour l’expérience client en quelques minutes. Confirmez la configuration de votre widget avant de l’enregistrer. 

![\[Lien de modification dans l’aperçu du widget\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/chatwidget-call-edit.png)


Pour modifier les icônes de widget sur le site Web, vous recevez un nouvel extrait de code afin de mettre à jour directement votre site Web.

# Personnalisations supplémentaires pour votre widget d’appel Web Amazon Connect
<a name="more-customizations-web-calling-widget"></a>

Vous pouvez ajouter les personnalisations supplémentaires suivantes à votre widget d’appels Web :
+ Appliquez un [flou d’arrière-plan](#background-blur) à la vignette vidéo de votre client.
+ Réglez le widget en mode [Plein écran.](#fullscreen-mode)
+ Sélectionnez l’[appareil photo par défaut](#choose-default-camera).
+ [Redimensionnez la vidéo](#resize-video) pour l’adapter à son conteneur.

Les sections suivantes expliquent les détails des personnalisations, leurs cas d’utilisation et la façon de les configurer. Vous gérez ces personnalisations en configurant `WebCallingCustomizationObject`.

**Topics**
+ [Flou d’arrière-plan](#background-blur)
+ [Mode Plein écran](#fullscreen-mode)
+ [Choisissez l’appareil photo par défaut](#choose-default-camera)
+ [Redimensionnement d’une vidéo](#resize-video)
+ [Configuration de l’objet de personnalisation](#configure-customization-object-web)
+ [Options et contraintes prises en charge](#supported-options-web-calling)

## Flou d’arrière-plan
<a name="background-blur"></a>

Cette personnalisation contrôle le comportement de flou d’arrière-plan de la vidéo du client. Lorsque cette option est activée, l’arrière-plan du client est flou lorsque la vidéo est active. Cela permet de protéger leurs informations personnelles ou les espaces privés qui peuvent être visibles en arrière-plan pendant l’appel vidéo.

Pour activer le flou d’arrière-plan, réglez `videoFilter.backgroundBlur.option` sur `ENABLED_ON_BY_DEFAULT` dans `WebCallingCustomizationObject`.

## Mode Plein écran
<a name="fullscreen-mode"></a>

Utilisez cette personnalisation pour contrôler le comportement en plein écran du widget. Il existe deux façons d’activer le mode plein écran : 
+ Ajoutez un bouton plein écran au widget. Le client peut utiliser le bouton pour activer ou désactiver le mode plein écran.

  Pour ajouter un bouton plein écran, réglez `fullscreen.displayButton` sur `ENABLED`. 

OU
+ Réglez le widget en plein écran lors du chargement.

  Pour activer le mode plein écran lors du chargement, réglez `fullscreen.fullscreenOnLoad` sur `ENABLED`.

Il est particulièrement utile d’utiliser le mode plein écran lorsque le client doit se concentrer sur le widget, par exemple lors du partage d’écran.

Vous pouvez utiliser ces deux options individuellement ou conjointement.

## Choisissez l’appareil photo par défaut
<a name="choose-default-camera"></a>

Cette personnalisation permet au widget de sélectionner l’appareil photo par défaut lorsque votre client active la vidéo, en proposant des options pour la caméra avant ou arrière. Cette capacité est utile pour diagnostiquer des appareils à distance, par exemple. Le client peut utiliser la caméra arrière pour montrer l’appareil à l’agent.

Pour sélectionner la caméra arrière par défaut, réglez `devices.defaultCamera` sur `Back`.

## Redimensionnement d’une vidéo
<a name="resize-video"></a>

Cette personnalisation contrôle la manière dont les vignettes vidéo du client et de l’agent sont redimensionnées dans le widget. Par exemple, l’image vidéo peut être redimensionnée pour remplir toute la vignette vidéo, ou mise à l’échelle pour s’adapter à la vignette vidéo, en laissant des espaces vides si le rapport hauteur/largeur de l’image vidéo ne correspond pas à celui de la vignette vidéo.
+ Pour redimensionner la vidéo pour le client, définissez `videoTile.localVideoObjectFit` sur la valeur cible.
+ Pour redimensionner la vidéo pour l’agent, définissez `videoTile.remoteVideoObjectFit` sur la valeur cible.

Pour de plus amples informations, veuillez consulter [Options et contraintes prises en charge](#supported-options-web-calling).

## Configuration de l’objet de personnalisation
<a name="configure-customization-object-web"></a>

L’exemple suivant montre comment implémenter toutes les personnalisations facultatives. Pour obtenir une description détaillée de ces options, consultez [Options et contraintes prises en charge](#supported-options-web-calling). 

Vous pouvez implémenter une partie ou la totalité des champs présentés dans l’exemple suivant. Lorsque vous n’implémentez pas de personnalisations, les comportements par défaut sont utilisés pour les champs manquants.

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

L’image suivante montre à quoi ressemblent les personnalisations lorsqu’elles ne sont pas en mode Plein écran. 

![\[Personnalisations lorsque le modèle n’est pas en mode Plein écran.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/fullscreenmode.png)


L’image suivante montre à quoi ressemblent les personnalisations en mode Plein écran.

![\[Personnalisations en mode Plein écran.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/nonfullscreenmode.png)


## Options et contraintes prises en charge
<a name="supported-options-web-calling"></a>

Le tableau suivant répertorie les champs de personnalisation pris en charge et les contraintes de valeurs recommandées.


| Option de mise en page personnalisée | Type | Valeurs | Description | 
| --- | --- | --- | --- | 
|  `videoFilter.backgroundBlur.option`  |  chaîne  |  `ENABLED_ON_BY_DEFAULT` \$1 `ENABLED_OFF_BY_DEFAULT`  |  Définit le flou d’arrière-plan des vignettes vidéo de votre client. Par défaut, lorsque votre client active la vidéo, le filtre de flou d’arrière-plan est appliqué à la vignette vidéo. Si vous ne souhaitez pas activer le filtre par défaut, vous pouvez le définir sur `ENABLED_OFF_BY_DEFAULT`, votre client peut toujours activer le filtre manuellement dans la page des préférences du widget. | 
|  `fullscreen.displayButton`  |  chaîne  |  `ENABLED`  |  Ajoute un bouton dans le coin supérieur droit du widget pour le rendre en mode Plein écran dans le navigateur. Par défaut, ce bouton ne sera pas ajouté au widget. Si vous souhaitez ajouter ce bouton, vous pouvez le définir sur `ENABLED`. | 
|  `fullscreen.fullscreenOnLoad`  |  chaîne  |  `ENABLED`  |  Affiche le widget en mode Plein écran dans le navigateur. Par défaut, le widget sera ancré dans le coin inférieur droit de la page Web. Le définir sur `ENABLED` affiche le widget en plein écran dans le navigateur. | 
|  `devices.defaultCamera`  |  chaîne  |  `Front` \$1 `Back`  | Définit l’appareil photo par défaut lorsque votre client active la vidéo. Ceci est destiné aux cas d’utilisation sur mobile ou tablette. Par défaut, la caméra par défaut est sélectionnée ([détail](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices)). (Pour plus d'informations, consultez la [méthode MediaDevices : enumerateDevices ()](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices) dans la documentation destinée aux développeurs de Mozilla.) Lorsque vous le définissez sur `Front\|Back`, cela sélectionne la caméra correspondante si elle est disponible. | 
|  `copyDisplayNameFromAuthenticatedChat`  |  boolean  |  `true` \$1 `false`  | Dans le cas où le client final est authentifié à l’aide du bloc de flux [Authentifier le client](authenticate-customer.md), définir la valeur sur `true` copie le nom d’affichage sur le contact vocal. La valeur par défaut est `false`. | 
|  `videoTile.localVideoObjectFit`  |  chaîne  |  `fill` \$1 `contain` \$1 `cover` \$1 `none` \$1 `scale-down`  |  Définit la propriété d’[ajustement à l’objet](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) de la vignette vidéo de votre client dans le widget. Par défaut, la valeur est déterminée par la largeur et la hauteur de la résolution vidéo : si la hauteur est supérieure à la largeur, la valeur sera `contain`, sinon ce sera `cover`. Pour une description détaillée de chaque valeur, consultez [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) dans la documentation destinée aux développeurs de Mozilla.  Cet attribut est appliqué uniquement à la hauteur et à la largeur d’affichage de la vidéo du client dans le widget. La hauteur et la largeur de la vidéo du client envoyée à l’agent ne sont pas modifiées.  | 
|  `videoTile.remoteVideoObjectFit`  |  chaîne  |  `fill` \$1 `contain` \$1 `cover` \$1 `none` \$1 `scale-down`  | Définit la propriété d’[ajustement à l’objet](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) de la vignette vidéo de votre client dans le widget. Par défaut, la valeur est déterminée par la largeur et la hauteur de la résolution vidéo : si la hauteur est supérieure à la largeur, la valeur sera `contain`, sinon ce sera `cover`. Pour une description détaillée de chaque valeur, consultez [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) dans la documentation destinée aux développeurs de Mozilla.  Cet attribut est appliqué uniquement à la hauteur et à la largeur d’affichage de la vidéo de l’agent dans le widget.   | 

# Intégrez les appels vidéo et le partage d’écran dans votre bureau d’agent personnalisé à l’aide d’Amazon Connect Streams JS
<a name="integrate-video-calling-for-agents"></a>

Cette rubrique s’adresse aux développeurs. Pour les bureaux d’agent personnalisés, vous devez apporter des modifications pour prendre en charge les appels vidéo et le partage d’écran. En voici les principales étapes.

**Note**  
Si vous incorporez le CCP directement dans votre application d’agent personnalisée, assurez-vous qu’`allowFramedVideoCall` est défini sur true lorsque vous lancez le CCP à l’aide d’[Amazon Connect Streams JS](https://github.com/aws/amazon-connect-streams).

1. Utilisez [Amazon Connect Streams JS](https://github.com/aws/amazon-connect-streams) pour vérifier si le contact entrant est un contact WebRTC. Utilisez le sous-type de contact `"connect:WebRTC"`, comme illustré dans l’exemple de code suivant :

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

1. Vous pouvez extraire le nom d’affichage du client en utilisant le champ de nom dans` contact contact.getName()`.

## Ajout de la prise en charge vidéo
<a name="support-video"></a>

Procédez comme suit pour ajouter la prise en charge de la gestion vidéo lorsque vos clients l’ont activée.

1. Pour vérifier si un contact dispose de la fonctionnalité vidéo :

   ```
   // 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. Pour vérifier si l’agent dispose de l’autorisation vidéo nécessaire pour traiter un appel vidéo :

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

1. Pour accepter un appel vidéo, le contact doit disposer de la fonctionnalité vidéo et l’agent doit disposer de l’autorisation vidéo.

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

1. Pour rejoindre une session vidéo, appelez `getVideoConnectionInfo` :

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

1. Pour créer une interface utilisateur vidéo et rejoindre une session de visioconférence, consultez :
   + [Amazon Chime SDK pour JavaScript](https://github.com/aws/amazon-chime-sdk-js) on GitHub 
   + [Amazon Chime Bibliothèque de composants SDK React](https://github.com/aws/amazon-chime-sdk-component-library-react) sur GitHub

1. Pour des raisons de simplicité, les extraits de code suivants utilisent des exemples de la bibliothèque de composants React du 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. Pour afficher la grille vidéo, utilisez la bibliothèque de composants React [VideoTileGrid](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-videotilegrid--page)du Amazon Chime SDK ou personnalisez le comportement de l'interface utilisateur à l'aide [RemoteVideoTileProvider](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-providers-remotevideotileprovider--page)de. 

1. Pour afficher un aperçu vidéo, vous pouvez utiliser [VideoPreview](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-previewvideo--page)des [CameraSelection](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-deviceselection-camera-cameraselection--page)composants. Pour choisir ou changer une caméra vidéo, vous pouvez utiliser `meetingManager.selectVideoInputDevice` ou `meetingManager.startVideoInput `si la visioconférence est en cours.

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

1. Pour implémenter le flou d'arrière-plan, voir [useBackgroundBlur](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-hooks-usebackgroundblur--page). 

1. Pour un exemple de code expliquant comment créer une expérience vidéo personnalisée, consultez cet exemple du kit SDK Amazon Chime  : [Démo de visioconférence React d’Amazon Chime](https://github.com/aws-samples/amazon-chime-sdk/tree/main/apps/meeting). 

## Ajouter la prise en charge du partage d’écran
<a name="support-screen-sharing"></a>

**Note**  
Si vous utilisez le out-of-box CCP directement dans votre application d'agent personnalisé, assurez-vous qu'`allowFramedScreenSharing`il est défini sur true lorsque vous lancez le CCP à l'aide d'[Amazon Connect Streams JS](https://github.com/aws/amazon-connect-streams). `allowFramedScreenSharingPopUp`   
Définir `allowFramedScreenSharing` sur true active le bouton de partage d’écran sur un seul CCP dans une fenêtre ou un onglet. Définir `allowFramedScreenSharingPopUp` sur true lance l’application de partage d’écran dans une fenêtre séparée lorsque l’agent choisit le bouton de partage d’écran. Pour obtenir des instructions, consultez la documentation [Amazon Connect Streams JS](https://github.com/aws/amazon-connect-streams).

Procédez comme suit pour activer le partage d’écran sur les bureaux de vos agents personnalisés. 

1. Vérifiez si un contact dispose de la fonctionnalité de partage d’écran. 

   ```
   // 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. Vérifiez si l’agent dispose de l’autorisation vidéo.

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

1. Vérifiez si l’agent peut lancer une session de partage d’écran pour le contact éligible.

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

1. Appelez `startScreenSharing` pour lancer la session de partage d’écran. Cela ajoute `ScreenSharingActivated` au contact, ce qui vous permet de le rechercher dans l’[enregistrement du contact](ctr-data-model.md). 

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

1. Appelez `getVideoConnectionInfo` pour rejoindre la session. Vous pouvez ignorer l’étape si l’agent a rejoint la session vidéo pour gérer la vidéo.

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

1. Rejoignez la session en utilisant la bibliothèque de composants React du kit SDK Amazon Chime. Pour un extrait de code, reportez-vous à l’étape 6 de [Ajout de la prise en charge vidéo](#support-video).

1. Utilisez la même solution que celle [VideoTileGrid](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-videotilegrid--page)du SDK Amazon Chime React Components pour afficher une vignette vidéo de partage d'écran. Pour plus d'informations, voir [useContentShareÉtat](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-hooks-usecontentsharestate--page) et [useContentSharecontrôles](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-hooks-usecontentsharecontrols--page) 

1. Appelez `stopScreenSharing` à la fin de la session.

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

1. Vous pouvez recevoir des événements liés à l’activité de partage d’écran en vous abonnant aux rappels suivants :

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

# Activer la restriction d’URL pour le partage d’écran
<a name="screen-sharing-url-restriction"></a>

Vous pouvez gérer URLs ce que vos clients et agents sont autorisés à partager lors du contact. Cela vous permet d’améliorer la sécurité et la confidentialité. Lorsqu’un client ou un agent partage une URL non autorisée, il reçoit un message d’erreur et la vidéo de partage d’écran est automatiquement suspendue et masquée. 

**Important**  
Les navigateurs suivants sont pris en charge :   
Chrome version 109 ou ultérieure
Edge version 109 ou ultérieure
Les agents et les clients ne peuvent partager que l’onglet du navigateur. Ils ne peuvent pas partager la fenêtre ou l’intégralité de l’écran. Si vous activez cette fonctionnalité et que vos clients ou agents utilisent un navigateur, une fenêtre ou la totalité de l’écran non pris en charge, ils reçoivent un message d’erreur.

Procédez comme suit pour activer la restriction d’URL pour le partage d’écran.

## Étape 1 : créer une URLs liste autorisée
<a name="step1-url-restriction"></a>

Vous configurez les listes d'autorisations à URLs l'aide d'attributs prédéfinis. Procédez comme suit :

1. Sur le site Web de l' Amazon Connect administrateur, choisissez **** Routage****, **Attributs prédéfinis**, **Ajouter un attribut prédéfini**.

1. Dans la section **Ajouter des attributs prédéfinis**, dans la zone **Attribut prédéfini**, ajoutez l’un des éléments suivants.
   + Pour créer une liste autorisée pour le partage d’écran avec les clients, entrez `screensharing:customer-allowed-urls`.
   + Pour créer une liste autorisée pour le partage d’écran avec les agents, entrez `screensharing:agent-allowed-urls`.

1. Dans le champ **Valeur**, entrez l’URL autorisée. Il peut s’agir d’une URL entièrement formatée ou d’un modèle de chaîne pour la correspondance de sous-chaînes, tel que ` https://mycompany` ou ` /mytransactions`. Le tableau suivant illustre des exemples de formats valides.    
[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/screen-sharing-url-restriction.html)

1. Enregistrez la liste. Ils URLs apparaissent sur la page **Attributs prédéfinis**, comme illustré dans l'exemple suivant.   
![\[La page Attributs prédéfinis.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/screen-sharing-restricted-urls.png)

## Étape 2 : ajout d’un script à la liste de vos sites Web
<a name="step2-url-restriction"></a>

Vous devez intégrer un script à votre site Web afin que l’URL de la page puisse être exposée à l’application de capture. Vous obtenez le gestionnaire de capture à partir d'un fichier sur le point de CloudFront terminaison Amazon hébergé par Amazon Connect. Suivez les instructions suivantes.

1. Sur le site Web de l' Amazon Connect administration, choisissez **Canaux**, puis **Widgets de communication**. Sur la page de résumé de votre widget de communication, recherchez le script du widget. Obtenez le point de terminaison de l’attribut `s.src`, comme illustré dans l’exemple suivant.   
![\[Script du widget.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/screen-sharing-restricted-urls-step2.png)

   Le point de terminaison peut se trouver dans une AWS région différente de celle de votre instance Amazon Connect. Pour obtenir de meilleures performances, nous vous recommandons d’utiliser la même région que votre instance Amazon Connect. 

1. Remplacez l’espace réservé suivant `${endpoint}` par la valeur de l’étape précédente. Copiez l’extrait de code complet et collez-le au niveau supérieur de votre site Web.

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