可保护隐私的屏幕共享控件

François Beaufort

Elad Alon

使用 Screen Capture API 可以在网络平台上共享标签页、窗口和屏幕。简而言之，getDisplayMedia() 允许用户选择要作为媒体流捕获的屏幕或屏幕部分（例如窗口）。然后，您可以录制此直播，也可以通过网络与他人分享。本文介绍了最近对该 API 进行的一些更改，以便更好地保护隐私并防止意外分享个人信息。

下面列出了可用于保护隐私的屏幕共享控件：

• displaySurface 选项可以指示 Web 应用倾向于提供特定的显示 surface 类型（标签页、窗口或屏幕）。
• monitorTypeSurfaces 选项可用于防止用户共享整个屏幕。
• surfaceSwitching 选项用于指明 Chrome 是否应允许用户在共享标签页之间动态切换。
• selfBrowserSurface 选项可用于禁止用户分享当前标签页。这可避开“镜厅”效果。
• systemAudio 选项可确保 Chrome 仅向用户提供相关的音频捕获功能。

对 getDisplayMedia() 的更改

我们已对 getDisplayMedia() 进行了以下更改。

displaySurface 选项

具有专门用户体验历程的 Web 应用最适合用于共享窗口或屏幕，但仍可以请求 Chrome 在媒体选择工具中以更显眼的方式提供窗口或屏幕。优惠的顺序保持不变，但相关窗格会预先选定。

displaySurface 选项的值为：

• "browser" 表示标签页。
• "window" 表示窗口。
• "monitor" 适用于屏幕。

const stream = await navigator.mediaDevices.getDisplayMedia({
  // Pre-select the "Window" pane in the media picker.
  video: { displaySurface: "window" },
});

“窗口”窗格。

请注意，我们不提供预先选择特定窗口或屏幕的选项。这是设计使然，因为这会使 Web 应用对用户拥有过多的能力。

monitorTypeSurfaces 选项

为了防止公司信息因员工错误而泄露，视频会议 Web 应用现在可以将 monitorTypeSurfaces 设为 "exclude"。然后，Chrome 会在媒体选择器中排除屏幕。若要添加此属性，请将其设置为 "include"。目前，monitorTypeSurfaces 的默认值为 "include"，但我们建议 Web 应用明确设置此值，因为此默认值将来可能会发生变化。

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  // Remove the "Entire Screen" pane in the media picker.
  monitorTypeSurfaces: "exclude",
});

“整个屏幕”窗格不会显示在媒体选择器中。

请注意，显式 monitorTypeSurfaces: "exclude" 与 displaySurface: "monitor" 是互斥的。

surfaceSwitching 选项

共享整个屏幕的主要原因之一是，用户希望在使用期间能够在不同界面之间无缝切换。为了解决这个问题，Chrome 现在公开了一个按钮，让用户能够在分享不同标签页时动态切换。此“改为分享此标签页”按钮以前可供 Chrome 扩展程序使用，现在可供调用 getDisplayMedia() 的任何 Web 应用使用。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> “改为分享此标签页”按钮。

如果 surfaceSwitching 设置为 "include"，浏览器将公开上述按钮。如果设置为 "exclude"，系统将不会向用户显示该按钮。我们建议 Web 应用设置明确的值，因为 Chrome 可能会随时间更改默认值。

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  // Ask Chrome to expose browser-level UX elements that allow
  // the user to switch the underlying track at any time,
  // initiated by the user and without prior action by the web app.
  surfaceSwitching: "include"
});

selfBrowserSurface 选项

在视频会议场景中，用户经常错误地选择“视频会议”标签页本身，从而导致出现“镜厅”的样子效果、吼叫声和一般的混乱。

为保护用户免受自身影响，视频会议 Web 应用现在可以将“selfBrowserSurface”设为“"exclude"”。这样，Chrome 就会从向用户提供的标签页列表中排除当前标签页。若要添加此属性，请将其设置为 "include"。目前，selfBrowserSurface 的默认值为 "exclude"，但我们建议 Web 应用明确设置此值，因为此默认值将来可能会发生变化。

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  selfBrowserSurface: "exclude"  // Avoid 🦶🔫.
});

当前标签页已被排除，仅第二个标签页出现。

请注意，显式 selfBrowserSurface: "exclude" 与 preferCurrentTab: true 互斥。

systemAudio 选项

getDisplayMedia() 允许捕获音频与视频。但并非所有音频的创作方式都一样。不妨考虑使用视频会议 Web 应用： - 如果用户分享另一标签页，则也可以采集音频。 - 另一方面，系统音频包含远程参与者的音频且不应传输回它们。

日后，我们可能会从拍摄中排除某些音频来源。但就目前而言，视频会议 Web 应用通常最好只避免捕获系统音频。在此之前，可以检查用户选择的显示界面，并在用户选择共享屏幕时停止音轨。但这引发了一个小问题：某些用户在明确选中共享系统音频的复选框时，却被远程参与者告知没有音频传入，他们会感到困惑。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> “Chrome 标签页”中提供了分享标签页中的音频功能窗格，但不是在“整个屏幕”中窗格。

通过将 systemAudio 设置为 "exclude"，Web 应用可以避免因信号混淆而让用户感到困惑。Chrome 将主动询问能否在标签页和窗口旁边采集音频，但不会在屏幕旁边采集音频。

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  audio: true,           // Ask to capture audio; caveat follows.
  systemAudio: "exclude" // Do not offer to capture *system* audio.
});

目前，systemAudio 的默认值为 "include"，但建议 Web 应用明确设置此值，因为此默认值将来可能会发生变化。

演示

您可以通过运行 Glitch 上的演示来试用这些屏幕共享控件。请务必查看源代码。

浏览器支持

• displaySurface、surfaceSwitching 和 selfBrowserSurface 适用于桌面版 Chrome 107。

浏览器支持

• <ph type="x-smartling-placeholder"></ph> 105
• <ph type="x-smartling-placeholder"></ph> 105
• <ph type="x-smartling-placeholder"></ph> 倍
• <ph type="x-smartling-placeholder"></ph> 倍

• systemAudio 适用于桌面版 Chrome 105。

浏览器支持

• <ph type="x-smartling-placeholder"></ph> 119
• <ph type="x-smartling-placeholder"></ph> 119
• <ph type="x-smartling-placeholder"></ph> 倍
• <ph type="x-smartling-placeholder"></ph> 倍

• monitorTypeSurfaces 可在桌面版 Chrome 119 中使用。

反馈

Chrome 团队和网络标准社区希望了解您使用这些屏幕共享控件的体验。

向我们介绍设计

这些屏幕共享控件是否有什么无法按预期运行？或者，您是否缺少实现自己的想法所需的方法或属性？对安全模型有疑问或意见？

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

实施时遇到问题？

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

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

表示支持

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

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

实用链接

• 规格
• displaySurface铺垫消息
• monitorTypeSurfaces铺垫消息
• surfaceSwitching铺垫消息
• selfBrowserSurface铺垫消息
• systemAudio铺垫消息
• TAG 审核

致谢

主打图片：John Schnobrich。

感谢 Rachel Andrew 审核本文。