使用 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" },
});
![显示预先选择的媒体选择工具的屏幕截图](https://developer.chrome.google.cn/static/docs/web-platform/screen-sharing-controls/image/screenshot-the-media-pic-64dafc4173b.png?authuser=5&hl=sl)
请注意,我们不提供预先选择特定窗口或屏幕的选项。这是设计使然,因为这会使 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",
});
<ph type="x-smartling-placeholder">![不含任何内容的媒体选择工具的屏幕截图](https://developer.chrome.google.cn/static/docs/web-platform/screen-sharing-controls/image/screenshot-the-media-pic-85b3c9b30c4fa.png?authuser=5&hl=sl)
请注意,显式 monitorTypeSurfaces: "exclude"
与 displaySurface: "monitor"
是互斥的。
surfaceSwitching
选项
共享整个屏幕的主要原因之一是,用户希望在使用期间能够在不同界面之间无缝切换。为了解决这个问题,Chrome 现在公开了一个按钮,让用户能够在分享不同标签页时动态切换。此“改为分享此标签页”按钮以前可供 Chrome 扩展程序使用,现在可供调用 getDisplayMedia()
的任何 Web 应用使用。
![用于在共享不同标签页之间动态切换的按钮的屏幕截图](https://developer.chrome.google.cn/static/docs/web-platform/screen-sharing-controls/image/screenshot-the-button-us-5e92f90d179ed.png?authuser=5&hl=sl)
如果 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 🦶🔫.
});
<ph type="x-smartling-placeholder">![不包含当前标签页的媒体选择器的屏幕截图](https://developer.chrome.google.cn/static/docs/web-platform/screen-sharing-controls/image/screenshot-the-media-pic-248b79ead1a5f.png?authuser=5&hl=sl)
请注意,显式 selfBrowserSurface: "exclude"
与 preferCurrentTab: true
互斥。
systemAudio
选项
getDisplayMedia()
允许捕获音频与视频。但并非所有音频的创作方式都一样。不妨考虑使用视频会议 Web 应用:
- 如果用户分享另一标签页,则也可以采集音频。
- 另一方面,系统音频包含远程参与者的音频且不应传输回它们。
日后,我们可能会从拍摄中排除某些音频来源。但就目前而言,视频会议 Web 应用通常最好只避免捕获系统音频。在此之前,可以检查用户选择的显示界面,并在用户选择共享屏幕时停止音轨。但这引发了一个小问题:某些用户在明确选中共享系统音频的复选框时,却被远程参与者告知没有音频传入,他们会感到困惑。
![具有标签页音频分享的媒体选择工具的屏幕截图](https://developer.chrome.google.cn/static/docs/web-platform/screen-sharing-controls/image/screenshots-media-picker-5a6ebb73dd84c.jpg?authuser=5&hl=sl)
将 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 团队和网络标准社区希望了解您使用这些屏幕共享控件的体验。
向我们介绍设计
这些屏幕共享控件是不是有什么功能无法正常运行?或者,您是否缺少实现自己的想法所需的方法或属性?对安全模型有疑问或意见?
- 在 GitHub 代码库中提交规范问题,或者添加您对现有问题的看法。
实施时遇到问题?
您在 Chrome 的实现过程中是否发现了错误?或者,实现是否与规范不同?
- 访问 https://new.crbug.com 提交 bug。请务必提供尽可能多的细节,并提供关于重现的简单说明。Glitch 非常适用于共享代码。
表示支持
你打算使用这些屏幕共享控件吗?您的公开支持有助于 Chrome 团队确定各项功能的优先级,并向其他浏览器供应商展示支持这些功能的重要性。
请向 @ChromiumDev 发送 tweet 消息,告诉我们您在何处以及如何使用它。
实用链接
- 规格
displaySurface
铺垫消息monitorTypeSurfaces
铺垫消息surfaceSwitching
铺垫消息selfBrowserSurface
铺垫消息systemAudio
铺垫消息- TAG 审核
致谢
主打图片:John Schnobrich。
感谢 Rachel Andrew 审核本文。