Freigeben über

Hinzufügen von Unterstützung für Inline-Bilder in Teams-Interop-Chats

Mit Teams-Interoperabilitätschat oder Interop-Chat können Sie Azure Communication Services-Benutzern das Empfangen von Inlinebildern ermöglichen, die von Teams-Benutzern gesendet werden. Wenn Sie einen Rich-Text-Editor aktivieren, können Azure Communication Services-Benutzer Inlinebilder an Teams-Benutzer senden. Weitere Informationen finden Sie in den Anwendungsfällen der UI-Bibliothek.

Die Funktion in Azure Communication Services für den Empfang von Inlinebildern ist im CallWithChat-Verbund ohne zusätzliche Konfiguration enthalten. Wenn Sie das Feature in Azure Communication Services zum Senden von Inlinebildern aktivieren möchten, legen Sie die Einstellung richTextEditor unter true auf CallWithChatCompositeOptions fest.

Wichtig

Das Feature in Azure Communication Services zum Senden von Inlinebildern befindet sich derzeit in der Vorschau.

Vorschau-APIs und -SDKs werden ohne Vereinbarung zum Servicelevel bereitgestellt. Es wird empfohlen, diese nicht für Produktionsworkloads zu verwenden. Einige Features werden möglicherweise nicht unterstützt, oder die Funktionen sind eingeschränkt.

Weitere Informationen finden Sie in den ergänzenden Nutzungsbestimmungen für Microsoft Azure-Vorschauversionen.

Code herunterladen

Informationen zum Zugriff auf den Code für dieses Lernprogramm finden Sie in der GitHub Azure Samples-Artikel-UI-Bibliothek – Teams Interop-Chat.

Voraussetzungen

Hintergrund

Teams Interop-Chat muss Teil einer vorhandenen Teams-Besprechung sein. Wenn Teams-Benutzende eine Onlinebesprechung erstellen, wird ein Chatthread erstellt und der Besprechung zugeordnet. Damit der Endbenutzer von Azure Communication Services am Chat teilnimmt und mit dem Senden/Empfangen von Nachrichten beginnt, muss ein Besprechungsteilnehmer (ein Teams-Benutzer) sie zuerst zum Anruf zulassen. Andernfalls haben sie keinen Zugriff auf den Chat.

Sobald der Endbenutzer von Azure Communication Services zum Anruf zugelassen wurde, kann er mit anderen Teilnehmern am Anruf chatten. In diesem Artikel wird beschrieben, wie die Inlinebildfreigabe in Teams Interop-Chat funktioniert.

Übersicht

Da Sie zuerst an einer Teams-Besprechung teilnehmen müssen, verwenden Sie die Zusammengesetzte aus der ChatWithChat Benutzeroberflächenbibliothek.

Erstellen Sie ein zusammengesetztes ChatWithChat, indem Sie dem Beispiel im CallWithChatComposite-Tutorial folgen.

Aus dem Beispielcode ist CallWithChatExampleProps erforderlich, das als folgendes Codeschnipsel definiert ist:

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

Es ist kein spezifisches Setup erforderlich, um den Empfang von Inlineimages zu ermöglichen. Um jedoch Inlinebilder zu senden, muss die richTextEditor-Funktion über CallWithChatExampleProps aktiviert werden. Hier ist ein Codeausschnitt zum Aktivieren:

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

Um den Verbund für den Besprechungschat zu starten, müssen Sie TeamsMeetingLinkLocator übergeben, was wie folgt aussieht:

{ "meetingLink": "<TEAMS_MEETING_LINK>" }

Es ist kein anderes Setup erforderlich.

Ausführen des Codes

Lassen Sie uns npm run start ausführen. Anschließend können Sie über localhost:3000 auf die Beispiel-App zugreifen.

Screenshot der UI Library für Azure Communication Services.

Wählen Sie die Chatschaltfläche unten im Bereich aus, um den Chatbereich zu öffnen. Wenn ein Teams-Benutzer nun ein Bild sendet, sollte etwas wie der folgende Screenshot angezeigt werden.

„Screenshot eines Teams-Clients, der zwei Inlinebilder sendet.“

Screenshot, der zeigt, wie die UI-Bibliothek für Azure Communication Services zwei Inlinebilder empfängt.

Wenn das Feature zum Senden von Inlinebildern aktiviert ist, sollte etwa der folgende Screenshot angezeigt werden.

Screenshot der Azure Communication Services UI Library, die zwei Inlinebilder sendet und Nachrichten bearbeitet.

„Screenshot, der zeigt, dass ein Teams-Client zwei Inlinebilder empfängt.“

Bekannte Probleme

  • UI Library unterstützt bestimmte GIF-Bilder derzeit möglicherweise nicht. Benutzer*innen erhalten stattdessen möglicherweise ein statisches Bild.
  • Die Web-UI Library unterstützt derzeit keine Clips (kurze Videos), die von den Teams-Benutzenden gesendet wurden.
  • Bei bestimmten Android-Geräten wird das Einfügen eines einzelnen Bilds nur unterstützt, wenn Sie den Rich-Text-Editor gedrückt halten und Einfügen auswählen. Das Auswählen aus der Zwischenablageansicht mithilfe der Tastatur wird möglicherweise nicht unterstützt.

Nächster Schritt

Überprüfen der restlichen UI Library

  • Last updated on