通过

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

在 Teams 互操作聊天中添加内联图像支持

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

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

重要

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

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

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

下载代码

若要访问本教程的代码，请参阅 GitHub Azure 示例文章 UI 库 - Teams 互作聊天。

先决条件

背景

Teams 互操作聊天需要是现有 Teams 会议的一部分。 当 Teams 用户创建联机会议时，将创建一个聊天会话并将其与会议相关联。 若要启用加入聊天并开始发送/接收消息的 Azure 通信服务最终用户，会议参与者（Teams 用户）需要首先允许他们加入呼叫。 否则，他们无权访问聊天。

Azure 通信服务最终用户进入呼叫后，他们可以开始与呼叫中的其他参与者聊天。 本文介绍嵌入式图像共享在 Teams 跨平台聊天中的工作原理。

概述

由于你需要首先加入 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;
};

无需特定的设置即可启用内联图像的接收。 但是，若要发送内联图像，必须通过 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 库的其余内容