在 Teams 互操作性聊天中使用 UI 連結庫啟用內嵌影像

發行項
11/07/2024

使用 Teams 互操作性聊天（“Interop Chat”），您可以啟用 Azure 通訊服務使用者接收 Teams 使用者傳送的內嵌影像。啟用 RTF 編輯器時，Azure 通訊服務使用者可以將內嵌影像傳送給 Teams 使用者。若要深入瞭解，請參閱 UI連結庫使用案例。

Azure 通訊服務中用於接收內嵌影像的功能隨附CallWithChat於複合，而不需要額外的設定。若要啟用 Azure 通訊服務中傳送內嵌影像的功能，請將設定richTextEditor為 true 下方CallWithChatCompositeOptions。

重要

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

提供的預覽 API 和 SDK 並無服務等級協定。建議您不要將其用於生產工作負載。部分功能可能不受支援，或是在功能上有所限制。

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

下載程式碼

在 GitHub 上存取本教學課程的程式碼。

必要條件

具有有效訂用帳戶的 Azure 帳戶。如需詳細資訊，請參閱免費建立帳戶。
其中一個支援平台上的 Visual Studio Code。
Node.js、作用中長期支援（LTS）和維護 LTS 版本。請使用 node --version 命令來檢查您的版本。
作用中的 Azure 通訊服務資源和連接字串。如需詳細資訊，請參閱建立 Azure 通訊服務資源。
用於接收內嵌映像的UI連結庫 1.15.0 版或最新版本。使用UI連結庫 1.19.0-beta.1 版或最新的Beta版本來傳送內嵌映像。
已建立Teams會議，並準備好會議連結。
熟悉 ChatWithChat 複合的運作方式。

背景

首先，Teams Interop Chat 必須是目前 Teams 會議的一部分。當 Teams 使用者建立線上會議時，會建立與會議相關聯的聊天對話。若要讓 Azure 通訊服務使用者加入聊天並開始傳送或接收訊息，會議參與者（Teams 使用者）必須先接受通話。否則，他們無法存取聊天。

Azure 通訊服務用戶進入通話后，他們可以開始與通話中的其他參與者聊天。在本教學課程中，您將瞭解如何在 Interop Chat 中傳送和接收內嵌影像的功能。

概觀

因為您需要先加入 Teams 會議，所以我們必須使用 UI 連結庫的 ChatWithChat 複合。

讓我們遵循腳本頁面的基本範例來建立ChatWithChat複合。

在範例程式碼中，其需要 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 編輯器並選取 [貼上] 時，才支援貼上單一影像。不支援使用鍵盤從剪貼簿檢視選取。

後續步驟

檢查 UI 連結庫的其餘部分

您可能也想要：

共用方式為