利用捕获句柄改善标签页共享体验

François Beaufort
François Beaufort
GitHub
Elad Alon

浏览器支持

  • Chrome：102。 <ph type="x-smartling-placeholder">
  • Edge：102。 <ph type="x-smartling-placeholder">
  • Firefox：不支持。 <ph type="x-smartling-placeholder">
  • Safari：不支持。 <ph type="x-smartling-placeholder">

Web 平台现在附带有 Capture Handle，该机制有助于捕获和捕获 Web 应用之间的协作。捕获句柄允许捕获 Web 应用根据工效学而自信地识别捕获的 Web 应用。（如果捕获的 Web 应用已选择启用）。

下面几个例子可以说明这样做的好处。

示例 1：如果视频会议 Web 应用截取的是演示文稿 Web 应用的呈现方式，那么视频会议 Web 应用可以向用户提供在幻灯片之间导航的控件。由于这些控件直接嵌入在视频会议 Web 应用中，因此用户无需重复切换“视频会议”标签页和“演示”标签页。减轻这一负担后，用户现在可以更专注于演示演示文稿的提供。

示例 2：“镜厅”将捕获的表面渲染回捕获的位置时发生。值得注意的是，如果用户选择截取进行视频会议的标签页，而视频会议 Web 应用呈现本地预览，则会观察到这种可怕的效果。使用捕获句柄，您可以检测并缓解自捕获问题；例如，由禁用本地预览的 Web 应用造成的。

镜厅效果的插图

关于捕获句柄

捕获句柄由两个互补部分组成：

  • 捕获的 Web 应用可以选择使用 navigator.mediaDevices.setCaptureHandleConfig() 向某些源公开某些信息。
  • 然后，捕获 Web 应用便可以使用 getCaptureHandle() 对 MediaStreamTrack 对象读取该信息。

截取的一面

Web 应用可以公开信息，供即将捕获的 Web 应用使用。为此，它会使用包含以下成员的可选对象调用 navigator.mediaDevices.setCaptureHandleConfig()：

  • handle：可以是最多 1024 个字符的任意字符串。
  • exposeOrigin：如果为 true，则捕获的 Web 应用的来源可能会公开以捕获 Web 应用。
  • permittedOrigins：有效值包括 (i) 空数组、(ii) 包含单项 "*" 的数组或 (iii) 出发地数组。如果 permittedOrigins 由单个项 "*" 组成，则 CaptureHandle 可由所有捕获的 Web 应用观察。否则，只能捕获来源为 permittedOrigins 的 Web 应用。

以下示例展示了如何将随机生成的 UUID 作为句柄公开，并向任何捕获的 Web 应用公开源站。

const config = {
  handle: crypto.randomUUID(),
  exposeOrigin: true,
  permittedOrigins: ['*'],
};
navigator.mediaDevices.setCaptureHandleConfig(config);

请注意，捕获的 Web 应用不知道是否正在捕获它。除非也就是，捕获的 Web 应用使用 CaptureHandle 信息与捕获的 Web 应用建立通信（例如，通过工作器或共享云基础架构使用消息传递）。

截图中的一面

拍摄 Web 应用会存储视频 MediaStreamTrack，并可以通过对该 MediaStreamTrack 调用 getCaptureHandle() 来读取拍摄句柄信息。如果没有可用的捕获句柄，或不允许捕获的 Web 应用进行读取，此调用将返回 null。如果有捕获句柄，并且捕获的 Web 应用已添加到 permittedOrigins，此调用将返回包含以下成员的对象：

  • handle：由捕获的 Web 应用通过 navigator.mediaDevices.setCaptureHandleConfig() 设置的字符串值。
  • origin：捕获的 Web 应用的来源（如果 exposeOrigin 设置为 true）。否则，不会进行定义。

以下示例展示了如何从视频轨道中读取捕获句柄信息。

// Prompt the user to capture their display (screen, window, tab).
const stream = await navigator.mediaDevices.getDisplayMedia();

// Check if the video track is exposing information.
const [videoTrack] = stream.getVideoTracks();
const captureHandle = videoTrack.getCaptureHandle();
if (captureHandle) {
  // Use captureHandle.origin and captureHandle.handle...
}

通过监听 MediaStreamTrack 对象上的 "capturehandlechange" 事件来监控 CaptureHandle 更改。更改会在以下情况发生：

  • 捕获的 Web 应用会调用 navigator.mediaDevices.setCaptureHandleConfig()。
  • 跨文档导航发生在捕获的 Web 应用中。
videoTrack.addEventListener('capturehandlechange', event => {
  captureHandle = event.target.getCaptureHandle();
  // Consume new capture handle...
});

安全和隐私设置

从理论上讲，通过嵌入“神奇像素”，捕获和捕获的 Web 应用之间目前是可行的例如，在捕获的 Web 应用中嵌入二维码，或在视频流中嵌入二维码。捕获句柄提供了一种更简单、更可靠且更安全的机制。它还允许捕获的 Web 应用选择受众群体 - 选择来源或整个网络。

请注意，navigator.mediaDevices.setCaptureHandleConfig() 仅适用于安全浏览环境（仅限 HTTPS）中的顶级主框架。

示例

您可以通过在 Glitch 上运行示例来使用捕获手柄。是 请务必查看源代码。

演示

部分演示位于：

功能检测

如需检查 getCaptureHandle() 是否受支持，请使用以下命令：

if ('getCaptureHandle' in MediaStreamTrack.prototype) {
  // getCaptureHandle() is supported.
}

如需检查 navigator.mediaDevices.setCaptureHandleConfig() 是否受支持，请使用以下命令：

if ('setCaptureHandleConfig' in navigator.mediaDevices) {
  // navigator.mediaDevices.setCaptureHandleConfig() is supported.
}

后续步骤

下面简要介绍了在未来如何改进网络屏幕共享功能，让您先睹为快：

  • 区域捕获将允许剪裁来自当前标签页的显示捕获的视频轨道。
  • 条件焦点将允许捕获的 Web 应用指示浏览器将焦点切换到捕获的显示表面，或避免此类焦点更改。

反馈

Chrome 团队和网络标准社区希望了解您使用“捕获句柄”的体验。

向我们介绍设计

拍摄句柄是否有功能无法按预期运行？或者，您是否缺少实现自己的想法所需的方法或属性？对安全模型有疑问或意见？

  • 在 GitHub 代码库中提交规范问题，或者添加您对现有问题的看法。

实施时遇到问题？

您在 Chrome 的实现过程中是否发现了错误？或者，实现是否与规范不同？

  • 访问 https://new.crbug.com 提交 bug。请务必提供尽可能多的细节，并提供关于重现的简单说明。Glitch 非常适用于分享轻松快速的重现问题。

表示支持

您打算使用拍摄句柄吗？您的公开支持有助于 Chrome 团队确定各项功能的优先级，并向其他浏览器供应商展示支持这些功能的重要性。

请向 @ChromiumDev 发送 tweet 消息，告诉我们您在何处以及如何使用它。

致谢

感谢 Joe Medley 审核本文。