CSS Syntax Definition

CSS 语法定义规则

关键字

全局关键字

全局关键字触发特别注明,通常可在所有 CSS 特性上直接使用,也不会在 CSS 特性的语法定义中另行注明

  • initial 显式指定为属性的默认值
  • inherit 显式指定为父元素的属性的计算值
  • revert 重置值并取消用户任何的更改
  • revert-layer 重置值并取消用户当前级联层中任何的更改
  • unset 若属性不可继承,等价于指定为 initial;若属性不可继承,等价于指定为 inherit

普通关键字

一部分属性会包含一部分关键字,其会被指定一个特殊的含义;通常会在 CSS 属性的语法定义中说明

数据类型

基本数据类型

一部分数据类型在许多 CSS 特性中通用,通常用方括号包裹,如 <string>

复杂数据类型

一部分数据类型仅在少部分 CSS 特性中专属使用;这些数据类型中,一部分引用其他的 CSS 属性的语法定义,如 <'border-top'>;另外一部分则是基于其他数据类型,根据一定的规则生成,如 <shape-box>;亦包括一部分 CSS 函数的语法定义,如 <calc()>

数据类型组合子

括号

[] 符号将多个条目、组合符和乘数组合成一个组件;它用于语法的分组以绕过优先级规则

并置

用空白符分隔多个条目、组合符和乘数,即为并置

双与

连接多个条目,指示各条目均必须出现,但顺序不限

如:A && B 匹配 A B B A;但不匹配 A A B A

注意并置的优先级高于&&,如 A && B C 等价于 A && [ B C ]

双杠

分隔多个条目,指示各条目需至少出现一次,但顺序不限

如:A || B 匹配 A B B A A B;但不匹配 A B A

注意&&的优先级高于||,如 A || B && C 等价于 A || [ B && C ]

单杠

分隔多个条目,指示各条目需恰好出现一次

如:A | B 匹配 A B;但不匹配 A B B A

注意||的优先级高于|,如 A | B || C 等价于 A | [ B || C ]

数据类型乘数

星号

指示对应条目可不出现、出现一次或出现多次

加号

指示对应条目可出现一次或出现多次

问号

指示对应条目可选,即可不出现或出现一次

大括号

指示对应条目需出现指定范围内的次数或次数范围

如:A B{1,3} 匹配 A B A B B A B B B;但不匹配 A A B B B B

井号

指示对应条目可出现一次或出现多次,但需使用逗号分隔

井号亦可接大括号以指定重复的次数

感叹号

指示对应条目组必选,且其中的条目至少出现一次,即使条目组中格式允许条目可选

数据类型范围

部分数据类型可以限定值的范围,使用中括号表示

<integer [1,∞]> 指示值需要为大于1的整数

Autoplay Policy Detection API

Autoplay Policy Detection API 允许获取音频的自动播放模式

该 API 通过 Navigator 接口的 getAutoplayPolicy() 方法提供相关功能

使用

方法可以传入一个字符串,需为 mediaelementaudiocontext 之一;亦可以传入一个 HTMLMediaElement 元素或一个 AudioContext 实例

方法返回一个字符串,值为 allowedallowed-muteddisallowed,分别代表允许自动播放,允许静音状态下的自动播放(仅针对媒体元素而言)以及不允许自动播放

若参数不符合约束时,抛出 TypeError 异常

类型

1
2
3
4
5
6
7
8
interface Navigator {
getAutoplayPolicy(type: AutoplayPolicyMediaType): AutoplayPolicy
getAutoplayPolicy(element: HTMLMediaElement): AutoplayPolicy
getAutoplayPolicy(context: AudioContext): AutoplayPolicy
}

type AutoplayPolicyMediaType = "mediaelement" | "audiocontext"
type AutoplayPolicy = "allowed" | "allowed-muted" | "disallowed"

链接

Background Tasks API

Background Tasks API 允许创建后台任务

这些后台任务会在用户代理认为空闲时执行,从而可以优先执行高级别的任务

使用

使用 Window 接口的 requestIdleCallback() 方法注册后台任务,需要传入一个代表后台任务的回调方法,返回任务 ID

并且,可以可选地传入一个配置项参数,其 timeout 选项指定超时时间;后台任务在达到超时时间后会正常放入任务队列中执行

传入的回调方法在调用时,会传入一个 IdleDeadline 对象,该对象的 didTimeout 只读属性指示是否是因为超时而调用该方法,timeRemaining() 方法返回一个时间戳,指示当前空余任务周期的剩余时间

使用 Window 接口的 cancelIdleCallback() 方法取消之前调用 requestIdleCallback() 注册后台任务,需要传入任务 ID

1
2
3
4
5
6
7
const handle = window.requestIdleCallback(() => {
// to do something
}, {
timeout: 60 * 1000,
})

window.cancelIdleCallback(handle)

类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
interface Window {
cancelIdleCallback(handle: number): void
requestIdleCallback(callback: IdleRequestCallback, options?: IdleRequestOptions): number
}

interface IdleRequestCallback {
(deadline: IdleDeadline): void
}

interface IdleDeadline {
readonly didTimeout: boolean
timeRemaining(): DOMHighResTimeStamp
}

interface IdleRequestOptions {
timeout?: number
}

链接

Web Components API

Web Components API 允许创建并使用自定义 HTML 元素

概述

  • Custom Element,用于定义自定义元素及其行为
  • Shadow DOM,将封装的 Shadow DOM 树附加到元素并避免与文档其他部分产生冲突
  • HTML templates,通过 <template><slot> 元素编写可重用的模板

Custom Element

自定义元素包含两类,一类是基于现有的内置标准元素扩展,主要用于自定义标准元素行为,称为自定义内置元素(Customized built-in element);一类是直接基于 HTMLElement 基类拓展,需要完成实现行为,称为独立自定义元素(Autonomous custom element)

定义

首先需要定义一个类 class,该类需要继承自 HTMLElement 或者其他内置标准元素

1
2
3
4
5
6
7
8
9
10
11
class CustomElement extends HTMLElement {
constructor() {
super()
}
}

class CustomParagraphElement extends HTMLParagraphElement {
constructor() {
super()
}
}

在构造函数中设置初始状态及默认值,注册事件监听器,或者创建一个影子根元素;此阶段不应当尝试读取或修改元素的属性或其子元素

生命周期回调方法

在注册组件后,在发生一些特定事件时,会触发对应的生命周期回调方法,包括如下几种:

  • connectedCallback() 在每次元素被添加到文档中时调用;标准建议在该回调中实现自定义元素的初始化
  • disconnectedCallback() 在每次元素从文档中移除时调用
  • adoptedCallback() 在每次元素被移动到新文档时调用
  • attributeChangedCallback() 在监视的属性增加、移除、修改、替换时调用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
class CustomElement extends HTMLElement {
static observedAttributes = ["size"]

constructor() {
super()
}

connectedCallback() {
console.log("Custom element added to page")
}

disconnectedCallback() {
console.log("Custom element removed from page")
}

adoptedCallback() {
console.log("Custom element moved to new page")
}

attributeChangedCallback(name, oldValue, newValue) {
console.log(`Attribute ${name} has changed`)
}
}

注册

定义自定义元素后,还需要将其注册到文档中,才可使用

是通过 CustomElementRegistry 接口的 define() 方法实现,该实例通过 Window 接口的 customElements 只读属性暴露

该方法可以接受 2 - 3 个参数:

第一个参数接收一个字符串,表示该自定义元素的名称,要求:必须以小写字母开头且包含连字符

第二个参数接收一个构造函数,表示该自定义元素本身的构造函数

第三个可选参数接收一个可选的对象,仅允许对扩展内置标准元素的自定义元素指定,包含 extends 参数,表示由其继承的内置标准元素的名称

1
2
3
window.customElements.define("custom-paragraph-element", CustomParagraphElement, { extends: "p" })

window.customElements.define("custom-element", CustomElement)

使用

若为自定义内置元素,在扩展的内置标准元素上指定全局 is 属性

1
<p is="custom-paragraph-element"></p>

若为独立自定义元素,直接以类似标准元素的方式使用即可

1
<custom-element></custom-element>

监听属性变化

自定义元素类似原生内置标准元素一样,也使用属性传递信息

要监听属性变化(包括首次初始化),需要通过指定 observedAttributes 静态属性,其接收一个字符串数组

自定义伪类

可以在自定义元素中通过 HTMLElement 接口的 attachInternals() 方法获取到的 ElementInternals 接口实例,通过其 states 属性返回的 CustomStateSet 实例,添加或移除伪类状态

仅限于独立自定义元素使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class MyCustomElement extends HTMLElement {
constructor() {
super()
this.internals = this.attachInternals()
}

get collapsed() {
return this.internals.states.has("--hidden")
}

set collapsed(flag) {
if (flag) {
this.internals.states.add("--hidden")
} else {
this.internals.states.delete("--hidden")
}
}
}

Shadow DOM

概念

  • 影子宿主(Shadow host) 影子 DOM 附加到的常规 DOM 节点
  • 影子树(Shadow tree) 影子 DOM 内部的 DOM 树
  • 影子边界(Shadow boundary) 影子 DOM 终止,常规 DOM 开始的地方
  • 影子根节点(Shadow root) 影子树的根节点

在影子树内与影子树外通常是相互隔离的

模式

在调用 Element 接口的 attachShadow() 方法获取影子根节点时,可以传递一个 mode 参数,控制影子树内部是否对外部开放

允许的值为 openclose

若指定为 open,外部的脚本可以通过影子宿主的 shadowRoot 属性访问影子树内部

样式

向影子树中添加样式有两种方式:

一种通过新建 CSSStyleSheet 并向其添加样式,再将其附加到影子根节点

另外一种是通过新建 <style> 标签,并修改其内容,再将其附加到影子树

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class CustomElement extends HTMLElement {
constructor() {
super()
}
connectedCallback() {
const shadow = this.attachShadow({ mode: "open" })

const sheet = new CSSStyleSheet()
sheet.replaceSync("span { color: red; border: 2px dotted black;}")
shadow.adoptedStyleSheets.push(sheet)

const style = document.createElement('style')
style.sheet.replaceSync("span { color: red; border: 2px dotted black;}")
shadow.appendChild(style)
}
}

与自定义元素使用

自定义元素的核心正是 ShadowRoot 技术,其保证了自定义元素的封装能力

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class CustomElement extends HTMLElement {
constructor() {
super()
}
connectedCallback() {
const shadow = this.attachShadow({ mode: "open" })

const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle")
circle.setAttribute("cx", "50")
circle.setAttribute("cy", "50")
circle.setAttribute("r", "50")
circle.setAttribute("fill", this.getAttribute("color"))
svg.appendChild(circle)

shadow.appendChild(svg)
}
}

HTML templates

使用 template

可以使用 <template> 声明一组 DOM 结构,该 DOM 结构不会在页面中显示,直至手动获取其内容并插入到其他 DOM 结构中

使用 slot

可以使用 <slot> 声明在模板中,代表一个占位符,并为其指定 name 属性,代表其名称

在使用模板时,可以通过向模板中的特定元素指定 slot 属性,并指定为期望替换的占位符的名称,此时指定的元素便会替代模板中对应占位符位置的元素

链接

Payment Handler API

Payment Handler API 允许网站直接处理支付请求,而非重定向至额外的页面处理支付请求

网站可以使用 Payment Request API 创建支付请求,随后交由 Payment Handler API 处理,如寻找可用于支付的 APP、将它们作为可选的选项提供给用户、当用户选定后打开支付窗口以便用户输入支付细节以及与支付 APP 交互

基本流程

创建支付请求

通常首先调用 PaymentRequest() 构造方法创建一个支付请求

在支持的浏览器中,会根据传入的 supportedMethods 参数去请求对应的支付方式 manifest 文件

默认首先检测响应是否包含 Link 响应头,并且响应头是否包含 rel="payment-method-manifest",那么将利用该参数指定的 URL 下载对应的资源解析后作为 manifest 文件

否则将解析响应,并将结果作为支付方式 manifest 文件

该支付方式 manifest 文件通常需要包含 default_applications 字段和 supported_origins 字段

default_applications 字段表示支付应用的默认来源(通常是应用的 manifest 文件),在目标应用未下载时使用

supported_origins 字段表示允许代替当前支付应用处理当前支付请求的其他支付应用,在目标应用未下载且列表中应用已下载时替代使用

两字段均接收字符串数组

支付可用性

此时或之前调用 PaymentRequest 接口的 canMakePayment() 方法,检测对应支付方式是否可用(如支付方式被发现,处理支付方式的 APP 已下载或基于网络的支付应用已注册)

在 Payment Handler API 中,增加了触发在 ServiceWorkerGlobalScope 中的 canmakepayment 事件,该事件会在调用 PaymentRequest() 构造方法之后于对应支付应用注册的 Service Worker 中触发

在此事件回调中,可以调用 CanMakePaymentEvent 事件的 respondWith() 方法自定义支付方式的是否支持的信息

处理支付

随后在与用户发生交互后,调用 PaymentRequest 接口的 show() 方法显示浏览器提供的支付方式选择页面,此过程中会使用到支付方式 manifest 文件的 name 字段和 icons 字段

调用该方法之后,会在 ServiceWorkerGlobalScope 中触发 paymentrequest 事件,从而可以开始进行处理支付请求

如可以调用 PaymentRequestEvent 事件的 openWindow() 方法打开支付方式页面,用于用户填写支付请求信息

亦可以调用 PaymentRequestEvent 事件的 respondWith() 方法将支付请求执行结果返回给用户

管理支付

可以通过 ServiceWorkerRegistration 接口的 paymentManager 只读属性暴露的 PaymentManager 实例

如设置 userHint 属性向浏览器提供提示信息,可以在展示支付支付方式页面时显示

亦如调用 enableDelegations() 方法设置委托支付应用收集而非交由浏览器收集的支付信息

支付可用性

ServiceWorkerGlobalScope 中的 canmakepayment 事件在支付应用能够提供服务时,在其 Service Worker 中触发,返回一个 CanMakePaymentEvent 事件;通常在调用 PaymentRequest() 构造方法之后触发

调用 CanMakePaymentEvent 事件的 respondWith() 方法允许 Service Worker 控制发出可以处理支付请求的信号;方法需要传入一个兑现一个布尔值的 Promise

处理支付

ServiceWorkerGlobalScope 中的 paymentrequest 事件在支付请求创建时触发,返回一个 PaymentRequestEvent 事件;通常在调用 PaymentRequest 接口的 show() 方法之后触发

调用 PaymentRequestEvent 事件的 openWindow() 方法;方法传入一个字符串参数,代表执行支付的网站 URL(需要同源);方法返回一个兑现一个 WindowClient 实例的 Promise

调用 PaymentRequestEvent 事件的 respondWith() 方法返回自定义的支付请求执行结果;方法需要传入一个兑现一个对象的 Promise

管理支付

PaymentManager 接口用于管理支付相关内容,通过 ServiceWorkerRegistration 接口的 paymentManager 只读属性使用

PaymentManager 接口的 userHint 属性用于设置显示支付方式页面时展示的信息,即 hint

PaymentManager 接口的 enableDelegations() 方法设置委托支付应用收集而非交由浏览器收集的支付信息

方法接收一个字符串数组参数,代表设置的支付信息,各项需为 payerEmail payerName payerPhone shippingAddress 之一 (分别代表支付者的邮箱、姓名、手机号和居住地址)

方法返回一个 Promise

类型

1
2
3
4
5
6
7
AbortPaymentEvent

CanMakePaymentEvent

PaymentManager

PaymentRequestEvent

链接

Payment Request API

Payment Request API 允许用户创建个人的付款方式以及选择偏好程度,并提供给网站及开发者使用

创建支付请求

调用 PaymentRequest() 构造方法创建一个 PaymentRequest 实例,代表实际的支付请求

方法需要传入一个对象数组参数,表示受网站支持的支付方式列表

该对象具有如下一些参数:

  • supportedMethods 参数,接收一个字符串,表示支付方式的标识符,可以为一个指向支付平台的 URL 或一个标准化的支付方式标识符

  • data 可选参数,接收一个可序列化的对象,表示支付方式的额外信息

注意 supportedMethods 参数的不同取值可能影响 data 参数的取值

supportedMethods 参数指定为 secure-payment-confirmation 时, data 参数需要为一个 SecurePaymentConfirmationRequest 结构的对象

方法需要传入一个对象参数,表示当前支付请求的信息

该对象具有如下一些参数:

  • total 参数,接收一个对象,表示支付请求的总条目

    该对象具有如下一些参数:

    • label 参数,接收一个字符串,表示支付请求的条目名称

    • amount 参数,接收一个数值,表示支付请求的条目价格

    • pending 可选参数,接收一个布尔值,表示支付请求的条目名称;默认为 false

  • id 可选参数,接收一个字符串,表示支付请求的 ID;若不指定浏览器将自动生成

  • displayItems 可选参数,接收一个对象数组,表示支付请求的条目细节;默认为空数组;结构同 total 参数

  • modifiers 可选参数,接收一个对象数组,表示支付请求针对特定支付方式的修改,如用于针对不同支付渠道调整支付总额

    该对象具有如下一些参数:

    • supportedMethods 参数,接收一个字符串,表示支付方式的标识符,可以为一个指向支付平台的 URL 或一个标准化的支付方式标识符

    • total 可选参数,接收一个对象,表示支付请求的总条目,结构同 total 可选参数

    • additionalDisplayItems 可选参数,接收一个对象数组,表示额外的支付请求的总条目,结构同 total 可选参数

    • data 可选参数,接收一个可序列化的对象,表示支付方式的额外信息

显示支付请求

调用 PaymentRequest 接口的 show() 方法显示已创建的支付请求

方法接收一个可选的对象参数,表示更新的支付请求参数,会覆盖原有的支付请求参数

该对象具有如下一些参数:

id 可选参数 displayItems 可选参数与 modifiers 可选参数,同 PaymentRequest 构造函数的第二参数的相应参数

paymentMethodErrors 可选参数

方法返回一个 Promise,其兑现一个 PaymentResponse 实例,表示支付请求的结果

取消支付请求

调用 PaymentRequest 接口的 abort() 方法提前终止支付请求,同时移除任何由其产生的界面

方法返回一个 Promise

支付请求可用性

调用 PaymentRequest 接口的 canMakePayment() 方法检测给定的支付请求是否受用户代理支持

方法返回一个 Promise,其兑现一个布尔值,表示给定支付请求能否正常完成

可以在调用 show() 方法前预先调用 canMakePayment() 方法,以检测对应方支付请求能否正常进行;或尽早使用类似参数新建实例,调用该实例的 canMakePayment() 方法检测是否受支持,再在必要时候新建另一个实例执行真正的支付请求

支付请求信息

可以通过 PaymentRequest 接口的 id 只读属性返回一个字符串,反映当前支付请求的 ID,由构造时传入的 id 参数决定

可以监听 PaymentRequest 接口的 paymentmethodchange 事件监听因为用户在界面中更改支付方式产生的变化,返回一个 PaymentMethodChangeEvent 事件

PaymentMethodChangeEvent 事件继承自 PaymentRequestUpdateEvent 事件

methodDetails 只读属性,返回一个对象或 null,表示当前支付请求细节

methodName 只读属性,返回一个字符串,表示当前的支付请求方式

PaymentRequestUpdateEvent 事件继承自 Event 事件

updateWith() 方法,接收一个对象参数或一个兑现一个对象的 Promise,表示更新的支付请求参数;结构同 show() 方法的参数

支付结果操作

PaymentResponse 接口的 complete() 方法通知用户代理支付请求已经完成

方法传入一个字符串可选参数,值为 fail success unknown 之一,表示支付请求的结果;默认为 unknown

方法传入一个对象可选参数,其 data 参数接收一个对象,表示额外的支付请求信息

方法返回一个 Promise

PaymentResponse 接口的 retry() 方法请求用户重新发起支付请求

方法传入一个对象可选参数,其 error 参数接收一个字符串,表示错误信息;其 paymentMethod 参数接收一个字符串,表示支付请求方法

方法返回一个 Promise

支付结果信息

PaymentResponse 接口表示支付结果

requestId 只读属性返回一个字符串,反映当前支付结果对应的支付请求的 ID,由构造时传入的 id 参数决定

methodName 只读属性返回一个字符串,反映当前支付结果方式

details 只读属性返回一个对象或 null,反映当前支付结果细节,通常由支付平台返回

toJSON() 方法返回一个序列化的对象,表示当前的支付结果

类型

1
2
3
4
5
6
7
PaymentRequest

PaymentResponse

PaymentMethodChangeEvent

PaymentRequestUpdateEvent

链接

Audio Output Devices API

Audio Output Devices API 允许开发者选择音频的输出设备(如麦克风,蓝牙设备等)

基本使用

通过调用 MediaDevices 接口的 selectAudioOutput() 方法让用户选择期望的音频输出设备

被选择的设备具有相应的权限,随后可以通过 MediaDevices 接口的 enumerateDevices() 方法选取,并通过 HTMLMediaElement 接口的 setSinkId() 方法将对应媒体元素的输出指定为用户期望的音频输出设备

当然,被选择的设备可能因为某些原因断开连接等,可以通过监听 MediaDevices 接口的 devicechange 事件在采取相应的措施

选取音频输出设备

MediaDevices 接口的 selectAudioOutput() 方法用于请求用户选取期望的音频输出设备,选择完成后可以通过 MediaDevices 接口的 enumerateDevices() 方法枚举到目标音频设备

方法接收一个可选的配置项参数,其 deviceId 参数指定一个设备 ID;若该设备已被授权,方法会直接兑现而不弹窗请求授权

方法返回一个兑现一个 MediaDeviceInfo 实例的 Promise,表示用户选取的设备的信息

若当前文档不具备粘性激活状态,抛出 InvalidStateError 异常

若拒绝授权使用设备,抛出 NotAllowedError 异常

若无法找到合法的音频输出设备,抛出 NotFoundError 异常

设置音频输出设备

HTMLMediaElement 接口的 setSinkId() 方法用于手动设置用于播放当前媒体元素的媒体输出设备

方法接收一个字符串,代表媒体输出设备的 ID

方法返回一个 Promise

若受权限策略限制或拒绝授权使用设备,抛出 NotAllowedError 异常

若传入参数与任一合法的音频输出设备无法匹配,抛出 NotFoundError 异常

若因为任何原因无法切换音频输出设备,抛出 AbortError 异常

HTMLMediaElement 接口的 sinkId 只读属性返回当前正在用于播放当前媒体元素的媒体输出设备的 ID,或空字符串,表示当前使用的是默认的媒体输出设备

权限策略

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

默认值是 self,即仅允许同源的浏览上下文使用该 API

权限 API

该 API 调用需要用户授予 speaker-selection 权限,可以调用 Permission.query() 方法检查用户是否已授予了该权限

类型

1
2
3
4
5
6
7
8
9
10
11
12
interface HTMLMediaElement {
readonly sinkId: string
setSinkId(DOMString: string): Promise<void>
}

interface MediaDevices {
selectAudioOutput(options?: AudioOutputOptions): Promise<MediaDeviceInfo>
}

interface AudioOutputOptions {
deviceId: string
}

链接

MediaStream Image Capture API

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
}

链接

MediaStream Recording API

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

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

初始化录制

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

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

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

  • mimeType 参数接收一个字符串,需要为一个合法的 MIME 媒体类型,同时允许指定额外的编码格式,默认值为空字符串
  • audioBitsPerSecond 参数接收一个正整数,指定录制音频的比特率
  • videoBitsPerSecond 参数接收一个正整数,指定录制视频的比特率
  • bitsPerSecond 参数接收一个正整数,指定默认比特率,若 audioBitsPerSecondvideoBitsPerSecond 未指定,对应的轨道采样率将会采用
  • 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 只读属性返回一个 constantvariable 之一,指示录制音频的比特率模式

类型

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
}

链接

Save Data API

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

使用

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

或通过 Save-Data 请求头获取,值为 onoff,该请求头是一个 Client Hint 头

类型

1
2
3
interface NetworkInformation {
readonly saveData: boolean
}

链接


:D 一言句子获取中...