为 Teams 会议阶段生成应用

项目
10/29/2024

Microsoft Teams 通过提供促进无缝协作和通信的功能来增强会议体验。屏幕共享功能就是一个很好的例子，它允许用户显示其整个屏幕、特定窗口，甚至白板会话。此功能对于有效的演示和协作工作至关重要，因为它确保所有参与者都可以查看共享内容并与之交互，使虚拟会议更具活力和吸引力。

除了屏幕共享，Microsoft Teams 还提供了各种旨在提高虚拟交互效率的工具。这些工具可复制现场会议的动态，使用户能够高效协作，无论其物理位置如何。在 Teams 中集成这些功能使组织能够进行更具互动性和富有成效的会议，从而推动更好的团队合作和结果。

共享到阶段和屏幕共享内容到会议是增强 Teams 中的共享体验的功能。 “共享到阶段”允许用户将应用从正在进行的会议中的会议侧面板共享到会议阶段。通过屏幕共享内容到会议，用户可以使用屏幕共享体系结构将内容共享到 Teams 中的会议阶段。

下表列出了使用屏幕共享和共享到阶段功能的方案：

功能	共享到阶段	屏幕共享内容到阶段
交互级别	允许与会者与内容交互。	应用或内容的仅查看模式。
Scenarios	协作体验，例如白板。	共同消费方案，例如在 scrum 会议中查看仪表板。
开发人员工作	需要付出更多努力。	旨在减少开发人员将应用或内容引入会议阶段的工作量。
实现逻辑	适合小型会议。	适用于大型会议或只有一个用户具有高级许可证时。

“共享到阶段”允许用户将应用从正在进行的会议中的会议侧面板共享到会议阶段。与被动屏幕共享相比，这种共享是交互式和协作的。

若要调用共享到阶段，用户可以选择会议侧面板右上角的 “共享到舞台 ”图标。 “共享到阶段 ”图标是 Teams 客户端的本机图标，选择该图标会将整个应用共享到会议阶段。

应用部件清单

若要将应用共享到会议阶段，必须在应用清单中配置上下文和特定于资源的许可 (RSC) 权限：

context按如下所示更新应用清单中的属性：
```
"context": [
  "meetingSidePanel",
  "meetingStage"
]
```

通过配置 authorization 属性以及字段中的 resourceSpecific 和 nametype 来获取 RSC 权限，如下所示：

"authorization": {
  "permissions": {
    "resourceSpecific": [
      {
        "name": "MeetingStage.Write.Chat",
        "type": "Delegated"
      }
    ]
  }
}

在许多情况下，将整个应用共享到会议阶段并不像共享应用的特定部分那样有用：

对于集思广益或白板应用，用户可能需要在会议中共享特定板，而不是与所有板共享整个应用。
对于医疗应用，医生可能只想与患者共享屏幕上的 X 射线，而不是与所有患者记录或结果等共享整个应用。
用户可能希望一次共享来自单个内容提供商的内容， (例如 YouTube) 而不是在舞台上共享整个视频目录。

为了在此类方案中帮助用户，Microsoft Teams JavaScript 客户端库中的 API (TeamsJS) 允许你从会议侧面板中的按钮以编程方式调用共享以暂存应用的特定部分。

桌面设备
移动设备

下图显示了 Teams 桌面客户端中的“共享到暂存”选项：

屏幕截图显示了共享到会议的 Stageview。

如果使用高级共享暂存 API，则可以自定义按钮上的文本。下面是自定义指南：

如果你的体验提供将应用内容简单共享到阶段，请使用“共享而不演示”或“屏幕共享”。这为用户设定了正确的期望，因为 “共享 ”始终意味着 “共享”将在 Teams 会议中暂存。
使用更具体的文本来提供方案的有意义的上下文。例如，如果你的应用提供视频或休闲游戏，则可以使用一 起观看 或 一起玩游戏 等文本。

使用以下 API 共享应用的特定部分：

方法	说明	源
将应用内容共享到演示区域	从会议中的会议侧面板将应用的特定部分共享到会议阶段。	TeamsJS 库
获取应用内容演示区域共享状态	获取会议演示区域应用共享状态的信息。	TeamsJS 库
获取应用内容演示区域共享功能	获取应用共享到会议演示区域的功能。	TeamsJS 库

shareAppContentToStage API 能够帮助将应用的特定部分共享到会议演示区域。可以通过 TeamsJS 库获取 API。

数组 validDomains 必须允许内部 appContentUrl manifest.json。否则，API 将返回 501 错误。

以下代码是 API 的示例 shareAppContentToStage ：

const appContentUrl = "https://www.bing.com/";

microsoftTeams.meeting.shareAppContentToStage((err, result) => {
    if (result) {
        // handle success
    }
    if (err) {
        // handle error
    }
}, appContentUrl);

查询参数

下表列出了查询参数：

值	类型	必需	说明
`callback`	字符串	是	回调包含 error 和 result 两个参数。该错误可以包含 SdkError 类型的错误，也可以在共享成功时包含 null。如果共享成功，则结果可以包含 true 值，或者在共享失败时为 null。
`appContentURL`	字符串	是	在舞台上共享的 URL。
`shareOptions`	Object	否	定义其他共享选项。
`shareOptions.sharingProtocol`	枚举	否	屏幕共享协议。支持的值为 `Collaborative` 和 `ScreenShare`。默认值为“`Collaborative`”。

通过 getAppContentStageSharingState API，可以提取有关在会议舞台上共享的应用的信息。

下表是 API 的示例 getAppContentStageSharingState ：

microsoftTeams.meeting.getAppContentStageSharingState((err, result) => {
    if (result.isAppSharing) {
        // Indicates if app is sharing content on the meeting stage.
    }
});

getAppContentStageSharingState API 的 JSON 响应正文为：

{
  "isAppSharing": true
}

查询参数

下表包含查询参数：

值	类型	必需	说明
callback	字符串	是	回调包含 error 和 result 两个参数。如果存在错误，则错误可以包含 SdkError 类型的错误，或者在共享成功时为 null。当共享成功时，结果可以包含对象;如果存在错误，则结果可以包含 `IAppContentStageSharingState` null。

通过 getAppContentStageSharingCapabilities API，可以提取应用的功能，以便将应用内容共享到会议阶段。应用需要调用 getAppContentStageSharingCapabilities API 来启用或禁用会议侧面板中会议参与者的自定义共享暂存按钮。如果会议参与者无权将应用内容共享到会议阶段，则必须禁用或隐藏“共享到阶段”按钮。

应用共享功能取决于会议中的租户用户类型和参与者角色。

用户类型：租户内、来宾和外部用户类型参与者可以共享应用以暂存，还可以查看在舞台上共享的应用并与之交互。匿名用户无法查看、共享在舞台上共享的应用或与之交互。有关详细信息，请参阅会议中的用户类型。
用户角色：在会议中具有演示者和组织者用户角色的参与者可以共享应用以暂存。与会者未启用“共享到暂存”按钮和将应用共享到阶段的功能。有关详细信息，请参阅 Teams 会议中的用户角色。

以下代码是 API 的示例 getAppContentStageSharingCapabilities ：

microsoftTeams.meeting.getAppContentStageSharingCapabilities((err, result) => {
    if (result.doesAppHaveSharePermission) {
        // Indicates if the meeting participant has permission to share content to the meeting stage.
    }
});

getAppContentStageSharingCapabilities API 的 JSON 响应正文为：

{
   "doesAppHaveSharePermission":true
}

查询参数

下表包含查询参数：

值	类型	必需	说明
callback	字符串	是	回调包含 error 和 result 两个参数。该错误可以包含 SdkError 类型的错误，也可以在共享成功时包含 null。当共享成功时，结果可以包含对象;如果出现错误，则结果可以包含 `IAppContentStageSharingCapabilities` null。

注意

只有具有演示者或组织者角色的租户内、来宾和外部用户才能启动共享会话。
Mac、经典 Teams、移动、Web 和 VDI 不支持使用屏幕共享到阶段。
在 Teams 中，不能同时共享屏幕和共享到阶段。

用户可以使用屏幕共享体系结构将内容屏幕共享到 Teams 中的会议阶段。当用户将应用共享到会议阶段时，该应用仅在演示者的设备上呈现，然后屏幕将在新窗口中共享或镜像到所有其他与会者。在会议中共享应用内容后，所有参与者都可以查看内容，但只有演示者能够与内容进行交互，从而提供多玩家观看体验。

屏幕共享到会议阶段的内容简化了会议期间的应用内容共享，并提供无缝的多玩家观看体验。让我们来了解该功能的用例：

面向开发人员	对于用户
协调内容呈现：现在可以在更大的舞台上向多个参与者展示协调内容，超出固定宽度侧面板。这种扩大的可见性吸引了更多的关注，并与会议生命周期紧密集成。	上下文工具用法：用户可以在正在进行的通信上下文中无缝使用自己喜欢的工具。这可以最大程度地减少上下文切换并增强会议结果。
现装的应用共享：整个应用的基本共享是现可用的，不需要你进行额外的投资。这种简化的方法简化了内容共享过程。	内联内容显示：内容在会议窗口中内联显示，确保所有参与者都能轻松访问。无需离开对话。
特定内容共享的增强 API：现有共享到阶段 API 得到增强，可通过屏幕共享协议共享特定内容。现在可以定制内容共享以满足特定用例。	会议侧面板上的“共享”按钮：具有这些角色的用户可以直接从会议侧面板启动内容共享。这使演示者能够有效地与受众互动。
深层链接和“在会议中共享”按钮支持：使用屏幕共享协议通过深层链接或使用“在会议中共享”按钮共享内容。这种灵活性可确保为用户提供无缝体验。	参与者可以通过深层链接或使用“在会议中共享”按钮开始共享内容。这两个选项都由你公开，从而实现无缝体验。

在以下情况下，用户可以将内容屏幕共享到会议阶段：

共享整个应用：在 Teams 会议中将选项卡共享到会议阶段时， contentUrl 将弹出与该选项卡关联的应用的新窗口，屏幕与所有其他会议参与者共享该窗口。对象 page.frameContext 中的 getContext 属性设置为， meetingStage 以向应用发出信号，指示它正在大图面上显示，从而允许应用相应地更新其内容。

注意

在清单中 getContext 对象的属性中page.frameContext指定MeetingStage并声明MeetingStage.Write.Chat权限的应用支持协作共享到阶段基础结构。共享按钮启动现有的协作协议，而不是屏幕共享协议。
将应用的特定部分共享到会议阶段：指定相应的共享协议和 appContentURL。

以下代码是将应用内容共享到会议舞台视图并在仅查看屏幕共享模式下共享内容的示例：

共享应用内容
仅查看屏幕共享

   // Share the content to meeting stage view.
    const shareSpecificAppContent = (partName) => {
        var appContentUrl = "";
        microsoftTeams.app.getContext().then((context) => {
            appContentUrl = partName == 'todo' ? `${window.location.origin}/todoView?meetingId=${context.meeting.id}` : partName == 'doing' ? `${window.location.origin}/doingView?meetingId=${context.meeting.id}` : `${window.location.origin}/doneView?meetingId=${context.meeting.id}`;
            microsoftTeams.meeting.shareAppContentToStage((err, result) => {
                if (result) {
                    // handle success
                    console.log(result);
                }

                if (err) {
                    // handle error
                    alert(JSON.stringify(err))
                }
            }, appContentUrl);
        });
    };

  // Share the content in view-only screen sharing mode.
      const shareSpecificAppContentScreenShare = (partName) => {
          var appContentUrl = "";
          microsoftTeams.app.getContext().then((context) => {
              appContentUrl = partName == 'todo' ? `${window.location.origin}/todoView?meetingId=${context.meeting.id}` : partName == 'doing' ? `${window.location.origin}/doingView?meetingId=${context.meeting.id}` : `${window.location.origin}/doneView?meetingId=${context.meeting.id}`;
              microsoftTeams.meeting.shareAppContentToStage((err, result) => {
                  if (result) {
                      // handle success
                      console.log(result);
                  }

                  if (err) {
                      // handle error
                      alert(JSON.stringify(err))
                  }
              }, appContentUrl,
                  // Optional shareOptions with sharingProtocol set to ScreenShare
                  {
                      sharingProtocol: microsoftTeams.meeting.SharingProtocol.ScreenShare
                  });
          });
      };

值	类型	必需	说明
`callback`	字符串	是	回调包含 error 和 result 两个参数。该错误可以包含 SdkError 类型的错误，也可以在共享成功时包含 null。如果共享成功，则结果可以包含 true 值，或者在共享失败时为 null。
`appContentURL`	字符串	是	在舞台上共享的 URL。
`shareOptions`	Object	否	定义其他共享选项。
`shareOptions.sharingProtocol`	枚举	否	屏幕共享协议。支持的值为 `Collaborative` 和 `ScreenShare`。默认值为“`Collaborative`”。

有关参数的详细信息，请参阅 shareAppContentToStage。

注意

如果属性的值sharingProtocol设置为 screenShare，则无需在清单的对象中getContext设置MeetingStage。 Resource-Specific 同意 (RSC) 权限在 API 的应用清单 shareAppContentToStage 中是必需的，无论使用的值如何 sharingProtocol 。

应用场景

应用场景	示例
Sales Enablement 应用	Contoso 的销售代表 Phoebe 将 Sales enablement 应用固定到他即将与 NorthWest 人力资源副总裁 Nicolette 的会面中。会议期间，Phoebe 打开“销售支持”应用侧面板，并看到可在会议中共享的预制内容列表，以帮助他的销售宣传。 Nicolette 可以使用 Teams 会议窗口中的内容，并根据显示的内容提问。
Contoso Cloud Board	Demet 是 Contoso 的技术项目经理，可帮助组织内各个团队的每日 Scrum 会议。对于每个 scrum，他都会将 Pod 相关板固定为选项卡到站立会议。会议期间，他打开 Contoso 应用的侧面板，并选择侧面板中提供的“共享”按钮。这允许董事会接管所有参与者的会议阶段，以便每个人都查看同一个板。当每个成员共享其更新时，Demet 在冲刺板中进行了适当的更改，随后会向所有其他与会者反映这些更改。

示例

Sales Enablement 应用

Contoso 的销售代表 Phoebe 将 Sales enablement 应用固定到他即将与 NorthWest 人力资源副总裁 Nicolette 的会面中。会议期间，Phoebe 打开“销售支持”应用侧面板，并看到可在会议中共享的预制内容列表，以帮助他的销售宣传。 Nicolette 可以使用 Teams 会议窗口中的内容，并根据显示的内容提问。

Contoso Cloud Board

Demet 是 Contoso 的技术项目经理，可帮助组织内各个团队的每日 Scrum 会议。对于每个 scrum，他都会将 Pod 相关板固定为选项卡到站立会议。会议期间，他打开 Contoso 应用的侧面板，并选择侧面板中提供的“共享”按钮。这允许董事会接管所有参与者的会议阶段，以便每个人都查看同一个板。当每个成员共享其更新时，Demet 在冲刺板中进行了适当的更改，随后会向所有其他与会者反映这些更改。

优点

你可以在更大的阶段向多个参与者显示协调的内容，获得更多的关注，并与会议生命周期更紧密地集成。
无需额外投资即可使用整个应用的基本共享。
用户可以在持续通信的上下文中使用自己喜欢的工具，从而改善会议结果。
内容在会议窗口中以内联方式显示。
具有组织者或演示者角色的用户可在所有会议侧面板上使用共享按钮。
用户可以通过深层链接或“在会议中共享”按钮启动共享。

在会议侧面板中获取应用内容

使用 sharing.history.getContent API，可以提取会议中共享的内容，并在会议侧面板中显示。

会议开始时，共享内容的应用会自动为共享内容的用户打开会议侧面板。可以调用 sharing.history.getContent API 来提取共享内容列表并将其显示在侧面板中，使其易于访问。对于即将召开的定期会议（其中已添加应用），开发人员可以调用 API 来获取要显示在应用侧面板中的最新内容。

以下代码是在会议侧面板中提取共享内容的示例：

// Define an async function
async function fetchContentDetails() {
    // Fetches a list of content details that was shared in the meeting
    const contentDetails = await microsoftTeams.sharing.history.getContent();

    // Above content details can be used to hydrate the meeting side panel 
    // to share to meeting stage

}

响应有效负载参数

下表包含响应有效负载参数：

值	类型	必需	说明
`appId`	字符串	是	要共享的应用的 ID。
`title`	字符串	是	共享内容的标题。
`contentReference`	字符串	是	共享内容的内容引用链接。
`threadId`	字符串	是	共享内容的对话 ID。
`author`	字符串	是	共享内容的用户的 ID。
`contentType`	字符串	是	共享的内容类型。若要共享到 Teams 阶段方案，此值必须为 `ShareToStage`。

响应代码

下表列出了响应代码：

响应代码	说明
200	已成功检索会议内容详细信息。
500	内部错误。
501	当前上下文中不支持 API。

有关详细信息，请参阅 sharing.history.getContent。

生成会议中文档签名应用

可以生成会议内应用，使会议参与者能够实时对文档进行签名。它有助于在单个会话中查看和签名文档。参与者可以使用其当前租户标识对文档进行签名。

可以使用会议内签名应用来：

添加在会议期间要审阅的文档。
共享要审阅到main阶段的文档。
使用签名者的标识对文档进行签名。

参与者可以查看和签署文档，例如购买协议和采购订单。

显示会议内文档签名应用的屏幕截图

会议期间可能会涉及以下参与者角色：

文档创建者：此角色可以添加自己的文档进行审阅和签名。
签名者：此角色可以对审阅的文档进行签名。
读者：此角色可以查看添加到会议的文档。

代码示例

示例名称	Description	.NET	Node.js	清单
会议阶段示例	此示例应用在会议阶段显示一个用于协作的选项卡。此示例还将 Live Share SDK 用于协作阶段视图。	View	View	View
会议内通知	演示如何使用机器人实现会议内通知。	View	View	View
会议内文档签名	此示例应用演示如何实现文档签名 Teams 应用。包括将特定应用内容共享到阶段、Teams 单一登录 (SSO) ，以及特定于用户的 Stageview。	View	NA	NA
屏幕共享内容到阶段	此示例应用演示如何使用屏幕共享体系结构将屏幕内容共享到 Teams 中的会议阶段。	View	NA	NA

分步指南

按照分步指南生成会议内文档签名应用。

通过

为 Teams 会议阶段生成应用

应用部件清单

应用场景

优点

在会议侧面板中获取应用内容

生成会议中文档签名应用

代码示例

分步指南

另请参阅

其他资源

通过

为 Teams 会议阶段生成应用

共享到阶段

应用部件清单

高级共享到阶段 API

屏幕共享到会议的内容

应用场景

优点

在会议侧面板中获取应用内容

生成会议中文档签名应用

代码示例

分步指南

另请参阅

其他资源