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

François Beaufort

Elad Alon

借助 Screen Capture API，您已经可以在 Web 平台上共享标签页、窗口和屏幕。简而言之，getDisplayMedia() 允许用户选择一个屏幕或屏幕的一部分（例如窗口）以作为媒体流进行截取。然后，您可以录制此数据流，或通过网络与他人分享。我们最近对该 API 进行了一些更改，以更好地保护隐私，并防止意外分享个人信息。

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

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

对 getDisplayMedia() 的更改

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

displaySurface 选项

具有专门用户体验历程的 Web 应用（最适合分享窗口或屏幕）仍可要求 Chrome 在媒体选择器中更醒目地显示窗口或屏幕。商品的排序保持不变，但系统会预先选择相关窗格。

displaySurface 选项的值如下：

• "browser"（用于标签页）。
• "window"（适用于 Windows）。
• "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 应用都可以使用该按钮。

Chrome 中的“改为分享此标签页”按钮。

如果 surfaceSwitching 设置为 "include"，浏览器将会显示该按钮。如果设置为 "exclude"，系统将不会向用户显示该按钮。建议网站应用设置显式值，因为 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 应用通常最好避免捕获系统音频。以前，可以通过检查用户选择的显示屏表面，并在用户选择共享屏幕时停止音轨来实现此目的。不过，这会引发一个小问题，即当部分用户明确选中用于共享系统音频的复选框，然后远程参与者告知他们没有收到音频时，他们会感到困惑。

“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 中可用。

浏览器支持

• 105
• 105
• x
• x

• systemAudio 适用于桌面版 Chrome 105。

浏览器支持

• 119
• 119
• x
• x

• monitorTypeSurfaces 适用于桌面版 Chrome 119。

反馈

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

请说明设计

屏幕共享控件是否有任何方面未按预期运行？或者，您是否缺少实现想法所需的方法或属性？对安全模型有疑问或意见？

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

实现方面存在问题？

您是否发现了 Chrome 实现中的 bug？或者实现与规范不同？

• 请访问 https://new.crbug.com 提交 bug。请务必提供尽可能详细的信息，并附上简单的重现说明。Glitch 非常适合分享代码。

表达支持

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

向 @ChromiumDev 发推文，告诉我们您在哪里以及如何使用它。

实用链接

• 规格
• displaySurface 说明
• monitorTypeSurfaces 说明
• surfaceSwitching 说明
• selfBrowserSurface 说明
• systemAudio 说明
• 代码审核

致谢

感谢 Rachel Andrew 审核