recursal/MDN huggingface dataset:
Comment
=======

**`Comment`** 接口代表标签（markup）之间的文本符号（textual notations）。尽管它通常不会显示出来，但是在查看源码时可以看到它们。在 HTML 和 XML 里，注释（Comments）为 '`<!--`' 和 '`-->`' 之间的内容。在 XML 里，注释中不能出现字符序列 '`--`'。

属性
--

*该接口没有特定的属性，但是从其父类 `CharacterData` 继承属性，以及间接从 `Node` 继承部分属性。*

构造函数
----

`Comment()` 
实验性

使用文本内容作为参数，返回一个 `Comment` 对象。

方法
--

该接口没有特定的方法，但从其父类 `CharacterData` 继承方法，以及间接从 `Node` 继承部分方法。

规范
--

| Specification |
| --- |
| DOM Standard # interface-comment |

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

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

参见
--

* DOM 接口索引
Canvas
======

**Canvas API** 提供了一个通过JavaScript 和 HTML的`<canvas>`元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

Canvas API 主要聚焦于 2D 图形。而同样使用`<canvas>`元素的 WebGL API 则用于绘制硬件加速的 2D 和 3D 图形。

基础示例
----

这个简单的例子在画布绘制一个绿色的长方形。

### HTML


```html
<canvas id="canvas"></canvas>
```

### JavaScript

`Document.getElementById()` 方法获取 HTML `<canvas>` 元素的引用。接着，`HTMLCanvasElement.getContext()` 方法获取这个元素的 context——图像稍后将在此被渲染。

由 `CanvasRenderingContext2D` 接口完成实际的绘制。`fillStyle` 属性让长方形变成绿色。`fillRect()` 方法将它的左上角放在 (10, 10)，把它的大小设置成宽 150 高 100。


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 150, 100);
```

### 结果

参考
--

* `HTMLCanvasElement`
* `CanvasRenderingContext2D`
* `CanvasGradient`
* `CanvasImageSource`
* `CanvasPattern`
* `ImageBitmap`
* `ImageData`
* `RenderingContext`
* `TextMetrics`
* `OffscreenCanvas`
实验性
* `Path2D`
实验性
* `ImageBitmapRenderingContext`
实验性

**备注：** 与 `WebGLRenderingContext` 有关的接口请参考 WebGL。

`CanvasCaptureMediaStream` 也与之相关。

教程与指导
-----

Canvas 教程

一个综合性教程，包括了<canvas>的基本用法与高级功能。

代码片段：Canvas

一些面向开发者的 <canvas> 代码片段。

深入 HTML5 Canvas

一个手把手的、长度与书本相若的 Canvas API 和 WebGL 介绍。

使用 canvas 绘制视频

结合`<video>`和 `<canvas>`来实现实时操作视频数据。

库
-

Canvas API 是非常强大的，但不总是很容易使用。以下列出的库能够使创建基于 canvas 的项目更快和更简单。

* EaselJS 使制作游戏、创作类艺术和其他侧重图形项目更容易的开源 canvas 库
* Fabric.js 具有 SVG 解析功能的开源 canvas 库
* heatmap.js 基于 canvas 的热点图的开源库
* JavaScript InfoVis Toolkit 创建交互式的 2D Canvas 数据可视化
* Konva.js 用于桌面端和移动端应用的 2D canvas 库
* p5.js 包含给艺术家、设计师、教育者、初学者使用的完整的 canvas 绘制功能
* Paper.js 运行于 HTML5 Canvas 上的开源矢量图形脚本框架
* Phaser 用于基于 Canvas 和 WebGL 的浏览器尤其的快速、自由、有趣的开源框架
* Processing.js 用于处理可视化语言
* Pts.js 在 canvas 和 SVG 中进行创意性代码写作和可视化的库
* Rekapi 关键帧动画库
* Scrawl-canvas 用来创建和编辑 2D 图形的开源库
* ZIM 框架为 canvas 上的代码创意性提供方便性、组件和可控性，包括可用性和数百个色彩缤纷的教程

**备注：** 与 WebGL 有关的 2D 和 3D 的库请参考 WebGL。

标准
--

| Specification |
| --- |
| HTML Standard # the-canvas-element |

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

Mozilla 程序从 Gecko 1.8 (Firefox 1.5 (en-US)) 开始支持 `<canvas>`。它首先是由 Apple 引入的，用于 OS X Dashboard 和 Safari。Internet Explorer 从 IE9 开始支持`<canvas>` ，更旧版本的 IE 中，页面可以通过引入 Google 的 Explorer Canvas 项目中的脚本来获得`<canvas>`支持。Google Chrome 和 Opera 9+ 也支持 `<canvas>`。

其他相关
----

* WebGL
Broadcast Channel API
=====================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**Broadcast Channel API** 可以实现同 源 下浏览器不同窗口，Tab 页，frame 或者 iframe 下的 浏览器上下文 (通常是同一个网站下不同的页面) 之间的简单通讯。

**备注：** 此特性在 Web Worker 中可用

广播频道会被命名和绑定到指定的源。

通过创建一个监听某个频道下的 `BroadcastChannel` 对象，你可以接收发送给该频道的所有消息。一个有意思的点是，你不需要再维护需要通信的 iframe 或 worker 的索引。它们可以通过构造 `BroadcastChannel` 来简单地“订阅”特定频道，并在它们之间进行全双工（双向）通信。

![The principle of the Broadcast Channel API](/zh-CN/docs/Web/API/Broadcast_Channel_API/broadcastchannel.png)

Broadcast Channel 接口
--------------------

### 创建或加入某个频道

`BroadcastChannel` 接口非常简单。通过创建一个 `BroadcastChannel` 对象，一个客户端就加入了某个指定的频道。只需要向 构造函数 传入一个参数：频道名称。如果这是首次连接到该广播频道，相应资源会自动被创建。


```js
// 连接到广播频道
var bc = new BroadcastChannel("test\_channel");
```

### 发送消息

现在发送消息就很简单了，只需要调用 BroadcastChannel 对象上的`postMessage()` 方法即可。该方法的参数可以是任意对象。最简单的例子就是发送 `DOMString` 文本消息：


```js
// 发送简单消息的示例
bc.postMessage("This is a test message.");
```


不只是 `DOMString`，任意类型的对象都可以被发送。此 API 不会将消息与任何的语义相关联，因此通道的参与者有必要知道预期的消息类型和消息的消费方式。

### 接收消息

当消息被发送之后，所有连接到该频道的 `BroadcastChannel` 对象上都会触发 `message` 事件。该事件没有默认的行为，但是可以使用 `onmessage` 事件处理程序来定义一个函数来处理消息。


```js
// 简单示例，用于将事件打印到控制台
bc.onmessage = function (ev) {
  console.log(ev);
};
```

### 与频道断开连接

通过调用 BroadcastChannel 对象的 `close()` 方法，可以离开频道。这将断开该对象和其关联的频道之间的联系，并允许它被垃圾回收。


```js
// 断开频道连接
bc.close();
```

总结
--

Broadcast Channel API 是一个非常简单的 API，内部包含了跨上下文通讯的接口。它可用于检测同源网站环境中其他浏览器选项卡下的用户操作，例如当用户登录到帐户时。没有定义消息传输协议，故不同上下文中的不同文档需要自己实现它：规范没有对此提出协议或要求。

规范
--

| Specification |
| --- |
| HTML Standard # broadcasting-to-other-browsing-contexts |

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

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

另见
--

* 接口实现：`BroadcastChannel`。
WaveShaperNode
==============

**`WaveShaperNode`** 接口表示一个非线性的畸变器。是一个使用曲线来将一个波形畸变应用到一个声音信号中的`AudioNode`。除了明显的失真效果之外，它通常用来给信号添加一个暖调的感觉。

一个`WaveShaperNode` 总是有一个确切的输入和输出。

|  |  |
| --- | --- |
| 输入数目 | `1` |
| 输出数目 | `1` |
| 信道计数模式 | `"max"` |
| 信道计数 | `2` （不在缺省的计数模式中使用） |
| 信道解释 | `"speakers"` |

构造器
---

`WaveShaperNode()`

创建一个新的`WaveShaperNode` 对象的实例。

属性
--

*包含了继承自父类 `AudioNode`的属性。*

`WaveShaperNode.curve`

是一个`Float32Array` (en-US)描述要应用的失真数值的数组。

`WaveShaperNode.oversample`

是一个描述是否必须使用过采样的枚举值。过采样是一个用来在将失真效果应用到音频信号之前创建更多采样（上采样）的技术。

方法
--

*没有特有的方法；从父类 `AudioNode` 继承了方法*。

示例
--

参见 `BaseAudioContext.createWaveShaper()` 以获取示例代码。

规范
--

| Specification |
| --- |
| Web Audio API # WaveShaperNode |

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

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

参见
--

* 使用 Web Audio API (en-US)
StyleSheetList
==============

StyleSheetLists 接口表示一个 StyleSheet 的列表。

这是一个像数组一样的对象，但是不能使用数组方法进行遍历。但是它可以通过 for 循环遍历其下标，或者把它转换成数组。

范例
--

### 使用 for 循环获取文档 styleSheet 对象
```

for (var i=0; i < document.styleSheets.length; i++){
  var styleSheet = document.styleSheets[i];
}
```

### 使用 Array 方法获取文档的所有 CSS 规则
```

var allCSS =
    [].slice.call(document.styleSheets)
        .reduce(function (prev, styleSheet) {
            if (styleSheet.cssRules) {
                return prev +
                    [].slice.call(styleSheet.cssRules)
                        .reduce(function (prev, cssRule) {
                            return prev + cssRule.cssText;
                        }, '');
            } else {
                return prev;
            }
        }, '');
```
USB
===

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

WebUSB API (en-US) 接口提供了从网页查找和连接 USB 设备的属性和方法

属性
--

None.

### Event handlers

`USB.onconnect` (en-US)

每当连接到先前配对的设备时，调用此事件处理器。

`USB.ondisconnect` (en-US)

每当配对设备断开连接时，调用此事件处理器。

方法
--

`USB.getDevices()` (en-US)

Returns a `Promise` that resolves with an array of `USBDevice` (en-US) objects for paired attached devices.

`USB.requestDevice()` (en-US)

Returns a `Promise` that resolves with an instance of `USBDevice` (en-US) if the specified device is found. Calling this function triggers the user agent's pairing flow.

规范
--

| Specification |
| --- |
| WebUSB API # usb |

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

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

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

File System API 的 **`FileSystemFileHandle`** 接口表示一个指向文件系统条目的句柄。可通过 `window.showOpenFilePicker()` 方法来访问此接口。

注意，读写操作所依赖的文件访问权限在刷新或关闭页面并且页面所属的源没有其他标签页保持打开的情况下不会继续保有。`FileSystemHandle` 接口的 `queryPermission` 方法可用于在访问文件前验证权限状态。

FileSystemHandle

FileSystemFileHandle实例属性
----

*从父类 `FileSystemHandle` 继承属性。*

实例方法
----

*从父类 `FileSystemHandle` 继承方法。*

`getFile()`

返回一个 `Promise` 对象，可兑现一个 `File` 对象，该对象表示句柄所代表的的条目在磁盘上的状态。

`createSyncAccessHandle()`

返回一个 `Promise` 对象，可兑现一个 `FileSystemSyncAccessHandle` 对象，该对象可用于同步读写文件。此方法的同步特性带来了性能优势，但是只能在专用的 Web Worker 中使用。

`createWritable()`

返回一个 `Promise` 对象，可兑现一个新建的 `FileSystemWritableFileStream` 对象，可用于写入文件。

示例
--

### 读取文件

下面的异步函数用于显示一个文件选择器，一旦有文件被选择，便可以使用 `getFile()` 方法获取其内容。


```js
async function getTheFile() {
  const pickerOpts = {
    types: [
      {
        description: "Images",
        accept: {
          "image/\*": [".png", ".gif", ".jpeg", ".jpg"],
        },
      },
    ],
    excludeAcceptAllOption: true,
    multiple: false,
  };

  // 打开文件选择器
  const [fileHandle] = await window.showOpenFilePicker(pickerOpts);
  // 获取文件内容
  const fileData = await fileHandle.getFile();
  return fileData;
}
```

### 写入文件

以下异步函数用于将给定内容写入文件句柄，从而写入磁盘。


```js
async function writeFile(fileHandle, contents) {
  // 创建一个 FileSystemWritableFileStream 用来写入。
  const writable = await fileHandle.createWritable();

  // 将文件内容写入到流中。
  await writable.write(contents);

  // 关闭文件并将内容写入磁盘。
  await writable.close();
}
```

### 同步读写文件

以下异步事件处理函数处于 Web Worker 上下文，从主线程接收消息。

* 创建一个异步文件访问句柄。
* 获取文件大小并创建一个 `ArrayBuffer` 来容纳它。
* 将文件内容读取到缓冲区中。
* 将消息编码，并将其写入到文件末尾。
* 将更改持久化至磁盘并关闭访问句柄。


```js
onmessage = async (e) => {
  // 获取从主线程发往 worker 的消息
  const message = e.data;

  // 获取草稿文件的句柄
  const root = await navigator.storage.getDirectory();
  const draftHandle = await root.getFileHandle("draft.txt", { create: true });
  // 获取同步访问句柄
  const accessHandle = await draftHandle.createSyncAccessHandle();

  // 获取文件大小
  const fileSize = accessHandle.getSize();
  // 将文件内容读取到缓冲区
  const buffer = new DataView(new ArrayBuffer(fileSize));
  const readBuffer = accessHandle.read(buffer, { at: 0 });

  // 将消息写入到文件末尾
  const encoder = new TextEncoder();
  const encodedMessage = encoder.encode(message);
  const writeBuffer = accessHandle.write(encodedMessage, { at: readBuffer });

  // 将更改持久化至磁盘
  accessHandle.flush();

  // 用完 FileSystemSyncAccessHandle 记得把它关闭
  accessHandle.close();
};
```


**备注：** 在规范早期版本中，`close()`、`flush()`、`getSize()` 和 `truncate()` 被错误地定义为异步方法。此问题现已被修正，但某些浏览器依然支持异步版本。

规范
--

| Specification |
| --- |
| File System Standard # api-filesystemfilehandle |

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

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

参见
--

* 文件系统 API
* 文件系统访问 API：简化本地文件访问
HTMLUnknownElement
==================

**`HTMLUnknownElement`** 代表着一个无效的 HTML 元素，派生自 `HTMLElement` 接口，但它没有任何可用的附加属性或方法。

属性
--

*没有特效属性，继承自父级 `HTMLElement`.*

方法
--

*没有指定方法;继承来自父级的属性，`HTMLElement`.*

规范
--

| Specification |
| --- |
| HTML Standard # htmlunknownelement |

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

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

相关内容
----

* Obsolete or non-standard HTML elements implementing this interface: `<isindex>`, `<multicol>`, `<nextid>`, `<rb>`
GamepadEvent
============

Gamepad API 的 GamepadEvent 接口包含对连接到系统的控制器的引用，这也是 gamepad 事件 events `Window.gamepadconnected` 与 `Window.gamepaddisconnected` 被触发时响应的内容。

构造函数
----

`GamepadEvent()`

返回一个新的 `GamepadEvent` 对象。

属性
--

`GamepadEvent.gamepad` 只读 

返回一个 `Gamepad` 对象，提供触发事件的控制器数据的访问。

示例
--

在触发的 `Window.gamepadconnected` 事件上调用控制器属性。


```js
window.addEventListener("gamepadconnected", function (e) {
  console.log(
    "控制器已连接于 %d 位：%s。 %d 个按键，%d 个坐标方向。",
    e.gamepad.index,
    e.gamepad.id,
    e.gamepad.buttons.length,
    e.gamepad.axes.length,
  );
});
```


与 `Window.gamepaddisconnected` 事件上的。


```js
window.addEventListener("gamepaddisconnected", function (e) {
  console.log("控制器已从 %d 位断开：%s", e.gamepad.index, e.gamepad.id);
});
```

规范
--

| Specification |
| --- |
| Gamepad # gamepadevent-interface |

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

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

参见
--

使用 Gamepad API
Performance
===========

**`Performance`** 接口可以获取到当前页面中与性能相关的信息。它是 High Resolution Time API 的一部分，同时也融合了 Performance Timeline API、Navigation Timing API、User Timing API 和 Resource Timing API。

该类型的对象可以通过调用只读属性 `Window.performance` 来获得。

**备注：** 除了以下指出的情况外，该接口及其成员在 `Web Worker` 中可用。此外，还需注意，performance 的创建和衡量都是同一环境下的。即，如果你在主线程（或者其他 worker）中创建了一个 performance，那么它在另外的 worker 线程中是不可用的；反之亦然。

属性
--

*`Performance` 接口没有继承任何属性。*

已弃用`Performance.navigation` 只读 

`PerformanceNavigation` 对象提供了在指定的时间段里发生的操作相关信息，包括页面是加载还是刷新、发生了多少次重定向等等。Not available in workers.

已弃用`Performance.timing` 只读 

`PerformanceTiming` 对象包含延迟相关的性能信息。Not available in workers.

`performance.memory` 
非标准

其是 Chrome 添加的一个非标准扩展，这个属性提供了一个可以获取到基本内存使用情况的对象。**不应该**使用这个非标准的 API。

`Performance.timeOrigin` 只读  
非标准

返回性能测量开始时的时间的高精度时间戳。

### 事件处理程序

`Performance.onresourcetimingbufferfull`

一个回调的 `EventTarget`，当触发 `resourcetimingbufferfull` 事件的时候会被调用。

方法
--

**`Performance` 接口没有继承任何方法。**

`Performance.clearMarks()`

将给定的 mark 从浏览器的性能输入缓冲区中移除。

`Performance.clearMeasures()`

将给定的 measure 从浏览器的性能输入缓冲区中移除。

`Performance.clearResourceTimings()` (en-US)

从浏览器的性能数据缓冲区中移除所有 `entryType` 是 "`resource`" 的 `performance entries`。

`Performance.getEntries()`

基于给定的 *filter* 返回一个 `PerformanceEntry` 对象的列表。

`Performance.getEntriesByName()`

基于给定的 *name* 和 *entry type* 返回一个 `PerformanceEntry` 对象的列表。

`Performance.getEntriesByType()` (en-US)

基于给定的 *entry type* 返回一个 `PerformanceEntry` 对象的列表

`Performance.mark()`

根据给出 name 值，在浏览器的性能输入缓冲区中创建一个相关的`timestamp`

`Performance.measure()`

在浏览器的指定 *start mark 和 end mark* 间的性能输入缓冲区中创建一个指定的 `timestamp`

`Performance.now()`

返回一个表示从性能测量时刻开始经过的毫秒数 `DOMHighResTimeStamp`

`Performance.setResourceTimingBufferSize()` (en-US)

将浏览器的资源 timing 缓冲区的大小设置为 "`resource`" `type` `performance entry` 对象的指定数量

`Performance.toJSON()`

其是一个 JSON 格式转化器，返回 `Performance` 对象的 JSON 对象

规范
--

| Specification |
| --- |
| High Resolution Time # sec-performance |
| Performance Timeline # extensions-to-the-performance-interface |
| Resource Timing # sec-extensions-performance-interface |
| User Timing # extensions-performance-interface |

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

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

**`ImageData`** 接口描述 `<canvas>` 元素的一个隐含像素数据的区域。使用 `ImageData()` 构造函数创建或者使用和 canvas 在一起的 `CanvasRenderingContext2D` 对象的创建方法： `createImageData()` 和 `getImageData()`。也可以使用 `putImageData()` 设置 canvas 的一部分。

构造函数
----

`ImageData()` 
实验性

 三个参数，第一个 是`Uint8ClampedArray`的实例，第二个和第三个表示的是 width 和 height，必须保证 Uint8ClampedArray 的 length = 4\*width\*height 才不会报错，如果第一个参数 Uint8ClampedArray 没有的话，自动按照 width 和 height 的大小，以 0 填充整个像素矩阵。
 使用给定的`Uint8ClampedArray`创建一个 `ImageData` 对象，并包含图像的大小。如果不给定数组，会创建一个“完全透明”(因为透明度值为 0) 的黑色矩形图像。注意，这是最常见的方式去创建这样一个对象，在 `createImageData()` 不可用时。


属性
--

`ImageData.data` 只读 

`Uint8ClampedArray` 描述了一个一维数组，包含以 RGBA 顺序的数据，数据使用 `0` 至 `255`（包含）的整数表示。

`ImageData.height` 只读 

无符号长整型（`unsigned long`），使用像素描述 **ImageData** 的实际高度。

`ImageData.width` 只读 

无符号长整型（`unsigned long`），使用像素描述 **ImageData** 的实际宽度。

规范
--

| Specification |
| --- |
| HTML Standard # imagedata |

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

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

参见
--

* `CanvasRenderingContext2D`
* `<canvas>` 元素及其相关的接口 `HTMLCanvasElement`。
媒体流 (MediaStream)
=================

 **`MediaStream`** 接口是一个媒体内容的流.。一个流包含几个*轨道*，比如视频和音频轨道。属性
--

`MediaStream.active` 只读 

布尔型。如果这个流处于活动状态值为 true，反之为 false

`MediaStream.ended` 只读 
已弃用

布尔型。如果 `ended` 事件在这个对象上触发了，也就是说这个流已经被完全读取，值为 true。如果还没有到达这个流的尾部，值为 false。

`MediaStream.id` 只读 

这是一个包含 36 个字符的 `DOMString` ，用来作为这个对象的唯一标识符 (GUID) 。

### 事件处理

`MediaStream.onaddtrack` (en-US)

这是 `addtrack` 事件在这个对象上触发时调用的事件处理器，这时一个`MediaStreamTrack`对象被添加到这个流。

`MediaStream.onended`

这是当流终止 `ended` 时触发的事件。

`MediaStream.onremovetrack` (en-US)

这是 `removetrack` 事件在这个对象上触发事调用的事件处理器，这时一个对象从流上移除。

方法
--

* `MediaStream.addTrack()`
    + : 存储传入参数 `MediaStreamTrack` 的一个副本。如果这个轨道已经被添加到了这个媒体流，什么也不会发生; 如果目标轨道为“完成”状态（也就是已经到尾部了），一个 INVALID\_STATE\_RAISE 异常会产生。
* `MediaStream.clone()` (en-US)
    + 返回这个 `MediaStream 对象的克隆版本。返回的版本会有一个新的 ID`。
    + 返回给定 ID 的轨道。如果没有参数或者没有指定 ID 的轨道，将返回 null。如果有几个轨道有同一个 ID，将返回第一个。
* `MediaStream.getTracks()`
    + : 返回流中所有的`MediaStreamTrack`列表。
* `MediaStream.getAudioTracks()`
    + : 返回流中 kind 属性为"audio"的`MediaStreamTrack`列表。顺序是不确定的，不同浏览器间会有不同，每次调用也有可能不同。
* `MediaStream.getTrackById()` (en-US)
    + : 返回给定 ID 的轨道。如果没有参数或者没有指定 ID 的轨道，将返回 null。如果有几个轨道有同一个 ID，将返回第一个。
* `MediaStream.getVideoTracks()` (en-US)
    + : 返回流中 kind 属性为"video"的`MediaStreamTrack`列表。顺序是不确定的，不同浏览器间会有不同，每次调用也有可能不同。
* `MediaStream.removeTrack()` (en-US)
    + : 移除作为参数传入的 `MediaStreamTrack`。如果这个轨道不在 `MediaStream` 对象中什么也不会发生；
     如果目标轨道为“完成”状态，一个 INVALID\_STATE\_RAISE 异常会产生。
规范
--

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

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

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

相关内容
----

* Using the MediaStream API
Media Source Extensions API
===========================

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

媒体源扩展 API（MSE）提供了实现无插件且基于 Web 的流媒体的功能。使用 MSE，媒体串流能够通过 JavaScript 创建，并且能通过使用 `<audio>` 和 `<video>` 元素进行播放。

概念和用法
-----

近几年来，我们已经可以在 Web 应用程序上无插件地播放视频和音频了。但是，现有架构过于简单，只能满足一次播放整个曲目的需要，无法实现拆分/合并数个缓冲文件。流媒体直到现在还在使用 Flash 进行服务，以及通过 RTMP 协议进行视频串流的 Flash 媒体服务器。

### MSE 标准

媒体源扩展（MSE）实现后，情况就不一样了。MSE 使我们可以把通常的单个媒体文件的 `src` 值替换成引用 `MediaSource` 对象（一个包含即将播放的媒体文件的准备状态等信息的容器），以及引用多个 `SourceBuffer` 对象（代表多个组成整个串流的不同媒体块）的元素。MSE 让我们能够根据内容获取的大小和频率，或是内存占用详情（例如什么时候缓存被回收），进行更加精准地控制。它是基于它可扩展的 API 建立自适应比特率流客户端（例如 DASH 或 HLS 的客户端）的基础。

在现代浏览器中创造能兼容 MSE 的媒体（assets）非常费时费力，还要消耗大量计算机资源和能源。此外，还须使用外部实用程序将内容转换成合适的格式。虽然浏览器支持兼容 MSE 的各种媒体容器，但采用 H.264 视频编码、AAC 音频编码和 MP4 容器的格式是非常常见的，且一定兼容。MSE 同时还提供了一个 API，用于运行时检测容器和编解码是否受支持。

如果没有精确的控制时间、媒体质量和内存释放等需求，使用 `<video>` 和 `<source>` 是一个更加简单但够用的方案。

### DASH

DASH（Dynamic Adaptive Streaming over HTTP）是一个规范了自适应内容应当如何被获取的协议。它实际上是建立在 MSE 顶部的一个层，用来构建自适应比特率串流客户端。虽然已经有一个类似的协议了（例如 HTTP 串流直播（HLS）），但 DASH 有最好的跨平台兼容性，这就是我们在这里介绍它的原因。

DASH 将大量逻辑从网络协议中移出到客户端应用程序逻辑中，使用更简单的 HTTP 协议获取文件。这样就可以用一个简单的静态文件服务器来支持 DASH，这对 CDN 也很友好。这与之前的流传输解决方案形成鲜明对比，那些流解决方案需要昂贵的许可证来获得非标准的客户端/服务器协议才能实现。

DASH 的两个最常见的用例涉及“点播”或“直播”观看内容。点播功能让开发者有时间把媒体文件转码出多种不同的分辨率质量。

实时处理内容会引入由转码和播发带来的延迟。因此 DASH 并不适用于类似 WebRTC 的即时通讯。但它可以支持比 WebRTC 更多的客户端连接。

有非常多的自由开源的工具，能实现转码内容，并将其改造，以适应 DASH、DASH 文件服务器和用 JavaScript 编写的 DASH 客户端库。

媒体源扩展接口
-------

`MediaSource`

代表了将由 `HTMLMediaElement` 对象播放的媒体资源。

`SourceBuffer`

代表了一个经由 `MediaSource` 对象被传入 `HTMLMediaElement` 的媒体块。

`SourceBufferList`

列出多个 `SourceBuffer` 对象的简单的容器列表。

`VideoPlaybackQuality`

包含了有关正被 `<video>` 元素播放的视频的质量信息，例如被丢弃或损坏的帧的数量。由 `HTMLVideoElement.getVideoPlaybackQuality()` (en-US) 方法返回。

其他接口的扩展
-------

`URL.createObjectURL()`

创建一个指向一个 `MediaSource` 对象的 URL。要求此 URL 可以被指定为一个用来播放媒体流的 HTML 媒体元素的 `src` 的值。

`HTMLMediaElement.seekable`

当一个 `MediaSource` 对象被 HTML 媒体元素播放时，此属性将返回一个包含用户能够在什么时间范围内进行调整的对象 `TimeRanges`。

`HTMLVideoElement.getVideoPlaybackQuality()` (en-US)

针对正在播放的视频，返回一个 `VideoPlaybackQuality` 对象。

`AudioTrack.sourceBuffer` (en-US), `VideoTrack.sourceBuffer` (en-US), `TextTrack.sourceBuffer`

返回创建了相关轨道的 `SourceBuffer`。

规范
--

| Specification |
| --- |
| Media Source Extensions™  |

参见
--

* 媒体源扩展的音视频资源转码 (en-US)
* 用 MSE 创建基础的流服务（待定）
* 用 MPEG DASH 创建流应用（待定）
* `<audio>` 和 `<video>` 元素。
* `HTMLMediaElement`、`HTMLVideoElement`、`HTMLAudioElement`。
BeforeInstallPrompt
===================

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

在一个用户被提示”安装“一个网站到移动设备的一个主屏幕之前，**`BeforeInstallPromptEvent`** 被 `Window.onbeforeinstallprompt` 处理程序触发。

该接口继承自`Event`接口。

构造器
---

`new window.BeforeInstallPromptEvent(name, eventInitOptions)`

创建一个新的 **`BeforeInstallPromptEvent`**.

属性
--

*继承自父类，`Event`.*

`BeforeInstallPromptEvent.platform` 只读 

返回一个包含了调度事件的平台（s）的 `DOMString` 数组。这是为希望向用户提供版本选择的 user agent 提供的，例如，“web”或“play”允许用户在 web 版本或 Android 版本之间进行选择。

`BeforeInstallPromptEvent.userChoice` (en-US) 只读 

返回一个可以解析为 `DOMString` 的 `Promise` ，其值为 'installed' 或 'dismissed'，用以判断用户是否选择安装该 PWA。

方法
--

`BeforeInstallPromptEvent.prompt()`

立即弹出安装提示。允许开发者按照自己选择的时间弹出安装提示。该方法返回 `Promise`。

例子
--
```

window.addEventListener("beforeinstallprompt", function(e) {
  // log the platforms provided as options in an install prompt
  console.log(e.platforms); // e.g., ["web", "android", "windows"]
  e.userChoice.then(function(outcome) {
    console.log(outcome); // either "installed", "dismissed", etc.
  }, handleError);
});
```

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

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

**Channel Messaging API** 允许两个不同的脚本运行在同一个文档的不同浏览器上下文（比如两个 iframe，或者文档主体和一个 iframe，使用 `SharedWorker` 的两个文档，或者两个 worker）来直接通讯，在每端使用一个端口（port）通过双向频道（channel）向彼此传递消息。

**备注：** 此特性在 Web Worker 中可用

Channel 通信的概念和用法
----------------

使用 `MessageChannel()` 构造函数来创建通讯信道。一旦创建，信道的两个端口即可通过 `MessageChannel.port1` 和 `MessageChannel.port2` 属性进行访问（都会返回 `MessagePort` 对象）。创建信道的应用程序使用 `port1`，在另一端的程序使用 `port2`——你向 `port2` 发送信息，然后携带 2 个参数（需要传递的消息，要传递所有权的对象，在这里是 port 自身）调用 `window.postMessage` 方法将端口信息传递到另一个浏览器上下文。

当这些可传递的对象被传递后，他们就从之前所属的上下文中消失了。比如一个 port，一旦被发送，在原本的上下文中就再也不可用了。注意当前仅有 `ArrayBuffer` 和 `MessagePort` 对象可以被发送。

另一个浏览器上下文可以使用 `MessagePort.onmessage` 监听信息，并使用事件的 `data` 属性获取消息内容。你可以通过 `MessagePort.postMessage` (en-US) 向原来的文档发送应答消息。

当你想要停止通过信道发送消息时，你可以调用来关闭 `MessagePort.close` (en-US) 端口。

更多使用这个 API 的资料参见：Using channel messaging 。

Channel 通信接口
------------

`MessageChannel`

创建一个新的发送消息的信道。

`MessagePort`

控制消息信道的端口，允许从一个端口发送消息，并监听另一端消息的到来。

`PortCollection`

`MessagePort` 数组，一种同时向多个端口广播消息的实验性解决方案。

例子
--

* 我们在 Github 上发布了 channel messaging 基本演示，在这里直接尝试。这个例子展示了一次页面和嵌入 `<iframe>` 间的真实而简易的消息传递。
* 你也可以参考多个消息演示（在线演示）。这个例子展示了稍微复杂些的设置，可以在主页面和 IFrame 之间传递多条消息。
规范
--

| Specification |
| --- |
| HTML Standard # channel-messaging |

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

### api.MessageChannel

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

### api.MessagePort

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

参见
--

* Using channel messaging
* Web Workers API
* Broadcast Channel API
DOMImplementation
=================

**`DOMImplementation`** 接口代表了一个对象，这个对象提供了不依赖于任何 document 的方法。这个对象可以通过`Document.implementation`属性获得

属性
--

*这个接口没有特定的属性，并且也没有继承到任何属性。*

方法
--

*没有继承的方法。*

`DOMImplementation.createDocument()`

创建并返回一个 `XMLDocument`对象。

`DOMImplementation.createDocumentType()`

创建并返回一个 `DocumentType`对象。

`DOMImplementation.createHTMLDocument()`

创建并返回一个 `Document`对象。

`DOMImplementation.hasFeature()` (en-US)

返回一个是否支持所给定特性的`Boolean` (en-US)值。这个方法是不可靠的，仅用于兼容性目的：除了 SVG 相关的查询，它总是返回 `true`。旧浏览器的行为非常不一致

规范
--

| Specification |
| --- |
| DOM Standard # interface-domimplementation |

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

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

参见
--

* DOM 接口索引
TouchList
=========

**`TouchList`** 接口代表一个触摸平面上所有触点的列表。例如，如果一个用户用三根手指接触屏幕（或者触控板），与之对应的 `TouchList` 会包含每根手指的 `Touch` 对象，总共三个。

属性
--

`TouchList.length` (en-US) 只读 

返回`TouchList`中 `Touch` 对象的数量。

方法
--

`TouchList.identifiedTouch()`
已弃用

列表中标示符与指定值匹配的第一个`Touch` 对象会被返回。

`TouchList.item()` (en-US)

返回列表中以指定值作为索引的 `Touch` 对象。

示例
--

参考这个主要 Touch 事件的示例.

规范
--

| Specification |
| --- |
| Touch Events # touchlist-interface |

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

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

相关链接
----

* Touch 事件
* `Document.createTouchList()` (en-US)
CSS 分页规则
========

**`CSSPageRule`** 是代表一个 css 接口 `@page` 规则。它实现了 `CSSRule` 类型值为 6 的接口 (`CSSRule.PAGE_RULE`).

语法
--

这个语法是使用 WebIDL 格式。
```

interface CSSPageRule : CSSRule {
  attribute DOMString selectorText;
  readonly attribute CSSStyleDeclaration style;
};
```

Properties
----------

`CSSRule`, `CSSPageRule` 也实现了此接口的属性。它具有以下特定属性：

`CSSPageRule.selectorText` (en-US)

表示与规则关联的页面选择器的文本。

`CSSPageRule.style` (en-US) 只读 

返回与规则关联的声明块。

Methods
-------

作为 `CSSRule`, `CSSPageRule` 的 CSSPageRule 还实现了该接口的方法。它没有具体方法。

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

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

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

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