Activer l’image en ligne à l’aide de la bibliothèque d’interface utilisateur dans la conversation d’interopérabilité Teams
Dans une conversation d’interopérabilité Teams (« chat d’interop »), nous pouvons permettre aux utilisateurs finaux d’Azure Communication Service de recevoir des images en ligne envoyées par les utilisateurs Teams. Actuellement, l’utilisateur final d’Azure Communication Service ne peut recevoir que des images en ligne d’un utilisateur Teams. Pour en savoir plus, consultez Cas d’utilisation de la bibliothèque d’interface utilisateur.
Important
La fonctionnalité d’image en ligne est fournie avec le composite CallWithChat sans configuration supplémentaire.
Télécharger le code
Accédez au code de ce didacticiel sur GitHub.
Prérequis
- Compte Azure avec un abonnement actif. Pour plus d’informations, consultez Créer un compte gratuitement
- Visual Studio Code sur l’une des plateformes prises en charge.
- Versions de Node.js, d’Active LTS et de Maintenance LTS. Utilisez la commande
node --version
pour vérifier la version que vous utilisez. - Une ressource Communication Services active et la chaîne de connexion. Créer une ressource Communication Services
- Utilisation de la bibliothèque d’interface utilisateur version 1.15.0 ou dernière version.
- Créez une réunion Teams avec un lien de réunion préparé.
- Familiarisez-vous avec le fonctionnement du composite ChatWithChat.
Arrière-plan
Tout d’abord, nous devons comprendre que le chat d’interop Teams doit faire actuellement partie d’une réunion Teams. Lorsque l’utilisateur Teams crée une réunion en ligne, un fil de conversation est créé et associé à la réunion. Pour permettre à l’utilisateur final Azure Communication Service de rejoindre la conversation et de commencer à envoyer ou à recevoir des messages, un participant à la réunion (utilisateur Teams) doit d’abord l’admettre dans l’appel. Sinon, il n’aura pas accès à la conversation.
Une fois que l’utilisateur final d’Azure Communication Service est admis dans l’appel, il peut commencer à discuter avec d’autres participants de l’appel. Dans ce didacticiel, nous allons découvrir le fonctionnement de l’image en ligne dans le chat d’interop.
Vue d’ensemble
Comme mentionné précédemment, étant donné que nous devons d’abord rejoindre une réunion Teams, nous devons utiliser le composite ChatWithChat à partir de la bibliothèque d’interface utilisateur.
Suivons l’exemple de base de la page storybook pour créer un composite ChatWithChat.
À partir de l’exemple de code, il a besoin de CallWithChatExampleProps
, qui est défini comme l’extrait de code suivant :
export type CallWithChatExampleProps = {
// Props needed for the construction of the CallWithChatAdapter
userId: CommunicationUserIdentifier;
token: string;
displayName: string;
endpointUrl: string;
locator: TeamsMeetingLinkLocator | CallAndChatLocator;
// Props to customize the CallWithChatComposite experience
fluentTheme?: PartialTheme | Theme;
compositeOptions?: CallWithChatCompositeOptions;
callInvitationURL?: string;
};
Pour pouvoir démarrer le composite pour la conversation de la réunion, nous devons passer TeamsMeetingLinkLocator
, qui ressemble à ceci :
{ "meetingLink": "<TEAMS_MEETING_LINK>" }
C’est tout ce dont vous avez besoin. Et aucune autre configuration n’est nécessaire pour activer spécifiquement l’image incluse.
Exécuter le code
Exécutons npm run start
, vous devriez pouvoir accéder à notre exemple d’application via localhost:3000
, comme dans la capture d’écran suivante :
Cliquez simplement sur le bouton de conversation situé en bas pour afficher le panneau de conversation. Maintenant, si l’utilisateur Teams envoie une image, vous devriez voir quelque chose comme ceci :
Notez que dans un chat d’interop Teams, nous prenons actuellement en charge seulement l’utilisateur final Azure Communication Service pour recevoir des images en ligne envoyées par un utilisateur Teams. Pour en savoir plus sur les fonctionnalités prises en charge, reportez-vous aux cas d’utilisation de la bibliothèque d’interface utilisateur
Problèmes connus
- La bibliothèque d’interface utilisateur peut ne pas prendre en charge certaines images GIF pour l’instant. L’utilisateur peut recevoir une image statique à la place.
- Pour l’instant, la bibliothèque d’interface utilisateur web ne prend pas en charge les clips (courtes vidéos) envoyés par les utilisateurs Teams.
Étapes suivantes
Vous souhaiterez peut-être également :
- Voir les cas d’usage de la bibliothèque d’interface utilisateur
- Ajouter la conversation à votre application
- Créer des jetons d’accès utilisateur
- En savoir plus sur l’architecture client et serveur
- En savoir plus sur l’authentification
- Ajouter le partage de fichiers avec la bibliothèque d’interface utilisateur dans le chat Azure Communication Service
- Ajouter le partage de fichiers avec la bibliothèque d’interface utilisateur dans la conversation d’interopérabilité Teams