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,指示要捕获哪种类型的显示界面,取值为 application 、browser、monitor、window 之一。
MediaTrackConstraints.logicalSurface
指示流中的视频是否表示逻辑显示界面(即,在屏幕上可能不完全可见,或者可能完全在屏幕外)。true 值表示要捕获逻辑显示界面。
MediaTrackSettings
一个字符串,指示当前捕获的显示界面是否包括鼠标光标,如果包括,则它是可以是仅在鼠标移动时可见还是始终可见。值为 always 、motion 或 never之一。
一个字符串,指示当前捕获的显示界面类型。取值为 application 、browser、monitor、window 之一。
一个布尔值,如果捕获的视频不直接对应单个屏幕显示区域,则值为 true。
MediaTrackSupportedConstraints
MediaTrackSupportedConstraints.cursor
一个布尔值,如果用户代理和设备支持 MediaTrackConstraints.Cursor 约束,则值为 true 。
MediaTrackSupportedConstraints.displaySurface
一个布尔值,如果当前环境支持 MediaTrackConstraints.displaySurface 约束,则值为 true。
MediaTrackSupportedConstraints.logicalSurface
一个布尔值,如果当前环境支持 MediaTrackConstraints.logicalSurface 约束,则值为 true。
字典
以下字典由屏幕捕获 API 定义。
CursorCaptureConstraint
一个枚举字符串类型,用于为设置和约束提供 cursor 属性的值。可能的取值为 always 、motion 和 never。
DisplayCaptureSurfaceType
一个枚举字符串类型,用于标识要捕获的显示界面的类型。此类型用于约束和设置对象中的 displaySurface 属性,可能的值为 application 、browser、monitor 和 window。
功能策略验证
支持功能策略的用户代理(使用 HTTP 的 Feature-Policy 标头或 <iframe> allow 属性)可以使用策略控制指令 display-capture 指定希望使用屏幕捕获 API:
<iframe allow="display-capture" src="/some-other-document.html">
默认允许列表为 self,允许文档内的任何内容使用屏幕截图。
有关如何使用功能策略的详细说明,请参阅使用功能策略。
规范
| 规范 |
|---|
| Screen Capture |