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 |