实时共享 SDK

实时共享是一种 SDK，旨在将 Teams 应用转换为协作式多用户体验，而无需编写任何专用的后端代码。 借助 Live Share，用户可以在 Microsoft Teams 中共同观看、共同创建和共同编辑。 无论你的用户是在会议期间演示还是查看共享到聊天的内容，Live Share 都只需几行代码即可安全地将他们连接到共享会话。

有时屏幕共享是不够的，这就是为什么Microsoft将 PowerPoint Live 和 Whiteboard 等工具直接构建到 Teams 中的原因。 通过将 Web 应用程序直接置于会议界面中的中心位置，用户可以在会议和通话期间无缝协作。

会议结束后，协作也不需要停止。 Live Share 会话在聊天和频道上下文中工作，使用户能够查看谁正在查看哪些内容、相互关注等等。

功能概述

Live Share 有三个主要包，支持无限协作方案。 这些包 (DDS) 公开一组分布式数据结构，包括基元构建基块和总包方案。

Live Share 将会议与 Fluid Framework 无缝集成。 Fluid Framework 是用于分发和同步共享状态的客户端库集合。 实时共享提供完全托管的免费功能，并可随时使用由 Teams 安全和全局缩放提供支持的 Azure Fluid Relay。

Live Share 核心

Live Share 支持通过几行代码连接到与每个会议、聊天或频道关联的特殊 Fluid Container。 除了 Fluid Framework 提供的数据结构外，Live Share 还支持一组新的 DDS 类，以简化应用状态的同步。

Live Share 核心包支持的功能包括：

• 使用 LiveShareClient 加入实时共享会话，以用于会议、聊天或频道。
• 跟踪状态并将用户元数据与 LivePresence同步。
• 使用 协调用户离开会话 LiveState时消失的应用状态。
• 将倒计时计时器与 LiveTimer同步。
• 使用 LiveEvent将实时事件发送到会话中的其他客户端。
• 使用 LiveFollowMode向其他用户演示并关注其他用户。
• 使用 Fluid Framework 的任何功能，例如 SharedMap 和 SharedString。

可以在 核心功能页上找到有关此包的详细信息。

Live Share 媒体

视频和音频是现代世界和工作场所的重要部分。 Live Share 媒体只需几行代码即可为任何媒体播放器实现媒体 同步 。 通过在播放器状态和传输控制层同步媒体，可以单独属性视图，同时通过应用提供可能的最高质量。 由于Microsoft不会重新广播媒体内容，因此许可和访问要求保持不变。

Live Share 媒体支持的功能包括：

• 使用 MediaPlayerSynchronizer同步媒体播放器状态和跟踪。
• 当用户在会议期间交谈时智能调整媒体音量。
• 限制哪些用户可以修改玩家状态。
• 在动态或计划的等待点暂停和恢复媒体同步。

可以在 Live Share 媒体页面上找到有关此包的详细信息。

Live Share 画布

实时协作时，用户必须能够指出并强调屏幕上的内容。 Live Share 画布可以轻松地将墨迹书写、激光指针和光标添加到应用，以便进行无缝协作。

Live Share 画布支持的功能包括：

• 使用 LiveCanvas向应用添加协作<canvas>。
• 使用笔、荧光笔、线条和箭头工具传达想法。
• 使用激光笔有效地演示。
• 跟随实时鼠标光标。
• 配置可变设备和视图状态的设置。
• 使用完全支持的鼠标、触摸和触笔输入。

可以在 Live Share 画布页上找到有关此包的详细信息。

为什么要使用 Live Share 生成应用？

构建协作应用可能很困难、耗时、成本高昂，并且涉及大规模且复杂的合规性要求。 Teams 用户花费大量时间与团队成员共同审阅工作、一起观看视频，并通过屏幕共享来集思广益，以提出新的想法。 借助实时共享 SDK，能够将应用转换为协作性更强但投资最少的项目。

下面是实时共享 SDK 的一些关键优势：

• 无障碍会话管理和安全性。
• 有状态和无状态分布式数据结构。
• 媒体扩展可轻松同步视频和音频。
• 一键墨迹书写、激光笔和光标。
• 使用角色验证尊重会议权限。
• 提供低延迟的免费和完全托管服务。

若要了解 Live Share 是否适合你的协作方案，了解 Live Share 与其他协作框架之间的差异很有帮助，包括：

• Web 套接字
• Azure Fluid Relay
• Live Share

Web 套接字

Web 套接字是一种无处不在的技术，用于在 Web 中实时通信，某些应用可能更倾向于使用自己的自定义 Web 套接字后端。 与 REST API 不同，Web 套接字在会话中的服务器和客户端之间保持开放连接。

与其他自定义 API 服务一样，要求通常包括对会话进行身份验证、区域映射、维护和缩放。 许多协作方案还需要维护服务器中的会话状态，这需要存储基础结构、冲突解决等。

通过使用 Live Share，无需任何开销即可获得 Web 套接字的所有功能。

Azure Fluid Relay

Azure Fluid Relay 是 Fluid Framework 的托管产品/服务，可帮助开发人员跨连接的 JavaScript 客户端构建实时协作体验和复制状态。 Microsoft Whiteboard、Loop 和 OneNote 都是使用 Fluid Framework 构建的应用示例。

与其他 Azure 服务一样，Azure Fluid Relay 旨在以最小的复杂性根据单个项目需求进行定制。 要求包括为 Fluid 容器和区域合规性开发身份验证方案。 配置后，开发人员可以专注于提供高质量的协作体验。

Live Share 托管服务

Live Share 提供由 Microsoft Teams 的安全性支持的一次性 Azure Fluid Relay 服务。 所有会话都遵循租户数据驻留要求、全球法规和安全承诺。 只需几行代码，即可连接到只有会议、聊天或频道成员才能访问的 Live Share 容器。

import { LiveShareClient, LivePresence } from "@microsoft/live-share";
import { LiveShareHost } from "@microsoft/teams-js";

// Join the Fluid container
const host = LiveShareHost.create();
const liveShare = new LiveShareClient(host);
const schema = {
  initialObjects: { presence: LivePresence },
};
const { container } = await liveShare.joinContainer(schema);

// ... ready to start app sync logic

import { LiveShareClient, LivePresence } from "@microsoft/live-share";
import { LiveShareHost } from "@microsoft/teams-js";
import { ContainerSchema } from "fluid-framework";

// Join the Fluid container
const host = LiveShareHost.create();
const liveShare = new LiveShareClient(host);
const schema: ContainerSchema = {
  initialObjects: { presence: LivePresence },
};
const { container } = await liveShare.joinContainer(schema);

// ... ready to start app sync logic

使用自定义 Azure Fluid Relay 服务

虽然大多数人认为最好使用我们的免费托管服务，但在某些情况下，仍对 Live Share 应用使用自己的 Azure Fluid Relay 服务是有益的。

如果以下项，请考虑使用自定义服务：

• 需要在 Fluid 容器中长期存储数据。
• 通过需要自定义安全策略的服务传输敏感数据。
• 通过 Fluid Framework 开发功能，例如 ， SharedMap为 Teams 外部的应用程序开发功能。

有关详细信息，请参阅自定义 Azure Fluid Relay 服务 操作指南。

Live Share 协作上下文

Live Share 会话可实现会议、聊天和频道中的无缝协作。 通过 joinContainer() API 连接到会话时，Teams 会将用户连接到相应的 Fluid 容器。 虽然无需编写任何特定于上下文的代码，但应了解每个选项卡图面的用户方案的差异。

Teams JavaScript SDK 的 getContext() API 会告知你 FrameContexts 正在运行的应用。 可以使用此功能在应用程序中为每个上下文有条件地启用不同的功能和 UX 模式。 Live Share 支持以下 FrameContexts 上下文：

• meetingStage
• sidePanel
• content

以下示例演示如何向应用程序添加特定于上下文的功能：

import { LiveShareClient, LiveFollowMode } from "@microsoft/live-share";
import {
  app,
  liveShare,
  LiveShareHost,
  FrameContexts,
} from "@microsoft/teams-js";

// Check if Live Share is supported in the current host / context
if (!liveShare.isSupported()) return;

// Join the Fluid container for the current scope
const host = LiveShareHost.create();
const liveShare = new LiveShareClient(host);
const schema = {
  initialObjects: { followMode: LiveFollowMode },
};
const { container } = await liveShare.joinContainer(schema);

// Get teamsJs context
const context = await app.getContext();
switch (context.page?.frameContext) {
  case FrameContexts.meetingStage: {
    // Optimize app for meeting stage
    // e.g., followMode.startPresenting()
    break;
  }
  case FrameContexts.sidePanel: {
    // Optimize app for meeting side panel
    // e.g., provide simplified UX for selecting content
    break;
  }
  case FrameContexts.content: {
    // Optimize app for content
    // e.g., hide presenter settings not appropriate for async contexts
    break;
  }
  default: {
    throw new Error("Received unexpected frameContext");
  }
}

// ... ready to start app sync logic

import { LiveShareClient, LiveFollowMode } from "@microsoft/live-share";
import { app, liveShare, LiveShareHost, FrameContexts } from "@microsoft/teams-js";
import { ContainerSchema } from "fluid-framework";

// Check if Live Share is supported in the current host / context
if (!liveShare.isSupported()) return;

// Join the Fluid container for the current scope
const host = LiveShareHost.create();
const liveShare = new LiveShareClient(host);
const schema: ContainerSchema = {
  initialObjects: { followMode: LiveFollowMode },
};
const { container } = await liveShare.joinContainer(schema);

// Get teamsJs context
const context: app.Context = await app.getContext();
switch(context.page?.frameContext) {
  case FrameContexts.meetingStage: {
    // Optimize app for meeting stage
    // e.g., followMode.startPresenting()
    break;
  }
  case FrameContexts.sidePanel: {
    // Optimize app for meeting side panel
    // e.g., provide simplified UX for selecting content
    break;
  }
  case FrameContexts.content: {
    // Optimize app for content
    // e.g., hide presenter settings not appropriate for async contexts
    break;
  }
  default: {
    throw new Error("Received unexpected frameContext");
  }
}

// ... ready to start app sync logic

会议上下文

正如我们前面提到的，有两个会议上下文： meetingStage 和 sidePanel。 在下一部分中，了解如何优化这些上下文以增强用户体验。

会议阶段

上下文 meetingStage 允许用户将应用内容共享到会议中的参与者的会议阶段。 在此上下文中，用户通常希望实时协作。 与在 Web 浏览器中加载协作应用（如 Microsoft Loop 或 Word）不同，演示者通常希望对体验拥有更多控制权。 例如，在 PowerPoint Live 中，演示者希望能够控制默认情况下对与会者可见的 PowerPoint 幻灯片，即使与会者可以选择暂时停止关注它们。

请考虑对 meetingStage 应用进行以下优化：

• 放置应用的主动演示者控件，例如通过控制观看 3D 模型的所有用户的相机位置。
• 允许符合条件的用户控制应用，例如在共同观看视频时控制媒体播放。
• 允许用户暂时停止关注演示者，例如在与会者单击幻灯片放映中的其他图像时显示“同步到演示者”按钮。
• 提供授予演示者控制权的设置，例如禁用其他用户停止关注这些设置的功能。

会议侧面板

会议 sidePanel 上下文允许用户将应用固定为会议中的选项卡，以及聊天等默认选项卡。 虽然任何会议参与者都可以选择打开 sidePanel 选项卡，但每个用户都必须单独打开该选项卡。 这使得它非常适合会议期间的异步方案，例如搜索要共享到会议阶段的内容。 虽然你的用户不希望共同观看、共同创建或共同编辑此图面中的丰富内容，但 Live Share 仍然可以改进你的 sidePanel 应用。

请考虑对 sidePanel 应用进行以下优化：

• 会议阶段的同伴体验，例如协作视频或音频播放列表。
• 将内容共享到会议阶段之前的配置设置，例如禁用“控制”功能。
• 性能优化，例如在共享已开始时广播一次新内容，而不是重新加载应用程序。

内容上下文

上下文 content 旨在异步使用应用的内容。 聊天和频道中的上下文有两个不同的图面 content ，包括：

• 聊天和频道选项卡
• 协作阶段视图

聊天和频道选项卡

聊天和频道选项卡允许用户将应用程序固定到聊天或频道。 支持 sidePanel 和 content 的选项卡具有相同的固定 URL，但用例却大不相同。 对于初学者，聊天和频道选项卡通常有更多的水平空间可供使用。 最佳做法是允许用户搜索内容以“固定”到选项卡。例如，使用笔记应用的教师可以固定包含其学生的教育资源的笔记。

虽然聊天和频道选项卡最常用于异步使用，但用户可能同时具有相同的内容。 发生这种情况时，保持内容同步以防止数据冲突或重复工作非常有用。 Live Share 允许你显示每个用户正在查看的内容、他们正在执行的操作等。 这可以提供社交激励，吸引用户参与应用内容，提高参与度和协作度。 我们称之为“巧合协作”。

请考虑对 content 聊天和频道选项卡进行以下优化：

• 显示哪些用户正在查看固定到选项卡的内容，例如用户主动查看每个白板。
• 微推用户加入正在进行的协作会话，例如显示 Toast 以加入任务应用的持续站立。
• 允许用户关注特定用户或用户组，例如单击要关注的另一个已连接用户的头像。

协作阶段视图

当用户在 Teams 中与同事共享你的应用内容时，我们建议使用 协作阶段视图。 在此方案中，用户打开弹出窗口中共享的内容，侧边有聊天，允许用户在继续聊天流的同时参与你的内容。 与聊天和频道选项卡类似，此内容主要以异步方式使用。 但是，如果用户通过自适应卡片共享内容，则用户更有可能查看内容并彼此聊天，从而增加对协作功能的需求。

请考虑对协作阶段视图应用进行以下优化：

• 显示哪些用户正在查看内容以及他们正在执行的操作，例如在视频中显示用户头像的位置。
• 允许用户关注特定用户或用户组，例如单击要关注的另一个已连接用户的头像。
• 促进即席通信，例如在后续模式下启用墨迹书写工具和激光笔。

React 集成

Live Share 具有专用的 React 集成，使 Live Share 功能更易于集成到 React 应用中。 可以在组件首次装载时使用 LiveShareProvider 组件加入 Live Share 会话，而不是直接使用LiveShareClient。 每个都有 LiveDataObject 相应的 React 挂钩，旨在使 Live Share 使用变得非常简单。 有关详细信息，请参阅 React GitHub 的 Live Share 页面。

用户方案

后续步骤

另请参阅

• Teams 会议应用
• GitHub 存储库
• Live Share SDK 参考文档
• Live Share 媒体 SDK 参考文档
• 将 Fluid 与 Teams 配合使用
• 会议应用 API