Activer l’image en ligne à l’aide de la bibliothèque d’interface utilisateur dans la conversation d’interopérabilité Teams

Article
04/24/2024

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 :

Capture d’écran d’une bibliothèque d’interface utilisateur Azure Communication Services.

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 :

« Capture d’écran d’un client Teams envoyant deux images incluses ».

Capture d’écran de la bibliothèque d’interface utilisateur Azure Communication Services recevant deux images incluses.

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

Vérifier le reste de la bibliothèque d’interface utilisateur

Vous souhaiterez peut-être également :

Partage via