MIDIInput - Web APIs

MIDIInput
=========

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`MIDIInput`** interface of the Web MIDI API receives messages from a MIDI input port.

EventTarget

MIDIPort

MIDIInputInstance properties
-------------------

*This interface doesn't implement any specific properties, but inherits properties from `MIDIPort`.*

Instance methods
----------------

*This interface doesn't implement any specific methods, but inherits methods from `MIDIPort`.*

### Events

`midimessage`

Fired when the current port receives a MIDI message.

Examples
--------

In the following example the name of each `MIDIInput` is printed to the console. Then, `midimessage` events are listened for on all input ports. When a message is received the `MIDIMessageEvent.data` property is printed to the console.

```js
inputs.forEach((input) => {
  console.log(input.name); /\* inherited property from MIDIPort \*/
  input.onmidimessage = (message) => {
    console.log(message.data);
  };
});
```

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

| Specification |
| --- |
| Web MIDI API # midiinput-interface |

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

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


Attr - Web APIs

Attr
====

The **`Attr`** interface represents one of an element's attributes as an object. In most situations, you will directly retrieve the attribute value as a string (e.g., `Element.getAttribute()`), but certain functions (e.g., `Element.getAttributeNode()`) or means of iterating return `Attr` instances.

EventTarget

Node

Attr
The core idea of an object of type `Attr` is the association between a *name* and a *value*. An attribute may also be part of a *namespace* and, in this case, it also has a URI identifying the namespace, and a prefix that is an abbreviation for the namespace.

The name is deemed *local* when it ignores the eventual namespace prefix and deemed *qualified* when it includes the prefix of the namespace, if any, separated from the local name by a colon (`:`). We have three cases: an attribute outside of a namespace, an attribute inside a namespace without a prefix defined, an attribute inside a namespace with a prefix:

| Attribute | Namespace name | Namespace prefix | Attribute local name | Attribute qualified name |
| --- | --- | --- | --- | --- |
| `myAttr` | *none* | *none* | `myAttr` | `myAttr` |
| `myAttr` | `mynamespace` | *none* | `myAttr` | `myAttr` |
| `myAttr` | `mynamespace` | `myns` | `myAttr` | `myns:myAttr` |

**Note:** This interface represents only attributes present in the tree representation of the `Element`, being a SVG, an HTML or a MathML element. It doesn't represent the *property* of an interface associated with such element, such as `HTMLTableElement` for a `<table>` element. (See this article for more information about attributes and how they are *reflected* into properties.)

Instance properties
-------------------

*This interface also inherits the properties of its parent interfaces, `Node` and `EventTarget`.*

`localName` Read only

A string representing the local part of the qualified name of the attribute.

`name` Read only

The attribute's *qualified name*. If the attribute is not in a namespace, it will be the same as `localName` property.

`namespaceURI` Read only

A string representing the URI of the namespace of the attribute, or `null` if there is no namespace.

`ownerElement` Read only

The `Element` the attribute belongs to.

`prefix` Read only

A string representing the namespace prefix of the attribute, or `null` if a namespace without prefix or no namespace are specified.

`specified` Read only
Deprecated

This property always returns `true`.

`value`

The attribute's value, a string that can be set and get using this property.

Instance methods
----------------

*This interface has no specific methods, but inherits the methods of its parent interfaces, `Node` and `EventTarget`.*

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

| Specification |
| --- |
| DOM Standard # interface-attr |

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

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

See also
--------

* Other nodes are `CDATASection`, `CharacterData`, `Comment`, `Document`, `Element`, `ProcessingInstruction`, and `Text`.


VRDisplay - Web APIs

VRDisplay
=========

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The **`VRDisplay`** interface of the WebVR API represents any VR device supported by this API. It includes generic information such as device IDs and descriptions, as well as methods for starting to present a VR scene, retrieving eye parameters and display capabilities, and other important functionality.

**Note:** This interface was part of the old WebVR API. It has been superseded by the WebXR Device API.

An array of all connected VR Devices can be returned by invoking the `Navigator.getVRDisplays()` method.

Instance properties
-------------------

`VRDisplay.capabilities` Read only
Deprecated

Non-standard

Returns a `VRDisplayCapabilities` object that indicates the various capabilities of the `VRDisplay`.

`VRDisplay.depthFar`
Deprecated

Non-standard

Gets and sets the z-depth defining the far plane of the eye view frustum, i.e. the furthest viewable boundary of the scene.

`VRDisplay.depthNear`
Deprecated

Non-standard

Gets and sets the z-depth defining the near plane of the eye view frustum, i.e. the nearest viewable boundary of the scene.

`VRDisplay.displayId` Read only
Deprecated

Non-standard

Returns an identifier for this particular VRDisplay, which is also used as an association point in the Gamepad API (see `Gamepad.displayId`).

`VRDisplay.displayName` Read only
Deprecated

Non-standard

Returns a human-readable name to identify the `VRDisplay`.

`VRDisplay.isConnected` Read only
Deprecated

Non-standard

Returns a boolean value indicating whether the `VRDisplay` is connected to the computer.

`VRDisplay.isPresenting` Read only
Deprecated

Non-standard

Returns a boolean value indicating whether the `VRDisplay` is currently having content presented through it.

`VRDisplay.stageParameters` Read only
Deprecated

Non-standard

Returns a `VRStageParameters` object containing room-scale parameters, if the `VRDisplay` is capable of supporting room-scale experiences.

Instance methods
----------------

`VRDisplay.getEyeParameters()`
Deprecated

Non-standard

Returns the `VREyeParameters` object containing the eye parameters for the specified eye.

`VRDisplay.getFrameData()`
Deprecated

Non-standard

Accepts a `VRFrameData` object and populates it with the information required to render the current frame.

`VRDisplay.getImmediatePose()`
Deprecated

Non-standard

Returns a `VRPose` object defining the current pose of the `VRDisplay`, with no prediction applied. This is no longer needed, and has been removed from the spec.

`VRDisplay.getLayers()`
Deprecated

Non-standard

Returns the layers currently being presented by the `VRDisplay`.

`VRDisplay.getPose()`
Deprecated

Non-standard

Returns a `VRPose` object defining the future predicted pose of the `VRDisplay` as it will be when the current frame is actually presented. **This method is deprecated — instead, you should use `VRDisplay.getFrameData()`, which also provides a `VRPose` object.**

`VRDisplay.resetPose()`
Deprecated

Non-standard

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

`VRDisplay.cancelAnimationFrame()`
Deprecated

Non-standard

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

`VRDisplay.requestAnimationFrame()`
Deprecated

Non-standard

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()`
Deprecated

Non-standard

Starts the `VRDisplay` presenting a scene.

`VRDisplay.exitPresent()`
Deprecated

Non-standard

Stops the `VRDisplay` presenting a scene.

`VRDisplay.submitFrame()`
Deprecated

Non-standard

Captures the current state of the `VRLayerInit` currently being presented and displays it on the `VRDisplay`.

Examples
--------

```js
if (navigator.getVRDisplays) {
  console.log("WebVR 1.1 supported");
  // Then get the displays attached to the computer
  navigator.getVRDisplays().then((displays) => {
    // If a display is available, use it to present the scene
    if (displays.length > 0) {
      vrDisplay = displays[0];
      // Now we have our VRDisplay object and can do what we want with it
    }
  });
}
```

**Note:** You can see this complete code at raw-webgl-example.

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

This interface was part of the old WebVR API that has been superseded by the WebXR Device API. It is no longer on track to becoming a standard.

Until all browsers have implemented the new WebXR APIs, it is recommended to rely on frameworks, like A-Frame, Babylon.js, or Three.js, or a polyfill, to develop WebXR applications that will work across all browsers [1].

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

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

See also
--------

* WebVR API


SVGTitleElement - Web APIs

SVGTitleElement
===============

The **`SVGTitleElement`** interface corresponds to the `<title>` element.

EventTarget

Node

Element

SVGElement

SVGTitleElementInstance properties
-------------------

*This interface doesn't implement any specific properties, but inherits properties from its parent interface, `SVGElement`.*

Instance methods
----------------

*This interface doesn't implement any specific methods, but inherits methods from its parent interface, `SVGElement`.*

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGTitleElement |

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

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


HTMLDocument - Web APIs

HTMLDocument
============

For historical reasons, `Window` objects have a `window.HTMLDocument` property whose value is the `Document` interface. So you can think of `HTMLDocument` as an alias for `Document`, and you can find documentation for `HTMLDocument` members under the documentation for the `Document` interface.

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

| Specification |
| --- |
| HTML Standard # htmldocument |

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

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


IdentityCredential - Web APIs

IdentityCredential
==================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`IdentityCredential`** interface of the Federated Credential Management API (FedCM) represents a user identity credential arising from a successful federated sign-in.

A successful `navigator.credentials.get()` call that includes an `identity` option fulfills with an `IdentityCredential` instance.

Credential

IdentityCredentialInstance properties
-------------------

*Inherits properties from its ancestor, `Credential`.*

`IdentityCredential.token`
Experimental

Returns the token used to validate the associated sign-in.

Examples
--------

Relying parties (RPs) can call `navigator.credentials.get()` with the `identity` option to make a request for users to sign in to the RP via an identity provider (IdP), using identity federation. A typical request would look like this:

```js
async function signIn() {
  const identityCredential = await navigator.credentials.get({
    identity: {
      providers: [
        {
          configURL: "https://accounts.idp.example/config.json",
          clientId: "\*\*\*\*\*\*\*\*",
          nonce: "\*\*\*\*\*\*",
        },
      ],
    },
  });
}
```

If successful, this call will fulfill with an `IdentityCredential` instance. From this, you could return the `IdentityCredential.token` value, for example:

```js
console.log(identityCredential.token);
```

Check out Federated Credential Management API (FedCM) for more details on how this works. This call will start off the sign-in flow described in FedCM sign-in flow.

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

| Specification |
| --- |
| Federated Credential Management API # browser-api-identity-credential-interface |

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

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

See also
--------

* Federated Credential Management API


ImageBitmap - Web APIs

ImageBitmap
===========

The **`ImageBitmap`** interface represents a bitmap image which can be drawn to a `<canvas>` without undue latency. It can be created from a variety of source objects using the `createImageBitmap()` factory method. `ImageBitmap` provides an asynchronous and resource efficient pathway to prepare textures for rendering in WebGL.

`ImageBitmap` is a transferable object.

Instance properties
-------------------

`ImageBitmap.height` Read only

An `unsigned long` representing the height, in CSS pixels, of the `ImageData`.

`ImageBitmap.width` Read only

An `unsigned long` representing the width, in CSS pixels, of the `ImageData`.

Instance methods
----------------

`ImageBitmap.close()`

Disposes of all graphical resources associated with an `ImageBitmap`.

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

| Specification |
| --- |
| HTML Standard # imagebitmap |

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

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

See also
--------

* `createImageBitmap()`
* `CanvasRenderingContext2D.drawImage()`
* `WebGLRenderingContext.texImage2D()`
* `OffscreenCanvas.transferToImageBitmap()`


WebCodecs API - Web APIs

WebCodecs API
=============

 The **WebCodecs API** gives web developers low-level access to the individual frames of a video stream and chunks of audio.
 It is useful for web applications that require full control over the way media is processed.
 For example, video or audio editors, and video conferencing.

Concepts and Usage
------------------

 Many Web APIs use media codecs internally.
 For example, the `Web Audio API`, and the `WebRTC API`.
 However these APIs do not allow developers to work with individual frames of a video stream and unmixed chunks of encoded audio or video.

 Web developers have typically used WebAssembly in order to get around this limitation,
 and to work with media codecs in the browser.
 However, this requires additional bandwidth to download codecs that already exist in the browser,
 reducing performance and power efficiency, and adding additional development overhead.

 The WebCodecs API provides access to codecs that are already in the browser.
 It gives access to raw video frames, chunks of audio data, image decoders, audio and video encoders and decoders.

### Processing Model

 The WebCodecs API uses an asynchronous processing model. Each instance
 of an encoder or decoder maintains an internal, independent processing queue. When queueing a substantial amount of work, it's important to
 keep this model in mind.

 Methods named `configure()`, `encode()`, `decode()`, and `flush()` operate asynchronously by appending control messages
 to the end the queue, while methods named `reset()` and `close()` synchronously abort all pending work and purge the
 processing queue. After `reset()`, more work may be queued following a call to `configure()`, but `close()` is a permanent operation.

 Methods named `flush()` can be used to wait for the completion of all work that was pending at the time `flush()` was called. However, it
 should generally only be called once all desired work is queued. It is not intended to force progress at regular intervals. Calling it
 unnecessarily will affect encoder quality and cause decoders to require the next input to be a key frame.

### Demuxing

 There is currently no API for demuxing media containers. Developers working with containerized media will need to implement their own
 or use third party libraries. E.g., MP4Box.js or jswebm can be
 used to demux audio and video data into `EncodedAudioChunk` and `EncodedVideoChunk` objects respectively.

Interfaces
----------

`AudioDecoder`

Decodes `EncodedAudioChunk` objects.

`VideoDecoder`

Decodes `EncodedVideoChunk` objects.

`AudioEncoder`

Encodes `AudioData` objects.

`VideoEncoder`

Encodes `VideoFrame` objects.

`EncodedAudioChunk`

Represents codec-specific encoded audio bytes.

`EncodedVideoChunk`

Represents codec-specific encoded video bytes.

`AudioData`

Represents unencoded audio data.

`VideoFrame`

Represents a frame of unencoded video data.

`VideoColorSpace`

Represents the color space of a video frame.

`ImageDecoder`

Unpacks and decodes image data, giving access to the sequence of frames in an animated image.

`ImageTrackList`

Represents the list of tracks available in the image.

`ImageTrack`

Represents an individual image track.

Examples
--------

 In the following example, frames are returned from a `MediaStreamTrackProcessor`, then encoded.
 See the full example and read more about it in the article Video processing with WebCodecs.

```js
let frame_counter = 0;
const track = stream.getVideoTracks()[0];
const media_processor = new MediaStreamTrackProcessor(track);
const reader = media_processor.readable.getReader();
while (true) {
  const result = await reader.read();
  if (result.done) break;
  let frame = result.value;
  if (encoder.encodeQueueSize > 2) {
    // Too many frames in flight, encoder is overwhelmed
    // let's drop this frame.
    frame.close();
  } else {
    frame_counter++;
    const insert_keyframe = frame_counter % 150 === 0;
    encoder.encode(frame, { keyFrame: insert_keyframe });
    frame.close();
  }
}
```

See also
--------

* Video processing with WebCodecs
* WebCodecs API Samples
* Real-Time Video Processing with WebCodecs and Streams: Processing Pipelines
* Video Frame Processing on the Web – WebAssembly, WebGPU, WebGL, WebCodecs, WebNN, and WebTransport


XREquirectLayer - Web APIs

XREquirectLayer
===============

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`XREquirectLayer`** interface of the WebXR Device API is a layer that maps equirectangular coded data onto the inside of a sphere.

`XREquirectLayer` requires the `layers` feature to be enabled for the `XRSession`. You can request it in `XRSystem.requestSession()`.

To create a new `XREquirectLayer`, call either:

* `XRWebGLBinding.createEquirectLayer()` for a WebGL opaque texture layer, or
* `XRMediaBinding.createEquirectLayer()` for an HTML `<video>` playback layer.

To present layers to the XR device, add them to the `layers` render state using `XRSession.updateRenderState()`.

EventTarget

XRLayer

XRCompositionLayer

XREquirectLayerInstance properties
-------------------

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

`XREquirectLayer.centralHorizontalAngle`
Experimental

A number indicating the central horizontal angle in radians for the sphere.

`XREquirectLayer.lowerVerticalAngle`
Experimental

A number indicating the lower vertical angle in radians for the sphere.

`XREquirectLayer.radius`
Experimental

A number indicating the radius of the sphere.

`XREquirectLayer.space`
Experimental

An `XRSpace` representing the layer's spatial relationship with the user's physical environment.

`XREquirectLayer.transform`
Experimental

An `XRRigidTransform` representing the offset and orientation relative to `space`.

`XREquirectLayer.upperVerticalAngle`
Experimental

A number indicating the upper vertical angle in radians for the sphere.

Instance methods
----------------

*Inherits methods from its parents, `XRCompositionLayer` and `EventTarget`*.

Events
------

`redraw`
Experimental

Sent to the `XREquirectLayer` object when the underlying resources of the layer are lost or when the XR Compositor can no longer reproject the layer. If this event is sent, authors should redraw the content of the layer in the next XR animation frame.

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

| Specification |
| --- |
| WebXR Layers API Level 1 # xrequirectlayertype |

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

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

See also
--------

* `XRLayer`
* `EventTarget`
* `XRCompositionLayer`
* `XRCylinderLayer`
* `XRCubeLayer`
* `XRQuadLayer`
* `XRProjectionLayer`


WebGLVertexArrayObject - Web APIs

WebGLVertexArrayObject
======================

The **`WebGLVertexArrayObject`** interface is part of the WebGL 2 API, represents vertex array objects (VAOs) pointing to vertex array data, and provides names for different sets of vertex data.

WebGLObject

WebGLVertexArrayObject
When working with `WebGLVertexArrayObject` objects, the following methods are useful:

* `WebGL2RenderingContext.createVertexArray()`
* `WebGL2RenderingContext.deleteVertexArray()`
* `WebGL2RenderingContext.isVertexArray()`
* `WebGL2RenderingContext.bindVertexArray()`

**Note:** The `OES_vertex_array_object` extension allows you to use vertex array objects in a WebGL 1 context.

Examples
--------

```js
const vao = gl.createVertexArray();
gl.bindVertexArray(vao);

// …

// calls to bindBuffer or vertexAttribPointer
// which will be "recorded" in the VAO

// …
```

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

| Specification |
| --- |
| WebGL 2.0 Specification # 3.6 |

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

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

See also
--------

* `OES_vertex_array_object`


CSSTransformValue - Web APIs

CSSTransformValue
=================

The **`CSSTransformValue`** interface of the CSS\_Object\_Model#css\_typed\_object\_model represents `transform-list` values as used by the CSS `transform` property.

CSSStyleValue

CSSTransformValueInterfaces based on CSSTransformValue
-------------------------------------

Below is a list of interfaces based on the `CSSTransformValue` interface.

* `CSSTranslate`
* `CSSRotate`
* `CSSScale`
* `CSSSkew`
* `CSSSkewX`
* `CSSSkewY`
* `CSSPerspective`
* `CSSMatrixComponent`
Constructor
-----------

`CSSTransformValue()`

Creates a new `CSSTransformValue` object.

Instance properties
-------------------

`CSSTransformValue.length` Read only

Returns how many transform components are contained within the `CSSTransformValue`.

`CSSTransformValue.is2D` Read only

Returns a boolean indicating whether the transform is 2D or 3D.

Instance methods
----------------

*Inherits methods from its ancestor `CSSStyleValue`.*

`CSSTransformValue.toMatrix()`

Returns a new `DOMMatrix` object.

`CSSUnparsedValue.entries()`

Returns an array of a given object's own enumerable property `[key, value]` pairs in the same order as that provided by a `for...in` loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).

`CSSUnparsedValue.forEach()`

Executes a provided function once for each element of the `CSSTransformValue` object.

`CSSUnparsedValue.keys()`

Returns a new *array iterator* object that contains the keys for each index in the `CSSTransformValue` object.

`CSSUnparsedValue.values()`

Returns a new *array iterator* object that contains the values for each index in the `CSSTransformValue` object.

Examples
--------

To Do.

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

| Specification |
| --- |
| CSS Typed OM Level 1 # transformvalue-objects |

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

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


GPUComputePipeline - Web APIs

GPUComputePipeline
==================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`GPUComputePipeline`** interface of the WebGPU API represents a pipeline that controls the compute shader stage and can be used in a `GPUComputePassEncoder`.

A `GPUComputePipeline` object instance can be created using the `GPUDevice.createComputePipeline()` or `GPUDevice.createComputePipelineAsync()` methods.

Instance properties
-------------------

`label`
Experimental

A string providing a label that can be used to identify the object, for example in `GPUError` messages or console warnings.

Instance methods
----------------

`getBindGroupLayout()`
Experimental

Returns the pipeline's `GPUBindGroupLayout` object with the given index (i.e. included in the originating `GPUDevice.createComputePipeline()` or `GPUDevice.createComputePipelineAsync()` call's pipeline layout).

Examples
--------

**Note:** The WebGPU samples feature many more examples.

### Basic example

Our basic compute demo shows a process of:

* Creating a bind group layout with `GPUDevice.createBindGroupLayout()`.
* Feeding the `bindGroupLayout` into `GPUDevice.createPipelineLayout()` to create a `GPUPipelineLayout`.
* Using that value immediately in a `createComputePipeline()` call to create a `GPUComputePipeline`.

```js
// ...

const bindGroupLayout = device.createBindGroupLayout({
  entries: [
    {
      binding: 0,
      visibility: GPUShaderStage.COMPUTE,
      buffer: {
        type: "storage",
      },
    },
  ],
});

const computePipeline = device.createComputePipeline({
  layout: device.createPipelineLayout({
    bindGroupLayouts: [bindGroupLayout],
  }),
  compute: {
    module: shaderModule,
    entryPoint: "main",
  },
});

// ...
```

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

| Specification |
| --- |
| WebGPU # gpucomputepipeline |

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

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

See also
--------

* The WebGPU API


GPUShaderModule - Web APIs

GPUShaderModule
===============

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`GPUShaderModule`** interface of the WebGPU API represents an internal shader module object, a container for WGSL shader code that can be submitted to the GPU for execution by a pipeline.

A `GPUShaderModule` object instance is created using `GPUDevice.createShaderModule()`.

Instance properties
-------------------

`label`
Experimental

A string providing a label that can be used to identify the object, for example in `GPUError` messages or console warnings.

Instance methods
----------------

`getCompilationInfo()`
Experimental

Returns a `Promise` that fulfills with a `GPUCompilationInfo` object containing messages generated during the `GPUShaderModule`'s compilation.

Examples
--------

In our basic render demo, our shader module is created using the following code:

```js
const shaders = `
struct VertexOut {
 @builtin(position) position : vec4f,
 @location(0) color : vec4f
}

@vertex
fn vertex\_main(@location(0) position: vec4f,
 @location(1) color: vec4f) -> VertexOut
{
 var output : VertexOut;
 output.position = position;
 output.color = color;
 return output;
}

@fragment
fn fragment\_main(fragData: VertexOut) -> @location(0) vec4f
{
 return fragData.color;
}
`;

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.");
  }

  let device = await adapter.requestDevice();

  // ...
  // later on

  const shaderModule = device.createShaderModule({
    code: shaders,
  });

  // ...
}
```

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

| Specification |
| --- |
| WebGPU # gpushadermodule |

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

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

See also
--------

* The WebGPU API


SyncManager - Web APIs

SyncManager
===========

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`SyncManager`** interface of the Background Synchronization API provides an interface for registering and listing sync registrations.

Instance properties
-------------------

None.

Instance methods
----------------

`SyncManager.register()`
Experimental

Create a new sync registration and return a `Promise`.

`SyncManager.getTags()`
Experimental

Return a list of developer-defined identifiers for `SyncManager` registrations.

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

| Specification |
| --- |
| Web Background Synchronization # sync-manager-interface |

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

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


StorageManager - Web APIs

StorageManager
==============

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`StorageManager`** interface of the Storage API provides an interface for managing persistence permissions and estimating available storage. You can get a reference to this interface using either `navigator.storage` or `WorkerNavigator.storage`.

**Note:** This feature is available in Web Workers

Instance methods
----------------

`StorageManager.estimate()`

Returns a `Promise` that resolves to an object containing usage and quota numbers for your origin.

`StorageManager.getDirectory()`

Used to obtain a reference to a `FileSystemDirectoryHandle` object allowing access to a directory and its contents, stored in the origin private file system. Returns a `Promise` that fulfills with a `FileSystemDirectoryHandle` object.

`StorageManager.persist()`

Returns a `Promise` that resolves to `true` if the user agent is able to persist your site's storage.

`StorageManager.persisted()`

Returns a `Promise` that resolves to `true` if persistence has already been granted for your site's storage.

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

| Specification |
| --- |
| Storage Standard # storagemanager |

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

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


AuthenticatorAssertionResponse - Web APIs

AuthenticatorAssertionResponse
==============================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`AuthenticatorAssertionResponse`** interface of the Web Authentication API contains a digital signature from the private key of a particular WebAuthn credential. The relying party's server can verify this signature to authenticate a user, for example when they sign in.

An `AuthenticatorAssertionResponse` object instance is available in the `response` property of a `PublicKeyCredential` object returned by a successful `navigator.credentials.get()` call.

This interface inherits from `AuthenticatorResponse`.

AuthenticatorResponse

AuthenticatorAssertionResponse

**Note:** This interface is restricted to top-level contexts. Use from within an `<iframe>` element will not have any effect.

Instance properties
-------------------

*Also inherits properties from its parent, `AuthenticatorResponse`.*

`AuthenticatorAssertionResponse.authenticatorData` Read only

An `ArrayBuffer` containing information from the authenticator such as the Relying Party ID Hash (rpIdHash), a signature counter, test of user presence and user verification flags, and any extensions processed by the authenticator.

`AuthenticatorResponse.clientDataJSON` Read only

Contains the JSON-compatible serialization of the data passed from the browser to the authenticator in order to authenticate with this credential — i.e., when `CredentialsContainer.get()` is called with a `publicKey` option. This data contains some information from the options passed into the `get()` call, and some information controlled by the browser.

`AuthenticatorAssertionResponse.signature` Read only

An assertion signature over `AuthenticatorAssertionResponse.authenticatorData` and `AuthenticatorResponse.clientDataJSON`. The assertion signature is created with the private key of the key pair that was created during the originating `navigator.credentials.create()` call and verified using the public key of that same key pair.

`AuthenticatorAssertionResponse.userHandle` Read only

An `ArrayBuffer` containing an opaque user identifier, specified as `user.id` in the options passed to the originating `navigator.credentials.create()` call.

Instance methods
----------------

None.

Examples
--------

See User login using the WebAuthn API for a detailed example.

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

| Specification |
| --- |
| Web Authentication: An API for accessing Public Key Credentials - Level 3 # iface-authenticatorassertionresponse |

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

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

See also
--------

* `AuthenticatorAttestationResponse`: the interface for the type of response given when creating a new credential
* `AuthenticatorResponse`: the parent interface


PaymentRequest - Web APIs

PaymentRequest
==============

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The Payment Request API's **`PaymentRequest`** interface is the primary access point into the API, and lets web content and apps accept payments from the end user on behalf of the operator of the site or the publisher of the app.

EventTarget

PaymentRequestConstructor
-----------

`PaymentRequest()`

Creates a new `PaymentRequest` object.

Instance properties
-------------------

`PaymentRequest.id` Read only

A unique identifier for a particular `PaymentRequest`, which can be set via `details.id`. When none is set, it defaults to a UUID.

`PaymentRequest.shippingAddress` Read only
Deprecated

Non-standard

If requested via payment options, returns the shipping address chosen by the user for the purposes of calculating shipping. This property is only populated if the constructor is called with the `requestShipping` flag set to true. Additionally, in some browsers, the parts of the address will be redacted for privacy until the user indicates they are ready to complete the transaction (i.e., they hit "Pay").

`PaymentRequest.shippingOption` Read only
Deprecated

Non-standard

Returns the identifier of the selected shipping option. This property is only populated if the constructor is called with the `requestShipping` flag set to true.

`PaymentRequest.shippingType` Read only
Deprecated

Non-standard

Returns the type of shipping used to fulfill the transaction. This will be one of `shipping`, `delivery`, `pickup`, or `null` if a value was not provided in the constructor.

Instance methods
----------------

`PaymentRequest.canMakePayment()`

Indicates whether the `PaymentRequest` object can make a payment before calling `show()`.

`PaymentRequest.show()`

Causes the user agent to begin the user interaction for the payment request.

`PaymentRequest.abort()`

Causes the user agent to end the payment request and to remove any user interface that might be shown.

Events
------

`merchantvalidation`
Deprecated

With some payment handlers (e.g., Apple Pay), this event handler is called to handle the `merchantvalidation` event, which is dispatched when the user agent requires that the merchant validate that the merchant or vendor requesting payment is legitimate.

`paymentmethodchange`

With some payment handlers (e.g., Apple Pay), dispatched whenever the user changes payment instrument, like switching from a credit card to a debit card.

`shippingaddresschange`
Deprecated

Non-standard

Dispatched whenever the user changes their shipping address.

`shippingoptionchange`
Deprecated

Non-standard

Dispatched whenever the user changes a shipping option.

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

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

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

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


PerformanceObserver - Web APIs

PerformanceObserver
===================

**Note:** This feature is available in Web Workers

The **`PerformanceObserver`** interface is used to observe performance measurement events and be notified of new performance entries as they are recorded in the browser's *performance timeline*.

Constructor
-----------

`PerformanceObserver()`

Creates and returns a new `PerformanceObserver` object.

Static properties
-----------------

`PerformanceObserver.supportedEntryTypes` Read only

Returns an array of the `entryType` values supported by the user agent.

Instance methods
----------------

`PerformanceObserver.observe()`

Specifies the set of entry types to observe. The performance observer's callback function will be invoked when performance entry is recorded for one of the specified `entryTypes`.

`PerformanceObserver.disconnect()`

Stops the performance observer callback from receiving performance entries.

`PerformanceObserver.takeRecords()`

Returns the current list of performance entries stored in the performance observer, emptying it out.

Examples
--------

### Creating a PerformanceObserver

 The following example creates a `PerformanceObserver` watching for "mark" (`PerformanceMark`) and "measure" (`PerformanceMeasure`) events.
 The `perfObserver` callback provides a `list` (`PerformanceObserverEntryList`) which allows you to get observed performance entries.

```js
function perfObserver(list, observer) {
  list.getEntries().forEach((entry) => {
    if (entry.entryType === "mark") {
      console.log(`${entry.name}'s startTime: ${entry.startTime}`);
    }
    if (entry.entryType === "measure") {
      console.log(`${entry.name}'s duration: ${entry.duration}`);
    }
  });
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ entryTypes: ["measure", "mark"] });
```

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

| Specification |
| --- |
| Performance Timeline # dom-performanceobserver |

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

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

See also
--------

* `MutationObserver`
* `ResizeObserver`
* `IntersectionObserver`


WEBGL_depth_texture extension - Web APIs

WEBGL\_depth\_texture extension
===============================

The **`WEBGL_depth_texture`** extension is part of the WebGL API and defines 2D depth and depth-stencil textures.

WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.

**Note:** This extension is only available to WebGL1 contexts. In WebGL2, the functionality of this extension is available on the WebGL2 context by default. The constant in WebGL2 is `gl.UNSIGNED_INT_24_8`.

Constants
---------

This extension adds a new constant:

`ext.UNSIGNED_INT_24_8_WEBGL`

Unsigned integer type for 24-bit depth texture data.

Extended methods
----------------

This extension extends `WebGLRenderingContext.texImage2D()`:

* The `format` and `internalformat` parameters now accept `gl.DEPTH_COMPONENT` and `gl.DEPTH_STENCIL`.
* The `type` parameter now accepts `gl.UNSIGNED_SHORT`, `gl.UNSIGNED_INT`, and `ext.UNSIGNED_INT_24_8_WEBGL`.
* The `pixels` parameter now accepts a `Uint16Array` or a `Uint32Array` object.

This extension extends `WebGLRenderingContext.framebufferTexture2D()`:

* The `attachment` parameter now accepts `gl.DEPTH_STENCIL_ATTACHMENT`.

**Note:** Incorrectly stated as the `target` parameter in the specification, see https://www.khronos.org/bugzilla/show\_bug.cgi?id=674.

Examples
--------

```js
const ext = gl.getExtension("WEBGL\_depth\_texture");

gl.texImage2D(
  gl.TEXTURE\_2D,
  0,
  gl.DEPTH\_COMPONENT,
  512,
  512,
  0,
  gl.DEPTH\_COMPONENT,
  gl.UNSIGNED\_SHORT,
  null,
);
```

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

| Specification |
| --- |
| WebGL WEBGL\_depth\_texture Khronos Ratified Extension Specification  |

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

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

See also
--------

* `WebGLRenderingContext.getExtension()`
* `WebGLRenderingContext.texImage2D()`
* `WebGLRenderingContext.framebufferTexture2D()`


FormDataEvent - Web APIs

FormDataEvent
=============

The **`FormDataEvent`** interface represents a `formdata` event — such an event is fired on an `HTMLFormElement` object after the entry list representing the form's data is constructed. This happens when the form is submitted, but can also be triggered by the invocation of a `FormData()` constructor.

This allows a `FormData` object to be quickly obtained in response to a `formdata` event firing, rather than needing to put it together yourself when you wish to submit form data via a method like `fetch()` (see Using FormData objects).

Event

FormDataEventConstructor
-----------

`FormDataEvent()`

Creates a new `FormDataEvent` object instance.

Instance properties
-------------------

*Inherits properties from its parent interface, `Event`.*

`FormDataEvent.formData`

Contains the `FormData` object representing the data contained in the form when the event was fired.

Instance methods
----------------

*Inherits methods from its parent interface, `Event`.*

Examples
--------

```js
// grab reference to form

const formElem = document.querySelector("form");

// submit handler

formElem.addEventListener("submit", (e) => {
  // on form submission, prevent default
  e.preventDefault();

  console.log(form.querySelector('input[name="field1"]')); // FOO
  console.log(form.querySelector('input[name="field2"]')); // BAR

  // construct a FormData object, which fires the formdata event
  const formData = new FormData(formElem);
  // formdata gets modified by the formdata event
  console.log(formData.get("field1")); // foo
  console.log(formData.get("field2")); // bar
});

// formdata handler to retrieve data

formElem.addEventListener("formdata", (e) => {
  console.log("formdata fired");

  // modifies the form data
  const formData = e.formData;
  formData.set("field1", formData.get("field1").toLowerCase());
  formData.set("field2", formData.get("field2").toLowerCase());
});
```

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

| Specification |
| --- |
| HTML Standard # the-formdataevent-interface |

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

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

See also
--------

* `fetch()`
* `FormData`
* Using FormData objects
* `<form>`


MIDIOutput - Web APIs

MIDIOutput
==========

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`MIDIOutput`** interface of the Web MIDI API provides methods to add messages to the queue of an output device, and to clear the queue of messages.

EventTarget

MIDIPort

MIDIOutputInstance properties
-------------------

*This interface doesn't implement any specific properties, but inherits properties from `MIDIPort`.*

Instance methods
----------------

*This interface also inherits methods from `MIDIPort`.*

`MIDIoutput.send()`

Queues a message to be sent to the MIDI port.

`MIDIOutput.clear()`

Clears any pending send data from the queue.

Examples
--------

The following example sends a middle C immediately on MIDI channel 1.

```js
function sendMiddleC(midiAccess, portID) {
  const noteOnMessage = [0x90, 60, 0x7f]; // note on, middle C, full velocity
  const output = midiAccess.outputs.get(portID);
  output.send(noteOnMessage); // sends the message.
}
```

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

| Specification |
| --- |
| Web MIDI API # MIDIOutput |

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

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


RTCPeerConnectionIceErrorEvent - Web APIs

RTCPeerConnectionIceErrorEvent
==============================

The **`RTCPeerConnectionIceErrorEvent`** interface—based upon the `Event` interface—provides details pertaining to an ICE error announced by sending an `icecandidateerror` event to the `RTCPeerConnection` object.

Event

RTCPeerConnectionIceErrorEventConstructor
-----------

`RTCPeerConnectionIceErrorEvent()`

Creates and returns a new `RTCPeerConnectionIceErrorEvent` object, with its `type` and other properties initialized as specified in the parameters. You will not normally create an object of this type yourself.

Instance properties
-------------------

*The `RTCPeerConnectionIceErrorEvent` interface includes the properties found on the `Event` interface, as well as the following properties:*

`address` Read only

A string providing the local IP address used to communicate with the STUN or TURN server being used to negotiate the connection, or `null` if the local IP address has not yet been exposed as part of a local ICE candidate.

`errorCode` Read only

An unsigned integer value stating the numeric STUN error code returned by the STUN or TURN server. If no host candidate can reach the server, this property is set to the number 701, which is outside the range of valid STUN error codes. The 701 error is fired only once per server URL, and only while the `icegatheringstate` is `gathering`.

`errorText` Read only

A string containing the STUN reason text returned by the STUN or TURN server. If communication with the STUN or TURN server couldn't be established at all, this string will be a browser-specific string explaining the error.

`port` Read only

An unsigned integer value giving the port number over which communication with the STUN or TURN server is taking place, using the IP address given in `address`. `null` if the connection hasn't been established (that is, if `address` is `null`).

`url` Read only

A string indicating the URL of the STUN or TURN server with which the error occurred.

Instance methods
----------------

*`RTCPeerConnectionIceErrorEvent` has no methods other than any provided by the parent interface, `Event`.*

Examples
--------

TBD

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # rtcpeerconnectioniceerrorevent |

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

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


AudioParamMap - Web APIs

AudioParamMap
=============

The **`AudioParamMap`** interface of the Web Audio API represents an iterable and read-only set of multiple audio parameters.

An `AudioParamMap` instance is a read-only `Map`-like object, in which each key is the name string for a parameter, and the corresponding value is an `AudioParam` containing the value of that parameter.

Instance properties
-------------------

`size`

?

Instance methods
----------------

`entries()`

?

`forEach()`

?

`has()`

?

`keys()`

?

`values()`

?

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

| Specification |
| --- |
| Web Audio API # audioparammap |

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

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


MediaKeyStatusMap - Web APIs

MediaKeyStatusMap
=================

The **`MediaKeyStatusMap`** interface of the Encrypted Media Extensions API is a read-only map of media key statuses by key IDs.

Instance properties
-------------------

`MediaKeyStatusMap.size` Read only

Returns the number of key/value pairs in the status map.

Instance methods
----------------

`MediaKeyStatusMap.entries()` Read only

Returns a new `Iterator` object containing an array of `[key, value]` for each element in the status map, in insertion order.

`MediaKeyStatusMap.forEach(callback[, argument])` Read only

Calls `callback` once for each key-value pair in the status map, in insertion order. If `argument` is present it will be passed to the callback.

`MediaKeyStatusMap.get()` Read only

Returns the value associated with the given key, or `undefined` if there is none.

`MediaKeyStatusMap.has()` Read only

Returns a boolean asserting whether a value has been associated with the given key.

`MediaKeyStatusMap.keys()` Read only

Returns a new `Iterator` object containing keys for each element in the status map, in insertion order.

`MediaKeyStatusMap.values()` Read only

Returns a new `Iterator` object containing values for each element in the status map, in insertion order.

`MediaKeyStatusMap.[@@iterator]()` Read only

Returns a new `Iterator` object containing an array of `[key, value]` for each element in the status map, in insertion order.

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

| Specification |
| --- |
| Encrypted Media Extensions # mediakeystatusmap-interface |

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

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


NDEFReadingEvent - Web APIs

NDEFReadingEvent
================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`NDEFReadingEvent`** interface of the Web NFC API represents events dispatched on new NFC readings obtained by `NDEFReader`.

Event

NDEFReadingEventConstructor
-----------

`NDEFReadingEvent.NDEFReadingEvent()`
Experimental

Creates a new `NDEFReadingEvent`.

Instance properties
-------------------

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

`NDEFReadingEvent.message` Read only
Experimental

Returns an `NDEFMessage` object containing the received message.

`NDEFReadingEvent.serialNumber` Read only
Experimental

Returns the serial number of the device, which is used for anti-collision and identification, or an empty string if no serial number is available.

Instance methods
----------------

*Inherits methods from its parent, `Event`*.

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

| Specification |
| --- |
| Web NFC API # dom-ndefreadingevent |

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

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


MediaStreamAudioDestinationNode - Web APIs

MediaStreamAudioDestinationNode
===============================

The `MediaStreamAudioDestinationNode` interface represents an audio destination consisting of a WebRTC `MediaStream` with a single `AudioMediaStreamTrack`, which can be used in a similar way to a `MediaStream` obtained from `navigator.mediaDevices.getUserMedia()`.

It is an `AudioNode` that acts as an audio destination, created using the `AudioContext.createMediaStreamDestination()` method.

EventTarget

AudioNode

MediaStreamAudioDestinationNode

|  |  |
| --- | --- |
| Number of inputs | `1` |
| Number of outputs | `0` |
| Channel count | `2` |
| Channel count mode | `"explicit"` |
| Channel count interpretation | `"speakers"` |

Constructor
-----------

`MediaStreamAudioDestinationNode()`

Creates a new `MediaStreamAudioDestinationNode` object instance.

Instance properties
-------------------

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

`MediaStreamAudioDestinationNode.stream`

A `MediaStream` containing a single `MediaStreamTrack` whose `kind` is `audio` and with the same number of channels as the node. You can use this property to get a stream out of the audio graph and feed it into another construct, such as a Media Recorder.

Instance methods
----------------

*Inherits methods from its parent, `AudioNode`*.

Example
-------

See `AudioContext.createMediaStreamDestination()` for example code that creates a `MediaStreamAudioDestinationNode` and uses it as a source for audio to be recorded.

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

| Specification |
| --- |
| Web Audio API # MediaStreamAudioDestinationNode |

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

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

See also
--------

* Using the Web Audio API


HTMLTemplateElement - Web APIs

HTMLTemplateElement
===================

The **`HTMLTemplateElement`** interface enables access to the contents of an HTML `<template>` element.

EventTarget

Node

Element

HTMLElement

HTMLTemplateElementInstance properties
-------------------

*This interface inherits the properties of `HTMLElement`.*

`content` Read only

A read-only `DocumentFragment` which contains the DOM subtree representing the `<template>` element's template contents.

Instance methods
----------------

*This interface inherits the methods of `HTMLElement`.*

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

| Specification |
| --- |
| HTML Standard # htmltemplateelement |

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

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


PresentationReceiver - Web APIs

PresentationReceiver
====================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`PresentationReceiver`** interface of the Presentation API provides a means for a receiving browsing context to access controlling browsing contexts and communicate with them.

Instance properties
-------------------

`PresentationReceiver.connectionList` Read only
Experimental

Returns a `Promise` that resolves with a `PresentationConnectionList` object containing a list of *incoming presentation connections.*

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

| Specification |
| --- |
| Presentation API # interface-presentationreceiver |

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

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


EXT_texture_compression_bptc extension - Web APIs

EXT\_texture\_compression\_bptc extension
=========================================

The `EXT_texture_compression_bptc` extension is part of the WebGL API and exposes 4 BPTC compressed texture formats. These compression formats are called BC7 and BC6H in Microsoft's DirectX API.

WebGL extensions are available using the `WebGLRenderingContext.getExtension()` method. For more information, see also Using Extensions in the WebGL tutorial.

**Note:** Support depends on the system's graphics driver. There is no support on Windows.

This extension is available to both, WebGL1 and WebGL2 contexts.

Constants
---------

The compressed texture formats are exposed by 4 constants and can be used in two functions: `compressedTexImage2D()` and `compressedTexSubImage2D()`.

`ext.COMPRESSED_RGBA_BPTC_UNORM_EXT`

Compresses 8-bit fixed-point data. Each 4x4 block of texels consists of 128 bits of RGBA or image data. See also BC7 format.

`ext.COMPRESSED_SRGB_ALPHA_BPTC_UNORM_EXT`

Compresses 8-bit fixed-point data. Each 4x4 block of texels consists of 128 bits of SRGB\_ALPHA or image data. See also BC7 format.

`ext.COMPRESSED_RGB_BPTC_SIGNED_FLOAT_EXT`

Compresses high dynamic range signed floating point values. Each 4x4 block of texels consists of 128 bits of RGB data. It only contains RGB data, so the returned alpha value is 1.0. See also BC6H format.

`ext.COMPRESSED_RGB_BPTC_UNSIGNED_FLOAT_EXT`

Compresses high dynamic range unsigned floating point values. Each 4x4 block of texels consists of 128 bits of RGB data. It only contains RGB data, so the returned alpha value is 1.0. See also BC6H format.

Examples
--------

```js
const ext = gl.getExtension("EXT\_texture\_compression\_bptc");

const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE\_2D, texture);

gl.compressedTexImage2D(
  gl.TEXTURE\_2D,
  0,
  ext.COMPRESSED\_RGBA\_BPTC\_UNORM\_EXT,
  128,
  128,
  0,
  textureData,
);
```

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

| Specification |
| --- |
| WebGL EXT\_texture\_compression\_bptc Extension Specification  |

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

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

See also
--------

* `WebGLRenderingContext.getExtension()`
* `WebGLRenderingContext.compressedTexImage2D()`
* `WebGLRenderingContext.compressedTexSubImage2D()`
* `WebGLRenderingContext.getParameter()`


BiquadFilterNode - Web APIs

BiquadFilterNode
================

The `BiquadFilterNode` interface represents a simple low-order filter, and is created using the `BaseAudioContext/createBiquadFilter` method. It is an `AudioNode` that can represent different kinds of filters, tone control devices, and graphic equalizers. A `BiquadFilterNode` always has exactly one input and one output.

EventTarget

AudioNode

BiquadFilterNode

|  |  |
| --- | --- |
| Number of inputs | `1` |
| Number of outputs | `1` |
| Channel count mode | `"max"` |
| Channel count | `2` (not used in the default count mode) |
| Channel interpretation | `"speakers"` |

Constructor
-----------

`BiquadFilterNode()`

Creates a new instance of a `BiquadFilterNode` object.

Instance properties
-------------------

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

**Note:** Though the `AudioParam` objects returned are read-only, the values they represent are not.

`BiquadFilterNode.frequency` Read only

An a-rate `AudioParam`, a double representing a frequency in the current filtering algorithm measured in hertz (Hz).

`BiquadFilterNode.detune` Read only

An a-rate `AudioParam` representing detuning of the frequency in cents.

`BiquadFilterNode.Q` Read only

An a-rate `AudioParam`, a double representing a Q factor, or *quality factor*.

`BiquadFilterNode.gain` Read only

An a-rate `AudioParam`, a double representing the gain used in the current filtering algorithm.

`BiquadFilterNode.type`

A string value defining the kind of filtering algorithm the node is implementing.

 The meaning of the different parameters depending on the type of the filter
 (detune has the same meaning regardless, so isn't listed below)
 | `type` | Description | `frequency` | `Q` | `gain` |
| --- | --- | --- | --- | --- |
| `lowpass` |
 Standard second-order resonant lowpass filter with 12dB/octave rolloff.
 Frequencies below the cutoff pass through; frequencies above it are
 attenuated.
  | The cutoff frequency. |
 Indicates how peaked the frequency is around the cutoff. The greater the
 value is, the greater is the peak.
  | *Not used* |
| `highpass` |
 Standard second-order resonant highpass filter with 12dB/octave rolloff.
 Frequencies below the cutoff are attenuated; frequencies above it pass
 through.
  | The cutoff frequency. |
 Indicates how peaked the frequency is around the cutoff. The greater the
 value, the greater the peak.
  | *Not used* |
| `bandpass` |
 Standard second-order bandpass filter. Frequencies outside the given
 range of frequencies are attenuated; the frequencies inside it pass
 through.
  | The center of the range of frequencies. |
 Controls the width of the frequency band. The greater the
 `Q` value, the smaller the frequency band.
  | *Not used* |
| `lowshelf` |
 Standard second-order lowshelf filter. Frequencies lower than the
 frequency get a boost, or an attenuation; frequencies over it are
 unchanged.
  | The upper limit of the frequencies getting a boost or an attenuation. | *Not used* | The boost, in dB, to be applied; if negative, it will be an attenuation. |
| `highshelf` |
 Standard second-order highshelf filter. Frequencies higher than the
 frequency get a boost or an attenuation; frequencies lower than it are
 unchanged.
  | The lower limit of the frequencies getting a boost or an attenuation. | *Not used* | The boost, in dB, to be applied; if negative, it will be an attenuation. |
| `peaking` |
 Frequencies inside the range get a boost or an attenuation; frequencies
 outside it are unchanged.
  | The middle of the frequency range getting a boost or an attenuation. |
 Controls the width of the frequency band. The greater the
 `Q` value, the smaller the frequency band.
  | The boost, in dB, to be applied; if negative, it will be an attenuation. |
| `notch` |
 Standard
 notch
 filter, also called a *band-stop* or
 *band-rejection* filter. It is the opposite of a bandpass filter:
 frequencies outside the give range of frequencies pass through;
 frequencies inside it are attenuated.
  | The center of the range of frequencies. |
 Controls the width of the frequency band. The greater the
 `Q` value, the smaller the frequency band.
  | *Not used* |
| `allpass` |
 Standard second-order
 allpass
 filter. It lets all frequencies through, but changes the
 phase-relationship between the various frequencies.
  |
 The frequency with the maximal
 group delay, that is, the frequency where the center of the phase transition
 occurs.
  |
 Controls how sharp the transition is at the medium frequency. The larger
 this parameter is, the sharper and larger the transition will be.
  | *Not used* |

Instance methods
----------------

*Inherits methods from its parent, `AudioNode`*.

`BiquadFilterNode.getFrequencyResponse()`

From the current filter parameter settings this method calculates the frequency response for frequencies specified in the provided array of frequencies.

Example
-------

See `AudioContext.createBiquadFilter` for example code that shows how to use an `AudioContext` to create a Biquad filter node.

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

| Specification |
| --- |
| Web Audio API # BiquadFilterNode |

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

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

See also
--------

* Using the Web Audio API


CanvasPattern - Web APIs

CanvasPattern
=============

The **`CanvasPattern`** interface represents an opaque object describing a pattern, based on an image, a canvas, or a video, created by the `CanvasRenderingContext2D.createPattern()` method.

It can be used as a `fillStyle` or `strokeStyle`.

Instance properties
-------------------

*As an opaque object, this has no exposed property.*

Instance methods
----------------

*There are no inherited method.*

`CanvasPattern.setTransform()`

Applies a `DOMMatrix` representing a linear transform to the pattern.

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

| Specification |
| --- |
| HTML Standard # canvaspattern |

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

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

See also
--------

* `CanvasRenderingContext2D.createPattern()`
* The `<canvas>` element and its associated interface, `HTMLCanvasElement`


Network Information API - Web APIs

Network Information API
=======================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

 The Network Information API provides information about the system's connection in terms of general connection type (e.g., 'wifi, 'cellular', etc.).
 This can be used to select high definition content or low definition content based on the user's connection.

The interface consists of a single `NetworkInformation` object, an instance of which is returned by the `Navigator.connection` property.

**Note:** This feature is available in Web Workers

Interfaces
----------

`NetworkInformation`

Provides information about the connection a device is using to communicate with the network and provides a means for scripts to be notified if the connection type changes. The `NetworkInformation` interface cannot be instantiated. It is instead accessed through the `Navigator` interface.

Examples
--------

### Detect connection changes

This example watches for changes to the user's connection.

```js
let type = navigator.connection.effectiveType;

function updateConnectionStatus() {
  console.log(
    `Connection type changed from ${type} to ${navigator.connection.effectiveType}`,
  );
  type = navigator.connection.effectiveType;
}

navigator.connection.addEventListener("change", updateConnectionStatus);
```

### Preload large resources

The connection object is useful for deciding whether to preload resources that take large amounts of bandwidth or memory. This example would be called soon after page load to check for a connection type where preloading a video may not be desirable. If a cellular connection is found, then the `preloadVideo` flag is set to `false`. For simplicity and clarity, this example only tests for one connection type. A real-world use case would likely use a switch statement or some other method to check all of the possible values of `NetworkInformation.type`. Regardless of the `type` value you can get an estimate of connection speed through the `NetworkInformation.effectiveType` property.

```js
let preloadVideo = true;
const connection = navigator.connection;
if (connection) {
  if (connection.effectiveType === "slow-2g") {
    preloadVideo = false;
  }
}
```

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

| Specification |
| --- |
| Network Information API # networkinformation-interface |
| Network Information API # connection-attribute |

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

### api.NetworkInformation

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

### api.Navigator.connection

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

See also
--------

* Online and offline events


PushMessageData - Web APIs

PushMessageData
===============

The **`PushMessageData`** interface of the Push API provides methods which let you retrieve the push data sent by a server in various formats.

Unlike the similar methods in the Fetch API, which only allow the method to be invoked once, these methods can be called multiple times.

Messages received through the Push API are sent encrypted by push services and then automatically decrypted by browsers before they are made accessible through the methods of the `PushMessageData` interface.

Instance properties
-------------------

None.

Instance methods
----------------

`PushMessageData.arrayBuffer()`

Extracts the data as an `ArrayBuffer` object.

`PushMessageData.blob()`

Extracts the data as a `Blob` object.

`PushMessageData.json()`

Extracts the data as a JSON object.

`PushMessageData.text()`

Extracts the data as a plain text string.

Examples
--------

```js
self.addEventListener("push", (event) => {
  const obj = event.data.json();

  if (obj.action === "subscribe" || obj.action === "unsubscribe") {
    fireNotification(obj, event);
    port.postMessage(obj);
  } else if (obj.action === "init" || obj.action === "chatMsg") {
    port.postMessage(obj);
  }
});
```

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

| Specification |
| --- |
| Push API # pushmessagedata-interface |

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

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


SVGSetElement - Web APIs

SVGSetElement
=============

The **`SVGSetElement`** interface corresponds to the `<set>` element.

EventTarget

Node

Element

SVGElement

SVGAnimationElement

SVGSetElementInstance properties
-------------------

*This interface doesn't implement any specific properties, but inherits properties from its parent interface, `SVGAnimationElement`.*

Instance methods
----------------

*This interface doesn't implement any specific methods, but inherits methods from its parent interface, `SVGAnimationElement`.*

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

| Specification |
| --- |
| SVG Animations Level 2 # InterfaceSVGSetElement |

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

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


WebGLFramebuffer - Web APIs

WebGLFramebuffer
================

The **WebGLFramebuffer** interface is part of the WebGL API and represents a collection of buffers that serve as a rendering destination.

WebGLObject

WebGLFramebufferDescription
-----------

The `WebGLFramebuffer` object does not define any methods or properties of its own and its content is not directly accessible. When working with `WebGLFramebuffer` objects, the following methods of the `WebGLRenderingContext` are useful:

* `WebGLRenderingContext.bindFramebuffer()`
* `WebGLRenderingContext.createFramebuffer()`
* `WebGLRenderingContext.deleteFramebuffer()`
* `WebGLRenderingContext.isFramebuffer()`
Examples
--------

### Creating a frame buffer

```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
const buffer = gl.createFramebuffer();
```

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

| Specification |
| --- |
| WebGL Specification # 5.5 |

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

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

See also
--------

* `WebGLRenderingContext.bindFramebuffer()`
* `WebGLRenderingContext.createFramebuffer()`
* `WebGLRenderingContext.deleteFramebuffer()`
* `WebGLRenderingContext.isFramebuffer()`
* Other buffers: `WebGLBuffer`, `WebGLRenderbuffer`


RTCError - Web APIs

RTCError
========

The **`RTCError`** interface describes an error which has occurred while handling WebRTC operations. It's based upon the standard `DOMException` interface that describes general DOM errors.

DOMException

RTCErrorConstructor
-----------

`RTCError()`

Creates and returns a new `RTCError` object initialized with the different parameters and, optionally, a string to use as the value of the error's `message` property.

Instance properties
-------------------

*In addition to the properties defined by the parent interface, `DOMException`, `RTCError` includes the following properties:*

`errorDetail` Read only

A string specifying the WebRTC-specific error code identifying the type of error that occurred.

`receivedAlert` Read only

An unsigned long integer value indicating the fatal DTLS error which was received from the network. Only valid if the `errorDetail` string is `dtls-failure`. If `null`, no DTLS error was received.

`sctpCauseCode` Read only

If `errorDetail` is `sctp-failure`, this property is a long integer specifying the SCTP cause code indicating the cause of the failed SCTP negotiation. `null` if the error isn't an SCTP error.

`sdpLineNumber` Read only

If `errorDetail` is `sdp-syntax-error`, this property is a long integer identifying the line number of the SDP on which the syntax error occurred. `null` if the error isn't an SDP syntax error.

`sentAlert` Read only

If `errorDetail` is `dtls-failure`, this property is an unsigned long integer indicating the fatal DTLS error that was sent out by this device. If `null`, no DTLS error was transmitted.

**Note:** All `RTCError` objects have their `name` set to `OperationError`.

Examples
--------

 In this example, a handler is established for an `RTCDataChannel`'s
 `error` event.

```js
dataChannel.addEventListener("error", (event) => {
  let error = event.error; // event.error is an RTCError

  if (error.errorDetail === "sdp-syntax-error") {
    let errLine = error.sdpLineNumber;
    let errMessage = error.message;

    let alertMessage = `A syntax error occurred interpreting line ${errLine} of the SDP: ${errMessage}`;
    showMyAlertMessage("Data Channel Error", alertMessage);
  } else {
    terminateMyConnection();
  }
});
```

 If the error is an SDP syntax error—indicated by its `errorDetail` property being `sdp-syntax-error`—, a message string is
 constructed to present the error message and the line number within the SDP at which the
 error occurred. This message is then displayed using a function called
 `showMyAlertMessage()`, which stands in for whatever output mechanism this
 code might use.

 Any other error is treated as terminal, causing a `terminateMyConnection()`
 function to be called.

 The above example uses `addEventListener()` to add the handler for `error` events. You can also
 use the `RTCDataChannel` object's `onerror` event handler property, like this:

```js
dataChannel.onerror = (event) => {
  let error = event.error;

  /\* and so forth \*/
};
```

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcerror |

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

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


CSSTransformComponent - Web APIs

CSSTransformComponent
=====================

The **`CSSTransformComponent`** interface of the CSS\_Object\_Model#css\_typed\_object\_model is part of the `CSSTransformValue` interface.

Instance properties
-------------------

`CSSTransformComponent.is2D` Read only

Returns a boolean indicting whether the transform is 2D or 3D.

Instance methods
----------------

`CSSTransformComponent.toMatrix()`

Returns a new `DOMMatrix` object.

`CSSTransformComponent.toString()`

A string in the form of a CSS `Transforms function`.

This will use the value of `is2D` to return either a 2D or 3D transform. For example if the component represents `CSSRotate` and `is2D` is false then the string returned will be in the form of the CSS transformation `rotate3D()` function. If true the string returned will be in the form of the 2-dimensional `rotate3D()` function.

Examples
--------

To do

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

| Specification |
| --- |
| CSS Typed OM Level 1 # csstransformcomponent |

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

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


RTCPeerConnection - Web APIs

RTCPeerConnection
=================

 The **`RTCPeerConnection`** interface represents a WebRTC connection between the local computer and a remote peer.
 It provides methods to connect to a remote peer, maintain and monitor the connection, and close the connection once it's no longer needed.

EventTarget

RTCPeerConnectionConstructor
-----------

`RTCPeerConnection()`

Returns a new `RTCPeerConnection`, representing a connection between the local device and a remote peer.

Instance properties
-------------------

*Also inherits properties from `EventTarget`.*

`canTrickleIceCandidates` Read only

Returns a boolean value which indicates whether or not the remote peer can accept trickled ICE candidates.

`connectionState` Read only

Indicates the current state of the peer connection by returning one of the strings: `new`, `connecting`, `connected`, `disconnected`, `failed`, or `closed`.

`currentLocalDescription` Read only

 Returns an `RTCSessionDescription` object describing the local end of the connection as it was most recently successfully negotiated since the last time this `RTCPeerConnection` finished negotiating and connecting to a remote peer.
 Also included is a list of any ICE candidates that may already have been generated by the ICE agent since the offer or answer represented by the description was first instantiated.

`currentRemoteDescription` Read only

 Returns an `RTCSessionDescription` object describing the remote end of the connection as it was most recently successfully negotiated since the last time this `RTCPeerConnection` finished negotiating and connecting to a remote peer.
 Also included is a list of any ICE candidates that may already have been generated by the ICE agent since the offer or answer represented by the description was first instantiated.

`iceConnectionState` Read only

 Returns a string which state of the ICE agent associated with this RTCPeerConnection.
 It can be one of the following values: `new`, `checking`, `connected`, `completed`, `failed`, `disconnected`, or `closed`.

`iceGatheringState` Read only

 Returns a string that describes connection's ICE gathering state.
 This lets you detect, for example, when collection of ICE candidates has finished.
 Possible values are: `new`, `gathering`, or `complete`.

`localDescription` Read only

 Returns an `RTCSessionDescription`
 describing the session for the local end of the connection.
 If it has not yet been set, returns `null`.

`peerIdentity` Read only

 Returns a `Promise` that resolves to an `RTCIdentityAssertion` which contains a string identifying the remote peer.
 Once this promise resolves successfully, the resulting identity is the target peer identity and will not change for the duration of the connection.

`pendingLocalDescription` Read only

 Returns an `RTCSessionDescription` object describing a pending configuration change for the local end of the connection.
 This does not describe the connection as it currently stands, but as it may exist in the near future.

`pendingRemoteDescription` Read only

 Returns an `RTCSessionDescription` object
 describing a pending configuration change for the remote end of the connection.
 This does not describe the connection as it currently stands, but as it may exist in the near future.

`remoteDescription` Read only

 Returns an `RTCSessionDescription` object describing the session, including configuration and media information, for the remote end of the connection.
 If this hasn't been set yet, this returns `null`.

`sctp` Read only

 Returns an `RTCSctpTransport` object describing the SCTP transport layer over which SCTP data is being sent and received.
 If SCTP hasn't been negotiated, this value is `null`.

`signalingState` Read only

 Returns a string describing the state of the signaling process on the local end of the connection while connecting or reconnecting to another peer.
 It is one of the following values: `stable`, `have-local-offer`, `have-remote-offer`, `have-local-pranswer`, `have-remote-pranswer`, or `closed`.

Static methods
--------------

`RTCPeerConnection.generateCertificate()`

Creates an X.509 certificate and its corresponding private key, returning a `Promise` that resolves with the new `RTCCertificate` once it is generated.

Instance methods
----------------

*Also inherits methods from `EventTarget`.*

`addIceCandidate()`

Adds a new remote candidate to the `RTCPeerConnection`'s remote description, which describes the state of the remote end of the connection.

`addTrack()`

Adds a new `MediaStreamTrack` to the set of tracks which will be transmitted to the other peer.

`addTransceiver()`

 Creates a new `RTCRtpTransceiver` and adds it to the set of transceivers associated with the connection.
 Each transceiver represents a bidirectional stream, with both an `RTCRtpSender` and an `RTCRtpReceiver` associated with it.

`close()`

Closes the current peer connection.

`createAnswer()`

 Initiates the creation of an SDP answer to an offer received from a remote peer during the offer/answer negotiation of a WebRTC connection.
 The answer contains information about any media already attached to the session, codecs and options supported by the browser, and any ICE candidates already gathered.

`createDataChannel()`

 Initiates the creation a new channel linked with the remote peer, over which any kind of data may be transmitted.
 This can be useful for back-channel content, such as images, file transfer, text chat, game update packets, and so forth.

`createOffer()`

 Initiates the creation of an SDP offer for the purpose of starting a new WebRTC connection to a remote peer.
 The SDP offer includes information about any `MediaStreamTrack` objects already attached to the WebRTC session, codec, and options supported by the browser, as well as any candidates already gathered by the ICE agent, for the purpose of being sent over the signaling channel to a potential peer to request a connection or to update the configuration of an existing connection.

`getConfiguration()`

Returns an object which indicates the current configuration of the connection.

`getIdentityAssertion()`

 Initiates the gathering of an identity assertion and returns a `Promise` which resolves to an identity assertion encoded as a string.
 This has an effect only f `signalingState` is not `closed`.

`getReceivers()`

Returns an array of `RTCRtpReceiver` objects, each of which represents one RTP receiver.

`getSenders()`

Returns an array of `RTCRtpSender` objects, each of which represents the RTP sender responsible for transmitting one track's data.

`getStats()`

Returns a `Promise` which resolves with data providing statistics about either the overall connection or about the specified `MediaStreamTrack`.

`getTransceivers()`

Returns a list of all the `RTCRtpTransceiver` objects being used to send and receive data on the connection.

`removeTrack()`

 Tells the local end of the connection to stop sending media from the specified track, without actually removing the corresponding `RTCRtpSender` from the list of senders
 as reported by `getSenders()`.
 If the track is already stopped, or is not in the connection's senders list, this method has no effect.

`restartIce()`

 Allows to easily request that ICE candidate gathering be redone on both ends of the connection.
 This simplifies the process by allowing the same method to be used by either the caller or the receiver to trigger an ICE restart.

`setConfiguration()`

 Sets the current configuration of the connection based on the values included in the specified object.
 This lets you change the ICE servers used by the connection and which transport policies to use.

`setIdentityProvider()`

 Sets the Identity Provider (IdP) to the triplet given in parameter: its name, the protocol used to communicate with it and an username.
 The protocol and the username are optional.

`setLocalDescription()`

 Changes the local description associated with the connection.
 This description specifies the properties of the local end of the connection, including the media format.
 It returns a `Promise` which is fulfilled once the description has been changed, asynchronously.

`setRemoteDescription()`

 Sets the specified session description as the remote peer's current offer or answer.
 The description specifies the properties of the remote end of the connection, including the media format.
 It returns a `Promise` which is fulfilled once the description has been changed, asynchronously.

### Obsolete methods

`addStream()`
Deprecated

Non-standard

 Adds a `MediaStream` as a local source of audio or video.
 Instead of using this obsolete method, you should instead use `addTrack()` once for each track you wish to send to the remote peer.

`createDTMFSender()`
Deprecated

Creates a new `RTCDTMFSender`, associated to a specific `MediaStreamTrack`, that will be able to send DTMF phone signaling over the connection.

`removeStream()`
Deprecated

Non-standard

 Removes a `MediaStream` as a local source of audio or video.
 Because this method is obsolete, you should instead use `removeTrack()`.

Events
------

Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.

`connectionstatechange`

Sent when the overall connectivity status of the `RTCPeerConnection` changes.

`datachannel`

Sent when the remote peer adds an `RTCDataChannel` to the connection.

`icecandidate`

Sent to request that the specified candidate be transmitted to the remote peer.

`icecandidateerror`

Sent to the connection if an error occurred during ICE candidate gathering. The event describes the error.

`iceconnectionstatechange`

Sent when the state of the ICE connection changes, such as when it disconnects.

`icegatheringstatechange`

 Sent when the ICE layer's gathering state, reflected by `iceGatheringState`, changes.
 This indicates whether ICE negotiation has not yet begun (`new`), has begun gathering candidates (`gathering`), or has completed (`complete`).

`negotiationneeded`

 Sent when negotiation or renegotiation of the ICE connection needs to be performed;
 this can happen both when first opening a connection as well as when it is necessary to adapt to changing network conditions.
 The receiver should respond by creating an offer and sending it to the other peer.

`signalingstatechange`

Sent when the connection's ICE signaling state changes.

`track`

Sent after a new track has been added to one of the `RTCRtpReceiver` instances which comprise the connection.

### Obsolete events

`addstream`
Deprecated

Non-standard

 Sent when a new `MediaStream` has been added to the connection.
 Instead of listening for this obsolete event, you should listen for `track` events;
 one is sent for each `MediaStreamTrack` added to the connection.

`removestream`
Deprecated

Non-standard

 Sent when a `MediaStream` is removed from the connection.
 Instead of listening for this obsolete event, you should listen for `removetrack` events on each stream.

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # interface-definition |

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

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

See also
--------

* https://github.com/jesup/nightly-gupshup/blob/master/static/js/chat.js
* Get started with WebRTC
* TutorRoom: Node.js HTML video capture, peer-to-peer video and filesharing application (source on GitHub)


SVGPolylineElement - Web APIs

SVGPolylineElement
==================

The **`SVGPolylineElement`** interface provides access to the properties of `<polyline>` elements, as well as methods to manipulate them.

EventTarget

Node

Element

SVGElement

SVGGraphicsElement

SVGGeometryElement

SVGPolylineElementInstance properties
-------------------

*This interface also inherits properties from its parent, `SVGGeometryElement`.*

`SVGPolylineElement.animatedPoints` Read only

A `SVGPointList` representing the animated value of the element's `points` attribute. If the `points` attribute is not being animated, it contains the same value as the `points` property.

`SVGPolylineElement.points`

A `SVGPointList` representing the base (i.e., static) value of the element's `points` attribute. Modifications via the `SVGPointList` object are reflected in the `points` attribute, and vice versa.

Instance methods
----------------

*This interface doesn't implement any specific methods, but inherits methods from its parent, `SVGGeometryElement`.*

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGPolylineElement |

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

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

See also
--------

* `<polyline>`


VideoPlaybackQuality - Web APIs

VideoPlaybackQuality
====================

A **`VideoPlaybackQuality`** object is returned by the `HTMLVideoElement.getVideoPlaybackQuality()` method and contains metrics that can be used to determine the playback quality of a video.

Instance properties
-------------------

*The `VideoPlaybackQuality` interface doesn't inherit properties from any other interfaces.*

`creationTime` Read only

A `DOMHighResTimeStamp` containing the time in milliseconds between the start of the navigation and the creation of the object.

`droppedVideoFrames` Read only

An `unsigned long` giving the number of video frames dropped since the creation of the associated `HTMLVideoElement`.

`totalVideoFrames` Read only

An `unsigned long` giving the number of video frames created and dropped since the creation of the associated `HTMLVideoElement`.

### Obsolete properties

`corruptedVideoFrames` Read only
Deprecated

An `unsigned long` giving the number of video frames corrupted since the creation of the associated `HTMLVideoElement`. A corrupted frame may be created or dropped.

`totalFrameDelay` Read only
Deprecated

Non-standard

A `double` containing the sum of the frame delay since the creation of the associated `HTMLVideoElement`. The frame delay is the difference between a frame's theoretical presentation time and its effective display time.

Instance methods
----------------

*The `VideoPlaybackQuality` interface has no methods, and does not inherit any.*

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

| Specification |
| --- |
| Media Playback Quality # videoplaybackquality-interface |

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

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

See also
--------

* The `HTMLVideoElement.getVideoPlaybackQuality()` method to get a `VideoPlaybackQuality` object
* `MediaSource`
* `SourceBuffer`


HTMLBaseElement - Web APIs

HTMLBaseElement
===============

The **`HTMLBaseElement`** interface contains the base URI for a document. This object inherits all of the properties and methods as described in the `HTMLElement` interface.

EventTarget

Node

Element

HTMLElement

HTMLBaseElementInstance properties
-------------------

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

`HTMLBaseElement.href`

A string that reflects the `href` HTML attribute, containing a base URL for relative URLs in the document.

`HTMLBaseElement.target`

A string that reflects the `target` HTML attribute, containing a default target browsing context or frame for elements that do not have a target reference specified.

Instance methods
----------------

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

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

| Specification |
| --- |
| HTML Standard # htmlbaseelement |

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

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

See also
--------

* HTML element implementing this interface: `<base>`


SVGTSpanElement - Web APIs

SVGTSpanElement
===============

The **`SVGTSpanElement`** interface represents a `<tspan>` element.

EventTarget

Node

Element

SVGElement

SVGGraphicsElement

SVGTextContentElement

SVGTextPositioningElement

SVGTSpanElementInstance properties
-------------------

*This interface doesn't provide any specific properties, but inherits the properties from its parent, `SVGTextPositioningElement`.*

Instance methods
----------------

*This interface doesn't provide any specific methods.*

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGTSpanElement |

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

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

See also
--------

* `<tspan>` SVG Element


SVGFETileElement - Web APIs

SVGFETileElement
================

The **`SVGFETileElement`** interface corresponds to the `<feTile>` element.

EventTarget

Node

Element

SVGElement

SVGFETileElementInstance properties
-------------------

*This interface also inherits properties from its parent interface, `SVGElement`.*

`SVGFETileElement.height` Read only

An `SVGAnimatedLength` corresponding to the `height` attribute of the given element.

`SVGFETileElement.in1` Read only

An `SVGAnimatedString` corresponding to the `in` attribute of the given element.

`SVGFETileElement.result` Read only

An `SVGAnimatedString` corresponding to the `result` attribute of the given element.

`SVGFETileElement.width` Read only

An `SVGAnimatedLength` corresponding to the `width` attribute of the given element.

`SVGFETileElement.x` Read only

An `SVGAnimatedLength` corresponding to the `x` attribute of the given element.

`SVGFETileElement.y` Read only

An `SVGAnimatedLength` corresponding to the `y` attribute of the given element.

Instance methods
----------------

*This interface does not provide any specific methods, but implements those of its parent, `SVGElement`.*

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

| Specification |
| --- |
| Filter Effects Module Level 1 # InterfaceSVGFETileElement |

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

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

See also
--------

* `<feTile>`


XRFrame - Web APIs

XRFrame
=======

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

A WebXR Device API **`XRFrame`** object is passed into the `requestAnimationFrame()` callback function and provides access to the information needed in order to render a single frame of animation for an `XRSession` describing a VR or AR scene. Events which communicate the tracking state of objects also provide an `XRFrame` reference as part of their structure.

In addition to providing a reference to the `XRSession` for which this frame is to be rendered, the `getViewerPose()` method is provided to obtain the `XRViewerPose` describing the viewer's position and orientation in space, and `getPose()` can be used to create an `XRPose` describing the relative position of one `XRSpace` relative to another.

Instance properties
-------------------

`session` Read only
Experimental

The `XRSession` that for which this `XRFrame` describes the tracking details for all objects. The information about a specific object can be obtained by calling one of the methods on the object.

`trackedAnchors` Read only
Experimental

An `XRAnchorSet` containing all anchors still tracked in the frame.

Instance methods
----------------

`createAnchor()`
Experimental

Returns a `Promise` which resolves to a free-floating `XRAnchor` object.

`fillJointRadii()`
Experimental

Populates a `Float32Array` with radii for a list of hand joint spaces. Returns `true` if successful for all spaces.

`fillPoses()`
Experimental

Populates a `Float32Array` with the matrices of the poses, relative to a given base space. Returns `true` if all spaces have a valid pose.

`getDepthInformation()`
Experimental

Returns an `XRCPUDepthInformation` object containing CPU depth information for the frame.

`getHitTestResults()`
Experimental

Returns an array of `XRHitTestResult` objects containing hit test results for a given `XRHitTestSource`.

`getHitTestResultsForTransientInput()`
Experimental

Returns an array of `XRTransientInputHitTestResult` objects containing hit test results for a given `XRTransientInputHitTestSource`.

`getJointPose()`
Experimental

Returns an `XRJointPose` object providing the pose of a hand joint (see `XRHand`) relative to a given base space.

`getLightEstimate()`
Experimental

Returns an `XRLightEstimate` object containing estimated lighting values for an `XRLightProbe`.

`getPose()`
Experimental

Returns an `XRPose` object representing the spatial relationship between the two specified `XRSpace` objects.

`getViewerPose()`
Experimental

Returns an `XRViewerPose` describing the viewer's position and orientation in a given `XRReferenceSpace`.

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

| Specification |
| --- |
| WebXR Device API # xrframe-interface |

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

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

See also
--------

* WebXR Device API
* Spatial tracking in WebXR


CSSKeyframeRule - Web APIs

CSSKeyframeRule
===============

The **`CSSKeyframeRule`** interface describes an object representing a set of styles for a given keyframe. It corresponds to the contents of a single keyframe of a `@keyframes` at-rule.

CSSRule

CSSKeyframeRuleInstance properties
-------------------

*Inherits properties from its ancestor `CSSRule`.*

`CSSKeyframeRule.keyText`

Represents the key of the keyframe, like `'10%'`, `'75%'`. The `from` keyword maps to `'0%'` and the `to` keyword maps to `'100%'`.

`CSSKeyframeRule.style` Read only

Returns a `CSSStyleDeclaration` of the CSS style associated with the keyframe.

Instance methods
----------------

*No specific methods; inherits methods from its ancestor `CSSRule`.*

Examples
--------

 The CSS includes a keyframes at-rule. This will be the first `CSSRule` returned by `document.styleSheets[0].cssRules`.
 `myRules[0]` returns a `CSSKeyframesRule` object, which will contain individual `CSSKeyFrameRule` objects for each keyframe.

```css
@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}
```

```js
let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // a CSSKeyframesRule
console.log(keyframes[0]); // a CSSKeyframeRule representing an individual keyframe.
```

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

| Specification |
| --- |
| CSS Animations Level 1 # interface-csskeyframerule |

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

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

See also
--------

* `@keyframes`
* `CSSKeyFramesRule`