屏幕捕获 API

屏幕捕获 API 使用起来相对简单。其唯一方法是 MediaDevices.getDisplayMedia()，其作用是要求用户选择要以 MediaStream 格式捕获的屏幕或屏幕的一部分。

要开始从屏幕捕获视频，请在 navigator.mediaDevices 上调用 getDisplayMedia()

captureStream =
  await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);

getDisplayMedia() 返回的 Promise 解析为一个 MediaStream，该流传输捕获的媒体。

有关如何使用 API 将屏幕内容捕获为流的更深入了解，请参阅文章 使用屏幕捕获 API。

CaptureController

提供可用于进一步操作捕获会话的方法，这些方法独立于通过 MediaDevices.getDisplayMedia() 启动捕获会话。CaptureController 对象与捕获会话相关联，方法是将其作为选项对象的 controller 属性的值传递到 getDisplayMedia() 调用中。

MediaDevices.getDisplayMedia()

getDisplayMedia() 方法已添加到 MediaDevices 接口。类似于 getUserMedia()，此方法创建一个 promise，该 promise 解析为一个 MediaStream，其中包含用户选择的显示区域，格式与指定的选项匹配。

屏幕捕获 API 向其他规范定义的以下字典添加了属性。

MediaTrackConstraints.displaySurface

一个 ConstrainDOMString，指示要捕获哪种类型的显示表面。该值为 browser、monitor 或 window 之一。

MediaTrackConstraints.logicalSurface

指示流中的视频是否表示逻辑显示表面（即可能并非完全可见于屏幕上或可能完全位于屏幕外）。值为 true 表示要捕获逻辑显示表面。

MediaTrackConstraints.suppressLocalAudioPlayback

控制当捕获选项卡时，选项卡中播放的音频是否继续从用户的本地扬声器播放，或者是否将其抑制。值为 true 表示将被抑制。

MediaTrackSettings.cursor

一个字符串，指示当前捕获的显示表面是否包含鼠标光标，如果包含，则指示它仅在鼠标移动时可见还是始终可见。该值为 always、motion 或 never 之一。

MediaTrackSettings.displaySurface

一个字符串，指示当前捕获的显示表面的类型。该值为 browser、monitor 或 window 之一。

MediaTrackSettings.logicalSurface

一个布尔值，如果捕获的视频不直接对应于单个屏幕显示区域，则为 true。

MediaTrackSettings.suppressLocalAudioPlayback

一个布尔值，如果捕获的音频未从用户的本地扬声器播放，则为 true。

MediaTrackSupportedConstraints.displaySurface

一个布尔值，如果当前环境支持 MediaTrackConstraints.displaySurface 约束，则为 true。

MediaTrackSupportedConstraints.logicalSurface

一个布尔值，如果当前环境支持约束 MediaTrackConstraints.logicalSurface，则为 true。

MediaTrackSupportedConstraints.suppressLocalAudioPlayback

一个布尔值，如果当前环境支持约束 MediaTrackConstraints.suppressLocalAudioPlayback，则为 true。

支持 用户代理 的 权限策略（使用 HTTP Permissions-Policy 标头或 <iframe> 属性 allow）可以指定使用屏幕捕获 API 的意图，使用指令 display-capture

<iframe allow="display-capture" src="/some-other-document.html">…</iframe>

默认允许列表为 self，它允许同一来源中的任何内容使用屏幕捕获。

• 使用屏幕捕获 API
• MediaDevices.getDisplayMedia()