Screen Capture API - 可以选择屏幕或一部分捕获为媒体流

屏幕捕获 API(Screen Capture API)为现有的 Media Capture 和 Streams API 添加了新功能,让用户可以选择屏幕或屏幕的一部分(例如窗口)捕获为媒体流。 然后可以通过网络记录或与其他人共享此流。

屏幕捕获 API 的概念和用法

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

要开始从屏幕捕获视频,需要在 navigator.mediaDevices 的实例上调用 getDisplayMedia()

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

getDisplayMedia() 返回的 Promise 解析为一个 MediaStream, 该 MediaStream 对采集到的媒体进行流媒体播放。

更深入地了解如何使用该接口将屏幕内容捕获为流,请参阅文章使用屏幕捕获接口)。

添加到现有接口

屏幕捕获 API 本身没有任何接口;相反,它向现有的 MediaDevices 接口添加了一个方法。

MediaDevices 接口

MediaDevices.getDisplayMedia()

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

添加到现有的字典

屏幕捕获 API 将属性添加到由其他规范定义的下列字典中。

MediaTrackConstraints

MediaTrackConstraints.cursor

一个 ConstrainDOMString,指示光标是否应包含在捕获的显示图面的流中,以及光标是否应始终可见,或者是否应仅在鼠标移动时可见。

MediaTrackConstraints.displaySurface

一个 ConstrainDOMString,指示要捕获哪种类型的显示界面,取值为 applicationbrowsermonitorwindow 之一。

MediaTrackConstraints.logicalSurface

指示流中的视频是否表示逻辑显示界面(即,在屏幕上可能不完全可见,或者可能完全在屏幕外)。true 值表示要捕获逻辑显示界面。

MediaTrackSettings

一个字符串,指示当前捕获的显示界面是否包括鼠标光标,如果包括,则它是可以是仅在鼠标移动时可见还是始终可见。值为 alwaysmotionnever之一。

一个字符串,指示当前捕获的显示界面类型。取值为 applicationbrowsermonitorwindow 之一。

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

MediaTrackSupportedConstraints

MediaTrackSupportedConstraints.cursor

一个布尔值,如果用户代理和设备支持 MediaTrackConstraints.Cursor 约束,则值为 true

MediaTrackSupportedConstraints.displaySurface

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

MediaTrackSupportedConstraints.logicalSurface

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

字典

以下字典由屏幕捕获 API 定义。

CursorCaptureConstraint

一个枚举字符串类型,用于为设置和约束提供 cursor 属性的值。可能的取值为 alwaysmotionnever

DisplayCaptureSurfaceType

一个枚举字符串类型,用于标识要捕获的显示界面的类型。此类型用于约束和设置对象中的 displaySurface 属性,可能的值为 applicationbrowsermonitorwindow

功能策略验证

支持功能策略的用户代理(使用 HTTP 的 Feature-Policy 标头或 <iframe> allow 属性)可以使用策略控制指令 display-capture 指定希望使用屏幕捕获 API:

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

默认允许列表为 self,允许文档内的任何内容使用屏幕截图。

有关如何使用功能策略的详细说明,请参阅使用功能策略

规范

规范
Screen Capture

相关链接