使用 Teams 互通性聊天或 互通聊天,您可以讓 Azure 通訊服務使用者接收 Teams 使用者傳送的內嵌影像。 當您啟用 RTF 編輯器時,Azure 通訊服務使用者可以將內嵌影像傳送給 Teams 使用者。 如需詳細資訊,請參閱 UI連結庫使用案例。
Azure 通訊服務中用於接收內嵌影像的功能已整合在CallWithChat組件中,無需額外設定。 若要啟用 Azure 通訊服務 中傳送內嵌影像的功能,請將 設定richTextEditor為 true 下方CallWithChatCompositeOptions。
Important
傳送內嵌影像的 Azure 通訊服務 功能目前為預覽狀態。
提供的預覽 API 和 SDK 並無服務等級協定。 建議您不要將其用於生產工作負載。 某些功能可能不受支援,或功能可能受到限制。
如需詳細資訊,請參閱 Microsoft Azure 預覽版增補使用規定。
下載程式碼
若要存取本教學課程的程式代碼,請參閱 GitHub Azure 範例文章 UI 連結庫 - Teams Interop Chat。
Prerequisites
- 具有有效訂用帳戶的 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 組合 的運作方式。
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存取範例應用程式。
選取位於窗格底部的聊天按鈕,以開啟聊天窗格。 現在,如果 Teams 使用者傳送影像,您應該會看到類似下列螢幕快照的內容。
啟用傳送內嵌影像的功能時,您應該會看到類似下列螢幕快照的內容。
已知問題
- UI 連結庫目前可能不支援特定 GIF 影像。 使用者可能會改為接收靜態影像。
- Web UI 連結庫目前不支援 Teams 用戶傳送的剪輯(短片)。
- 對於某些 Android 裝置,只有當您按住 RTF 編輯器並選取 貼 上 時,才支援貼上單一影像。 使用鍵盤從剪貼簿檢視選取可能不受支援。