MediaStream Image Capture API 用于管理和配置从照相设备中拍照或录像，同时支持获取一些设备参数，如图像大小、红眼模式以及闪光灯模式等

初始化

调用 ImageCapture() 构造方法创建一个图像捕获器

需要传入一个 MediaStreamTrack 参数，作为目标进行捕获的视频轨道

若传入的参数表示一个视频轨道，即其 kind 属性为 video，抛出 NotSupportedError 异常

可以调用 MediaDevices 接口的 getUserMedia() 方法从媒体设备获取到媒体流，随后调用 MediaStream 接口的 getVideoTracks() 方法获取到对应媒体流的视频轨道，并将此作为参数传入 ImageCapture() 构造方法

创建后，传入的 MediaStreamTrack 参数可以通过实例的 track 只读属性获取到其引用

拍照

调用 ImageCapture 接口的 takePhoto() 方法进行拍照

方法传入一个可选的表示照相配置项的对象参数，其属性如下：

• redEyeReduction 参数接收一个布尔值，表示相机是否启用了红眼模式

• imageHeight 参数接收一个数字，表示相机设备提供的照片高度

• imageWidth 参数接收一个数字，表示相机设备提供的照片宽度

• fillLightMode 参数接收一个字符串，值为 auto off flash 之一，表示相机启用的闪光模式

方法返回一个兑现一个 Blob 实例的 Promise

调用 ImageCapture 接口的 grabFrame() 方法进行截取快照

方法返回一个兑现一个 ImageBitmap 实例的 Promise

两方法在当前传输视频轨道的 readyState 不为 live，抛出 InvalidStateError 异常

两方法在因为其他未知原因无法完成操作，抛出 UnknownError 异常

参数及配置

调用 ImageCapture 接口的 getPhotoCapabilities() 方法获取允许配置的范围及设定，返回一个对象

• redEyeReduction 属性返回一个字符串，值为 never always controllable 之一，表示相机目前的红眼模式设定

• imageHeight 属性返回一个对象，包含 min max step 等属性，表示相机设备支持的照片高度范围

• imageWidth 属性返回一个对象，包含 min max step 等属性，表示相机设备支持的照片宽度范围

• fillLightMode 属性返回一个字符串数组，数组各项为 auto off flash 之一且不会重复，表示相机支持的闪光模式

调用 ImageCapture 接口的 getPhotoSettings() 方法获取目前的配置，返回一个对象

• redEyeReduction 属性返回一个布尔值，表示相机是否启用了红眼模式

• imageHeight 属性返回一个数字，表示相机设备提供的照片高度

• imageWidth 属性返回一个数字，表示相机设备提供的照片宽度

• fillLightMode 属性返回一个字符串，值为 auto off flash 之一，表示相机启用的闪光模式

两方法在当前传输视频轨道的 readyState 不为 live，抛出 InvalidStateError 异常

两方法在因为其他未知原因无法完成操作，抛出 OperationError 异常

相关参数

• whiteBalanceMode 参数，表示白平衡模式，值为 auto manual single-shot continuous 之一

• exposureMode 参数，表示曝光模式，值为 auto manual single-shot continuous 之一

• focusMode 参数，表示对焦模式，值为 auto manual single-shot continuous 之一

• pointsOfInterest 参数，表示兴趣点/测光中心（通过自动对焦、自动曝光、自动白平衡调整），值为一个 Point2D 数组

• exposureCompensation 参数，表示曝光补偿，值为一个数值

• exposureTime 参数，表示曝光时间，值为一个数值

• colorTemperature 参数，表示色温，值为一个数值

• iso 参数，表示 ISO 感光度，值为一个数值

• brightness 参数，表示亮度，值为一个数值

• contrast 参数，表示对比度，值为一个数值

• saturation 参数，表示饱和度，值为一个数值

• sharpness 参数，表示清晰度，值为一个数值

• focusDistance 参数，表示焦距，值为一个数值

• pan 参数，表示平移，值为一个数值

• tilt 参数，表示倾斜，值为一个数值

• zoom 参数，表示变焦比例，值为一个数值

• torch 参数，表示补光模式，值为一个布尔值

这些参数被拓展至以下一些结构：

• MediaTrackSupportedConstraints 结构
• MediaTrackConstraintSet 结构（从而拓展至 MediaTrackConstraints 结构）
• MediaTrackSettings 结构
• MediaTrackCapabilities（不含 pointsOfInterest 参数）结构

这些参数在图片捕获的媒体流中可用

类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

interface ImageCapture {
  takePhoto(photoSettings?: PhotoSettings): Promise<Blob>
  getPhotoCapabilities(): Promise<PhotoCapabilities>
  getPhotoSettings(): Promise<PhotoSettings>

  grabFrame(): Promise<ImageBitmap>

  readonly track: MediaStreamTrack
}

declare var ImageCapture: {
  prototype: ImageCapture
  new (videoTrack: MediaStreamTrack): ImageCapture
}

interface PhotoCapabilities {
  redEyeReduction: RedEyeReduction
  imageHeight: MediaSettingsRange
  imageWidth: MediaSettingsRange
  fillLightMode: FillLightMode[]
}

interface PhotoSettings {
  fillLightMode: FillLightMode
  imageHeight: number
  imageWidth: number
  redEyeReduction: boolean
}

interface MediaSettingsRange {
  max: number
  min: number
  step: number
}

type RedEyeReduction = "never" | "always" | "controllable"
type FillLightMode = "auto" | "off" | "flash"

interface MediaTrackSupportedConstraints {
  whiteBalanceMode?: boolean
  exposureMode?: boolean
  focusMode?: boolean
  pointsOfInterest?: boolean
  exposureCompensation?: boolean
  exposureTime?: boolean
  colorTemperature?: boolean
  iso?: boolean
  brightness?: boolean
  contrast?: boolean
  saturation?: boolean
  sharpness?: boolean
  focusDistance?: boolean
  pan?: boolean
  tilt?: boolean
  zoom?: boolean
  torch?: boolean
}

interface MediaTrackCapabilities {
  whiteBalanceMode?: string[]
  exposureMode?: string[]
  focusMode?: string[]
  exposureCompensation?: MediaSettingsRange
  exposureTime?: MediaSettingsRange
  colorTemperature?: MediaSettingsRange
  iso?: MediaSettingsRange
  brightness?: MediaSettingsRange
  contrast?: MediaSettingsRange
  saturation?: MediaSettingsRange
  sharpness?: MediaSettingsRange
  focusDistance?: MediaSettingsRange
  pan?: MediaSettingsRange
  tilt?: MediaSettingsRange
  zoom?: MediaSettingsRange
  torch?: boolean[]
}

interface MediaTrackConstraintSet {
  whiteBalanceMode?: ConstrainDOMString
  exposureMode?: ConstrainDOMString
  focusMode?: ConstrainDOMString
  pointsOfInterest?: ConstrainPoint2D
  exposureCompensation?: ConstrainDouble
  exposureTime?: ConstrainDouble
  colorTemperature?: ConstrainDouble
  iso?: ConstrainDouble
  brightness?: ConstrainDouble
  contrast?: ConstrainDouble
  saturation?: ConstrainDouble
  sharpness?: ConstrainDouble
  focusDistance?: ConstrainDouble
  pan?: ConstrainDouble | boolean
  tilt?: ConstrainDouble | boolean
  zoom?: ConstrainDouble | boolean
  torch?: ConstrainBoolean
}

interface MediaTrackSettings {
  whiteBalanceMode?: string
  exposureMode?: string
  focusMode?: string
  pointsOfInterest?: Point2D[]
  exposureCompensation?: number
  exposureTime?: number
  colorTemperature?: number
  iso?: number
  brightness?: number
  contrast?: number
  saturation?: number
  sharpness?: number
  focusDistance?: number
  pan?: number
  tilt?: number
  zoom?: number
  torch?: boolean
}

interface ConstrainPoint2DParameters {
  exact: Point2D[]
  ideal: Point2D[]
}

type ConstrainPoint2D = Point2D[] | ConstrainPoint2DParameters

type MeteringMode = "none" | "manual" | "single-shot" | "continuous"

interface Point2D {
  x?: number
  y?: number
}

链接

• https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Image_Capture_API
• https://w3c.github.io/mediacapture-image/

MediaStream Recording API 支持实现录制视频流的功能，录制的数据可以用于进一步分析、处理并保存至硬盘

该 API 主要通过 MediaRecorder 接口提供相关的功能

初始化录制

调用 MediaRecorder() 构造方法以创建一个录制器

需要传入一个 stream 参数，接收一个 MediaStream 实例，代表需要录制的媒体流

此外可以传入一个可选的配置项参数，具体属性如下：

• mimeType 参数接收一个字符串，需要为一个合法的 MIME 媒体类型，同时允许指定额外的编码格式，默认值为空字符串
• audioBitsPerSecond 参数接收一个正整数，指定录制音频的比特率
• videoBitsPerSecond 参数接收一个正整数，指定录制视频的比特率
• bitsPerSecond 参数接收一个正整数，指定默认比特率，若 audioBitsPerSecond 或 videoBitsPerSecond 未指定，对应的轨道采样率将会采用
• audioBitrateMode 参数，指定录制音频的比特率模式，值为 constant（恒定比特率）或 variable（变化比特率），默认为 variable
• videoKeyFrameIntervalDuration 参数接收一个时间戳，指定关键帧之间标称时间间隔，用户代理在生成关键帧时会综合考虑该参数与 videoKeyFrameIntervalCount 参数
• videoKeyFrameIntervalCount 参数接收一个正整数，指定关键帧之间帧数间隔，用户代理在生成关键帧时会综合考虑该参数与 videoKeyFrameIntervalDuration 参数

若传递的 mimeType 参数当前不受用户代理支持，抛出 NotSupportedError 异常

检测编码格式

MediaRecorder 接口的 isTypeSupported() 静态方法检测 MIME 媒体类型是否支持，即指定的 MIME 媒体类型以及编码格式能否使得用户代理成功进行录制

该方法接收一个字符串，代表需要检测的 MIME 媒体类型以及编码格式

该方法返回一个布尔值，指示该类型是否支持

开始录制

调用 MediaRecorder 接口的 start() 方法开始录制

默认会将捕获的数据放入到一个 Blob 实例中并在录制结束时通过 dataavailable 事件返回，或在调用 requestData() 方法时返回

可以可选的传入一个数字参数，指定单段记录的最长时间；此情况下会周期性地触发 dataavailable 事件，并返回在这个周期中录制的数据

若所在 MediaRecorder 实例的 state 属性不为 inactive，即已开始录制或已暂停录制时，抛出 InvalidStateError 异常

若媒体流的配置禁止录制，抛出 SecurityError 异常

若媒体流处于 inactive 状态；或 MediaRecorder 实例的 videoKeyFrameIntervalDuration 参数与 videoKeyFrameIntervalCount 参数均指定；或任一媒体流中的媒体轨道不支持使用当前配置进行录制，抛出 NotSupportedError 异常

MediaRecorder 接口的 start 事件在开始录制时触发，返回一个 Event 事件，如调用 MediaRecorder.start() 方法

暂停录制

调用 MediaRecorder 接口的 pause() 方法暂停录制

若所在 MediaRecorder 实例的 state 属性为 inactive，即未开始录制或已终止录制时，抛出 InvalidStateError 异常

调用 pause() 方法后，会先改变 state 属性，最后触发 pause 事件

MediaRecorder 接口的 pause 事件在结束录制时触发，返回一个 Event 事件，如调用 MediaRecorder.pause() 方法

恢复录制

调用 MediaRecorder 接口的 resume() 方法恢复录制

若所在 MediaRecorder 实例的 state 属性不为 inactive，即已开始录制或已暂停录制时，抛出 InvalidStateError 异常

调用 resume() 方法后，会先改变 state 属性，最后触发 resume 事件

MediaRecorder 接口的 resume 事件在结束录制时触发，返回一个 Event 事件，如调用 MediaRecorder.resume() 方法

结束录制

调用 MediaRecorder 接口的 stop() 方法终止录制

若所在 MediaRecorder 实例的 state 属性为 inactive，即未开始录制或已终止录制时，抛出 InvalidStateError 异常异常

调用 stop() 方法后，会先改变 state 属性，然后触发 dataavailable 事件，最后触发 stop 事件

MediaRecorder 接口的 stop 事件在结束录制时触发，返回一个 Event 事件，如调用 MediaRecorder.stop() 方法或录制中的媒体流结束；在触发此事件前触发一个 dataavailable 事件

接收数据

调用 MediaRecorder 接口的 requestData() 方法用于立即触发一个 dataavailable 事件

若所在 MediaRecorder 实例的 state 属性为 inactive，即未开始录制或已终止录制时，抛出 InvalidStateError 异常

MediaRecorder 接口的 dataavailable 事件在录制过程中产生数据时触发，返回一个 BlobEvent 事件，可能原因有：媒体流终止、调用 requestData() 方法或 stop() 方法、调用 start() 方法时传递了 timeslice 参数

BlobEvent 事件结构：

data 只读属性，表示与事件相关的二进制数据

timecode 只读属性，表示生成首个 chunk 和触发 BlobEvent 事件的时间差

异常处理

MediaRecorder 接口的 error 事件在录制过程中出现异常时触发

触发 error 事件后，会接着触发 dataavailable 事件，最后触发 stop 事件

若媒体流的配置发生变化导致无法继续录制，通过 error 事件抛出 SecurityError 异常

若媒体流增删媒体轨道，通过 error 事件抛出 InvalidModificationError 异常

若因为其他未知原因无法继续录制，通过 error 事件抛出 UnknownError 异常

录制状态

MediaRecorder 接口的 state 只读属性返回一个字符串，表示当前录制的状态，值可以为如下之一：

• inactive 表示录制事件未发生，如尚未开始录制或录制已终止
• recording 表示录制已经开始并且用户代理正在捕获数据
• paused 表示录制已经开始，但目前被暂停，但未终止或恢复

录制信息

MediaRecorder 接口的 stream 只读属性返回一个 MediaStream，表示正在录制的目标媒体流，即初始化时传入的 stream 参数

MediaRecorder 接口的 mimeType 只读属性返回一个字符串，指示正在录制的 MIME 类型，与初始化时传入的 mimeType 参数相关或由用户代理决定

MediaRecorder 接口的 audioBitsPerSecond 只读属性返回一个正整数，指示录制音频的比特率

MediaRecorder 接口的 videoBitsPerSecond 只读属性返回一个正整数，指示录制视频的比特率

MediaRecorder 接口的 audioBitrateMode 只读属性返回一个 constant 或 variable 之一，指示录制音频的比特率模式

类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

interface MediaRecorder extends EventTarget {
  readonly audioBitsPerSecond: number
  readonly mimeType: string
  readonly state: RecordingState
  readonly stream: MediaStream
  readonly videoBitsPerSecond: number
  pause(): void
  requestData(): void
  resume(): void
  start(timeslice?: number): void
  stop(): void
  ondataavailable: ((this: MediaRecorder, ev: BlobEvent) => any) | null
  onerror: ((this: MediaRecorder, ev: Event) => any) | null
  onpause: ((this: MediaRecorder, ev: Event) => any) | null
  onresume: ((this: MediaRecorder, ev: Event) => any) | null
  onstart: ((this: MediaRecorder, ev: Event) => any) | null
  onstop: ((this: MediaRecorder, ev: Event) => any) | null
}

declare var MediaRecorder: {
  prototype: MediaRecorder
  new(stream: MediaStream, options?: MediaRecorderOptions): MediaRecorder
  isTypeSupported(type: string): boolean
}

interface MediaRecorderOptions {
  audioBitsPerSecond?: number
  bitsPerSecond?: number
  mimeType?: string
  videoBitsPerSecond?: number
}

type RecordingState = "inactive" | "paused" | "recording"

interface BlobEvent extends Event {
  readonly data: Blob
  readonly timecode: DOMHighResTimeStamp
}

declare var BlobEvent: {
  prototype: BlobEvent
  new(type: string, eventInitDict: BlobEventInit): BlobEvent
}

interface BlobEventInit {
  data: Blob
  timecode?: DOMHighResTimeStamp
}

链接

• https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API
• https://w3c.github.io/mediacapture-record/

Save Data API 向网站提供用户是否倾向于节省流量使用的功能

使用

NetworkInformation 接口的 saveData 属性表示当前的用户是否倾向于节省流量使用

或通过 Save-Data 请求头获取，值为 on 或 off，该请求头是一个 Client Hint 头

类型

1
2
3

interface NetworkInformation {
  readonly saveData: boolean
}

链接

• https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API
• https://wicg.github.io/savedata/

Screen Capture API 允许网站捕获屏幕共享媒体流，实现共享屏幕功能

使用

调用 MediaDevices 接口的 getDisplayMedia() 方法捕获屏幕共享媒体流

方法可以传递一个可选的配置项参数，参数结构如下：

• video 参数，同 MediaDevices 接口的 getUserMedia() 方法，默认为 true
• audio 参数，同 MediaDevices 接口的 getUserMedia() 方法，默认为 false
• controller 参数，接收一个 CaptureController 对象，可用于进一步操作捕获会话
• preferCurrentTab 参数，接收一个布尔值，表示是否将当前标签页设置为最突出的选择
• selfBrowserSurface 参数，接收 exclude 或 include 之一，指示是否应当允许捕获当前标签页，默认为 exclude
• systemAudio 参数，接收 exclude 或 include 之一，指示是否应当包含系统音频，默认为 include
• surfaceSwitching 参数，接收 exclude 或 include 之一，指示是否应当显示动态切换共享标签页的控件，默认为 exclude
• monitorTypeSurfaces 参数，接收 exclude 或 include 之一，指示是否应当包含显示界面，默认为 include

方法返回一个兑现一个 MediaStream 的 Promise

若 controller 参数已传递给一个屏幕媒体流，或当前未处于粘性激活状态、完全激活状态、完全聚焦状态之一，方法抛出 InvalidStateError 异常

若 video 参数被置为 false，audio 参数或 video 参数之一包含 advanced 选项或 min 属性或 exact 属性，方法抛出 TypeError 异常

若传递的限制屏幕的参数 max 的值小于可约束属性支持的下限，即此时无法捕获符合参数限制的屏幕媒体流，或应用参数限制失败，方法抛出 OverconstrainedError 异常

若无法获得对应的屏幕媒体流，方法抛出 NotFoundError 异常

若用户拒绝授权使用屏幕媒体流的权限，或用户代理网页限制使用屏幕共享，方法抛出 NotAllowedError 异常

若因为操作系统/程序/网页限制无法提供媒体流，抛出 NotReadableError 异常

若因为其他未知原因无法提供媒体流，抛出 AbortError 异常

CaptureController 简介：

可调用其构造方法创建一个 CaptureController 实例

可调用其 setFocusBehavior() 方法设置其聚焦策略，传入参数可以为 focus-captured-surface（转移焦点至捕获界面）或 no-focus-change（不转移焦点）

相关参数

• displaySurface 参数，指定显示界面的类型，值为 monitor window browser 之一
• logicalSurface 参数，指定是否为逻辑显示界面，返回一个布尔值
• cursor 参数，指定是否将光标包含在显示界面中，值为 never always motion 之一
• restrictOwnAudio 参数，控制是否尝试从移除由当前文档产生的音频，返回一个布尔值
• suppressLocalAudioPlayback 参数，控制是否将捕获的本地音频转发到本地扬声器设备，返回一个布尔值

这些参数被拓展至以下一些结构：

• MediaTrackSupportedConstraints 结构
• MediaTrackConstraintSet 结构（从而拓展至 MediaTrackConstraints 结构）
• MediaTrackSettings 结构
• MediaTrackCapabilities（不含 restrictOwnAudio 与 suppressLocalAudioPlayback 参数）结构

这些参数在屏幕共享的媒体流中可用

示例

权限策略

该 API 调用受到 display-capture 权限策略的控制，可以通过 Permissions-Policy 响应头指定，或通过 <iframe> 标签的 allow 属性指定

默认值是 self，即允许当前源的浏览上下文使用该 API

权限 API

该 API 每次调用都需要用户授予 display-capture 权限（即不会将该权限设置为 granted），可以调用 Permission.query() 方法检查用户是否拒绝授予该权限

类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

interface MediaDevices {
  getDisplayMedia(options?: DisplayMediaStreamOptions): Promise<MediaStream>
}

interface DisplayMediaStreamOptions {
  audio?: boolean | MediaTrackConstraints
  video?: boolean | MediaTrackConstraints
  controller: CaptureController
  selfBrowserSurface: SelfCapturePreferenceEnum
  systemAudio: SystemAudioPreferenceEnum
  surfaceSwitching: SurfaceSwitchingPreferenceEnum
  monitorTypeSurfaces: MonitorTypeSurfacesEnum
}

interface CaptureController extends EventTarget {
  setFocusBehavior(focusBehavior: CaptureStartFocusBehavior): void
}

declare var CaptureController: {
  prototype: CaptureController
  new(): CaptureController
}

type CaptureStartFocusBehavior = 'focus-capturing-application' | 'focus-captured-surface' | 'no-focus-change'
type SelfCapturePreferenceEnum = 'include' | 'exclude'
type SystemAudioPreferenceEnum = 'include' | 'exclude'
type SurfaceSwitchingPreferenceEnum = 'include' | 'exclude'
type MonitorTypeSurfacesEnum = 'include' | 'exclude'

interface MediaTrackSupportedConstraints {
  displaySurface?: boolean
  logicalSurface?: boolean
  cursor?: boolean
  restrictOwnAudio?: boolean
  suppressLocalAudioPlayback?: boolean
}

interface MediaTrackConstraintSet {
  displaySurface?: ConstrainDOMString
  logicalSurface?: ConstrainBoolean
  cursor?: ConstrainDOMString
  restrictOwnAudio?: ConstrainBoolean
  suppressLocalAudioPlayback?: ConstrainBoolean
}

interface MediaTrackSettings {
  displaySurface?: string
  logicalSurface?: boolean
  cursor?: string
  restrictOwnAudio?: boolean
  suppressLocalAudioPlayback?: boolean
}

interface MediaTrackCapabilities {
  displaySurface?: string
  logicalSurface?: boolean
  cursor?: string[]
}

链接

• https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API
• https://w3c.github.io/mediacapture-screen-share/

Web Locks API 允许网页中的脚本异步地使用锁以控制任务的重复执行

该 API 可通过 Navigator 接口的 locks 属性或 WorkerNavigator 接口的 locks 属性使用

概念

该 API 中锁的概念与操作系统中的锁的概念类似

获取锁后，在执行任务时保持锁，完成任务后释放锁

在锁被保持时，同域内执行的其他脚本无法获取相同的锁，而是被放到执行队列中，在当前任务完成后并且锁被释放时，队列中的任务依次执行

因此多组执行脚本不会同时执行相同的任务，可用于数据同步等功能

另外，该 API 可能会出现死锁问题，因此需要谨慎避免复杂的嵌套锁，或设置合理的超时时间，亦注意合理地排序

该 API 支持的一些功能如，从异步任务中返回值，共享锁和独占锁模式，有条件获得锁，查询当前所有锁的状态，防止死锁的逃生舱

获取锁

LockManager 接口的 request() 方法用于请求获取锁

方法传入一个 name 参数，接受一个字符串，代表锁的标识符

方法可选地传入 options 参数，接收一个对象，代表锁的配置项

配置项的 mode 选项指定锁的模式，可以为 exclusive 或 shared 之一，默认为 exclusive

exclusive 表示对应的锁单个时间段内最多只能存在一个

shared 表示对应的锁单个时间段内允许存在多个

配置项的 ifAvailable 选项指定是否在锁已被授予其他任务时继续调用，需要是一个布尔值，默认为 false

配置项的 steal 选项指定是否强制释放已被授予其他任务的锁，需要是一个布尔值，默认为 false

配置项的 signal 选项用于终止锁的请求，需要是一个 AbortSignal

方法传入一个 callback 参数，接受一个回调方法，代表锁的对应任务，在锁被授予时调用

该回调方法调用时会传入一个 Lock 实例，代表当前锁

该回调方法允许返回一个 Promise，任务执行时锁会等待 Promise 兑现或拒绝之后再释放

方法返回一个 Promise，兑现的值取决于 callback 回调方法的返回值

若当前文档未处于活跃状态，InvalidStateError 异常会被抛出

若当前环境无法获取到锁管理器，SecurityError 异常会被抛出

若 name 参数以 - 开头，或 ifAvailable 选项和 steal 选项同时指定为 true，或 steal 选项被指定为 true 并且 mode 选项被指定为 shared，或 signal 选项被指定且 ifAvailable 选项和 steal 选项之一被指定为 true，NotSupportedError 异常会被抛出

若 signal 选项被指定且已被终止，AbortError 异常会被抛出

Lock 接口

其 name 参数指代请求锁时传递的锁标识符

其 mode 参数指代请求锁时传递的锁的模式

枚举锁

LockManager 接口的 query() 方法用于枚举当前域下所有的锁的状态

返回一个 Promise，兑现一个包含 held 属性和 pending 属性的对象，分别代表保持状态的锁和锁的进行中的请求；两属性均返回一个对象数组，包含类似 Lock 对象的 name 属性和 mode 属性以及 clientId 属性，该属性与 Client 接口的 id 属性相同

该方法生成的锁的状态只是在调用时间那一刻的快照，在调用之后实际状态可能随时发生改变

若当前文档未处于活跃状态，InvalidStateError 异常会被抛出

若当前环境无法获取到锁管理器，SecurityError 异常会被抛出

类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

interface NavigatorLocks {
  readonly locks: LockManager
}

interface Navigator extends NavigatorLocks {}

interface WorkerNavigator extends NavigatorLocks {}

interface Lock {
  readonly mode: LockMode
  readonly name: string
}

declare var Lock: {
  prototype: Lock
}

interface LockManager {
  query(): Promise<LockManagerSnapshot>
  request(name: string, callback: LockGrantedCallback): Promise<any>
  request(name: string, options: LockOptions, callback: LockGrantedCallback): Promise<any>
}

declare var LockManager: {
  prototype: LockManager
}

type LockMode = "exclusive" | "shared"

interface LockGrantedCallback {
  (lock: Lock | null): any
}

interface LockInfo {
  clientId?: string
  mode?: LockMode
  name?: string
}

interface LockManagerSnapshot {
  held?: LockInfo[]
  pending?: LockInfo[]
}

interface LockOptions {
  ifAvailable?: boolean
  mode?: LockMode
  signal?: AbortSignal
  steal?: boolean
}

链接

• https://developer.mozilla.org/en-US/docs/Web/API/Web_Locks_API
• https://w3c.github.io/web-locks/

Media Capture from DOM Elements API 允许从 DOM 元素中捕获媒体流，包括 <canvas> <audio> <video> 等

从媒体元素捕获

通过调用 HTMLMediaElement 接口上的 captureStream() 方法获取到在媒体元素上展示的资源相应的媒体流

该方法返回一个 MediaStream 实例

从 <audio> 捕获时，返回的媒体流可能包含任意数量的音频轨道

从 <video> 捕获时，返回的媒体流可能包含单个视频轨道及任意数量的音频轨道

从画布元素捕获

通过调用 HTMLCanvasElement 接口上的 captureStream() 方法获取到在画布元素上展示的资源相应的媒体流

该方法传入一个可选的 frameRequestRate 参数，接收一个正数；若传入负数会抛出 NotSupportedError 异常

该方法返回一个 MediaStream 实例；特别的，返回的媒体流包含单个 CanvasCaptureMediaStreamTrack 视频轨道，提供了一些专属的属性及方法

默认在 <canvas> 元素内容更新时刷新媒体流数据，或根据 frameRequestRate 参数定时刷新媒体流数据

对于 <canvas> 元素中包含跨域的图片资源时，SecurityError 会被抛出

关于 CanvasCaptureMediaStreamTrack 接口

继承自 MediaStreamTrack 接口

其 canvas 只读属性返回与视频轨道绑定的 HTMLCanvasElement 元素

其 requestFrame()方法强制从 HTMLCanvasElement 元素捕获帧并发送到媒体流（可以利用该方法替代默认的策略，需在创建时传入参数 0）

类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

interface HTMLCanvasElement {
  captureStream(frameRequestRate?: number): MediaStream
}

interface HTMLMediaElement {
  captureStream(): MediaStream
}

interface CanvasCaptureMediaStreamTrack extends MediaStreamTrack {
  readonly canvas: HTMLCanvasElement
  requestFrame(): void
}

declare var CanvasCaptureMediaStreamTrack: {
  prototype: CanvasCaptureMediaStreamTrack
}

链接

• https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API
• https://w3c.github.io/mediacapture-fromelement/

Media Session API 允许开发者显示自定义的媒体元信息，自定义可用媒体平台控件及访问平台媒体密钥；用户代理可能会将这些信息提供给设备，便于设备媒体信息 UI 界面的展示

该 API 通过 MediaSession 接口提供相关功能，并藉由 Navigator 接口的 mediaSession 只读属性暴露 MediaSession 实例供开发者使用

媒体播放状态

MediaMetadata 接口的 playbackState 属性读取或设置媒体播放状态，值需为 none paused playing 之一

MediaMetadata 接口的 setPositionState() 方法用于设置媒体的播放状态信息，包括播放速度、播放位置和媒体总时间等

该方法传入一个 MediaPositionState 结构的对象参数

MediaPositionState 结构如下：

• duration 属性返回一个数字，代表媒体资源的播放持续时间；需要为正值，可以为正无穷以表示媒体播放没有尽头
• playbackRate 属性返回一个数字，代表媒体资源的播放速度；需要为正值
• position 属性返回一个数字，代表媒体资源的播放位置；需要不为零

媒体元信息

MediaMetadata 接口表示但个媒体元信息

该接口的 title 属性读取或设置其媒体资源的名称，为一个字符串

该接口的 artist 属性读取或设置其媒体资源的作者，团队，创建者等的名称，为一个字符串

该接口的 album 属性读取或设置其媒体资源的专辑或集合的名称，为一个字符串

该接口的 artwork 属性读取或设置其媒体资源的图片，为一个只读 MediaImage 结构的对象数组

MediaImage 结构如下：

• src 属性返回一个字符串，代表图片的 URL
• sizes 可选属性返回一个字符串，代表图片的尺寸，默认为空字符串，可用于避免用户代理不必要地缩放图像
• type 可选属性返回一个字符串，代表图片的 MIME 类型，默认为空字符串，可便于用户代理忽略其不支持的 MIME 类型图像

可调用 MediaMetadata() 构造方法创建一个媒体元信息

构造方法可传入一个可选的对象参数，对象各参数即 MediaMetadata 接口的各属性

MediaMetadata 接口的 metadata 属性读取或设置浏览器当前播放的媒体资源，用于浏览器向用户设备提供相应信息，默认为 null

媒体设备状态

MediaMetadata 接口的 setCameraActive() 方法用于设置摄像头状态信息

MediaMetadata 接口的 setMicrophoneActive() 方法用于设置麦克风状态信息

两方法均需传入一个布尔类型的参数，表示媒体设备的状态

监听设备媒体界面控件

MediaMetadata 接口的 setActionHandler() 方法用于设置设备媒体界面控件特定事件的触发方法

方法需要传入一个字符串参数，代表需要监听的事件类型

允许的事件类型如下：

• play 开始或恢复播放
• pause 暂停播放
• seekbackward 向后移动定位
• seekforward 向前移动定位
• previoustrack 回退到上一资源
• nexttrack 前进到下一资源
• skipad 跳过广告播放，可能因为设备或用户代理设置而失败
• stop 停止播放
• seekto 移动至指定定位
• togglemicrophone 切换麦克风状态
• togglecamera 切换摄像头状态
• hangup 结束通话
• previousslide 回退至上一幻灯片
• nextslide 前进至下一幻灯片
• togglecamera 切换摄像头状态

方法需要传入一个回调函数参数，该回调函数在特定事件触发时调用，并传入一个 MediaSessionActionDetails 结构的对象参数

MediaSessionActionDetails 结构如下：

• action 属性返回一个字符串，代表特定的事件
• fastSeek 属性返回一个布尔值，代表是否采用快速媒体定位，在 action 为 seekto 时可能提供
• seekOffset 属性返回一个数字，代表媒体定位的偏移量，在 action 为 seekforward 或 seekbackward 时可能提供
• seekTime 属性返回一个数字，代表媒体定位的目标时间，在 action 为 seekto 时提供

权限策略

该 API 调用受到 mediasession 权限策略的控制，可以通过 Permissions-Policy 响应头指定，或通过 <iframe> 标签的 allow 属性指定

默认值是 *，即允许任意源的浏览上下文使用该 API

类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

interface Navigator {
  readonly mediaSession: MediaSession
}

interface MediaSession {
  metadata: MediaMetadata | null
  playbackState: MediaSessionPlaybackState
  setActionHandler(action: MediaSessionAction, handler: MediaSessionActionHandler | null): void
  setPositionState(state?: MediaPositionState): void
}

declare var MediaSession: {
  prototype: MediaSession
}

interface MediaPositionState {
  duration?: number
  playbackRate?: number
  position?: number
}

interface MediaMetadata {
  album: string
  artist: string
  artwork: ReadonlyArray<MediaImage>
  title: string
}

declare var MediaMetadata: {
  prototype: MediaMetadata
  new(init?: MediaMetadataInit): MediaMetadata
}

interface MediaMetadataInit {
  album?: string;
  artist?: string;
  artwork?: MediaImage[];
  title?: string;
}
interface MediaImage {
  sizes?: string
  src: string
  type?: string
}

type MediaSessionAction = "nexttrack" | "pause" | "play" | "previoustrack" | "seekbackward" | "seekforward" | "seekto" | "skipad" | "stop"
type MediaSessionPlaybackState = "none" | "paused" | "playing"

interface MediaSessionActionHandler {
  (details: MediaSessionActionDetails): void;
}

链接

• https://developer.mozilla.org/en-US/docs/Web/API/Media_Session_API
• https://w3c.github.io/mediasession/

Media Capture and Streams API 用于处理视频音频流，以及枚举本地媒体设备，它与 WebRTC API 息息相关

枚举本地媒体设备

该部分 API 主要提供了枚举本地媒体设备的功能，包括媒体输入设备或媒体输出设备，通过 Navigator 接口的 mediaDevices 只读属性暴露的 MediaDevices 实例使用

通过调用 MediaDevices 接口的 enumerateDevices() 方法获取本地媒体设备列表

方法返回一个 Promise 的 MediaDeviceInfo 数组

调用该方法会受到 microphone 和 camera 权限策略的限制，并且要求文档处于完全活跃状态并且当前可见

默认调用该方法仅会返回系统默认媒体设备，返回具体设备受到 microphone 与 camera 权限 API 的限制

监听本地媒体设备变化

当本地媒体设备列表改变时（如新的媒体设备连接到系统，或已有媒体设备从系统中移除），MediaDevices 接口上的 devicechange 事件会被触发，方法返回一个 Event 事件

此时可以再次调用 MediaDevices 接口的 enumerateDevices() 方法更新本地媒体设备列表

本地媒体设备信息

MediaDeviceInfo 接口表示一个本地媒体设备；特别的，InputDeviceInfo 接口表示一个本地媒体输入设备

MediaDeviceInfo 接口的 deviceId 只读属性返回一个字符串，代表本地媒体设备的唯一标识

MediaDeviceInfo 接口的 groupId 只读属性返回一个字符串，代表本地媒体设备的组标识，对于同一物理设备的不同媒体设备的该值相同

MediaDeviceInfo 接口的 kind 只读属性返回一个字符串枚举，值为 videoinput audioinput audiooutput 之一，代表本地媒体设备的类型

MediaDeviceInfo 接口的 label 只读属性返回一个字符串，代表本地媒体设备的描述，可用于向用户展示

MediaDeviceInfo 接口的 toJSON() 方法是一个序列化方法，对该媒体设备信息序列化后返回一个普通对象

InputDeviceInfo 接口的 getCapabilities() 方法描述原始音频或视频轨道的信息，返回一个 MediaTrackCapabilities 结构的对象；若未授予相应的权限，空对象将被返回

MediaTrackCapabilities 结构参见如下媒体参数章节

检测用户代理支持参数

调用 MediaDevices 接口的 getSupportedConstraints() 方法获取用户代理支持识别的参数列表，返回一个 MediaTrackSupportedConstraints 结构的对象，对象的键名为所有受支持的参数列表，键值为 true

MediaTrackSupportedConstraints 结构参见如下媒体参数章节

获取本地媒体设备输入流

调用 MediaDevices 接口的 getUserMedia() 方法从本地媒体设备获取输入流

也可以使用该方法来请求本地媒体设备的权限，包括麦克风 microphone 权限与摄像头 camera 权限

方法接收一个 MediaStreamConstraints 结构的对象

方法返回一个兑现包含 MediaStream 实例的 Promise

若未传入参数或传入对象参数包含任一 audio 参数或 video 参数，或传入对象参数包含不允许的参数，抛出 TypeError

若文档未处于完全激活状态，抛出 InvalidStateError

若请求媒体资源类型在当前浏览上下文中被阻止（如受权限策略限制），或被权限 API 拒绝，抛出 NotAllowedError

若无法获取满足条件的媒体轨道，抛出 NotFoundError

若不存在符合约束条件的候选设备，抛出 OverconstrainedError

若因为操作系统/程序/网页锁定设备导致无法从设备读取流信息，抛出 NotReadableError

若因为其他原因无法从设备读取流信息，抛出 AbortError

MediaStreamConstraints 结构如下：

audio 参数表示音频轨道相关信息，可以为一个布尔值（指定是否必须包含该轨道）或一个 MediaTrackConstraints 结构的对象

video 参数表示视频轨道相关信息，可以为一个布尔值（指定是否必须包含该轨道）或一个 MediaTrackConstraints 结构的对象

MediaTrackConstraints 结构继承自 MediaTrackConstraintSet 结构

其 advanced 参数表示一个 MediaTrackConstraintSet 结构的对象的数组

MediaTrackConstraintSet 结构参见如下媒体参数章节

OverconstrainedError 异常继承自 DOMException，常用于表示所需的功能集无法满足当前 MediaStreamTrack

其 constraint 只读属性返回一个字符串，表示未满足的约束

媒体参数

• width 参数表示视频轨道的宽度
• height 参数表示视频轨道的高度
• aspectRatio 参数表示视频轨道的宽高比
• frameRate 参数表示视频轨道的帧速
• facingMode 参数表示视频轨道的摄像头朝向参数
• resizeMode 参数表示视频轨道的可裁剪模式
• sampleRate 参数表示音频轨道的采样率
• sampleSize 参数表示音频轨道的样本大小
• echoCancellation 参数表示音频轨道的是否可进行回声消除
• autoGainControl 参数表示音频轨道的是否可进行自动增益控制
• noiseSuppression 参数表示音频轨道的是否可进行噪声抑制
• latency 参数表示音频轨道的延迟时间
• channelCount 参数表示音频轨道的通道数
• deviceId 参数表示轨道相关的 deviceId 属性
• groupId 参数表示轨道相关的 groupId 属性

这些参数可被如下一些结构使用：

• MediaTrackSupportedConstraints 结构，表示受到用户代理支持的约束参数
  • MediaDevices.getSupportedConstraints() 方法
• MediaTrackConstraintSet 结构
• MediaTrackConstraints 结构（继承 MediaTrackConstraintSet 结构），表示开发者配置的约束参数范围
  • MediaDevices.getDisplayMedia() 方法
  • MediaDevices.getUserMedia() 方法
  • MediaStreamTrack.getConstraints() 方法
  • MediaStreamTrack.applyConstraints() 方法
• MediaTrackSettings 结构，表示用户代理实际使用的约束参数
  • MediaStreamTrack.getSettings() 方法
• MediaTrackCapabilities 结构，表示用户代理支持的约束参数范围
  • MediaStreamTrack.getCapabilities() 方法
  • InputDeviceInfo.getCapabilities() 方法

并且这些结构通过 Screen Capture API 和 MediaStream Image Capture API 被拓展

媒体流

MediaStream 接口表示一个媒体流，它可包含多个媒体轨道（音频轨道与视频轨道），它支持对其包含的媒体轨道的枚举、获取、增加及删除，以及对自身的创建和克隆等

创建媒体流

可以通过 MediaDevices.getUserMedia() MediaDevices.getDisplayMedia() HTMLCanvasElement.captureStream() HTMLMediaElement.captureStream() 等方法创建对应的媒体流

亦可以调用 MediaStream() 构造方法创建新媒体流

构造方法可以不传任何参数，创建一个空的媒体流

构造方法可以传一个 MediaStream 实例参数，创建的媒体流会与传入参数的媒体流共享使用所有媒体轨道

构造方法可以传一个 MediaStreamTrack 数组参数，创建的媒体流会使用所有传入的媒体轨道

媒体流信息

MediaStream 接口的 id 只读属性返回媒体流的一个唯一的 32 位标识符 UUID

MediaStream 接口的 active 只读属性标识媒体流当前是否处于活跃状态

媒体流是否处于活跃状态，取决于其包含的所有媒体轨道是否结束（readyState 属性是否被置为 ended）

克隆媒体流

MediaStream 接口的 clone() 方法克隆当前媒体流，同时会克隆其包含的所有媒体轨道，返回的新媒体流具有与原媒体流不同的 ID

增加媒体轨道

MediaStream 接口的 addtrack() 方法向媒体流中增加给定媒体轨道，需要传入一个 MediaStreamTrack 实例参数；若给定媒体轨道已在媒体流中，调用该方法不会产生效果

MediaStream 接口的 addtrack 事件在媒体流中增加媒体轨道时触发，返回一个 MediaStreamTrackEvent 事件

移除媒体轨道

MediaStream 接口的 removetrack() 方法向媒体流中移除给定媒体轨道，需要传入一个 MediaStreamTrack 实例参数；若给定媒体轨道未在媒体流中，调用该方法不会产生效果

MediaStream 接口的 removetrack 事件在媒体流中移除媒体轨道时触发，返回一个 MediaStreamTrackEvent 事件

媒体轨道改变事件

MediaStreamTrackEvent 事件表示媒体流的改变

其 track 只读属性表示产生该变化的媒体轨道，返回一个 MediaStreamTrack 实例

获取媒体轨道

MediaStream 接口的 getTrackById() 方法获取媒体流中给定 ID 的媒体轨道，若存在则返回一个 MediaStreamTrack 实例，反之 null 被返回

MediaStream 接口的 getAudioTracks() 方法获取媒体流中所有音频轨道，返回一个 MediaStreamTrack 数组

MediaStream 接口的 getVideoTracks() 方法获取媒体流中所有视频轨道，返回一个 MediaStreamTrack 数组

MediaStream 接口的 getTracks() 方法获取媒体流中所有媒体轨道，返回一个 MediaStreamTrack 数组

媒体轨道

MediaStreamTrack 接口表示表示一个媒体轨道，它支持对自身的克隆和暂停及获取或设置自身的配置等

媒体轨道信息

MediaStreamTrack 接口的 id 只读属性返回媒体轨道的一个唯一的 32 位标识符 UUID

MediaStreamTrack 接口的 kind 只读属性返回媒体轨道的类型，值为 audio 代表音频轨道，值为 video 代表视频轨道

MediaStreamTrack 接口的 label 只读属性返回媒体轨道的标签，值由用户代理生成

媒体轨道使用状态

MediaStreamTrack 接口的 muted 只读属性指示媒体轨道当前是否支持提供媒体数据

MediaStreamTrack 接口的 mute 事件在媒体轨道的源无法提供媒体数据时触发，返回一个 Event 事件

MediaStreamTrack 接口的 unmute 事件在媒体轨道的源再次能够提供媒体数据时触发，返回一个 Event 事件

MediaStreamTrack 接口的 enabled 属性读取或设置媒体轨道是否允许提供媒体数据；对音频轨道而言，样本值被置为 0；对视频轨道而言，像素值均为黑色

媒体轨道运行状态

MediaStreamTrack 接口的 readyState 只读属性返回当前媒体轨道的状态，值 live 指示媒体轨道正常运行，值 ended 指示媒体轨道已终止提供数据

MediaStreamTrack 接口的 stop() 方法终止当前媒体轨道，并且 readyState 属性值会置为 ended，但 ended 事件不会被触发

MediaStreamTrack 接口的 ended 事件在媒体轨道对应资源终止提供媒体数据时触发

克隆媒体轨道

MediaStreamTrack 接口的 clone() 方法克隆当前媒体轨道，返回的新媒体轨道具有与原媒体轨道不同的 ID

媒体轨道参数

MediaStreamTrack 接口的 getConstraints() 方法读取媒体轨道的约束属性，返回一个 MediaTrackConstraints 结构的对象

MediaStreamTrack 接口的 applyConstraints() 方法向媒体轨道应用约束属性，需要传递一个 MediaTrackConstraints 结构的对象参数，返回一个 Promise

MediaStreamTrack 接口的 getCapabilities() 方法读取媒体轨道的允许受约束属性值，返回一个 MediaTrackCapabilities 结构的对象

MediaStreamTrack 接口的 getSettings() 方法读取媒体轨道的受约束属性（包含由操作系统指定的默认值），返回一个 MediaTrackSettings 结构的对象

MediaTrackSettings 结构参见如上媒体参数章节

权限策略

该 API 调用受到 microphone 权限策略或 camera 权限策略的控制，可以通过 Permissions-Policy 响应头指定，或通过 <iframe> 标签的 allow 属性指定

默认值均是 self，即允许在当前源的浏览上下文使用该 API

权限 API

该 API 调用需要用户授予 microphone 权限或 camera 权限，可以调用 Permission.query() 方法检查用户是否已授予了该权限

camera 权限的描述符的额外参数 panTiltZoom，值 true 比值 false 具有更高的优先级

类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179

interface MediaDevices extends EventTarget {
  enumerateDevices(): Promise<MediaDeviceInfo[]>
  getSupportedConstraints(): MediaTrackSupportedConstraints
  getUserMedia(constraints?: MediaStreamConstraints): Promise<MediaStream>
  ondevicechange: ((this: MediaDevices, ev: Event) => any) | null
}

declare var MediaDevices: {
  prototype: MediaDevices
}

interface MediaDeviceInfo {
  readonly deviceId: string
  readonly groupId: string
  readonly kind: MediaDeviceKind
  readonly label: string
  toJSON(): any
}

declare var MediaDeviceInfo: {
  prototype: MediaDeviceInfo
  new(): MediaDeviceInfo
}

interface InputDeviceInfo extends MediaDeviceInfo {
  getCapabilities(): MediaTrackCapabilities
}

declare var InputDeviceInfo: {
  prototype: InputDeviceInfo
  new(): InputDeviceInfo
}

interface OverconstrainedError extends DOMException {
  readonly constraint: string
}

declare var OverconstrainedError: {
  prototype: OverconstrainedError
  new(constraint: string, message?: string): OverconstrainedError
}

interface MediaStream extends EventTarget {
  readonly active: boolean
  readonly id: string
  addTrack(track: MediaStreamTrack): void
  clone(): MediaStream
  getAudioTracks(): MediaStreamTrack[]
  getTrackById(trackId: string): MediaStreamTrack | null
  getTracks(): MediaStreamTrack[]
  getVideoTracks(): MediaStreamTrack[]
  removeTrack(track: MediaStreamTrack): void
  onaddtrack: ((this: MediaStream, ev: MediaStreamTrackEvent) => any) | null
  onremovetrack: ((this: MediaStream, ev: MediaStreamTrackEvent) => any) | null
}

declare var MediaStream: {
  prototype: MediaStream
  new(): MediaStream
  new(stream: MediaStream): MediaStream
  new(tracks: MediaStreamTrack[]): MediaStream
}

interface MediaStreamTrack extends EventTarget {
  contentHint: string
  enabled: boolean
  readonly id: string
  readonly kind: string
  readonly label: string
  readonly muted: boolean
  readonly readyState: MediaStreamTrackState
  applyConstraints(constraints?: MediaTrackConstraints): Promise<void>
  clone(): MediaStreamTrack
  getCapabilities(): MediaTrackCapabilities
  getConstraints(): MediaTrackConstraints
  getSettings(): MediaTrackSettings
  stop(): void
  onended: ((this: MediaStreamTrack, ev: Event) => any) | null
  onmute: ((this: MediaStreamTrack, ev: Event) => any) | null
  onunmute: ((this: MediaStreamTrack, ev: Event) => any) | null
}

declare var MediaStreamTrack: {
  prototype: MediaStreamTrack
}

interface MediaStreamTrackEvent extends Event {
  readonly track: MediaStreamTrack
}

declare var MediaStreamTrackEvent: {
  prototype: MediaStreamTrackEvent
  new(type: string, eventInitDict: MediaStreamTrackEventInit): MediaStreamTrackEvent
}

interface MediaStreamTrackEventInit extends EventInit {
  track: MediaStreamTrack
}

type MediaDeviceKind = 'audioinput' | 'audiooutput' | 'videoinput'

interface MediaTrackCapabilities {
  aspectRatio?: DoubleRange
  autoGainControl?: boolean[]
  channelCount?: ULongRange
  deviceId?: string
  displaySurface?: string
  echoCancellation?: boolean[]
  facingMode?: string[]
  frameRate?: DoubleRange
  groupId?: string
  height?: ULongRange
  noiseSuppression?: boolean[]
  sampleRate?: ULongRange
  sampleSize?: ULongRange
  width?: ULongRange
}

interface MediaTrackSupportedConstraints {
  aspectRatio?: boolean
  autoGainControl?: boolean
  channelCount?: boolean
  deviceId?: boolean
  displaySurface?: boolean
  echoCancellation?: boolean
  facingMode?: boolean
  frameRate?: boolean
  groupId?: boolean
  height?: boolean
  noiseSuppression?: boolean
  sampleRate?: boolean
  sampleSize?: boolean
  width?: boolean
}

interface MediaStreamConstraints {
  audio?: boolean | MediaTrackConstraints
  peerIdentity?: string
  preferCurrentTab?: boolean
  video?: boolean | MediaTrackConstraints
}

interface MediaTrackConstraintSet {
  aspectRatio?: ConstrainDouble
  autoGainControl?: ConstrainBoolean
  channelCount?: ConstrainULong
  deviceId?: ConstrainDOMString
  displaySurface?: ConstrainDOMString
  echoCancellation?: ConstrainBoolean
  facingMode?: ConstrainDOMString
  frameRate?: ConstrainDouble
  groupId?: ConstrainDOMString
  height?: ConstrainULong
  noiseSuppression?: ConstrainBoolean
  sampleRate?: ConstrainULong
  sampleSize?: ConstrainULong
  width?: ConstrainULong
}

interface MediaTrackConstraints extends MediaTrackConstraintSet {
  advanced?: MediaTrackConstraintSet[]
}

interface MediaTrackSettings {
  aspectRatio?: number
  autoGainControl?: boolean
  channelCount?: number
  deviceId?: string
  displaySurface?: string
  echoCancellation?: boolean
  facingMode?: string
  frameRate?: number
  groupId?: string
  height?: number
  noiseSuppression?: boolean
  sampleRate?: number
  sampleSize?: number
  width?: number
}

链接

• https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API
• https://w3c.github.io/mediacapture-main/

URL Pattern API 允许创建 URL 规则匹配器，用于匹配 URL 或 URL 相关组件

创建匹配器

直接调用 URLPattern() 构造函数来创建一个匹配器

构造函数允许接收一个字符串参数，需要是一个代表绝对路径或相对路径 URL 的字符串

构造函数允许接收两个字符串参数，需要是一个代表基础 URL 的字符串（对第一个参数是相对路径 URL 的情况是必需的）

构造函数亦可替代地接收一个对象参数，各可选参数分别代表 URL 的各个部分，包括 protocol username password hostname port pathname search hash baseURL，若不指定等价于指定为通配符 *

构造函数还可以接收一个可选的配置项参数，其唯一参数 ignoreCase 接收一个布尔值，指定匹配时是否忽略字母大小写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

new URLPattern("https://example.com/books/:id")

new URLPattern("/books/:id", "https://example.com")

new URLPattern({
  protocol: "https",
  hostname: "example.com",
  pathname: "/books/:id",
})

new URLPattern({
  pathname: "/books/:id",
  baseURL: "https://example.com",
})

new URLPattern({
  protocol: "http{s}?",
  username: ":username",
  password: ":password",
  hostname: ":subdomain.example.com",
  port: ":port(80|443)",
  pathname: "/:path",
  search: "*",
  hash: "*",
}, {
  ignoreCase: true,
})

匹配器参数

URLPattern 接口的 hash 只读属性返回一个 string，代表 URL 的片段标识符匹配参数

URLPattern 接口的 hostname 只读属性返回一个 string，代表 URL 的主机名匹配参数

URLPattern 接口的 password 只读属性返回一个 string，代表 URL 的密码匹配参数

URLPattern 接口的 pathname 只读属性返回一个 string，代表 URL 的路径匹配参数

URLPattern 接口的 port 只读属性返回一个 string，代表 URL 的端口匹配参数

URLPattern 接口的 protocol 只读属性返回一个 string，代表 URL 的协议匹配参数

URLPattern 接口的 search 只读属性返回一个 string，代表 URL 的搜索参数匹配参数

URLPattern 接口的 username 只读属性返回一个 string，代表 URL 的用户匹配参数

使用匹配器

URLPattern 接口的 test() 方法用于测试给定 URL 是否符合匹配器的规则，返回一个布尔值

URLPattern 接口的 exec() 方法用于返回给定 URL 经匹配器的规则执行的匹配组，返回一个代表匹配结果的对象或 null，其 inputs 键返回传入的参数，其余分别为 URLPattern 接口的属性构成的匹配组

两方法均可接收一个字符串或对象参数，代表待匹配 URL；第二个参数接收一个字符串，但首个参数为相对路径的 URL 时是必需的

匹配语法

匹配语法很大一部分来自 path-to-regexp 库

直接匹配

1
2
3

const pattern = new URLPattern({ pathname: "/books" });
console.log(pattern.test("https://example.com/books")); // true
console.log(pattern.exec("https://example.com/books").pathname.groups); // {}

通配符匹配

1
2
3

const pattern = new URLPattern({ pathname: "/books/*" });
console.log(pattern.test("https://example.com/books/123")); // true
console.log(pattern.exec("https://example.com/books/123").pathname.groups); // { 0: '123' }

命名组匹配

1
2
3

const pattern = new URLPattern({ pathname: "/books/:id" });
console.log(pattern.test("https://example.com/books/123")); // true
console.log(pattern.exec("https://example.com/books/123").pathname.groups); // { id: '123' }

正则表达式匹配

1
2
3
4

const pattern = new URLPattern("/books/:id(\\d+)", "https://example.com");
console.log(pattern.test("https://example.com/books/123")); // true
console.log(pattern.test("https://example.com/books/abc")); // false
console.log(pattern.test("https://example.com/books/")); // false

类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

type URLPatternInput = USVString | URLPatternInit

interface URLPattern {
  test(input?: URLPatternInput, baseURL?: USVString): boolean

  exec(input?: URLPatternInput, baseURL?: USVString): URLPatternResult | null

  readonly protocol: string
  readonly username: string
  readonly password: string
  readonly hostname: string
  readonly port: string
  readonly pathname: string
  readonly search: string
  readonly hash: string

  readonly hasRegExpGroups: boolean
}

declare var URLPattern: {
  prototype: URLPattern
  new (input: URLPatternInput, baseURL: string, options?: URLPatternOptions): URLPattern
  new (input: URLPatternInput, options?: URLPatternOptions): URLPattern
}

interface URLPatternInit {
  protocol: string
  username: string
  password: string
  hostname: string
  port: string
  pathname: string
  search: string
  hash: string
  baseURL: string
}

interface URLPatternOptions {
  ignoreCase?: boolean
}

interface URLPatternResult {
  inputs: Array<URLPatternInput>

  protocol: URLPatternComponentResult
  username: URLPatternComponentResult
  password: URLPatternComponentResult
  hostname: URLPatternComponentResult
  port: URLPatternComponentResult
  pathname: URLPatternComponentResult
  search: URLPatternComponentResult
  hash: URLPatternComponentResult
}

interface URLPatternComponentResult {
  input: string
  groups: Record<string, string | undefined> 
}

链接

• https://developer.mozilla.org/en-US/docs/Web/API/URL_Pattern_API
• https://urlpattern.spec.whatwg.org/

URL API 用于表示一个互联网资源的定位标识（URL 即 Uniform Resource Locator）

创建 URL

调用 URL() 构造函数以创建一个新的 URL 实例

方法需要传递一个 string 参数，代表 URL 字符串

方法可以传递一个可选的 string 参数，代表 URL 的基础路径；若前一个参数为绝对路径，则当前参数会被忽略；若前一个参数为相对路径，则当前参数会作为基础的 URL

若传递的参数无法用于创建 URL，会抛出 TypeError 异常

可以调用 URL 接口的 canParse() 静态方法检测参数是否支持创建 URL，该方法与 URL() 构造函数接收相同的参数

URL 参数

URL 接口的各属性表现 URL 的各项参数，部分参数与 Location　接口的对应参数类型相同

URL 接口的 hash 属性返回一个 string，代表 URL 的片段标识符，包含 # 符号

URL 接口的 host 属性返回一个 string，代表 URL 的主机（包含主机名及端口）

URL 接口的 hostname 属性返回一个 string，代表 URL 的主机名

URL 接口的 href 属性返回一个 string，代表 URL 本身

URL 接口的 origin 只读属性返回一个 string，代表 URL 的源

URL 接口的 password 属性返回一个 string，代表 URL 的密码

URL 接口的 pathname 属性返回一个 string，代表 URL 的路径

URL 接口的 port 属性返回一个 string，代表 URL 的端口

URL 接口的 protocol 属性返回一个 string，代表 URL 的协议，包含 : 符号

URL 接口的 search 属性返回一个 string，代表 URL 的搜索参数，包含 ? 符号

URL 接口的 username 属性返回一个 string，代表 URL 的用户

1
2
3
4
5
6
7
8
9
10
11
12

const url = new URL('https://username:password@website.example.com:8888/path1/path2?key1=value1&key2=value2#hash')
console.log(url.hash) // #hash
console.log(url.host) // website.example.com:8888
console.log(url.hostname) // website.example.com
console.log(url.href) // https://username:password@website.example.com:8888/path1/path2?key1=value1&key2=value2#hash
console.log(url.origin) // https://website.example.com:8888
console.log(url.password) // password
console.log(url.pathname) // /path1/path2
console.log(url.port) // 8888
console.log(url.protocol) // https:
console.log(url.search) // ?key1=value1&key2=value2
console.log(url.username) // username

URL 接口的 searchParams 只读属性返回一个 URLSearchParams，代表 URL 的搜索参数

URL 转换

URL 接口的 toJSON() 方法返回 URL 的 JSON 版本，等价于获取 URL 接口的 href 属性

URL 接口的 toString() 方法返回 URL 的字符串版本，等价于获取 URL 接口的 href 属性

URL 参数

URLSearchParams 接口专门用于处理 URL 参数

URLSearchParams() 构造函数用于创建一个 URL 参数对象，可以可选地传递一个字符串或键值对对象或字符串二维数组

URLSearchParams 接口与 Map 对象类似，其 size 属性、delete() 方法、entries() 方法、forEach() 方法、get() 方法、has() 方法、keys() 方法、set() 方法、values() 方法 均与 Map 对象的对应方法类似

URLSearchParams 接口的 append() 方法用于追加 URL 参数键值对（与 set() 方法区别是 set() 方法若已存在对应的值会直接覆盖）

URLSearchParams 接口的 getAll() 方法用于获取给定 URL 参数键对应的所有 URL 值，返回一个字符串数组（与 get() 方法区别是 get() 方法仅获取首个匹配的值）

URLSearchParams 接口的 toString() 方法用于返回给定的 URL 参数字符串，特别注意的是其不返回 ? 符号，与 URL 接口的 search 属性、HTMLAnchorElement 接口的 search 属性、Location 接口的 search 属性不同

URLSearchParams 接口的 sort() 方法用于对 URL 参数进行排序，排序规则是按照 Unicode 编码执行

URLSearchParams 接口的 delete() 方法与 has() 方法允许传递可选的第二个参数，代表键值对的值，以更加精细地检测

类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

interface URL {
  hash: string
  host: string
  hostname: string
  href: string
  toString(): string
  readonly origin: string
  password: string
  pathname: string
  port: string
  protocol: string
  search: string
  readonly searchParams: URLSearchParams
  username: string
  toJSON(): string
}

declare var URL: {
  prototype: URL
  new(url: string | URL, base?: string | URL): URL
}

type webkitURL = URL
declare var webkitURL: typeof URL

interface URLSearchParams {
  append(name: string, value: string): void
  delete(name: string): void
  get(name: string): string | null
  getAll(name: string): string[]
  has(name: string): boolean
  set(name: string, value: string): void
  sort(): void
  toString(): string
  forEach(callbackfn: (value: string, key: string, parent: URLSearchParams) => void, thisArg?: any): void
}

declare var URLSearchParams: {
  prototype: URLSearchParams
  new(init?: string[][] | Record<string, string> | string | URLSearchParams): URLSearchParams
}

链接

• https://developer.mozilla.org/en-US/docs/Web/API/URL_API
• https://url.spec.whatwg.org/