recursal/MDN huggingface dataset:
AnalyserNode
============

**`AnalyserNode`** 接口表示了一个可以提供实时频域和时域分析信息的节点。它是一个不对音频流作任何改动的 `AudioNode`，同时允许你获取和处理它生成的数据，从而创建音频可视化。

`AnalyzerNode` 只有一个输入和输出，即使未连接到输出它也能正常工作。

![Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT.](/zh-CN/docs/Web/API/AnalyserNode/webaudiofft.png)


|  |  |
| --- | --- |
| 输入数 | `1` |
| 输出数 | `1` (但可能是未连接的) |
| 通道计数模式 | `"explicit"` |
| 通道数 | `1` |
| 通道解释 | `"speakers"` |

继承
--

继承自以下父接口：

EventTarget

AudioNode

AnalyserNode构造函数
----

`AnalyserNode()`

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

属性
--

*继承属性自* *`AudioNode`。*

`AnalyserNode.fftSize`

一个无符号长整形 (unsigned long) 的值，代表了用于计算频域信号时使用的 FFT (快速傅里叶变换) 的窗口大小。

`AnalyserNode.frequencyBinCount` 只读 

一个无符号长整形 (unsigned long) 的值，值为 fftSize 的一半。这通常等于将要用于可视化的数据值的数量。

`AnalyserNode.minDecibels` (en-US)

是一个双精度值，表示 FFT 分析频域数据并转换为无符号字节值时，对输入的功率数据的最小阈值 - 基本上，它限定了调用`getByteFrequencyData()`时结果范围的最小值

`AnalyserNode.maxDecibels` (en-US)

是一个双精度值，表示 FFT 分析频域数据并转换为无符号字节值时，对输入的功率数据的最大阈值 - 基本上，它限定了调用`getByteFrequencyData()`时结果范围的最大值

`AnalyserNode.smoothingTimeConstant`

是一个双精度浮点型 (double) 的值，表示最后一个分析帧的平均常数 — 基本上，它随时间使值之间的过渡更平滑。

方法
--

*继承方法自* *`AudioNode`*.

`AnalyserNode.getFloatFrequencyData()`

将当前频域数据拷贝进`Float32Array` (en-US)数组。

`AnalyserNode.getByteFrequencyData()`

将当前频域数据拷贝进`Uint8Array` (en-US)数组（无符号字节数组）。

`AnalyserNode.getFloatTimeDomainData()` (en-US)

将当前波形，或者时域数据拷贝进`Float32Array` (en-US)数组。

`AnalyserNode.getByteTimeDomainData()`

将当前波形，或者时域数据拷贝进 `Uint8Array` (en-US)数组（无符号字节数组）。

例子
--

**备注：** 查看 Visualizations with Web Audio API 指南以获得更多关于创建音频可视化效果的信息。

### 基础用法

下面的例子展示了 `AudioContext` 创建一个 `AnalyserNode`, 然后用 `requestAnimationFrame` 和 `<canvas>` 去反复收集当前音频的时域数据，并绘制为一个示波器风格的输出 (频谱).

更多的例子/信息，查看 Voice-change-O-matic 演示 (相关代码在 app.js 的 128 行~205 行).


```js
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();

// ...

analyser.fftSize = 2048;
var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);

// 获取 ID 为 "oscilloscope" 的画布
var canvas = document.getElementById("oscilloscope");
var canvasCtx = canvas.getContext("2d");

// 绘制一个当前音频源的示波器

function draw() {
  drawVisual = requestAnimationFrame(draw);

  analyser.getByteTimeDomainData(dataArray);

  canvasCtx.fillStyle = "rgb(200, 200, 200)";
  canvasCtx.fillRect(0, 0, canvas.width, canvas.height);

  canvasCtx.lineWidth = 2;
  canvasCtx.strokeStyle = "rgb(0, 0, 0)";

  canvasCtx.beginPath();

  var sliceWidth = (canvas.width \* 1.0) / bufferLength;
  var x = 0;

  for (var i = 0; i < bufferLength; i++) {
    var v = dataArray[i] / 128.0;
    var y = (v \* canvas.height) / 2;

    if (i === 0) {
      canvasCtx.moveTo(x, y);
    } else {
      canvasCtx.lineTo(x, y);
    }

    x += sliceWidth;
  }

  canvasCtx.lineTo(canvas.width, canvas.height / 2);
  canvasCtx.stroke();
}

draw();
```

规范
--

| Specification |
| --- |
| Web Audio API # AnalyserNode |

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

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

相关内容
----

* Web Audio API 的运用 (en-US)
支付请求接口
======

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

支付请求 API 为商家和支付者提供了统一的用户体验。它并非提供一种新的支付方式，而是让用户可以在原有的支付方式中进行选择，并使商家可以获悉用户的支付情况。

支付请求的概念和使用
----------

在网上购物时，使许多用户中止购物车结算的原因都可以被归结为填写支付信息表单时的步骤繁多导致的费时费力。**支付请求 API**正是被用以减少支付步骤，逐步彻底消除表单的填写。它的目的是简化结算流程，而实现此目的的方式是通过保存用户相关信息并传送给商家。在理想的情况下，用户将不需要填写 HTML 表单。

使用支付请求 API 中“保存卡信息并自动扣款”（使用银行卡支付时）的优点：

* **快捷的购买体验**：用户在浏览器上只需输入一次银行卡信息，之后便可一键对网络上提供的商品和服务进行支付。即使在不同的站点购物，他们也不需要反复填写相同的支付信息。
* **跨站点的统一用户体验（仅指支持此 API 的站点）**：浏览器统一控制支付页面，使定制化内容得以实现。可以定制的内容包括语言的本地化。
* **无障碍体验**：支付页面中的表单元素由浏览器控制，使得键盘输入和屏幕朗读在跨站点时也能以统一的方式工作，且不需要开发者的额外开发。浏览器也可以对支付页面中的字体大小、颜色对比度进行同一调节，使用户在支付过程中获得更加舒适的体验。
* **认证管理**：用户可以直接通过浏览器管理自己的信用卡和收件地址，且浏览器可以在不同设备间同步这些“认证信息”。这样，用户就能在购物时灵活地在电脑和移动设备间来回切换。
* **统一的异常信息处理**：浏览器可以检查信用卡卡号的有效性，并在卡片已经（或即将）过期时告知用户。浏览器可以通过用户过去的使用习惯和商家的支付规则（例如，“我们只支持 Visa 或 Mastercard”）自动对此次交易使用卡片的选择提出建议。用户还可以自行设置默认/最偏好的卡片。

当用户在页面上进行操作发起一次支付，比如点击“购买”按钮时，网页会相应地创建一个`PaymentRequest` (en-US)对象。`PaymentRequest`对象允许网页与用户代理交互，传送用户输入的用以交易的信息。

你可以在Using the Payment Request API (en-US)中查看完整指南。

**备注：** 此 API 只有在设置了`allowpaymentrequest`属性时才支持`<iframe>`元素的跨域使用。

接口
--

`PaymentAddress` (en-US)

一个包含地址信息的对象；例如，可以包含账单地址和收货地址。

`PaymentRequest` (en-US)

一个提供了创建和管理 user agent's支付接口的对象。

`PaymentRequestEvent` (en-US)

当`PaymentRequest` (en-US)发生时，被传送给支付回调函数的事件。

`PaymentRequestUpdateEvent` (en-US)

当用户进行操作时，使网页可以更新相应的支付信息的事件。

`PaymentMethodChangeEvent` (en-US)

代表支付凭证改变（例如，用户将支付方式从信用卡改为了借记卡）的事件。

`PaymentResponse` (en-US)

一个对象，当用户选择了一种支付方式并同意发起交易请求后被返回。

`MerchantValidationEvent` (en-US)

代表浏览器要求商家（网站）证实自身被允许使用某种特定的支付回调函数（例如，注册了对 Apply Pay 支付方式的使用）的事件。

词典
--

`AddressErrors`

一个由字符串组成的词典，包含用以描述任何`PaymentAddress` (en-US)条目中可能出现的报错的相应描述。

`PayerErrors`

一个由字符串组成的词典，包含了`PaymentResponse` (en-US)中出现的有关邮件地址、电话号码及姓名的报错的相应描述。

`PaymentDetailsUpdate` (en-US)

一个对象，用于描述当服务器在发起支付请求后且在用户与之交互前，需要更新支付信息的事件。

### “保存卡信息并自动扣款”规范的相关词典

`BasicCardChangeDetails`

一个对象，提供了当用户更改支付信息时，`methodDetails` (en-US) 中传送通过 `paymentmethodchange` (en-US) 事件传送给 `PaymentRequest` (en-US) 的*删节的*地址信息。

`BasicCardErrors`

一个对象，提供了`BasicCardResponse`中无效信息的相关错误提示。错误发生时，该对象被传送给`PaymentRequest` (en-US)，作为`PaymentValidationErrors` (en-US)对象中`paymentMethod`属性的值。

`BasicCardRequest`

定义了支付请求信息（例如“卡类型”）对象的结构。

`BasicCardResponse`

定义了支付请求响应（例如被使用的银行卡的“卡号”、“有效期”和“账单地址”）对象的结构。

规范
--

| Specification |
| --- |
| Payment Request API 1.1 # paymentrequest-interface |

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

### 支付请求接口

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

相关文档
----

* Using the Payment Request API (en-US)
* Payment processing concepts
* Introducing the Payment Request API for Apple Pay
* Google Pay API PaymentRequest Tutorial
* W3C Payment Request API FAQ
Battery Status API
==================

**Battery Status API**，更多时候被称之为 **Battery API**, 提供了有关系统充电级别的信息并提供了通过电池等级或者充电状态的改变提醒用户的事件。这个可以在设备电量低的时候调整应用的资源使用状态，或者在电池用尽前保存应用中的修改以防数据丢失。

Battery Status API 向 `window.navigator` 扩展了一个 `navigator.getBattery` 方法，其返回了一个 battery promise, 完成后传递一个 `BatteryManager` 对象，并提供了一些新的可以操作电池状态的事件。

示例
--

在这个例子中，我们同时监听放电状态和电池等级和剩余事件的事件（不论是否正在充电还是在使用电池）。这可以通过监听 `chargingchange` (en-US)、`levelchange` (en-US)、`chargingtimechange` (en-US)、`dischargingtimechange` (en-US) 事件完成。


```js
navigator.getBattery().then((battery) => {
  function updateAllBatteryInfo() {
    updateChargeInfo();
    updateLevelInfo();
    updateChargingInfo();
    updateDischargingInfo();
  }
  updateAllBatteryInfo();

  battery.addEventListener("chargingchange", () => {
    updateChargeInfo();
  });
  function updateChargeInfo() {
    console.log(`Battery charging? ${battery.charging ? "Yes" : "No"}`);
  }

  battery.addEventListener("levelchange", () => {
    updateLevelInfo();
  });
  function updateLevelInfo() {
    console.log(`Battery level: ${battery.level \* 100}%`);
  }

  battery.addEventListener("chargingtimechange", () => {
    updateChargingInfo();
  });
  function updateChargingInfo() {
    console.log(`Battery charging time: ${battery.chargingTime} seconds`);
  }

  battery.addEventListener("dischargingtimechange", () => {
    updateDischargingInfo();
  });
  function updateDischargingInfo() {
    console.log(`Battery discharging time: ${battery.dischargingTime} seconds`);
  }
});
```


另见 标准中的例子.

规范
--

| Specification |
| --- |
| Battery Status API  |

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

### api.BatteryManager

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

### api.Navigator.getBattery

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

另见
--

* Retrieving battery status information - demo & article
* Hacks blog post - Using the Battery API
CSSMediaRule
============

**`CSSMediaRule`** 是一个表示单个 CSS `@media` 规则的接口。它实现了 `CSSConditionRule` 接口，因此也是 `CSSGroupingRule`，也相当于`CSSRule`中类型值为 `4` 的规则类型（即`CSSRule.MEDIA_RULE`）。

语法
--

下列语法是使用 WebIDL 格式描述的。
```

interface CSSMediaRule : CSSConditionRule {
    readonly attribute MediaList media;
}
```

属性
--

作为一个 `CSSConditionRule`，同时也是 `CSSGroupingRule` 和 `CSSRule`，`CSSMediaRule` 也实现（继承）了来自这些接口的属性。它还有如下属性：

`CSSMediaRule.media` (en-US) 只读 

声明了一个 `MediaList`，表示指定目标媒体中的样式信息。

方法
--

作为一个 `CSSConditionRule`，同时也是 `CSSGroupingRule` 和 `CSSRule`，`CSSMediaRule` 也实现（继承）了来自这些接口的方法。除此之外，没有其他方法。

规范
--

| Specification |
| --- |
| CSS Conditional Rules Module Level 3 # the-cssmediarule-interface |

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

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

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

WebGPU API 的 **`GPUAdapterInfo`** 接口包含关于 `GPUAdapter` 的标识信息。

使用 `GPUAdapter.requestAdapterInfo()` (en-US) 方法去请求 `GPUAdapterInfo` 对象。

实例属性
----

`architecture` (en-US) 
实验性
 只读 

适配器所属的 GPU 家族或类别的名称。如果不能获得，则返回空字符串。

`description` (en-US) 
实验性
 只读 

描述适配器的人类可读字符串。如果不能获得，则返回空字符串。

`device` (en-US) 
实验性
 只读 

适配器供应商的标识符。如果不能获得，则返回空字符串。

`vendor` (en-US) 
实验性
 只读 

适配器供应商的名称。如果不能获得，则返回空字符串。

示例
--


```js
async function init() {
  if (!navigator.gpu) {
    throw Error("WebGPU not supported.");
  }

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw Error("Couldn't request WebGPU adapter.");
  }

  const adapterInfo = await adapter.requestAdapterInfo();
  console.log(adapterInfo.architecture);
  console.log(adapterInfo.vendor);

  // ...
}
```

规范
--

| Specification |
| --- |
| WebGPU # gpu-adapterinfo |

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

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

参见
--

* WebGPU API
ResizeObserverEntry
===================

**`ResizeObserverEntry`** 接口是传递给 `ResizeObserver()` 构造函数中的回调函数参数的对象，它允许你获取真正在观察的 `Element` 或 `SVGElement` 最新的大小。

属性
--

`ResizeObserverEntry.borderBoxSize` 只读 

一个对象，当运行回调时，该对象包含着正在观察元素的新边框盒的大小。

`ResizeObserverEntry.contentBoxSize` 只读 

一个对象，当运行回调时，该对象包含着正在观察元素的新内容盒的大小。

`ResizeObserverEntry.devicePixelContentBoxSize` 只读 

一个对象，当运行回调时，该对象包含着正在观察元素的新内容盒的大小（以设备像素为单位）。

`ResizeObserverEntry.contentRect` 只读 

一个对象，当运行回调时，该对象包含着正在观察元素新大小的 `DOMRectReadOnly` 对象。请注意，这比以上两个属性有着更好的支持，但是它是 Resize Observer API 早期实现遗留下来的，出于对浏览器的兼容性原因，仍然被保留在规范中，并且在未来的版本中可能被弃用。

`ResizeObserverEntry.target` 只读 

对正在观察 `Element` 或 `SVGElement` 的引用。


**备注：** 内容盒是放置内容的盒子，即边框盒减去内边距和边框宽度。边框盒包含内容、内边距和边框。更多解释参见盒模型。

方法
--

无。

示例
--

以下片段取自 resize-observer-text.html（参见源代码）示例。这使用了一个简单的特征检查去查看是否浏览器支持较新的 `contentBoxSize` 属性——如果支持，它将使用它获取需要的尺寸数据。如果不支持，它将使用一个较旧的 `contentRect` 属性。


```js
const resizeObserver = new ResizeObserver((entries) => {
  for (let entry of entries) {
    if (entry.contentBoxSize) {
      h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentBoxSize.inlineSize / 200,
 )}rem`;
      pElem.style.fontSize = `${Math.max(
 1,
 entry.contentBoxSize.inlineSize / 600,
 )}rem`;
    } else {
      h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentRect.width / 200,
 )}rem`;
      pElem.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
    }
  }
});
resizeObserver.observe(divElem);
```

规范
--

| Specification |
| --- |
| Resize Observer # resize-observer-entry-interface |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Local Font Access API
=====================

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

**Local Font Access API** 提供了一种访问用户本地安装的字体数据的机制——这包括更高层次的详细信息，例如名称、样式和系列，以及底层字体文件的原始字节内容。

概念和用法
-----

Web 字体允许 Web 设计人员提供在 Web 文档上使用的自定义字体，因而在实现 Web 排版方面具有革命性意义。通过 `@font-face` at 规则，Web 字体可以通过 `url()` 函数中提供的 URL 加载。

`@font-face` 还有其他几个有用的特性。特别是，你还可以在 `local()` 函数中指定字体的完整名称或 Postscript 名称，以告诉浏览器在用户计算机上安装了该字体时使用本地副本。这并非没有问题——`local()` 作为指纹向量已经变得臭名昭著。

此外，由于准确的字体枚举和访问底层字体数据（例如，应用过滤器和转换）方面的挑战，高端设计工具历来难以在 Web 上提供。当前的应用程序通常依赖于变通办法，例如要求用户将字体上传到服务器，在服务器上处理字体以获取原始字节数据，或者安装单独的本地程序以提供附加功能。

Local Font Access API 的创建就是为了解决这些问题。

`Window.queryLocalFonts()` 方法提供对本地安装的字体的数组的访问，每个字体都由一个 `FontData` 对象实例表示。`FontData` 有多个属性，提供对名称、样式和字体族的访问，并且它还有一个 `blob()` 方法，提供对包含底层字体文件的原始字节内容的 `Blob` 的访问。

在隐私和安全方面：

* 本地字体访问 API 旨在仅提供对解决上述问题所需的数据的访问。它既不要求浏览器提供可用本地字体的完整列表，也不要求按照磁盘上出现的顺序提供数据。
* 当调用 `Window.queryLocalFonts()` 时，系统会请求用户授予访问其本地字体的权限。此权限的状态可以通过 `Permissions API` (en-US)（`local-fonts` 权限）查询。
* 你可以使用 `local-fonts` (en-US) 权限策略控制对此特性的访问。
接口
--

`FontData`

代表单个本地字体。

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

`Window.queryLocalFonts()`

返回一个 `Promise`，它会兑现一个表示本地可用字体的 `FontData` 对象的数组。

示例
--

有关实时演示，请参阅字体选择演示。

### 特性检测


```js
if ("queryLocalFonts" in window) {
  // 支持本地字体访问 API
}
```

### 字体枚举

以下代码片段将查询所有可用字体并打印元数据。例如，这可以用于填充字体选择器控件。


```js
async function logFontData() {
  try {
    const availableFonts = await window.queryLocalFonts();
    for (const fontData of availableFonts) {
      console.log(fontData.postscriptName);
      console.log(fontData.fullName);
      console.log(fontData.family);
      console.log(fontData.style);
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}
```

### 访问底层数据

`blob()` 方法提供对底层 SFNT 数据的访问——这是一种可以包含其他字体格式的字体文件格式，例如 PostScript、TrueType、OpenType 或 Web 开放字体格式（WOFF）。


```js
async function computeOutlineFormat() {
  try {
    const availableFonts = await window.queryLocalFonts({
      postscriptNames: ["ComicSansMS"],
    });
    for (const fontData of availableFonts) {
      // `blob()` 方法返回一个包含有效且完整的 SFNT 包装字体数据的 Blob。
      const sfnt = await fontData.blob();
      // 仅裁剪出我们需要的字节部分：前 4 个字节是 SFNT 版本信息。
      // 规范：https://learn.microsoft.com/zh-cn/typography/opentype/spec/otff#organization-of-an-opentype-font
      const sfntVersion = await sfnt.slice(0, 4).text();

      let outlineFormat = "UNKNOWN";
      switch (sfntVersion) {
        case "\x00\x01\x00\x00":
        case "true":
        case "typ1":
          outlineFormat = "truetype";
          break;
        case "OTTO":
          outlineFormat = "cff";
          break;
      }
      console.log("矢量字体格式：", outlineFormat);
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}
```

规范
--

| Specification |
| --- |
| Local Font Access  |

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

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

参见
--

* 使用带有本地字体的高级排版
* `@font-face`
* `local-fonts` (en-US) 权限策略指令
MediaElementAudioSourceNode
===========================

`MediaElementAudioSourceNode` 接口代表着某个由 HTML `<audio>` 或 `<video>` 元素所组成的音频源。该接口作为 `AudioNode` 音源节点。

`MediaElementSourceNode` 没有输入，且只有一个输出，其由 `AudioContext.createMediaElementSource` 方法创建。输出的频道数目与节点创建时引用音频 `HTMLMediaElement` 的频道数目一致，或当 `HTMLMediaElement` 无音频时，频道数目为 1。

EventTarget

AudioNode

MediaElementAudioSourceNode

|  |  |
| --- | --- |
| 输入数目 | `0` |
| 输出数目 | `1` |
| 通道数 | 2（但请注意 `AudioNode.channelCount` (en-US) 仅用于 `AudioNode` 输入的上混和下混，而 `MediaElementAudioSourceNode` 则没有任何输入） |

构造函数
----

`MediaElementAudioSourceNode.MediaElementAudioSourceNode()` (en-US)

创建一个新的 `MediaElementAudioSourceNode` 实例。

实例属性
----

*继承其父接口 `AudioNode` 的属性*。

实例方法
----

*继承其父接口 `AudioNode` 的方法*。

示例
--

参见 `AudioContext.createMediaElementSource()` 以获取示例代码。

规范
--

| Specification |
| --- |
| Web Audio API # MediaElementAudioSourceNode |

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

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

参见
--

* 使用 Web Audio API
WebRTC API
==========

**WebRTC**（Web Real-Time Communications）是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。WebRTC 包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，创建点对点（Peer-to-Peer）的数据分享和电话会议成为可能。

WebRTC 包含了若干相互关联的 API 和协议以达到这个目标。你在这里看到的文档将会帮助你理解 WebRTC 的基本概念，还会教你如何去建立和使用可以传输媒体数据和其他任意数据的连接。当然你还会学到更多其他的东西。

参考
--

* `RTCPeerConnection`
* `RTCSessionDescription`
* `RTCIceCandidate` (en-US)
* `RTCPeerConnectionIceEvent` (en-US)
* `MessageEvent`
* `MediaStream`
* `RTCStatsReport`
* `RTCIdentityEvent`
* `RTCIdentityErrorEvent`
* `MediaStreamEvent`
* `MediaStreamTrack`
* `MediaDevices`
指南
--

WebRTC 架构概述 (en-US)

用来创建 WebRTC 连接的 API 底层使用了一系列的网络协议和连接标准。这篇文章涵盖了这些标准。

WebRTC 基础 (en-US)

这篇文章将带你贯穿一个跨浏览器 RTC 应用的整个创建过程。结束的时候，你将拥有一个可以运行的点对点（peer-to-peer）数据通道（data channel）和媒体通道（media channel）。

WebRTC 协议

这篇文章介绍了一系列的协议，WebRTC API 就是建立于他们之上。

WebRTC 连接

这篇文章将向你介绍为创建点对点的连接并且实现数据或/和媒体的传输，各个 WebRTC 相关的协议是如何相互协作的。

WebRTC API 概览 (en-US)

WebRTC 包含了一些关联的 API 和协议，它们相互协作以支持数据或媒体在两个或多个点之间传输。这篇文章将向你展示这些 API 的简要介绍以及它们的用途。

WebRTC 会话的生命周期

WebRTC 让你可以在基于浏览器应用中实现任意点对点（peer-to-peer）的数据、音频、视频 或它们的任意组合的通信。在这篇文章中我们一起来看一下 WebRTC 的生命周期。从建立连接开始，一直到不再需要的时候将它关闭掉。

教程
--

使用 WebRTC 拍摄静止的照片

这篇文章介绍了如何在 WebRTC 的支持下可以访问到电脑或者手机的摄像头并且使用它来拍摄照片。

一个简易 RTCDataChannel 的例子

`RTCDataChannel` 接口是一个特性，使用它你可以在两个点之间发送和接收任意数据。它的 API 和WebSocket API (en-US)非常相似，所以同样的代码对他们来说都可以使用。

资源
--

### 协议

#### WebRTC-proper protocols

* Application Layer Protocol Negotiation for Web Real-Time Communications
* WebRTC Audio Codec and Processing Requirements
* RTCWeb Data Channels
* RTCWeb Data Channel Protocol
* Web Real-Time Communication (WebRTC): Media Transport and Use of RTP
* WebRTC Security Architecture
* Transports for RTCWEB

#### 相关的支持协议

* Interactive Connectivity Establishment (ICE): A Protocol for Network Address Translator (NAT) Traversal for Offer/Answer Protocol
* Session Traversal Utilities for NAT (STUN)
* URI Scheme for the Session Traversal Utilities for NAT (STUN) Protocol
* Traversal Using Relays around NAT (TURN) Uniform Resource Identifiers
* An Offer/Answer Model with Session Description Protocol (SDP)
* Session Traversal Utilities for NAT (STUN) Extension for Third Party Authorization
规范
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers  |
| Media Capture and Streams  |
| Media Capture from DOM Elements  |

除了这些定义 WebRTC 需要的 API 的标准之外，还有其他的一些协议，在资源中列了出来。

相关链接
----

* Firefox multistream and renegotiation for Jitsi Videobridge
* Peering Through the WebRTC Fog with SocketPeer
* Inside the Party Bus: Building a Web App with Multiple Live Video Streams + Interactive Graphics
WebGLRenderbuffer
=================

**WebGLRenderbuffer** 接口是 WebGL API 的一部分，它提供了一个用于保存一个图像的缓存，并且可以用于渲染操作的源或者目标。

摘要
--

`WebGLRenderbuffer` 对象保存的内容不能被直接访问，因此这个对象没有提供任何用于操作其自身内容的方法和属性。当需要使用 `WebGLRenderbuffer` 对象的功能时，需要使用 `WebGLRenderingContext` 对象的以下方法：

* `WebGLRenderingContext.bindRenderbuffer()`
* `WebGLRenderingContext.createRenderbuffer()`
* `WebGLRenderingContext.deleteRenderbuffer()`
* `WebGLRenderingContext.isRenderbuffer()` (en-US)
示例
--

### 创建一个 render buffer 对象


```js
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");
var buffer = gl.createRenderbuffer();
```

规范
--

| Specification |
| --- |
| WebGL Specification # 5.7 |

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

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

参见
--

* `WebGLRenderingContext.bindRenderbuffer()`
* `WebGLRenderingContext.createRenderbuffer()`
* `WebGLRenderingContext.deleteRenderbuffer()`
* `WebGLRenderingContext.isRenderbuffer()` (en-US)
* 其他缓冲：`WebGLBuffer`, `WebGLFramebuffer`
DOMQuad
=======

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

DOMQuad 是四 DOMPoints 的集合，用于定义任意四边形的角。返回 DOMQuads 允许 getBoxQuads () 即使存在任意 2D 或 3D 转换，也可以返回准确的信息。它有一个方便的边界属性返回 DOMRectReadOnly 的那些情况下，你只需要一个轴对齐的边框。

`DOMQuad.DOMQuad()`

Creates a new `DOMQuad` object.

Properties
----------

p1,p2,p3,p4 只读 

are `DOMPoint` objects for each of the `DOMQuad` object's four corners.

Methods
-------

`DOMQuad.fromRect()`

Returns a new `DOMQuad` object based on the passed set of coordinates.

`DOMQuad.fromQuad()`

Returns a new `DOMQuad` object based on the passed set of coordinates.

`DOMQuad.getBounds()`

Returns a `DOMRect` object with the coordinates and dimensions of the `DOMQuad` object.

`DOMQuad.toJSON()`

Returns a JSON representation of the `DOMQuad` object.

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

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # DOMQuad |

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

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

传递给 `onnotificationclick` 处理程序的参数的`NotificationEvent`接口，该接口表示通知单击事件，该事件在 `ServiceWorkerGlobalScope` ，`ServiceWorker` 。

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

建设者
---

`NotificationEvent()` (en-US)

创建一个新`NotificationEvent`对象。

物产
--

*从其祖先`Event`继承属性*。

`NotificationEvent.notification` (en-US) 只读 

返回一个`Notification`对象，该对象表示单击以触发事件的通知。

`NotificationEvent.action` (en-US) 只读 

返回用户单击的通知按钮的字符串 ID。如果用户在除操作按钮之外的其他位置单击了通知，或者该通知没有按钮，则此值返回一个空字符串。

方法
--

*从其父项\*\*`ExtendableEvent`\*\*继承方法*。

`ExtendableEvent.waitUntil()`

延长事件的寿命。告诉浏览器工作正在进行中。

例
-


```js
self.addEventListener("notificationclick", function (event) {
  console.log("On notification click: ", event.notification.tag);
  event.notification.close();

  // This looks to see if the current is already open and
  // focuses if it is
  event.waitUntil(
    clients
      .matchAll({
        type: "window",
      })
      .then(function (clientList) {
        for (var i = 0; i < clientList.length; i++) {
          var client = clientList[i];
          if (client.url == "/" && "focus" in client) return client.focus();
        }
        if (clients.openWindow) return clients.openWindow("/");
      }),
  );
});
```

规范
--

| Specification |
| --- |
| Notifications API Standard # notificationevent |

**备注：** 此接口在Notifications API 中指定，但是可以通过 `ServiceWorkerGlobalScope`访问。

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

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

**`URLSearchParams`** 接口定义了一些实用的方法来处理 URL 的查询字符串。

一个实现了 `URLSearchParams` 的对象可以直接用在 `for...of` 结构中，例如下面两行是相等的：


```js
for (const [key, value] of mySearchParams) {
}
for (const [key, value] of mySearchParams.entries()) {
}
```


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

构造函数
----

`URLSearchParams()`

返回一个 `URLSearchParams` 对象。

方法
--

该接口不继承任何属性。

`URLSearchParams.append()`

插入一个指定的键/值对作为新的搜索参数。

`URLSearchParams.delete()`

从搜索参数列表里删除指定的搜索参数及其对应的值。

`URLSearchParams.entries()`

返回一个`iterator`可以遍历所有键/值对的对象。

`URLSearchParams.get()`

获取指定搜索参数的第一个值。

`URLSearchParams.getAll()`

获取指定搜索参数的所有值，返回是一个数组。

`URLSearchParams.has()`

返回 `Boolean` 判断是否存在此搜索参数。

`URLSearchParams.keys()`

返回`iterator` 此对象包含了键/值对的所有键名。

`URLSearchParams.set()`

设置一个搜索参数的新值，假如原来有多个值将删除其他所有的值。

`URLSearchParams.sort()`

按键名排序。

`URLSearchParams.toString()`

返回搜索参数组成的字符串，可直接使用在 URL 上。

`URLSearchParams.values()`

返回`iterator` 此对象包含了键/值对的所有值。

示例
--


```js
var paramsString = "q=URLUtils.searchParams&topic=api";
var searchParams = new URLSearchParams(paramsString);

for (let p of searchParams) {
  console.log(p);
}

searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"
```

### Gotchas

`URLSearchParams` 构造函数*不会*解析完整 URL，但是如果字符串起始位置有 `?` 的话会被去除。


```js
var paramsString1 = "http://example.com/search?query=%40";
var searchParams1 = new URLSearchParams(paramsString1);

searchParams1.has("query"); // false
searchParams1.has("http://example.com/search?query"); // true

searchParams1.get("query"); // null
searchParams1.get("http://example.com/search?query"); // "@" (equivalent to decodeURIComponent('%40'))

var paramsString2 = "?query=value";
var searchParams2 = new URLSearchParams(paramsString2);
searchParams2.has("query"); // true

var url = new URL("http://example.com/search?query=%40");
var searchParams3 = new URLSearchParams(url.search);
searchParams3.has("query"); // true
```

规范
--

| Specification |
| --- |
| URL Standard # urlsearchparams |

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

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

参见
--

* The `URL` interface.
* Google Developers: Easy URL manipulation with URLSearchParams