通过

你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

在 Teams 互操作性聊天中使用 UI 库启用内联图像

  • 项目

通过 Teams 互操作性聊天(“互操作性聊天”)，你可以让 Azure 通信服务用户能够接收 Teams 用户发送的内联图像。 启用富文本编辑器后，Azure 通信服务用户可以向 Teams 用户发送内联图像。 若要了解详细信息，请参阅 UI 库用例。

Azure 通信服务中接收内联图像的功能附带 CallWithChat 复合组件，无需额外设置。 若要在 Azure 通信服务中启用发送内联图像的功能，请在“CallWithChatCompositeOptions”下将“richTextEditor”设置为“true”。

重要

Azure 通信服务中用于发送内联图像的功能目前为预览版。

预览版 API 和 SDK 在没有服务级别协议的情况下提供。 建议不要将它们用于生产工作负荷。 某些功能可能不受支持或者已受限。

有关详细信息，请参阅 Microsoft Azure 预览版补充使用条款。

下载代码

在 GitHub 上访问本教程的代码。

先决条件

背景

首先，Teams 互操作聊天目前必须是 Teams 会议的一部分。 当 Teams 用户创建联机会议时，将创建一个聊天会话并将其与会议相关联。 若要使 Azure 通信服务用户能够加入聊天并开始发送或接收消息，会议参与者（Teams 用户）必须首先允许他们加入通话。 否则，他们无权访问聊天。

Azure 通信服务用户被允许加入通话后，他们就可以开始与通话中的其他参与者聊天。 在本教程中，你将了解在互操作聊天中发送和接收内联图像的功能如何运作。

概述

由于你需要首先加入 Teams 会议，因此我们需要使用 UI 库中的 ChatWithChat 复合组件。

让我们按照 storybook 页面中的基本示例创建一个 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;
};

无需特定的设置即可启用内联图像的接收。 但是，若要发送内联图像，必须通过 CallWithChatExampleProps 启用 richTextEditor 功能。 下面是有关如何启用它的代码片段：

<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 设备，仅当按住富文本编辑器并选择“粘贴”时，才支持粘贴单张图像。 不支持使用键盘从剪贴板视图中选择。

下一步

查看 UI 库的其余内容

你可能还需要：