Cas d’usage de la bibliothèque d’interface utilisateur
Utilisez des composants et des composites dans la bibliothèque d’interface utilisateur Azure Communication Services pour créer des expériences d’appel et de conversation dans vos applications.
Dans un composite, les fonctionnalités d’appel et de conversation sont intégrées directement et exposées lorsque vous intégrez le composite à une application. Dans un composant IU, les fonctionnalités d’appel et de conversation sont exposées par le biais d’une combinaison de fonctionnalités d’interface utilisateur et de bibliothèques avec état sous-jacentes. Pour tirer pleinement parti de ces fonctionnalités, nous vous recommandons d’utiliser les composants IU avec les bibliothèques de client d’appel et de conversation avec état.
Obtenez de la documentation conceptuelle, des démarrages rapides et des exemples dans le Storybook de la bibliothèque d’interface utilisateur.
Cas d’usage d’un appel
| Zone | Cas d’utilisation |
|---|---|
| Types d’appel | Rejoindre une réunion Microsoft Teams |
| Joindre un appel Azure Communication Services à l’aide d’un ID de groupe | |
| Rejoindre une salle Azure Communication Services | |
| Démarrer un appel sortant vers un autre utilisateur Azure Communication Services | |
| Démarrer un appel sortant vers un numéro de téléphone | |
| Interopérabilité de Teams | Rejoindre la salle d’attente de l’appel |
| Bannière d’alerte de transcription et d’enregistrement | |
| Contrôles d’appel | Activer et désactiver le son d’un appel |
| Activer et désactiver la vidéo pendant un appel | |
| Activer le partage d’écran | |
| Terminer un appel | |
| Galerie des participants | Afficher les participants distants sur une grille |
| Rendre l’aperçu vidéo disponible tout au long d’un appel pour un utilisateur local | |
| Rendre les avatars par défaut disponibles quand la vidéo est désactivée | |
| Afficher le contenu de l’écran partagé dans la galerie des participants | |
| Configuration de l’appel | Gérer le micro |
| Gérer la caméra | |
| Gérer l’appareil de l’orateur | |
| Rendre l’aperçu local disponible pour que l’utilisateur puisse vérifier la vidéo | |
| Participants | Afficher la liste des participants |
Cas d’usage de la conversation
| Zone | Azure Communication Services Chat | Discussion d’Interopérabilité de Teams |
|---|---|---|
| Types de conversations | Participer à un thread de conversation Azure Communication Services | Participer à une conversation Microsoft Teams |
| Actions de conversation | Envoyer et recevoir des SMS | Envoyer et recevoir des SMS |
| Recevoir des messages texte enrichis | Recevoir des messages texte enrichis | |
| - | Recevoir des images incorporées* | |
| Envoyer et recevoir des fichiers en pièce jointe | Recevoir des fichiers en pièce jointe* | |
| Événements de conversation | Envoyer et recevoir des indicateurs de saisie | Envoyer et recevoir des indicateurs de saisie** |
| Envoyer et recevoir des accusés de lecture | Envoyer et recevoir des accusés de lecture | |
| Indiquer lorsqu’un participant est ajouté ou supprimé | Indiquer lorsqu’un participant est ajouté ou supprimé | |
| Participants | Afficher la liste des participants | Afficher la liste des participants |
*La prise en charge des pièces jointes et des images incorporées est actuellement en préversion publique. Ces interfaces de programmation d’applications et kits de développement logiciel (SDK) en préversion sont fournis sans contrat au niveau du service. Nous vous recommandons de ne pas les utiliser pour les charges de travail de production. Certaines fonctionnalités peuvent être limitées ou non prises en charge. Pour plus d’informations, consultez Conditions d’utilisation supplémentaires relatives aux préversions de Microsoft Azure.
**Le nom complet de l’événement de saisie de l’utilisateur Teams peut ne pas s’afficher correctement.
Identités prises en charge
Pour initialiser un composite et s’authentifier auprès du service, un utilisateur doit avoir une identité Azure Communication Services. Pour plus d’informations, consultez S’authentifier auprès d’Azure Communication Services et Démarrage rapide : Créer et gérer des jetons d’accès.
Interopérabilité de Teams
Pour les scénarios d’interopérabilité Teams, vous pouvez utiliser des composites de bibliothèque d’interface utilisateur pour ajouter un utilisateur à une réunion Teams via Communication Services. Pour activer l’interopérabilité Teams, utilisez les fonctionnalités par défaut de l’appel composite ou le composite de conversation, ou utilisez des composants d’interface utilisateur pour créer une expérience personnalisée.
Quand vous ajoutez les appels et les conversations, n’oubliez pas que le client de conversation ne peut pas être initialisé tant que le participant n’est pas admis dans l’appel. Une fois le participant admis, le client de conversation peut être initialisé pour rejoindre le fil de conversation de la réunion. Le modèle est illustré dans la figure suivante :
Si vous utilisez des composants d’interface utilisateur pour fournir des expériences d’interopérabilité Teams, commencez par utiliser des exemples de bibliothèque d’interface utilisateur afin de créer les éléments clés de l’expérience :
- Exemple de lobby. Exemple de lobby où un participant peut attendre d’être admis à un appel.
- Bannière de conformité. Exemple de bannière qui indique à l’utilisateur si l’appel est enregistré.
- Thème Teams. Exemple de thème qui fait ressembler les éléments de bibliothèque d’interface utilisateur à Microsoft Teams.
- Partage d’images*. Un exemple d’utilisateur final Azure Communication Service peut recevoir des images envoyées par l’utilisateur Teams.
- Partage de fichiers*. Un exemple d’utilisateur final Azure Communication Service peut recevoir des fichiers en pièce jointe envoyés par l’utilisateur Teams.
Personnalisation
Utilisez les modèles de la bibliothèque d'interface utilisateur pour modifier les composants afin qu'ils ressemblent à votre application. La personnalisation est une différence essentielle entre les composites et les composants d’interface utilisateur dans Communication Services. Les composites offrent moins d’options de personnalisation pour une expérience d’intégration plus simple.
Le tableau suivant compare les composites et les composants d’interface utilisateur pour les cas d’utilisation de personnalisation :
| Cas d’usage | Composites | Composants de l’interface utilisateur |
|---|---|---|
| Utiliser des thèmes basés sur Fluent | X | X |
| Composer la disposition de l’expérience | X | |
| Utiliser le style CSS pour modifier les propriétés de style | X | |
| Remplacer les icônes | X | |
| Modifier la disposition de la galerie des participants | X | |
| Modifier la disposition du contrôle d’appel | X | X |
| Injecter des modèles de données pour modifier les métadonnées utilisateur | X | X |
Observabilité
L’architecture de gestion de l’état de la bibliothèque d’interface utilisateur est découplée, ce qui vous permet d’accéder directement aux clients d’appel et de conversation avec état. Vous pouvez vous connecter au client avec état pour lire l’état, gérer les événements et remplacer le comportement à transmettre aux composants IU.
Le tableau suivant compare les composites et les composants d’interface utilisateur pour les cas d’utilisation d’observabilité :
| Cas d’usage | Composites | Composants de l’interface utilisateur |
|---|---|---|
| Accès à l’état du client d’appel et de conversation | X | X |
| Accès et gestion des événements clients | X | X |
| Accès et gestion des événements d’interface utilisateur | X | X |
Architecture recommandée
Initialisez des composants composites et de base à l’aide d’un jeton d’accès Azure Communication Services. Il est important d’obtenir des jetons d’accès auprès de Communication Services via un service approuvé que vous gérez. Pour plus d’informations, consultez Démarrage rapide : Créer et gérer des jetons d’accès et le tutoriel sur le service approuvé.
Les bibliothèques clientes d’appel et de conversation doivent avoir le contexte de l’appel ou de la conversation qu’ils rejoignent. Comme les jetons d’accès utilisateur, communiquez le contexte aux clients à l’aide de votre propre service approuvé.
Le tableau suivant récapitule les fonctions d’initialisation et de gestion des ressources requises pour ajouter un contexte à une bibliothèque cliente :
| Responsabilités de Contoso | Responsabilités de la bibliothèque d’interface utilisateur |
|---|---|
| Fournir un jeton d’accès d’Azure | Transférer directement le jeton d’accès fourni pour initialiser les composants |
| Fournir une fonction d’actualisation | Actualiser le jeton d’accès à l’aide d’une fonction fournie par les développeurs |
| Récupérer et transmettre les informations permettant de se joindre à l’appel ou à la conversation | Transmettre les informations d’appel et de conversation pour initialiser les composants |
| Récupérer et transmettre des informations utilisateur pour un modèle de données personnalisé | Transmettre directement un modèle de données personnalisé aux composants à afficher |
Plateforme prise en charge
| Kit SDK | Windows | macOS | Ubuntu | Linux | Android | iOS |
|---|---|---|---|---|---|---|
| SDK IU | Chrome*, Microsoft Edge | Chrome*, Safari** | Chrome* | Chrome* | Chrome* | Safari** |
* La version actuelle de Chrome et les deux versions précédentes sont prises en charge.
** Safari version 13.1 et versions ultérieures sont prises en charge. La vidéo sortante pour Safari macOS n’est pas encore prise en charge, mais elle est prise en charge sur iOS. Le partage d’écran sortant est pris en charge uniquement sur iOS pour ordinateur de bureau.
Accessibilité
L’accessibilité dès la conception est un principe pour l’ensemble des produits Microsoft. La bibliothèque d’interface utilisateur respecte ce principe et tous les composants IU sont entièrement accessibles.
Localisation
La localisation est essentielle pour offrir des produits destinés à des utilisateurs du monde entier et qui parlent différentes langues. La bibliothèque d’interface utilisateur fournit la prise en charge par défaut de certaines langues et fonctionnalités, notamment les langues de droite à gauche. Vous pouvez fournir vos propres fichiers de localisation à utiliser avec la bibliothèque d’interface utilisateur.
Problèmes connus
- À ce jour, la bibliothèque d’interface utilisateur ne prend pas en charge la mise à jour du type de message lors de la modification des messages existants. L’ajout d’une mise en forme de texte enrichi à un message existant ajoute un style html au contenu du texte. Étant donné que cela ne modifie pas le type de message, il peut entraîner l’affichage du contenu html sous forme de texte brut dans le thread de message.
Utilisez le CallComposite et le ChatComposite dans la bibliothèque d’interface utilisateur Azure Communication Services pour créer des expériences d’appel dans vos applications iOS et Android. À l’aide de quelques lignes de code, vous pouvez facilement intégrer une expérience d’appel et de conversation entière à votre application. Dans Communication Services, les composites gèrent tout le cycle de vie de l’appel et de la conversation, de la configuration à la fin de l’appel et de la conversation.
Cas d’usage d’appel
Vous pouvez utiliser le composite d’appel dans Communication Services pour créer les cas d’usage suivants :
| Zone | Cas d’utilisation |
|---|---|
| Types d’appel | Rejoindre une réunion Microsoft Teams |
| Participer à un appel à l’aide d’un ID de groupe | |
| Interopérabilité de Teams | Rejoindre la salle d’attente de l’appel |
| Bannière d’alerte de transcription et d’enregistrement | |
| Galerie des participants | Afficher les participants distants sur une grille |
| Rendre l’aperçu vidéo disponible tout au long d’un appel pour un utilisateur local | |
| Rendre les avatars par défaut disponibles quand la vidéo est désactivée | |
| Afficher le contenu de l’écran partagé dans la galerie des participants | |
| Activer la personnalisation de l’avatar des participants | |
| Afficher la liste des participants | |
| Configuration de l’appel | Gérer le micro |
| Gérer la caméra | |
| Gérer le haut-parleur (câblé ou en Bluetooth) | |
| Rendre l’aperçu local disponible pour qu’un utilisateur regarde la vidéo | |
| Contrôles d’appel | Activer et désactiver le son d’un appel |
| Activer ou désactiver la vidéo pendant un appel | |
| Terminer un appel | |
| Suspendre et reprendre un appel après une interruption audio |
Interopérabilité de Teams
Pour les scénarios d’interopérabilité Teams, vous pouvez utiliser des composites de bibliothèque d’interface utilisateur pour ajouter un utilisateur à une réunion Teams via Communication Services. Pour activer l’interopérabilité Teams, utilisez le composite d’appel. Le composite gère l’intégralité du cycle de vie de la participation à un appel d’interopérabilité Teams.
La figure suivante montre un exemple de l’expérience utilisateur avant l’ajout d’un appelant à une réunion Teams :
Voir le contenu partagé
Grâce à la bibliothèque d’interface utilisateur pour les plateformes natives mobiles, les participants à un appel peuvent afficher du contenu partagé lorsque d’autres participants partagent leur écran lors d’un appel Teams. Un participant distant peut utiliser des mouvements d’étirement et de pincement pour effectuer un zoom avant ou arrière sur le contenu partagé dans l’appel.
Thèmes
Vous pouvez utiliser le composite d’appel de la bibliothèque d’interface utilisateur pour iOS et Android afin de créer un thème personnalisé de l’expérience d’un appelant. Pour créer l’expérience de plateforme, passez un ensemble de couleurs de thème, comme indiqué dans le tableau suivant. Pour plus d’informations, consultez Comment créer votre thème.
| Android | iOS |
|---|---|
|
|
Taille de l'écran
Vous pouvez adapter le composite d’appel Azure Communication Services aux tailles d’écran allant de 5 pouces à la taille d’une tablette. Utilisez le mode fractionné et le mode tablette dans le composite d’appel pour obtenir la disposition de la liste des participants dynamiques, proposer une vue claire et donner la priorité à la conversation.
| Mode fractionné | Mode Tablette |
|---|---|
|
|
Localisation
La localisation est essentielle pour offrir des produits destinés à des utilisateurs du monde entier et qui parlent différentes langues. La bibliothèque d’interface utilisateur prend en charge 12 langues : anglais, espagnol, français, allemand, italien, japonais, coréen, néerlandais, portugais, russe, turc et chinois. Elle prend également en charge les langues s’écrivant de droite à gauche. Pour plus d’informations, consultez Comment ajouter la localisation à votre application.
Accessibilité
L’accessibilité est un élément clé des bibliothèques d’appel. Vous pouvez utiliser un lecteur d’écran pour faire des annonces importantes concernant l’état de l’appel et pour vous assurer que les utilisateurs malvoyants peuvent participer efficacement lorsqu’ils utilisent l’application.
Injection de données d’affichage
Utilisez la bibliothèque d’interface utilisateur pour les plateformes natives mobiles afin de donner aux participants locaux et distants la possibilité de personnaliser la façon dont ils apparaissent en tant qu’utilisateurs dans un appel. Un participant local peut ainsi choisir un avatar local, et personnaliser son nom d’affichage ainsi que le titre et le sous-titre de navigation dans l’écran de configuration au démarrage d’un appel. Un utilisateur distant peut créer un avatar personnalisé lorsqu’il rejoint la réunion. Pour plus d’informations, consultez Comment personnaliser la vue avant une réunion.
Ignorer l’écran de configuration
La bibliothèque d’interface utilisateur offre la possibilité de rejoindre un appel en ignorant l’écran d’installation de l’expérience pour rejoindre un appel. Par défaut, l’utilisateur passe par un écran d’installation pour rejoindre un appel. Ici, l’utilisateur définit la configuration des appels, comme l’activation ou la désactivation de la caméra, l’activation ou la désactivation du microphone et la sélection de l’appareil audio avant de rejoindre un appel. Cet écran nécessite une interaction utilisateur pour rejoindre un appel, ce qui peut être inutile pour certains utilisateurs. Nous fournissons donc la possibilité de rejoindre un appel en ignorant l’écran d’installation et en fournissant les API de configuration des appels. Pour plus d’informations, consultez Comment ignorer l’écran d’installation
Mode Audio uniquement
Le mode Audio uniquement dans la bibliothèque d’interface utilisateur permet aux participants de rejoindre des appels en utilisant uniquement leur audio, sans partager ou recevoir de vidéo. Cette fonctionnalité est utilisée pour conserver la bande passante et optimiser la confidentialité. Quand il est activé, le mode Audio uniquement désactive automatiquement les fonctionnalités vidéo pour envoyer et recevoir des flux, et ajuste l’interface utilisateur pour refléter ce changement en supprimant les contrôles liés à la vidéo. Ce mode peut être activé dans la configuration de CallComposite, plus d’informations sont disponibles dans le guide de démarrage rapide du mode Audio uniquement
Orientation
La bibliothèque d’interface utilisateur prend en charge la configuration de l’orientation de l’écran pour chacun des écrans séparément avant de lancer l’expérience de bibliothèque. Cela permet aux développeurs d’applications de configurer une orientation fixe pour l’expérience d’appel qui alignerait leur orientation de l’application. Pour en savoir plus sur la liste des orientations prises en charge sur les plateformes Android et iOS et l’utilisation de l’API, consultez Comment utiliser la fonctionnalité d’orientation
Multitâches et image dans l’image
La bibliothèque d’interface utilisateur prend en charge le mode image dans l’image pour l’écran d’appel. Lors de l’appel, l’utilisateur peut cliquer sur le bouton Précédent sur l’écran d’appel pour activer le mode multitâches, qui ramènera l’utilisateur à l’écran précédent. Si le mode image dans l’image est activé, un système d’image dans l’image s’affiche pour l’appel. Pour en savoir plus sur les modes multitâches et image dans l’image pour les plateformes Android et iOS et l’utilisation de l’API, consultez Comment utiliser le mode image dans l’image
Prise en charge de CallKit
La bibliothèque d’interface utilisateur prend en charge l’intégration de CallKit pour gérer l’interaction avec CallKit pour les appels. Pour en savoir plus sur l’intégration de la plateforme iOS et de l’utilisation de l’API, consultez Comment utiliser CallKit
Prise en charge d’appels un-à-un et des notifications PUSH
La bibliothèque d’interface utilisateur prend en charge l’appel VoIP un-à-un pour appeler les utilisateurs en fonction de leur identificateur de communication. Pour recevoir la bibliothèque d’interface utilisateur d’appel entrante, elle prend également en charge l’inscription aux notifications PUSH. Pour en savoir plus sur l’intégration pour les plateformes Android et iOS et l’utilisation de l’API, consultez Comment effectuer un appel un-à-un et recevoir des notifications PUSH
Cas d’usage de la conversation
Important
Cette fonctionnalité d’Azure Communication Services est actuellement en préversion.
Ces interfaces de programmation d’applications et kits de développement logiciel (SDK) en préversion sont fournis sans contrat au niveau du service. Nous vous recommandons de ne pas les utiliser pour les charges de travail de production. Certaines fonctionnalités peuvent être limitées ou non prises en charge.
Pour plus d’informations, consultez Conditions d’utilisation supplémentaires relatives aux préversions de Microsoft Azure.
| Zone | Cas d’utilisation |
|---|---|
| Types de conversations | Participer à un thread de conversation Azure Communication Services |
| Actions de conversation | Envoyer un message de conversation |
| Recevoir un message de conversation | |
| Événements de conversation | Afficher les indicateurs de saisie |
| Afficher une confirmation de lecture | |
| Indiquer lorsqu’un participant est ajouté ou supprimé | |
| Afficher les modifications apportées au titre de la conversation |
Flexibilité
Le ChatComposite a été conçu pour s’adapter à différentes dispositions et vues dans votre application. Par exemple, vous pouvez choisir de placer la conversation dans une vue de navigation, une vue modale ou une autre vue. Le ChatComposite s’ajuste lui-même et garantit que l’utilisateur dispose d’une expérience fluide.
| Dans la vue de navigation | Dans la vue modale |
|---|---|
|
|
Identités prises en charge
Pour initialiser un composite et s’authentifier auprès du service, un utilisateur doit avoir une identité Azure Communication Services. Pour plus d’informations, consultez S’authentifier auprès d’Azure Communication Services et Démarrage rapide : Créer et gérer des jetons d’accès.
Architecture recommandée
Initialisez un composite au moyen d’un jeton d’accès Azure Communication Services. Il est important d’obtenir des jetons d’accès auprès d’Azure Communication Services via un service approuvé que vous gérez. Pour plus d’informations, consultez Démarrage rapide : Créer et gérer des jetons d’accès et le tutoriel sur le service approuvé.
Les bibliothèques clientes d’appel et de conversation doivent avoir le contexte de l’appel qu’ils rejoignent. Comme les jetons d’accès utilisateur, communiquez le contexte aux clients à l’aide de votre propre service approuvé. Le tableau suivant récapitule les fonctions d’initialisation et de gestion des ressources requises pour ajouter un contexte à une bibliothèque cliente :
| Responsabilités de Contoso | Responsabilités de la bibliothèque d’interface utilisateur |
|---|---|
| Fournir un jeton d’accès d’Azure | Transférer directement le jeton d’accès fourni pour initialiser les composants |
| Fournir une fonction d’actualisation | Actualiser le jeton d’accès à l’aide d’une fonction fournie par les développeurs |
| Récupérer et transmettre les informations permettant de se joindre à l’appel ou à la conversation | Transmettre les informations d’appel et de conversation pour initialiser les composants |
| Récupérer et transmettre des informations utilisateur pour un modèle de données personnalisé | Transmettre directement un modèle de données personnalisé aux composants à afficher |
Plateforme prise en charge
| Plateforme | Versions |
|---|---|
| iOS | iOS 14 et ultérieur |
| Android | API 21 et versions ultérieures |
Guide de résolution des problèmes
Lorsque la résolution des problèmes se produit pour les appels vocaux ou vidéo, vous pouvez être invité à fournir un CallID ; cet ID est utilisé pour identifier les appels Communication Services.
Cet Id d’appel peut être récupéré via la barre d’action en bas de l’écran d’appel ; vous verrez un bouton de sélection ; une fois que l’utilisateur effectue l’action d’appui, une option « Partager les informations de diagnostic » ; l’utilisateur peut partager les informations de diagnostic qui seront nécessaires pour suivre les problèmes éventuels par l’équipe de support technique.
Pour accéder par programmation à CallID, consultez « Comment obtenir des informations de débogage par programmation ».
Vous pouvez en savoir plus sur les instructions de résolution des problèmes ici : page « Résolution des problèmes dans Azure Communication Services ».
| Écran d’appel | Menu Informations de diagnostic | Partager CallID |
|---|---|---|
|
|
|