Ajouter la prise en charge de l’image incorporée dans la conversation interop Teams

Avec Teams Interopérabilité Chat ou Interop Chat, vous pouvez autoriser les utilisateurs d’Azure Communication Services à recevoir des images inline envoyées par les utilisateurs Teams. Lorsque vous activez un éditeur de texte enrichi, les utilisateurs d’Azure Communication Services peuvent envoyer des images inline aux utilisateurs de Teams. Pour plus d’informations, consultez les cas d’utilisation de la bibliothèque d’interface utilisateur.

La fonctionnalité d’Azure Communication Services pour recevoir les images incorporées est fournie avec le composite CallWithChat sans configuration supplémentaire. Pour activer la fonctionnalité d’Azure Communication Services afin d’envoyer des images incorporées, définissez richTextEditor avec la valeur true sous CallWithChatCompositeOptions.

Important

La fonctionnalité d’Azure Communication Services permettant d’envoyer des images incorporées 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 ne pas être prises en charge, ou les fonctionnalités peuvent être limitées.

Pour plus d’informations, consultez Conditions d’utilisation supplémentaires relatives aux préversions de Microsoft Azure.

Télécharger le code

Pour accéder au code de ce tutoriel, consultez l’article d’exemples de GitHub sur Azure Bibliothèque d’interface utilisateur : conversation interop Teams.

Prerequisites

• 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.
• Node.js, les versions LTS (Active Long-Term Support) et Maintenance LTS. Utilisez la commande node --version pour vérifier la version que vous utilisez.
• Une ressource Azure Communication Services active et la chaîne de connexion. Pour plus d’informations, consultez Créer une ressource Azure Communication Services.
• Bibliothèque d’interface utilisateur version 1.15.0 ou la dernière version pour la réception d’images inline. Utilisez la bibliothèque d’interface utilisateur version 1.19.0-beta.1 ou la dernière version bêta pour l’envoi d’images inline.
• Une réunion Teams créée et le lien de la réunion est prêt.
• Connaissance du fonctionnement du composite ChatWithChat.

Background

Teams Interop Chat doit faire partie d’une réunion Teams existante. 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 Services de rejoindre la conversation et de commencer à envoyer/recevoir des messages, un participant à la réunion (utilisateur Teams) doit d’abord les admettre à l’appel. Sinon, il n’aura pas accès à la conversation.

Une fois que l’utilisateur final d’Azure Communication Services est admis à l’appel, il peut commencer à discuter avec d’autres participants sur l’appel. Cet article décrit le fonctionnement du partage d’images inline dans la conversation Teams Interop.

Overview

Étant donné que vous devez d’abord rejoindre une réunion Teams, utilisez le composite ChatWithChat de la bibliothèque d’interface utilisateur.

Pour créer un composite ChatWithChat, suivez l’exemple dans le didacticiel CallWithChatComposite.

À 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;
};

Aucune configuration spécifique n’est nécessaire pour activer la réception d’images incorporées. Par contre, pour envoyer des images incorporées, la fonction richTextEditor doit être activée via CallWithChatExampleProps. Voici un extrait de code permettant de l’activer :

<CallWithChatExperience
  // ...any other call with chat props
  compositeOptions={{ richTextEditor: true }}
/>

Pour démarrer le composite de la conversation de la réunion, vous devez passer TeamsMeetingLinkLocator, qui ressemble à ceci :

{ "meetingLink": "<TEAMS_MEETING_LINK>" }

Aucune autre configuration n’est nécessaire.

Exécuter le code

Exécutons npm run start. Vous pouvez ensuite accéder à l’exemple d’application via localhost:3000.

Sélectionnez le bouton de conversation situé en bas du volet pour ouvrir le volet de conversation. Maintenant, si un utilisateur Teams envoie une image, vous devriez voir quelque chose de semblable à la capture d’écran suivante.

Lorsque la fonctionnalité d’envoi d’images incorporées est activée, vous devriez voir quelque chose qui ressemble à la capture d’écran suivante.

Problèmes connus

• Il est possible que la bibliothèque d’interface utilisateur ne prenne pas en charge certaines images GIF pour l’instant. L’utilisateur peut recevoir une image statique à la place.
• Actuellement, la bibliothèque d’interface utilisateur web ne prend pas en charge les clips (courtes vidéos) envoyés par les utilisateurs Teams.
• Pour certains appareils Android, le collage d’une seule image est pris en charge uniquement lorsque vous maintenez enfoncé l’éditeur de texte enrichi et sélectionnez Coller. La sélection dans le Presse-papiers en utilisant le clavier peut ne pas être prise en charge.

Étape suivante

Découvrir les autres aspects de la bibliothèque d’interface utilisateur

Articles connexes

• 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 Services
• Ajouter le partage de fichiers avec la bibliothèque d'interface utilisateur (UI) dans le chat d'interopérabilité Teams