共用方式為


在 Teams Interop 聊天中新增內嵌影像支援

使用 Teams 互通性聊天或 互通聊天,您可以讓 Azure 通訊服務使用者接收 Teams 使用者傳送的內嵌影像。 當您啟用 RTF 編輯器時,Azure 通訊服務使用者可以將內嵌影像傳送給 Teams 使用者。 如需詳細資訊,請參閱 UI連結庫使用案例

Azure 通訊服務中用於接收內嵌影像的功能已整合在CallWithChat組件中,無需額外設定。 若要啟用 Azure 通訊服務 中傳送內嵌影像的功能,請將 設定richTextEditortrue 下方CallWithChatCompositeOptions

Important

傳送內嵌影像的 Azure 通訊服務 功能目前為預覽狀態。

提供的預覽 API 和 SDK 並無服務等級協定。 建議您不要將其用於生產工作負載。 某些功能可能不受支援,或功能可能受到限制。

如需詳細資訊,請參閱 Microsoft Azure 預覽版增補使用規定

下載程式碼

若要存取本教學課程的程式代碼,請參閱 GitHub Azure 範例文章 UI 連結庫 - Teams Interop Chat

Prerequisites

Background

Teams Interop Chat 必須是現有 Teams 會議的一部分。 當 Teams 使用者建立線上會議時,會建立與會議相關聯的聊天對話。 若要讓 Azure 通訊服務終端使用者加入聊天並開始傳送/接收訊息,會議參與者(Teams 使用者)必須先允許他們加入通話。 否則,他們無法存取聊天。

一旦 Azure 通訊服務終端使用者進入通話,他們就可以開始與通話中的其他參與者聊天。 本文說明內嵌影像共用如何在 Teams Interop 聊天中運作。

Overview

因為您需要先加入 Teams 會議,請使用 UI 程式庫的 ChatWithChat 複合。

若要建立組合 ChatWithChat,請遵循 CallWithChatComposite 教學課程中的範例。

在範例程式碼中,其需要 CallWithChatExampleProps,會定義為下列程式碼片段:

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

不需要任何特定的設定,才能啟用接收內嵌映像。 但是若要傳送內嵌影像, richTextEditor 函式必須透過 CallWithChatExampleProps啟用。 以下是一個範例程式碼,說明如何啟用:

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

若要能夠啟動複合進行會議聊天,您需要傳遞 TeamsMeetingLinkLocator,如下所示:

{ "meetingLink": "<TEAMS_MEETING_LINK>" }

不需要其他設定。

執行程式碼

讓我們執行 npm run start。 然後,您可以透過 localhost:3000存取範例應用程式。

顯示 Azure 通訊服務 UI 連結庫的螢幕快照。

選取位於窗格底部的聊天按鈕,以開啟聊天窗格。 現在,如果 Teams 使用者傳送影像,您應該會看到類似下列螢幕快照的內容。

「顯示 Teams 用戶端傳送兩個內嵌影像的螢幕快照」。

顯示 Azure 通訊服務 UI 連結庫接收兩個內嵌影像的螢幕快照。

啟用傳送內嵌影像的功能時,您應該會看到類似下列螢幕快照的內容。

顯示 Azure 通訊服務 UI 連結庫傳送兩個內嵌影像和編輯訊息的螢幕快照。

「顯示 Teams 用戶端接收兩個內嵌影像的螢幕快照」。

已知問題

  • UI 連結庫目前可能不支援特定 GIF 影像。 使用者可能會改為接收靜態影像。
  • Web UI 連結庫目前不支援 Teams 用戶傳送的剪輯(短片)。
  • 對於某些 Android 裝置,只有當您按住 RTF 編輯器並選取 貼 時,才支援貼上單一影像。 使用鍵盤從剪貼簿檢視選取可能不受支援。

後續步驟