浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<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.
}
后续步骤
下面简要介绍了在未来如何改进网络屏幕共享功能,让您先睹为快:
反馈
Chrome 团队和网络标准社区希望了解您使用“捕获句柄”的体验。
向我们介绍设计
拍摄句柄是否有功能无法按预期运行?或者,您是否缺少实现自己的想法所需的方法或属性?对安全模型有疑问或意见?
- 在 GitHub 代码库中提交规范问题,或者添加您对现有问题的看法。
实施时遇到问题?
您在 Chrome 的实现过程中是否发现了错误?或者,实现是否与规范不同?
- 访问 https://new.crbug.com 提交 bug。请务必提供尽可能多的细节,并提供关于重现的简单说明。Glitch 非常适用于分享轻松快速的重现问题。
表示支持
您打算使用拍摄句柄吗?您的公开支持有助于 Chrome 团队确定各项功能的优先级,并向其他浏览器供应商展示支持这些功能的重要性。
请向 @ChromiumDev 发送 tweet 消息,告诉我们您在何处以及如何使用它。
实用链接
致谢
感谢 Joe Medley 审核本文。