recursal/MDN huggingface dataset:
ContentVisibilityAutoStateChangeEvent
=====================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

**`ContentVisibilityAutoStateChangeEvent`** 接口是 `contentvisibilityautostatechange` 事件的对象。对于设置了 `content-visibility: auto` 的任意元素，在元素开始或不再与用户相关，且正在跳过其内容时触发此事件。

在元素不再与用户相关时（在开始和结束事件之间），用户代理会跳过元素的渲染（包括布局和绘制），这可以显著提高页面渲染速度。`contentvisibilityautostatechange` 事件为应用代码在不需要时开始或停止渲染过程（如在 `<canvas>` 上绘画）提供了便利，进而节约了处理能力。

注意因为元素内容即使被隐藏不可见也仍将保持语义相关性（例如使用辅助技术的用户），所以不应使用此事件跳过重要的 DOM 语义更新。

Event

ContentVisibilityAutoStateChangeEvent构造函数
----

`ContentVisibilityAutoStateChangeEvent()`

创建新的 `ContentVisibilityAutoStateChangeEvent` 对象实例。

实例属性
----

*从其父接口 `Event` 继承属性。*

`skipped` 只读 

如果用户代理正在跳过元素的渲染则返回 `true`，否则返回 `false`。

示例
--


```js
const canvasElem = document.querySelector("canvas");

canvasElem.addEventListener("contentvisibilityautostatechange", stateChanged);
canvasElem.style.contentVisibility = "auto";

function stateChanged(event) {
  if (event.skipped) {
    stopCanvasUpdates(canvasElem);
  } else {
    startCanvasUpdates(canvasElem);
  }
}

// 在画布需要开始更新时调用此方法。
function startCanvasUpdates(canvas) {
  // …
}

// 在画布需要停止更新时调用此方法。
function stopCanvasUpdates(canvas) {
  // …
}
```

规范
--

| Specification |
| --- |
| CSS Containment Module Level 2 # content-visibility-auto-state-change |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `contentvisibilityautostatechange` 事件
* CSS 局限
* `content-visibility` 属性
* `contain` 属性
HTMLParagraphElement
====================

**`HTMLParagraphElement`** 接口可以提供超过其继承的`HTMLElement` 对象额外的属性，用以操作 `<p>` 元素。

属性
--

*Inherits properties from its parent, `HTMLElement`.*

`HTMLParagraphElement.align` 
已弃用

A `DOMString` representing an enumerated property indicating alignment of the element's contents with respect to the surrounding context. The possible values are `"left"`, `"right"`, `"justify"`, and `"center"`.

Methods
-------

*No specific methods, inherits methods from its parent, `HTMLElement`.*

Specifications
--------------

| Specification |
| --- |
| HTML Standard # htmlparagraphelement |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The HTML element implementing this interface: `<p>`.
CSSRuleList
===========

CSS 规则列表 `CSSRuleList` 是一个（只允许间接更改的）类数组对象，包含着一个 `CSSRule` 对象的有序集合。

描述
--

CSS 规则列表内的每一条 `CSSRule` 都可以通过 `rules.item(index)`，或者更简单的 `rules[index]` 的形式访问。这里的 `rules` 是一个实现了 `CSSRuleList` 接口的对象（例如 `CSSStylesheet.cssRules`），而 `index` 是一个从 0 开始的、规则的位置索引，通过它获取规则时，顺序与 CSS 样式表中的顺序是一致的。规则对象的个数是 `rules.length`。

注意，因为只能*间接更改*（可更改，但是其本身只拥有读取方法），无法直接往规则列表中添加或移除规则，只能通过它的父样式表进行更改。事实上，`.insertRule()` 和 `.deleteRule()` 甚至都不是 CSSRuleList 的方法，而是 `CSSStyleSheet` 的。如果，处于一些原因，出现了一个没有父样式表 或者说不属于任何样式表的规则列表（可能是另一个规则列表的\*拷贝\*），那么，既不能将它分配到某个样式表下（因为没有适用的属性），它也不能被分配给任何一个样式表（因为 `stylesheet.cssRules` 是只读属性），就只能通过遍历方法，将它一条规则一条规则地**插入**已有的样式表中。

示例
--


```js
// 得到文档中第一个 CSS 样式表中的第一条规则
var first_rule = document.styleSheets[0].cssRules[0];
```

参见
--

* `CSSRule`
### CSSRuleList 的实现

在 CSS 对象模型 CSSOM 中，有多个属性的返回值是一个 `CSSRuleList`。它们分别是：

* `CSSStyleSheet` 属性 `cssRules` (en-US)
* `CSSMediaRule` 属性 `cssRules`
* `CSSKeyframesRule` (en-US) 属性 `cssRules` (en-US)
* `CSSMozDocumentRule` 属性 `cssRules`
规范
--

| Specification |
| --- |
| CSS Object Model (CSSOM) # the-cssrulelist-interface |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
FileSystem
==========

**非标准:** 该特性是非标准的，请尽量不要在生产环境中使用它！

在 File System API 中，一个 FileSystem 对象代表着一个文件系统。这个对象是调用 requestFileSystem() (en-US) 成功的一个标志。FileSystem 对象有两个属性。

关于本文档
-----

 本文档的上次更新是 2012 年 3 月 2 日，引用来源是 2011 年 4 月 9 日的草案 W3C Specifications (Working Draft)。
 该草案似乎已经被放弃了，任何实现不应该参考这份草案，也不该引用它。

基本概念
----

你可以通过调用 `window.requestFileSystem()` (en-US) 来请求对一个沙盒文件系统的访问权限。调用 `requestFileSystem()` 会创建一个新的沙盒存储空间。成功调用之后会返回一个 `FileSystem 对象`。它有两个属性：名称和文件系统的根目录。

`FileSystem 对象`是你访问文件系统所必须的，所以你最好为它创建一个引用，然后储存起来。

属性
--

| 属性 | 类型 | 解释 |
| --- | --- | --- |
| `name` | `只读的 DOMString` | 文件系统的名称。The name must be unique across the list of exposed file systems. |
| `root` | `只读的目录实体` | 文件系统的根目录。 |

规范
--

| Specification |
| --- |
| File and Directory Entries API # api-domfilesystem |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 文件与目录条目 API
* 文件与目录条目 API 介绍
* `FileSystemEntry` (en-US)、`FileSystemFileEntry` 和 `FileSystemDirectoryEntry`
CloseEvent
==========

`CloseEvent` 会在连接关闭时发送给使用 WebSockets 的客户端。它在 `WebSocket` 对象的 `onclose` 事件监听器中使用。

构造器
---

`CloseEvent()` (en-US)

创建一个 `CloseEvent`.

属性
--

*该接口也继承了其父类 `Event` 的属性。*

`CloseEvent.code` (en-US) 只读 

返回一个 unsigned short 类型的数字，表示服务端发送的关闭码，以下为已分配的状态码。

| 状态码 | ?名称 | ?描述 |
| --- | --- | --- |
| `0`–`999` |  | **保留段，未使用。** |
| `1000` | `CLOSE_NORMAL` | 正常关闭; 无论为何目的而创建，该链接都已成功完成任务。 |
| `1001` | `CLOSE_GOING_AWAY` | 终端离开，可能因为服务端错误，也可能因为浏览器正从打开连接的页面跳转离开。 |
| `1002` | `CLOSE_PROTOCOL_ERROR` | 由于协议错误而中断连接。 |
| `1003` | `CLOSE_UNSUPPORTED` | 由于接收到不允许的数据类型而断开连接 (如仅接收文本数据的终端接收到了二进制数据). |
| `1004` |  | **保留。** 其意义可能会在未来定义。 |
| `1005` | `CLOSE_NO_STATUS` | **保留。** 表示没有收到预期的状态码。 |
| `1006` | `CLOSE_ABNORMAL` | **保留。** 用于期望收到状态码时连接非正常关闭 (也就是说，没有发送关闭帧). |
| `1007` | Unsupported Data | 由于收到了格式不符的数据而断开连接 (如文本消息中包含了非 UTF-8 数据). |
| `1008` | Policy Violation | 由于收到不符合约定的数据而断开连接。这是一个通用状态码，用于不适合使用 1003 和 1009 状态码的场景。 |
| `1009` | `CLOSE_TOO_LARGE` | 由于收到过大的数据帧而断开连接。 |
| `1010` | Missing Extension | 客户端期望服务器商定一个或多个拓展，但服务器没有处理，因此客户端断开连接。 |
| `1011` | Internal Error | 客户端由于遇到没有预料的情况阻止其完成请求，因此服务端断开连接。 |
| `1012` | Service Restart | 服务器由于重启而断开连接。[Ref] |
| `1013` | Try Again Later | 服务器由于临时原因断开连接，如服务器过载因此断开一部分客户端连接。[Ref] |
| `1014` |  | **由 WebSocket 标准保留以便未来使用。** |
| `1015` | TLS Handshake | **保留。** 表示连接由于无法完成 TLS 握手而关闭 (例如无法验证服务器证书). |
| `1016`–`1999` |  | **由 WebSocket 标准保留以便未来使用。** |
| `2000`–`2999` |  | **由 WebSocket 拓展保留使用。** |
| `3000`–`3999` |  | ?可以由库或框架使用.? **不应**由应用使用。可以在 IANA 注册，先到先得。 |
| `4000`–`4999` |  | 可以由应用使用。 |

`CloseEvent.reason` (en-US) 只读 

返回一个 `DOMString` 用以表示服务器关闭连接的原因。这是由服务器和子协议决定的。

`CloseEvent.wasClean` (en-US) 只读 

返回一个 `Boolean` 用以表示连接是否完全关闭。

Methods
-------

*该接口也继承了其父类 `Event` 的属性。*

`CloseEvent.initCloseEvent()` (en-US) 
非标准

已弃用

初始化创建的 `CloseEvent` 的值。如果该事件已经被处理，这个方法什么也不做。不要直接使用这个方法，使用 `CloseEvent()` (en-US) ?构造器来代替。

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参考
--

* `WebSocket`
CustomElementRegistry
=====================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
\*\*`CustomElementRegistry`\*\*接口提供注册自定义元素和查询已注册元素的方法。要获取它的实例，请使用 `window.customElements`属性。

方法
--

`CustomElementRegistry.define()`

定义一个新的自定义元素。

`CustomElementRegistry.get()`

返回指定自定义元素的构造函数，如果未定义自定义元素，则返回`undefined`。

`CustomElementRegistry.upgrade()`

Upgrades a custom element directly, even before it is connected to its shadow root.

`CustomElementRegistry.whenDefined()`

返回当使用给定名称定义自定义元素时将会执行的 `promise`。（如果已经定义了这样一个自定义元素，那么立即执行返回的 promise。）

示例
--

以下代码来自我们的 word-count-web-component 示例（查看实时运行版本）。请注意我们如何使用 `CustomElementRegistry.define()` 方法在创建其类后定义自定义元素。


```js
// Create a class for the element
class WordCount extends HTMLParagraphElement {
  constructor() {
    // Always call super first in constructor
    super();

    // count words in element's parent element
    var wcParent = this.parentNode;

    function countWords(node) {
      var text = node.innerText || node.textContent;
      return text.split(/\s+/g).length;
    }

    var count = "Words: " + countWords(wcParent);

    // Create a shadow root
    var shadow = this.attachShadow({ mode: "open" });

    // Create text node and add word count to it
    var text = document.createElement("span");
    text.textContent = count;

    // Append it to the shadow root
    shadow.appendChild(text);

    // Update count when element content changes
    setInterval(function () {
      var count = "Words: " + countWords(wcParent);
      text.textContent = count;
    }, 200);
  }
}

// Define the new element
customElements.define("word-count", WordCount, { extends: "p" });
```

规范
--

| Specification |
| --- |
| HTML Standard # custom-elements-api |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ProgressEvent
=============

**`ProgressEvent`** 接口是测量如 HTTP 请求（一个`XMLHttpRequest`，或者一个 `<img>`，`<audio>`，`<video>`，`<style>` 或 `<link>` 等底层资源的加载）等底层流程进度的事件。

Event

ProgressEvent构造方法
----

`ProgressEvent()`

用给定的参数创建一个 `ProgressEvent` 事件。

属性
--

*同时继承它的父元素 `Event` 的属性。*

`ProgressEvent.lengthComputable` 只读 

是一个 `Boolean` (en-US) 标志，表示底层流程将需要完成的总工作量和已经完成的工作量是否可以计算。换句话说，它告诉我们进度是否可以被测量。

`ProgressEvent.loaded` 只读 

是一个 `unsigned long long` 类型数据，表示底层流程已经执行的工作总量。可以用这个属性和 `ProgressEvent.total` 计算工作完成比例。当使用 HTTP 下载资源，它只表示内容本身的部分，不包括首部和其他开销。

`ProgressEvent.total` 只读 

是一个 `unsigned long long` 类型数据，表示正在执行的底层流程的工作总量。当使用 HTTP 下载资源，它只表示内容本身的部分，不包括首部和其他开销。

方法
--

*同时继承它的父元素 `Event` 的方法。*

`ProgressEvent.initProgressEvent()` (en-US) 
已弃用

非标准

使用被弃用的 `Document.createEvent("ProgressEvent")` 方法，来初始化一个已经创建好的 `ProgressEvent`。

示例
--

下面的示例为一个新建的 `XMLHTTPRequest` 添加了一个 `ProgressEvent`，并使用它来显示请求状态。


```js
var progressBar = document.getElementById("p"),
  client = new XMLHttpRequest();
client.open("GET", "magical-unicorns");
client.onprogress = function (pe) {
  if (pe.lengthComputable) {
    progressBar.max = pe.total;
    progressBar.value = pe.loaded;
  }
};
client.onloadend = function (pe) {
  progressBar.value = pe.loaded;
};
client.send();
```

规范
--

| Specification |
| --- |
| XMLHttpRequest Standard # interface-progressevent |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

相关链接
----

* The `Event` base interface.
MimeType
========

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

这 **`MimeType`** 接口提供了包含以下信息 MIME 与特定插件关联的类型。`NavigatorPlugins.mimeTypes` (en-US) 返回此对象的数组。

属性
--

`MimeType.type`

返回关联的插件的 MIME 类型。

`MimeType.description`

如果没有返回相关插件或空字符串的描述。

`MimeType.suffixes`

包含插件，所显示的数据的有效文件扩展名的字符串或空字符串，如果扩展名为特定的模块无效。例如，浏览器内容解密模块可能出现在插件列表中，但支持更多文件 extenions 比可以预期。因此，它可能会返回一个空字符串。

`MimeType.enabledPlugin`

返回一个 `Plugin` 实例，其包含插件本身的信息。

规范
--

| Specification |
| --- |
| HTML Standard # mimetype |

浏览器的兼容性
-------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ShadowRoot
==========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
Shadow DOM API 的 **`ShadowRoot`** 接口是一个 DOM 子树的根节点，它与文档的主 DOM 树分开渲染。

你可以通过使用一个元素的 `Element.shadowRoot` 属性来检索它的参考，假设它是由 `Element.attachShadow()` 创建的并使 `mode` 设置为 `open`.

属性
--

`ShadowRoot.delegatesFocus` 只读  
非标准

返回一个 boolean 值表明在 shadow 添加时 delegatesFocus 是否被设置 (see `Element.attachShadow()`)

`ShadowRoot.host` (en-US) 只读 

`ShadowRoot` 附加的宿主 DOM 元素。

`ShadowRoot.innerHTML`

`ShadowRoot` 内部的 DOM 树。

`ShadowRoot.mode` 只读 

`ShadowRoot` 的模式——可以是 `open` 或者 `closed`。这定义了 shadow root 的内部实现是否可被 JavaScript 访问及修改 — 也就是说，该实现是否公开，例如，`<video>` 标签内部实现无法被 JavaScript 访问及修改。

### 从 DocumentOrShadowRoot 中包含的属性

*`ShadowRoot` 接口包含了下列从`DocumentOrShadowRoot` mixin 中定义的属性。请注意它现在仅在 Chrome 浏览器中应用; 其他的浏览器仍在`Document`接口实现。*

`DocumentOrShadowRoot.activeElement` 只读 

返回含有获取焦点了的 shadow tree 的 `Element`

`DocumentOrShadowRoot.styleSheets` 只读 

返回 `CSSStyleSheet` 的 `StyleSheetList` 对象，用于代表通过链接加载到文档中或内嵌的样式表。

方法
--

*`ShadowRoot` 接口包含了下列几个在 `DocumentOrShadowRoot` mixin 中定义的方法。请注意它现在仅在 Chrome 浏览器中应用; 其他的浏览器仍在`Document`接口实现。*

`DocumentOrShadowRoot.getSelection()` (en-US)

返回一个 `Selection` 类来表明用户选择的文本选区或者光标所在的位置

`DocumentOrShadowRoot.elementFromPoint()`

返回在指定坐标最上层的元素。

`DocumentOrShadowRoot.elementsFromPoint()`

返回一个包含所有在指定位置上的元素的 Array

`DocumentOrShadowRoot.caretPositionFromPoint()` (en-US)

返回一个 `CaretPosition` 对象，包括包含了光标的 DOM 节点，以及光标在该节点中的字符偏移量

例子
--

下面的这段代码是从我们的 life-cycle-callbacks 示例 (查看在线示例) 中提取出来的，它创建了一个由元素的属性指定的大小相等的正方形。

Inside the `<custom-square>` element's class definition we include some life cycle callbacks that make a call to an external function, `upateStyle()`, which actually applies the size and color to the element. You'll see that we are passing it `this` (the custom element itself) as a parameter.


```js
connectedCallback() {
  console.log('Custom square element added to page.');
  updateStyle(this);
}

attributeChangedCallback(name, oldValue, newValue) {
  console.log('Custom square element attributes changed.');
  updateStyle(this);
}
```


In the `updateStyle()` function itself, we get a reference to the shadow DOM using `Element.shadowRoot`. From here we use standard DOM traversal techniques to find the `<style>` element inside the shadow DOM and then update the CSS found inside it:


```js
function updateStyle(elem) {
  var shadow = elem.shadowRoot;
  var childNodes = shadow.childNodes;
  for (var i = 0; i < childNodes.length; i++) {
    if (childNodes[i].nodeName === "STYLE") {
      childNodes[i].textContent =
        "div {" +
        "width: " +
        elem.getAttribute("l") +
        "px;" +
        "height: " +
        elem.getAttribute("l") +
        "px;" +
        "background-color: " +
        elem.getAttribute("c") +
        ";" +
        "}";
    }
  }
}
```

规范
--

| Specification |
| --- |
| DOM Standard # interface-shadowroot |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
VRDisplay
=========

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

WebVR API 中的 **`VRDisplay`** 代表任何支持此 API 的 VR 设备。它包括了设备 ID、描述信息等诸如此类的通用信息，以及用于开始呈现 VR 场景、检索眼睛参数和显示能力以及其他重要的功能和方法。

可以通过调用 `Navigator.getVRDisplays()` (en-US) 方法得到所有连接的 VR 设备数组。

属性
--

`VRDisplay.capabilities` (en-US) 只读 

返回一个 `VRDisplayCapabilities` (en-US) 对象，用于指示 VRDisplay 的各种功能。

`VRDisplay.depthFar` (en-US)

获取或设置眼睛可视锥的最远深度。

`VRDisplay.depthNear` (en-US)

获取或设置眼睛可视锥的最近深度。

`VRDisplay.displayId` (en-US) 只读 

返回此 VRDisplay 的标识符，它也用作与 Gamepad API 的关联（详见 `Gamepad.displayId` (en-US)）。

`VRDisplay.displayName` (en-US) 只读 

返回一个不反人类的名称来标识此 `VRDisplay`。

`VRDisplay.isConnected` (en-US) 只读 

返回一个 `Boolean` (en-US) 值，指示 `VRDisplay` 是否连接到计算机。

`VRDisplay.isPresenting` (en-US) 只读 

返回一个 `Boolean` (en-US) 值，指示 `VRDisplay` 当前是否由内容被呈现。

`VRDisplay.stageParameters` (en-US) 只读 

如果 VR 设备支持房间规模测验，则返回一个包含房间尺寸参数的 `VRStageParameters` (en-US) 对象。

方法
--

`VRDisplay.getEyeParameters()` (en-US)

返回指定一侧眼睛参数的 `VREyeParameters` (en-US) 对象。

`VRDisplay.getLayers()` (en-US)

返回 VRDisplay 当前显示的图层。

`VRDisplay.getPose()` (en-US)

Returns a `VRPose` object defining the future predicted pose of the `VRDisplay` as it will be when the current frame is actually presented.

`VRDisplay.getImmediatePose()` (en-US)

Returns a `VRPose` object defining the current pose of the `VRDisplay`, with no prediction applied.

`VRDisplay.resetPose()` (en-US)

Resets the pose for this `VRDisplay`, treating its current `VRPose.position` (en-US) and `VRPose.orientation` (en-US) as the "origin/zero" values.

`VRDisplay.cancelAnimationFrame()` (en-US)

A special implementation of `Window.cancelAnimationFrame` that allows callbacks registered with `VRDisplay.requestAnimationFrame()` to be unregistered.

`VRDisplay.requestAnimationFrame()`

A special implementation of `Window.requestAnimationFrame` containing a callback function that will be called every time a new frame of the `VRDisplay` presentation is rendered.

`VRDisplay.requestPresent()` (en-US)

Starts the `VRDisplay` presenting a scene.

`VRDisplay.exitPresent()` (en-US)

Stops the `VRDisplay` presenting a scene.

`VRDisplay.submitFrame()` (en-US)

Captures the current state of the `VRLayer` (en-US) currently being presented and displays it on the `VRDisplay`.

示例
--
```

TBD.
```

规范
--

该 API 在旧的 WebVR API（已被 WebXR Device API 取代）中定义。它不再有望成为标准。

在所有浏览器都实现新的 WebXR API (en-US) 之前，建议使用框架（如：A-Frame、Babylon.js 或 Three.js）或 polyfill 来开发适用于所有浏览器的 WebXR 应用程序。[1]

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* WebVR API
Compression Stream API
======================

**Compression Stream API** 提供了一种 JavaScript API，使用 gzip 或者默认格式压缩和解压缩数据流。

内置的压缩库意味着 JavaScript 应用不再需要包含其它压缩库，这使得应用程序的下载大小更小。

接口
--

`CompressionStream`

压缩数据流。

`DecompressionStream`

解压缩数据流。

示例
--

在此示例中，使用 gzip 对流进行压缩。


```js
const compressedReadableStream = inputReadableStream.pipeThrough(
  new CompressionStream("gzip"),
);
```


以下示例中，函数使用 gzip 解压缩 blob。


```js
async function DecompressBlob(blob) {
  const ds = new DecompressionStream("gzip");
  const decompressedStream = blob.stream().pipeThrough(ds);
  return await new Response(decompressedStream).blob();
}
```

规范
--

| Specification |
| --- |
| Compression Streams # compression-stream |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MediaDevices
============

**`MediaDevices`** 接口提供访问连接媒体输入的设备，如照相机和麦克风，以及屏幕共享等。它可以使你取得任何硬件资源的媒体数据。

属性
--

*从父类`EventTarget`中继承的属性。*

事件
--

`devicechange`

当媒体输入或输出设备连接到用户计算机或从用户计算机移除时触发。

方法
--

*从其父项继承方法 `EventTarget`。*

`MediaDevices.enumerateDevices()`

获取有关系统中可用的媒体输入和输出设备的一系列信息。

`getSupportedConstraints()`

返回一个符合 `MediaTrackSupportedConstraints` (en-US) 的对象。该对象指明了 `MediaStreamTrack` 接口支持的可约束的属性。查看 Media Streams API (en-US) 以了解更多相关信息。

`getDisplayMedia()`

提示用户选择显示器或显示器的一部分（例如窗口）以捕获为`MediaStream` 以便共享或记录。返回解析为 MediaStream 的 Promise。

`MediaDevices.getUserMedia()`

在用户通过提示允许的情况下，打开系统上的相机或屏幕共享和/或麦克风，并提供 `MediaStream` 包含视频轨道和/或音频轨道的输入。

示例
--


```js
"use strict";

// Put variables in global scope to make them available to the browser console.
var video = document.querySelector("video");
var constraints = (window.constraints = {
  audio: false,
  video: true,
});
var errorElement = document.querySelector("#errorMsg");

navigator.mediaDevices
  .getUserMedia(constraints)
  .then(function (stream) {
    var videoTracks = stream.getVideoTracks();
    console.log("Got stream with constraints:", constraints);
    console.log("Using video device: " + videoTracks[0].label);
    stream.onended = function () {
      console.log("Stream ended");
    };
    window.stream = stream; // make variable available to browser console
    video.srcObject = stream;
  })
  .catch(function (error) {
    if (error.name === "ConstraintNotSatisfiedError") {
      errorMsg(
        "The resolution " +
          constraints.video.width.exact +
          "x" +
          constraints.video.width.exact +
          " px is not supported by your device.",
      );
    } else if (error.name === "PermissionDeniedError") {
      errorMsg(
        "Permissions have not been granted to use your camera and " +
          "microphone, you need to allow the page access to your devices in " +
          "order for the demo to work.",
      );
    }
    errorMsg("getUserMedia error: " + error.name, error);
  });

function errorMsg(msg, error) {
  errorElement.innerHTML += "<p>" + msg + "</p>";
  if (typeof error !== "undefined") {
    console.error(error);
  }
}
```

规范
--

| Specification |
| --- |
| Media Capture and Streams # mediadevices |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 媒体捕捉与媒体流 API: The API this interface is part of.
* Screen Capture API: The API defining the `getDisplayMedia()` method.
* WebRTC API
* `Navigator.mediaDevices`: Returns a reference to a `MediaDevices` object that can be used to access devices.
* CameraCaptureJS: HTML5 video capture and playback using `MediaDevices` and the MediaStream Recording API (source on GitHub)
* OpenLang: HTML5 video language lab web application using `MediaDevices` and the MediaStream Recording API for video recording (source on GitHub)
BatteryManager（电源管理）
====================

电池状态 API 中的 `BatteryManager` 接口提供了系统电池电量的一些信息。`navigator.getBattery()` 方法返回一个 promise 对象，该 promise 在完成状态时将返回一个 `BatteryManager` 接口。

EventTarget

BatteryManager属性
--

`BatteryManager.charging` 只读 

一个布尔值，说明当前电池是否正在充电。

`BatteryManager.chargingTime` (en-US) 只读 

一个数字，代表距离充电完毕还需多少秒，如果为 0 则充电完毕。

`BatteryManager.dischargingTime` (en-US) 只读 

一个数字，代表距离电池耗电至空且系统挂起需要多少秒。

`BatteryManager.level` (en-US) 只读 

一个数字，代表系统电量的水平，这个值放缩在 0.0 至 1.0 之间。

方法
--

*方法继承自其父接口*：`EventTarget`。

### 事件

`chargingchange` (en-US)

当电池充电状态（`charging` 属性）更新时被触发。

`chargingtimechange` (en-US)

当电池充电时间（`chargingTime` (en-US) 属性）更新时被触发。

`dischargingtimechange` (en-US)

当电池断开充电的时间（`dischargingTime` (en-US) 属性）更新时被触发。

`levelchange` (en-US)

当电池电量（`level` (en-US) 属性）更新时被触发。

规范
--

| Specification |
| --- |
| Battery Status API # the-batterymanager-interface |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 电池状态 API
* `navigator.getBattery`
self.crypto
===========

**`crypto`** 全局只读属性返回与全局对象关联的 `Crypto` 对象。此对象允许网页访问某些加密相关的服务。

虽然该属性自身的只读的，但它的所有方法（以及其子对象的方法——`SubtleCrypto`）不仅是只读的，因此容易受到 polyfill 的攻击。

虽然 `crypto` 在所有窗口上均可用，但其返回的 `Crypto` 对象在不安全的上下文中仅有一个可用的特性：`getRandomValues()` 方法。通常，你应该仅在安全上下文中使用此 API。

值
-

`Crypto` 接口的实例，提供对通用的密码学功能和强随机数生成器的访问。

示例
--

使用 `crypto` 属性来访问 `getRandomValues()` 方法。

### JavaScript


```js
globalThis.genRandomNumbers = () => {
  const array = new Uint32Array(10);
  crypto.getRandomValues(array);

  const randText = document.getElementById("myRandText");
  randText.textContent = `随机数为：${array.join(" ")}`;
};
```

### HTML


```html
<p id="myRandText">随机数为：</p>
<button type="button" onClick="genRandomNumbers()">生成 10 个随机数</button>
```

### 结果

规范
--

| Specification |
| --- |
| Web Cryptography API # dom-windoworworkerglobalscope-crypto |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `Window` 全局对象
* `Crypto` 接口
Coordinates
===========

**`Coordinates`** （坐标）接口表示设备在地球上的位置和海拔，以及计算这些属性的精确度。

属性
--

*The `Coordinates` interface* **doesn't inherit any property**.

`Coordinates.latitude` 只读 

Returns a `double` representing the position's latitude in decimal degrees.

`Coordinates.longitude` (en-US) 只读 

Returns a `double` representing the position's longitude in decimal degrees.

`Coordinates.altitude` (en-US) 只读 

Returns a `double` representing the position's altitude in metres, relative to sea level. This value can be `null` if the implementation cannot provide the data.

`Coordinates.accuracy` (en-US) 只读 

Returns a `double` representing the accuracy of the `latitude` and `longitude` properties, expressed in meters.

`Coordinates.altitudeAccuracy` (en-US) 只读 

Returns a `double` representing the accuracy of the `altitude` expressed in meters. This value can be `null`.

`Coordinates.heading` (en-US) 只读 

Returns a `double` representing the direction in which the device is traveling. This value, specified in degrees, indicates how far off from heading due north the device is. `0` degrees represents true true north, and the direction is determined clockwise (which means that east is `90` degrees and west is `270` degrees). If `speed` is `0`, `heading` is `NaN`. If the device is unable to provide `heading` information, this value is `null`.

`Coordinates.speed` (en-US) 只读 

Returns a `double` representing the velocity of the device in meters per second. This value can be `null`.

方法
--

**The `Coordinates` interface *neither implements, nor inherits any method.***

规范
--

| Specification |
| --- |
| Geolocation API # coordinates\_interface |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

请参见
---

* Using geolocation
* The `Geolocation` interface that uses it.