在 Web 平台上,可以通过 Screen Capture API 分享标签页、窗口和屏幕。简而言之,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 应用使用。
如果 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 应用通常最好就是避免捕获系统音频。以前,可以通过查看用户选择的显示界面,并在用户选择共享屏幕时停止播放音轨来实现此目的。但是,这会带来一个小问题:当某些用户明确选中共享系统音频的复选框,而远程参与者告诉他们没有传入音频时,他们会感到困惑。
将 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 上运行演示,以体验这些屏幕共享控件。请务必查看源代码。
浏览器支持
- 桌面版 Chrome 107 支持
displaySurface
、surfaceSwitching
和selfBrowserSurface
。
浏览器支持
- 105
- 105
- x
- x
- 桌面版 Chrome 105 中提供了
systemAudio
。
浏览器支持
- 119
- 119
- x
- x
- 桌面版 Chrome 119 中提供了
monitorTypeSurfaces
。
反馈
Chrome 团队和网络标准社区希望了解您对这些屏幕共享控件的体验。
请告诉我们设计情况
这些屏幕共享控件是否存在无法按预期运行的功能?或者是否缺少一些您需要的方法或属性来实现您的想法?对安全模型有疑问或意见?
- 在 GitHub 代码库上提交规范问题,或将您的想法添加到现有问题中。
实施时遇到了问题?
您是否发现了 Chrome 实现方面的错误?或者,实现方式是否不同于规范?
- 请访问 https://new.crbug.com 提交 bug。请务必提供尽可能详细的信息,和简单的重现说明。Glitch 非常适合共享代码。
显示支持
您打算使用这些屏幕共享控件吗?您公开提供的支持可帮助 Chrome 团队确定各项功能的优先级,并向其他浏览器供应商说明支持这些功能的重要性。
请向 @ChromiumDev 发送 Twitter 微博,告诉我们您在哪里以及如何使用它。
实用链接
- 规格
displaySurface
铺垫消息monitorTypeSurfaces
铺垫消息surfaceSwitching
铺垫消息selfBrowserSurface
铺垫消息systemAudio
铺垫消息- TAG 审核
致谢
主打图片:John Schnobrich。
感谢 Rachel Andrew 对本文进行审核。