GPUAdapterInfo: device property - Web APIs

GPUAdapterInfo: device property
===============================

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

 The **`device`** read-only property of the
 `GPUAdapterInfo` interface returns a vendor-specific identifier for the adapter, or an empty string if it is not available.

Value
-----

A string.

Examples
--------

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

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

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

  // ...
}
```

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

| Specification |
| --- |
| WebGPU # dom-gpuadapterinfo-device |

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

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

See also
--------

* The WebGPU API


GPUAdapterInfo: architecture property - Web APIs

GPUAdapterInfo: architecture property
=====================================

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

 The **`architecture`** read-only property of the
 `GPUAdapterInfo` interface returns the name of the family or class of GPUs the adapter belongs to, or an empty string if it is not available.

Value
-----

A string.

Examples
--------

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

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

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

  // ...
}
```

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

| Specification |
| --- |
| WebGPU # dom-gpuadapterinfo-architecture |

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

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

See also
--------

* The WebGPU API


OverconstrainedError: constraint property - Web APIs

OverconstrainedError: constraint property
=========================================

 The **`constraint`** read-only property of the
 `OverconstrainedError` interface returns the constraint that was supplied
 in the constructor, meaning the constraint that was not satisfied.

Value
-----

A string.

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

| Specification |
| --- |
| Media Capture and Streams # dom-overconstrainederror-constraint |

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

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


OverconstrainedError: OverconstrainedError() constructor - Web APIs

OverconstrainedError: OverconstrainedError() constructor
========================================================

 The **`OverconstrainedError()`** constructor
 creates a new `OverconstrainedError` object which indicates that the set of
 desired capabilities for the current `MediaStreamTrack` cannot currently be
 met. When this event is thrown on a `MediaStreamTrack`, it is muted until
 either the current constraints can be established or until satisfiable constraints are
 applied.

Syntax
------

```js
new OverconstrainedError()
```

### Parameters

`constraint`

The constraint that was not satisfied.

`message` Optional

Text for the error's `message` property. Defaults to an empty string.

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

| Specification |
| --- |
| Media Capture and Streams # dom-overconstrainederror |

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

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


AudioSinkInfo: type property - Web APIs

AudioSinkInfo: type property
============================

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

The **`type`** read-only property of the `AudioSinkInfo` interface returns the type of the audio output device.

Value
-----

A string. Currently the only value is `none`.

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

| Specification |
| --- |
| Web Audio API # dom-audiosinkinfo-type |

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

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

See also
--------

* SetSinkId test example
* `AudioContext.setSinkId()`
* `AudioContext.sinkId`
* `sinkchange`


BatteryManager: dischargingTime property - Web APIs

BatteryManager: dischargingTime property
========================================

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

 The **`BatteryManager.dischargingTime`** property indicates the amount of time, in seconds, that remains until the battery is fully discharged,
 or `Infinity` if the battery is currently charging rather than discharging or the user agent is unable to report the battery status information.
 When its value changes, the `dischargingtimechange` event is fired.

**Note:** Even if the time returned is precise to the second, browsers round them to a higher
 interval (typically to the closest 15 minutes) for privacy reasons.

Value
-----

A number.

Examples
--------

### HTML

```html
<div id="dischargingTime">(discharging time unknown)</div>
```

### JavaScript

```js
navigator.getBattery().then((battery) => {
  const time = battery.dischargingTime;

  document.querySelector("#dischargingTime").textContent =
    `Remaining time to fully discharge the battery: ${time}`;
});
```

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

| Specification |
| --- |
| Battery Status API # dom-batterymanager-dischargingtime |

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

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

See also
--------

* `BatteryManager`
* `Navigator.getBattery()`


BatteryManager: charging property - Web APIs

BatteryManager: charging property
=================================

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

The **`BatteryManager.charging`** property is a Boolean value indicating whether or not the device's battery is currently being charged. When its value changes, the `chargingchange` event is fired.

If the battery is charging or the user agent is unable to report the battery status information, this value is `true`. Otherwise, it is `false`.

Value
-----

A boolean.

Examples
--------

### HTML

```html
<div id="charging">(charging state unknown)</div>
```

### JavaScript

```js
navigator.getBattery().then((battery) => {
  const charging = battery.charging;

  document.querySelector("#charging").textContent = charging;
});
```

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

| Specification |
| --- |
| Battery Status API # dom-batterymanager-charging |

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

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

See also
--------

* `BatteryManager`
* `Navigator.getBattery()`


BatteryManager: chargingchange event - Web APIs

BatteryManager: chargingchange event
====================================

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

The **`chargingchange`** event of the Battery Status API is fired when the battery `charging` property is updated.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.

```js
addEventListener("chargingchange", (event) => { })

onchargingchange = (event) => { }
```

Event type
----------

*A generic `Event`.*

Example
-------

### HTML

```html
<div id="level">(battery level unknown)</div>
<div id="chargingTime">(charging time unknown)</div>
```

### JavaScript

```js
navigator.getBattery().then((battery) => {
  battery.onchargingchange = () => {
    document.querySelector("#level").textContent = battery.level;
    document.querySelector("#chargingTime").textContent = battery.chargingTime;
  };
});
```

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

| Specification |
| --- |
| Battery Status API # ref-for-dfn-chargingchange-1 |
| Battery Status API # dom-batterymanager-onchargingchange |

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

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

See also
--------

* `BatteryManager`
* `Navigator.getBattery()`


BatteryManager: chargingtimechange event - Web APIs

BatteryManager: chargingtimechange event
========================================

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

The **`chargingtimechange`** event of the Battery Status API is fired when the battery `chargingTime` property is updated.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.

```js
addEventListener("chargingtimechange", (event) => { })

onchargingtimechange = (event) => { }
```

Event type
----------

*A generic `Event`.*

Example
-------

### HTML

```html
<div id="level">(battery level unknown)</div>
<div id="chargingTime">(charging time unknown)</div>
```

### JavaScript

```js
navigator.getBattery().then((battery) => {
  battery.onchargingtimechange = () => {
    document.querySelector("#level").textContent = battery.level;
    document.querySelector("#chargingTime").textContent = battery.chargingTime;
  };
});
```

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

| Specification |
| --- |
| Battery Status API # ref-for-dfn-chargingtimechange-1 |
| Battery Status API # dom-batterymanager-onchargingtimechange |

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

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

See also
--------

* `BatteryManager`
* `Navigator.getBattery()`


BatteryManager: level property - Web APIs

BatteryManager: level property
==============================

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

 The **`BatteryManager.level`** property indicates the current battery charge level as a value between `0.0` and `1.0`.
 A value of `0.0` means the battery is empty and the system is about to be suspended.
 A value of `1.0` means the battery is full or the user agent is unable to report the battery status information.
 When its value changes, the `levelchange` event is fired.

Value
-----

A number.

Examples
--------

### Getting the battery level

#### HTML

```html
<button id="get-level">Get battery level</button>
<div id="output"></div>
```

#### JavaScript

```js
const getLevel = document.querySelector("#get-level");
const output = document.querySelector("#output");

getLevel.addEventListener("click", async () => {
  if (!navigator.getBattery) {
    output.textContent = "Battery manager is unsupported";
  } else {
    const manager = await navigator.getBattery();
    const level = manager.level;
    output.textContent = `Battery level: ${level}`;
  }
});
```

#### Result

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

| Specification |
| --- |
| Battery Status API # dom-batterymanager-level |

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

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

See also
--------

* `BatteryManager`
* `Navigator.getBattery()`


BatteryManager: dischargingtimechange event - Web APIs

BatteryManager: dischargingtimechange event
===========================================

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

The **`dischargingtimechange`** event of the Battery Status API is fired when the battery `dischargingTime` property is updated.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.

```js
addEventListener("dischargingtimechange", (event) => { })

ondischargingtimechange = (event) => { }
```

Event type
----------

*A generic `Event`.*

Example
-------

### HTML

```html
<div id="level">(battery level unknown)</div>
<div id="chargingTime">(charging time unknown)</div>
```

### JavaScript

```js
navigator.getBattery().then((battery) => {
  battery.ondischargingtimechange = () => {
    document.querySelector("#level").textContent = battery.level;
    document.querySelector("#chargingTime").textContent = battery.chargingTime;
  };
});
```

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

| Specification |
| --- |
| Battery Status API # ref-for-dfn-dischargingtimechange-1 |
| Battery Status API # dom-batterymanager-ondischargingtimechange |

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

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

See also
--------

* `BatteryManager`
* `Navigator.getBattery()`


BatteryManager: levelchange event - Web APIs

BatteryManager: levelchange event
=================================

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

The **`levelchange`** event of the Battery Status API is fired when the battery `level` property is updated.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.

```js
addEventListener("levelchange", (event) => { })

onlevelchange = (event) => { }
```

Event type
----------

*A generic `Event`.*

Example
-------

### HTML

```html
<div id="level">(battery level unknown)</div>
<div id="stateBattery">(charging state unknown)</div>
```

### JavaScript

```js
navigator.getBattery().then((battery) => {
  battery.onlevelchange = () => {
    document.querySelector("#level").textContent = battery.level;

    if (battery.charging) {
      document.querySelector("#stateBattery").textContent = `Charging time: ${
 battery.chargingTime / 60
 }`;
    } else {
      document.querySelector("#stateBattery").textContent =
        `Discharging time: ${battery.dischargingTime / 60}`;
    }
  };
});
```

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

| Specification |
| --- |
| Battery Status API # ref-for-dfn-levelchange-1 |
| Battery Status API # dom-batterymanager-onlevelchange |

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

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

See also
--------

* `BatteryManager`
* `Navigator.getBattery()`


BatteryManager: chargingTime property - Web APIs

BatteryManager: chargingTime property
=====================================

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

 The **`BatteryManager.chargingTime`** property indicates the amount of time, in seconds, that remain until the battery is fully charged, or `0` if the battery is already fully charged or the user agent is unable to report the battery status information.
 If the battery is currently discharging, its value is `Infinity`.
 When its value changes, the `chargingtimechange` event is fired.

**Note:** Even if the time returned is precise to the second,
 browsers round them to a higher interval
 (typically to the closest 15 minutes) for privacy reasons.

Value
-----

A number.

Examples
--------

### HTML

```html
<div id="chargingTime">(charging time unknown)</div>
```

### JavaScript

```js
navigator.getBattery().then((battery) => {
  const time = battery.chargingTime;

  document.querySelector("#chargingTime").textContent =
    `Time to fully charge the battery: ${time}s`;
});
```

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

| Specification |
| --- |
| Battery Status API # dom-batterymanager-chargingtime |

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

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

See also
--------

* `BatteryManager`
* `Navigator.getBattery()`


RTCTransformEvent: transformer property - Web APIs

RTCTransformEvent: transformer property
=======================================

The read-only **`transformer`** property of the `RTCTransformEvent` interface returns the `RTCRtpScriptTransformer` associated with the event.

The property exposes the WebRTC sender or receiver pipeline as a readable and writable stream of encoded media frames, which a WebRTC Encoded Transform can insert itself into in order to modify frames.

Value
-----

A `RTCRtpScriptTransformer`.

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

| Specification |
| --- |
| WebRTC Encoded Transform # dom-rtctransformevent-transformer |

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

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

See also
--------

* Using WebRTC Encoded Transforms


Sanitizer: sanitize() method - Web APIs

Sanitizer: sanitize() method
============================

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

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

The **`sanitize()`** method of the `Sanitizer` interface is used to sanitize a tree of DOM nodes, removing any unwanted elements or attributes.

 It should be used when the data to be sanitized is already available as DOM nodes.
 For example when sanitizing a `Document` instance in a frame.

 The default `Sanitizer()` configuration strips out XSS-relevant input by default, including `<script>` tags, custom elements, and comments.
 The sanitizer configuration may be customized using `Sanitizer()` constructor options.

**Note:** To sanitize strings, instead use `Element.setHTML()`.
 See `HTML Sanitizer API` for more information.

Syntax
------

```js
sanitize(input)
```

### Parameters

`input`

A `DocumentFragment` or `Document` to be sanitized.

### Return value

A sanitized `DocumentFragment`.

### Exceptions

None.

Examples
--------

To sanitize data from an iframe with id `userFrame`:

```js
const sanitizer = new Sanitizer(); // Default sanitizer;

// Get the frame and its Document object
const frame_element = document.getElementById("userFrame");
const unsanitized_frame_tree = frame_element.contentWindow.document;

// Sanitize the document tree and update the frame.
const sanitized_frame_tree = sanitizer.sanitize(unsanitized_frame_tree);
frame_element.replaceChildren(sanitized_frame_tree);
```

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

| Specification |
| --- |
| HTML Sanitizer API # dom-sanitizer-sanitize |

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

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

See also
--------

* `HTML Sanitizer API`
* `Element.setHTML()`


Sanitizer: Sanitizer() constructor - Web APIs

Sanitizer: Sanitizer() constructor
==================================

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

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

The **`Sanitizer()`** constructor creates a new `Sanitizer` object, which can be used to sanitize untrusted strings of HTML, or untrusted `Document` or `DocumentFragment` objects, making them safe for insertion into a document's DOM.

 The default `Sanitizer()` configuration causes sanitizer operations to strip out XSS-relevant input by default, including `<script>` tags, custom elements, and comments.
 The constructor `config` option can be used to customize the sanitizer behavior.

Syntax
------

```js
new Sanitizer()
new Sanitizer(config)
```

### Parameters

`config` Optional

A sanitizer configuration object with the following options (referred to as `SanitizerConfig` in the specification):

`allowElements` Optional

 An `Array` of `strings` indicating elements that the sanitizer should not remove.
 All elements not in the array will be dropped.

`blockElements` Optional

An `Array` of `strings` indicating elements that the sanitizer should remove, but keeping their child elements.

`dropElements` Optional

An `Array` of `strings` indicating elements (including nested elements) that the sanitizer should remove.

`allowAttributes` Optional

 An `Object` where each key is the attribute name and the value is an `Array` of allowed tag names.
 Matching attributes will not be removed.
 All attributes that are not in the array will be dropped.

`dropAttributes` Optional

 An `Object` where each key is the attribute name and the value is an `Array` of dropped tag names.
 Matching attributes will be removed.

`allowCustomElements` Optional

 A `Boolean` value set to `false` (default) to remove custom elements and their children.
 If set to `true`, custom elements will be subject to built-in and custom configuration checks (and will be retained or dropped based on those checks).

`allowComments` Optional

 A `Boolean` value set to `false` (default) to remove HTML comments.
 Set to `true` in order to keep comments.

**Note:** `allowElements` creates a sanitizer that will drop any elements that are not in `allowElements`, while `blockElements` and `dropElements` create a sanitizer that will allow all elements except those in these properties.

`blockElements` and `dropElements` are processed before `allowElements`.
 If you specify both properties, the elements in `blockElements` or `dropElements` will be discarded first, followed by any elements not in `allowElements`.
 So while it is possible to specify both types of properties at the same time, the intent can always be more clearly captured using just one type.

The same applies to `allowAttributes` and `dropAttributes`.

Examples
--------

The examples below show a sanitization operation using the `Sanitizer.sanitize()` method.

### Using the default sanitizer

This example shows how to sanitize data from an iframe with id `userFrame`, using the `Sanitizer.sanitize()` method:

```js
const sanitizer = new Sanitizer(); // Default sanitizer;

// Get the frame and its Document object
const frame_element = document.getElementById("userFrame");
const unsanitized_frame_tree = frame_element.contentWindow.document;

// Sanitize the document tree and update the frame.
const sanitized_frame_tree = sanitizer.sanitize(unsanitized_frame_tree);
frame_element.replaceChildren(sanitized_frame_tree);
```

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

| Specification |
| --- |
| HTML Sanitizer API # dom-sanitizer-sanitizer |

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

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


GPUTexture: mipLevelCount property - Web APIs

GPUTexture: mipLevelCount property
==================================

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

 The **`mipLevelCount`** read-only property of the
 `GPUTexture` interface represents the number of mip levels of the `GPUTexture`.

This is set via the `mipLevelCount` property in the descriptor object passed into the originating `GPUDevice.createTexture()` call. If omitted, this defaults to 1.

Value
-----

A number.

Examples
--------

```js
// ...

const depthTexture = device.createTexture({
  size: [canvas.width, canvas.height],
  format: "depth24plus",
  usage: GPUTextureUsage.RENDER\_ATTACHMENT,
});

console.log(depthTexture.mipLevelCount); // 1
```

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

| Specification |
| --- |
| WebGPU # dom-gputexture-miplevelcount |

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

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

See also
--------

* The WebGPU API


GPUTexture: createView() method - Web APIs

GPUTexture: createView() method
===============================

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

 The **`createView()`** method of the
 `GPUTexture` interface creates a `GPUTextureView` representing a specific view of the `GPUTexture`.

Syntax
------

```js
createView()
createView(descriptor)
```

### Parameters

`descriptor` Optional

An object containing the following properties:

`arrayLayerCount` Optional

A number defining how many array layers are accessible to the view, starting with the `baseArrayLayer` value.

If `arrayLayerCount` is omitted, it is given a value as follows:

* If `dimension` is `"1d"`, `"2d"`, or `"3d"`, `arrayLayerCount` is 1.
* If `dimension` is `"cube"`, `arrayLayerCount` is 6.
* If `dimension` is `"2d-array"`, or `"cube-array"`, `arrayLayerCount` is `GPUTexture.depthOrArrayLayers` - `baseArrayLayer`.

`aspect` Optional

An enumerated value specifying which aspect(s) of the texture are accessible to the texture view. Possible values are:

`"all"`

All available aspects of the texture format will be accessible to the view, which can mean all or any of color, depth, and stencil, depending on what kind of format you are dealing with.

`"depth-only"`

Only the depth aspect of a depth-or-stencil format will be accessible to the view.

`"stencil-only"`

Only the stencil aspect of a depth-or-stencil format will be accessible to the view.

If omitted, `aspect` takes a value of `"all"`.

`baseArrayLayer` Optional

A number defining the index of the first array layer accessible to the view. If omitted, `baseArrayLayer` takes a value of 0.

`baseMipLevel` Optional

A number representing the first (most detailed) mipmap level accessible to the view. If omitted, `baseMipLevel` takes a value of 0.

`dimension` Optional

An enumerated value specifying the format to view the texture as. Possible values are:

* `"1d"`: The texture is viewed as a one-dimensional image.
* `"2d"`: The texture is viewed as a single two-dimensional image.
* `"2d-array"`: The texture is viewed as an array of two-dimensional images.
* `"cube"`: The texture is viewed as a cubemap. The view has 6 array layers, corresponding to the `[+X, -X, +Y, -Y, +Z, -Z]` faces of the cube. Sampling is done seamlessly across the faces of the cubemap.
* `"cube-array"`: The texture is viewed as a packed array of N cubemaps, each with 6 array layers corresponding to the `[+X, -X, +Y, -Y, +Z, -Z]` faces of the cube. Sampling is done seamlessly across the faces of the cubemaps.
* `"3d"`: The texture is viewed as a three-dimensional image.

If `dimension` is omitted, it is given a value as follows:

* If `GPUTexture.dimension` is `"1d"`, `dimension` is `"1d"`.
* If `GPUTexture.dimension` is `"2d"` and `GPUTexture.depthOrArrayLayers` is 1, `dimension` is `"2d"`.
* If `GPUTexture.dimension` is `"2d"` and `GPUTexture.depthOrArrayLayers` is more than 1, `dimension` is `"2d-array"`.
* If `GPUTexture.dimension` is `"3d"`, `dimension` is `"3d"`.

`format` Optional

An enumerated value specifying the format of the texture view. See the Texture formats section of the specification for all the possible values.

If `format` is omitted, it will be given a value as follows:

* If `aspect` is `"depth-only"` or `"stencil-only"`, and `GPUTexture.format` is a depth-or-stencil format, `format` will be set equal to the appropriate aspect-specific format.
* Otherwise it will be set equal to `GPUTexture.format`.

`label` Optional

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

`mipLevelCount` Optional

A number defining how many mipmap levels are accessible to the view, starting with the `baseMipLevel` value.

If `mipLevelCount` is omitted, it will be given a value of `GPUTexture.mipLevelCount` - `baseMipLevel`.

### Return value

A `GPUTextureView` object instance.

### Validation

The following criteria must be met when calling **`createView()`**, otherwise a `GPUValidationError` is generated and an invalid `GPUTextureView` object is returned:

* If `aspect` is `"all"`, `format` is equal to `GPUTexture.format`, or one of the `viewFormats` specified in the originating `GPUDevice.createTexture()` call's descriptor object.
* If `aspect` is `"depth-only"` or `"stencil-only"`, `format` is equal to the appropriate aspect-specific format of the depth-or-stencil format.
* `mipLevelCount` is greater than 0.
* `mipLevelCount` + `baseMipLevel` is less than or equal to `GPUTexture.mipLevelCount`.
* `arrayLayerCount` is greater than 0.
* `arrayLayerCount` + `baseArrayLayer` is less than or equal to `GPUTexture.depthOrArrayLayers`.
* If `sampleCount` is greater than 1, `dimension` is `"2d"`.
* If `dimension` is:
    + `"1d"`
        - `GPUTexture.dimension` is `"1d"`
        - `arrayLayerCount` is 1
    + `"2d"`
        - `GPUTexture.dimension` is `"2d"`
        - `arrayLayerCount` is 1
    + `"2d-array"`
        - `GPUTexture.dimension` is `"2d"`
    + `"cube"`
        - `GPUTexture.dimension` is `"2d"`
        - `arrayLayerCount` is 6
        - `GPUTexture.width` is equal to `GPUTexture.height`
    + `"cube-array"`
        - `GPUTexture.dimension` is `"2d"`
        - `arrayLayerCount` is a multiple of 6
        - `GPUTexture.width` is equal to `GPUTexture.height`
    + `"3d"`
        - `GPUTexture.dimension` is `"3d"`
        - `arrayLayerCount` is 1
Examples
--------

In the WebGPU Samples Cubemap demo, you will see multiple examples of how `createView()` is used, both as to create a view `resource` for a `GPUDevice.createBindGroup()` call, and to provide a `view` in the `depthStencilAttachment` object of a `GPUCommandEncoder.beginRenderPass()` descriptor.

```js
const uniformBindGroup = device.createBindGroup({
  layout: pipeline.getBindGroupLayout(0),
  entries: [
    {
      binding: 0,
      resource: {
        buffer: uniformBuffer,
        offset: 0,
        size: uniformBufferSize,
      },
    },
    {
      binding: 1,
      resource: sampler,
    },
    {
      binding: 2,
      resource: cubemapTexture.createView({
        dimension: "cube",
      }),
    },
  ],
});

const renderPassDescriptor: GPURenderPassDescriptor = {
  colorAttachments: [
    {
      view: undefined, // Assigned later
      loadOp: "clear",
      storeOp: "store",
    },
  ],
  depthStencilAttachment: {
    view: depthTexture.createView(),

    depthClearValue: 1.0,
    depthLoadOp: "clear",
    depthStoreOp: "store",
  },
};

// ...

const commandEncoder = device.createCommandEncoder();
const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);

// ...
```

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

| Specification |
| --- |
| WebGPU # dom-gputexture-createview |

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

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

See also
--------

* The WebGPU API


GPUTexture: dimension property - Web APIs

GPUTexture: dimension property
==============================

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

 The **`dimension`** read-only property of the
 `GPUTexture` interface represents the dimension of the set of texels for each `GPUTexture` subresource.

This is set via the `dimension` property in the descriptor object passed into the originating `GPUDevice.createTexture()` call, which defaults to `"2d"` if omitted.

Value
-----

An enumerated value. Possible values are:

* `"1d"`: A one-dimensional texture with a single dimension, width.
* `"2d"`: A two-dimensional texture with a width and height, which may also have layers. Only `"2d"` textures can have mipmaps, be multisampled, use a compressed or depth/stencil format, and be used as a render attachment.
* `"3d"`: A three-dimensional texture with a width, height, and depth.
Examples
--------

```js
// ...

const depthTexture = device.createTexture({
  size: [canvas.width, canvas.height],
  format: "depth24plus",
  usage: GPUTextureUsage.RENDER\_ATTACHMENT,
});

console.log(depthTexture.dimension); // "2d"
```

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

| Specification |
| --- |
| WebGPU # dom-gputexture-dimension |

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

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

See also
--------

* The WebGPU API


GPUTexture: depthOrArrayLayers property - Web APIs

GPUTexture: depthOrArrayLayers property
=======================================

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

 The **`depthOrArrayLayers`** read-only property of the
 `GPUTexture` interface represents the depth or layer count of the `GPUTexture`.

This is set based on the `size` property in the descriptor object passed into the originating `GPUDevice.createTexture()` call.

Value
-----

A number. This represents:

* The depth in pixels, in the case of textures with a `"3d"` `GPUTexture.dimension`.
* The number of layers, in the case of layered textures with a `"2d"` `GPUTexture.dimension`.

In cases where the `GPUTexture` does not have a depth or layers, the value is 1.

Examples
--------

```js
// ...

const test = device.createTexture({
  size: [128],
  format: "r8uint",
  dimension: "1d",
  usage: GPUTextureUsage.COPY\_SRC,
});

console.log(test.depthOrArrayLayers); // 1
```

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

| Specification |
| --- |
| WebGPU # dom-gputexture-depthorarraylayers |

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

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

See also
--------

* The WebGPU API


GPUTexture: destroy() method - Web APIs

GPUTexture: destroy() method
============================

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

 The **`destroy()`** method of the
 `GPUTexture` interface destroys the `GPUTexture`.

Syntax
------

```js
destroy()
```

### Parameters

None.

### Return value

None (`Undefined`).

Examples
--------

```js
// ...

const depthTexture = device.createTexture({
  size: [canvas.width, canvas.height],
  format: "depth24plus",
  usage: GPUTextureUsage.RENDER\_ATTACHMENT,
});

// some time later

depthTexture.destroy();
```

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

| Specification |
| --- |
| WebGPU # dom-gputexture-destroy |

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

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

See also
--------

* The WebGPU API


GPUTexture: format property - Web APIs

GPUTexture: format property
===========================

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

 The **`format`** read-only property of the
 `GPUTexture` interface represents the format of the `GPUTexture`.

This is set via the `format` property in the descriptor object passed into the originating `GPUDevice.createTexture()` call.

Value
-----

An enumerated value. See the Texture formats section of the specification for all the possible values.

Examples
--------

```js
// ...

const depthTexture = device.createTexture({
  size: [canvas.width, canvas.height],
  format: "depth24plus",
  usage: GPUTextureUsage.RENDER\_ATTACHMENT,
});

console.log(depthTexture.format); // "depth24plus"
```

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

| Specification |
| --- |
| WebGPU # dom-gputexture-format |

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

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

See also
--------

* The WebGPU API


GPUTexture: width property - Web APIs

GPUTexture: width property
==========================

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

 The **`width`** read-only property of the
 `GPUTexture` interface represents the width of the `GPUTexture`.

This is set based on the value of the `size` property in the descriptor object passed into the originating `GPUDevice.createTexture()` call.

Value
-----

A number.

Examples
--------

```js
// ...

const depthTexture = device.createTexture({
  size: [640, 480],
  format: "depth24plus",
  usage: GPUTextureUsage.RENDER\_ATTACHMENT,
});

console.log(depthTexture.width); // 640
```

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

| Specification |
| --- |
| WebGPU # dom-gputexture-width |

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

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

See also
--------

* The WebGPU API


GPUTexture: height property - Web APIs

GPUTexture: height property
===========================

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

 The **`height`** read-only property of the
 `GPUTexture` interface represents the height of the `GPUTexture`.

This is set based on the value of the `size` property in the descriptor object passed into the originating `GPUDevice.createTexture()` call.

Value
-----

A number.

Examples
--------

```js
// ...

const depthTexture = device.createTexture({
  size: [640, 480],
  format: "depth24plus",
  usage: GPUTextureUsage.RENDER\_ATTACHMENT,
});

console.log(depthTexture.height); // 480
```

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

| Specification |
| --- |
| WebGPU # dom-gputexture-height |

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

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

See also
--------

* The WebGPU API


GPUTexture: sampleCount property - Web APIs

GPUTexture: sampleCount property
================================

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

 The **`sampleCount`** read-only property of the
 `GPUTexture` interface represents the sample count of the `GPUTexture`.

This is set via the `sampleCount` property in the descriptor object passed into the originating `GPUDevice.createTexture()` call. If omitted, this defaults to 1.

Value
-----

A number. Possible values are:

* 1
* 4, which indicates a multi-sampled texture.
Examples
--------

```js
// ...

const depthTexture = device.createTexture({
  size: [canvas.width, canvas.height],
  format: "depth24plus",
  usage: GPUTextureUsage.RENDER\_ATTACHMENT,
});

console.log(depthTexture.sampleCount); // 1
```

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

| Specification |
| --- |
| WebGPU # dom-gputexture-samplecount |

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

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

See also
--------

* The WebGPU API


GPUTexture: usage property - Web APIs

GPUTexture: usage property
==========================

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

 The **`usage`** read-only property of the
 `GPUTexture` interface is the bitwise flags representing the allowed usages of the `GPUTexture`.

This is set via the `usage` property in the descriptor object passed into the originating `GPUDevice.createTexture()` call.

Value
-----

The bitwise flags representing the original usages set when the `GPUTexture` was first created. The returned number is the sum of decimal values representing the different flags, as seen in the table below.

| Usage flag | Usage description | Hex equiv. | Decimal equiv. |
| --- | --- | --- | --- |
| `GPUTextureUsage.COPY_SRC` | The texture can be used as the source of a copy operation, for example the source argument of a `copyTextureToBuffer()` call. | 0x01 | 1 |
| `GPUTextureUsage.COPY_DST` | The texture can be used as the destination of a copy/write operation, for example the destination argument of a `copyBufferToTexture()` call. | 0x02 | 2 |
| `GPUTextureUsage.RENDER_ATTACHMENT` | The texture can be used as a color or depth/stencil attachment in a render pass, for example as the `view` property of the descriptor object in a `beginRenderPass()` call. | 0x10 | 16 |
| `GPUTextureUsage.STORAGE_BINDING` | The texture can be bound for use as a storage texture in a shader, for example as a resource in a bind group entry when creating a `GPUBindGroup` (via `createBindGroup()`), which adheres to a `GPUBindGroupLayout` entry with a specified storage texture binding layout. | 0x08 | 8 |
| `GPUTextureUsage.TEXTURE_BINDING` | The texture can be bound for use as a sampled texture in a shader, for example as a resource in a bind group entry when creating a `GPUBindGroup` (via `createBindGroup()`), which adheres to a `GPUBindGroupLayout` entry with a specified texture binding layout. | 0x04 | 4 |

Examples
--------

```js
// ...

const depthTexture = device.createTexture({
  size: [canvas.width, canvas.height],
  format: "depth24plus",
  usage: GPUTextureUsage.RENDER\_ATTACHMENT,
});

console.log(depthTexture.usage); // 16
```

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

| Specification |
| --- |
| WebGPU # dom-gputexture-usage |

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

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

See also
--------

* The WebGPU API


GPUTexture: label property - Web APIs

GPUTexture: label property
==========================

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

 The **`label`** property of the
 `GPUTexture` interface provides a label that can be used to identify the object, for example in `GPUError` messages or console warnings.

This can be set by providing a `label` property in the descriptor object passed into the originating `GPUDevice.createTexture()` call, or you can get and set it directly on the `GPUTexture` object.

Value
-----

A string. If this has not been previously set as described above, it will be an empty string.

Examples
--------

Setting and getting a label via `GPUTexture.label`:

```js
// ...

const depthTexture = device.createTexture({
  size: [canvas.width, canvas.height],
  format: "depth24plus",
  usage: GPUTextureUsage.RENDER\_ATTACHMENT,
});

depthTexture.label = "mytexture";

console.log(depthTexture.label); // "mytexture"
```

Setting a label via the originating `GPUDevice.createTexture()` call, and then getting it via `GPUTexture.label`:

```js
// ...

const depthTexture = device.createTexture({
  size: [canvas.width, canvas.height],
  format: "depth24plus",
  usage: GPUTextureUsage.RENDER\_ATTACHMENT,
  label: "mytexture",
});

console.log(depthTexture.label); // "mytexture"
```

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

| Specification |
| --- |
| WebGPU # dom-gpuobjectbase-label |

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

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

See also
--------

* The WebGPU API


RTCOutboundRtpStreamStats: sliCount property - Web APIs

RTCOutboundRtpStreamStats: sliCount property
============================================

 The **`sliCount`** property of the
 `RTCOutboundRtpStreamStats` dictionary indicates how many **Slice
Loss Indication** (**SLI**) packets the
 `RTCRtpSender` received from the remote `RTCRtpReceiver` for
 the RTP stream described by this object.

 An SLI packet is used by a decoder to let the encoder (the sender) know that it's
 detected corruption of one or more consecutive macroblocks, in scan order, in the
 received media. In general, what's usually of interest is that the higher this number is,
 the more the stream data is becoming corrupted between the sender and the receiver,
 causing the receiver to request retransmits or to drop frames entirely.

Value
-----

 An unsigned integer indicating the number of SLI packets the sender received from the
 receiver due to lost runs of macroblocks. A high value of `sliCount` may be
 an indication of an unreliable network.

This is a very technical part of how video codecs work. For details, see RFC 4585: 6.3.2.

**Note:** This value is only present for video media.

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

#### No specification found

No specification data found for `api.RTCOutboundRtpStreamStats.sliCount`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

See also
--------

* RFC 4585, section 6.3.2: Definition of "Slice Loss Indication" in the document
 *Extended RTP Profile for Real-time Transport Control Protocol (RTCP)-Based
Feedback (RTP/AVPF)*.


RTCOutboundRtpStreamStats: qpSum property - Web APIs

RTCOutboundRtpStreamStats: qpSum property
=========================================

The **`qpSum`** property of the `RTCOutboundRtpStreamStats` dictionary is a value generated by adding the **Quantization Parameter** (**QP**) values for every frame this sender has produced to date on the video track corresponding to this `RTCOutboundRtpStreamStats` object.

In general, the higher this number is, the more heavily compressed the video data is.

Value
-----

 An unsigned 64-bit integer value which indicates the sum of the quantization parameter (QP) value for every frame sent so far on the track described by the `RTCOutboundRtpStreamStats` object.
 Since the value of QP is typically larger to indicate higher compression factors, the larger this sum is, the more heavily compressed the stream generally has been.

**Note:** This value is only available for video media.

Usage notes
-----------

Quantization is the process of applying lossy compression
 to a range of values, resulting in a single **quantum value**. This value
 takes the place of the range of values, thereby reducing the number of different values
 that appear in the overall data set, making the data more compressible. The quantization
 process and the amount of compression can be controlled using one or more parameters.

 It's important to keep in mind that the value of QP can change periodically—even every
 frame—so it's difficult to know for certain how substantial the compression is. The best
 you can do is make an estimate. You can use the value of
 `RTCSentRtpStreamStats.framesEncoded` to get the number of frames that have
 been encoded so far, and compute an average from there. See Calculating average quantization below for a function that does this.

 Also, the exact meaning of the QP value depends on the codec being
 used. For example, for the VP8 codec, the QP value can be anywhere from 1 to 127 and is
 found in the frame header element `"y_ac_qi"`, whose value is defined in
 RFC 6386, section 19.2. H.264 uses a QP which ranges from 0 to 51; in this case, it's an
 index used to derive a scaling matrix used during the quantization process.
 Additionally, QP is not likely to be the only parameter the codec uses to adjust the
 compression. See the individual codec specifications for details.

Examples
--------

### Calculating average quantization

The `calculateAverageQP()` function shown below computes the average QP for the object that contains RTP stream statistics, returning 0 if the object doesn't describe an RTP stream.

```js
function calculateAverageQP(stats) {
  let frameCount = 0;

  switch (stats.type) {
    case "inbound-rtp":
    case "remote-inbound-rtp":
      frameCount = stats.framesDecoded;
      break;
    case "outbound-rtp":
    case "remote-outbound-rtp":
      frameCount = stats.framesEncoded;
      break;
    default:
      return 0;
  }

  return status.qpSum / frameCount;
}
```

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

#### No specification found

No specification data found for `api.RTCStatsReport.type_outbound-rtp.qpSum`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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


RTCOutboundRtpStreamStats: timestamp property - Web APIs

RTCOutboundRtpStreamStats: timestamp property
=============================================

The **`timestamp`** property of the `RTCOutboundRtpStreamStats` dictionary is a `DOMHighResTimeStamp` object specifying the time at which the data in the object was sampled.

Value
-----

A `DOMHighResTimeStamp` value indicating the time at which the activity described by the statistics in this object was recorded, in milliseconds elapsed since the beginning of January 1, 1970, UTC.

The value should be accurate to within a few milliseconds but may not be entirely precise, either because of hardware or operating system limitations or because of fingerprinting protection in the form of reduced clock precision or accuracy.

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

| Specification |
| --- |
| Identifiers for WebRTC's Statistics API # dom-rtcstats-timestamp |

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

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


RTCOutboundRtpStreamStats: qualityLimitationReason property - Web APIs

RTCOutboundRtpStreamStats: qualityLimitationReason property
===========================================================

 The **`qualityLimitationReason`**
 property of the `RTCOutboundRtpStreamStats` dictionary is a string
 indicating the reason why the media quality in the stream is currently being reduced
 by the codec during encoding, or `none` if no quality reduction is being
 performed.

 This quality reduction may include changes such as reduced frame
 rate or resolution, or an increase in compression factor.

 The amount of time the encoded media has had its quality reduced in each of the
 potential ways that can be done can be found in
 `qualityLimitationDurations`.

Value
-----

 A `Map` whose keys are strings whose values are `none`, `cpu`, `bandwidth`, or `other`, and whose values are the
 duration of the media, in seconds, whose quality was reduced for that reason.

Examples
--------

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

#### No specification found

No specification data found for `api.RTCOutboundRtpStreamStats.qualityLimitationReason`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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


RTCOutboundRtpStreamStats: averageRtcpInterval property - Web APIs

RTCOutboundRtpStreamStats: averageRtcpInterval property
=======================================================

 The **`averageRtcpInterval`** property
 of the `RTCOutboundRtpStreamStats` dictionary is a floating-point value
 indicating the average time that should pass between transmissions of
 RTCP packets on this stream.

Value
-----

 A floating-point value indicating the average interval, in seconds, between
 transmissions of RTCP packets. This interval is computed following the formula outlined
 in RFC 1889: A.7.

 Because the interval's value is determined in part by the number of active senders, it
 will be different for each user of a service. Since this value is also used to determine
 the number of seconds after a stream starts to flow before the first RTCP packet should
 be sent, the result is that if many users try to start using the service at the same
 time, the server won't be flooded with RTCP packets coming in all at once.

 The sending endpoint computes this value when sending compound RTCP packets, which must
 contain at least an RTCP RR or SR packet and an SDES packet with the CNAME item.

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

#### No specification found

No specification data found for `api.RTCOutboundRtpStreamStats.averageRtcpInterval`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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


RTCOutboundRtpStreamStats: framesEncoded property - Web APIs

RTCOutboundRtpStreamStats: framesEncoded property
=================================================

 The **`framesEncoded`** property of
 the `RTCOutboundRtpStreamStats` dictionary indicates the total number of
 frames that have been encoded by this `RTCRtpSender` for this media
 source.

Value
-----

 An integer value indicating the total number of video frames that this sender has
 encoded so far for this stream.

**Note:** This property is only valid for video streams.

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

#### No specification found

No specification data found for `api.RTCOutboundRtpStreamStats.framesEncoded`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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


RTCOutboundRtpStreamStats: nackCount property - Web APIs

RTCOutboundRtpStreamStats: nackCount property
=============================================

 The **`nackCount`** property of the
 `RTCOutboundRtpStreamStats` dictionary is a numeric value indicating the
 number of times the `RTCRtpSender` described by this object received a
 **NACK** packet from the remote receiver.

 A NACK (Negative
 ACKnowledgement, also called "Generic NACK") packet is used by the
 `RTCRtpReceiver` to inform the sender that one or more RTP
 packets it sent were lost in transport.

Value
-----

 An integer value indicating how many times the sender received a NACK packet from the
 receiver, indicating the loss of one or more packets.

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

| Specification |
| --- |
| Identifiers for WebRTC's Statistics API # dom-rtcoutboundrtpstreamstats-nackcount |

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

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


RTCOutboundRtpStreamStats: firCount property - Web APIs

RTCOutboundRtpStreamStats: firCount property
============================================

 The **`firCount`** property of the
 `RTCOutboundRtpStreamStats` dictionary indicates the number of
 **Full Intra Request** (**FIR**) that the remote
 `RTCRtpReceiver` has sent to this `RTCRtpSender`.

 A FIR packet is sent when the receiver finds that it has fallen behind and needs to skip
 frames in order to catch up; the sender should respond by sending a full frame instead
 of a delta frame.

Available only on video media.

Value
-----

 An integer value indicating how many FIR packets have been received by the sender
 during the current connection. This statistic is available only for video tracks.

 The receiver sends a FIR packet to the sender any time it falls behind or loses packets
 and cannot decode the incoming stream any longer because of the lost data. This tells
 the sender to send a full frame instead of a delta frame, so that the receiver can catch
 up.

 The higher `firCount` is, the more often frames were dropped, which may be
 an indication that the media's bit rate is too high for the available bandwidth, or that
 the receiving device is overburdened and is therefore unable to process the incoming
 data.

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

#### No specification found

No specification data found for `api.RTCOutboundRtpStreamStats.firCount`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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


RTCOutboundRtpStreamStats: remoteId property - Web APIs

RTCOutboundRtpStreamStats: remoteId property
============================================

 The **`remoteId`** property of the
 `RTCOutboundRtpStreamStats` dictionary specifies the
 `id` of the `RTCRemoteInboundRtpStreamStats`
 object representing the remote peer's `RTCRtpReceiver` which is sending
 the media to the local peer for this SSRC.

Value
-----

 A string containing the ID of the
 `RTCRemoteInboundRtpStreamStats` object that represents the remote peer's
 `RTCRtpReceiver` for the synchronization source represented by this stats
 object.

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

| Specification |
| --- |
| Identifiers for WebRTC's Statistics API # dom-rtcoutboundrtpstreamstats-remoteid |

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

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


RTCOutboundRtpStreamStats: type property - Web APIs

RTCOutboundRtpStreamStats: type property
========================================

The **`type`** property of the `RTCOutboundRtpStreamStats` dictionary is a string with the value `"outbound-rtp"`.

 Different statistics are obtained by iterating the `RTCStatsReport` object returned by a call to `RTCPeerConnection.getStats()`.
 The type indicates the set of statistics available through the object in a particular iteration step.
 A value of `"outbound-rtp"` indicates that the statistics available in the current step are those defined in `RTCOutboundRtpStreamStats`.

Value
-----

A string with the value `"outbound-rtpp"`.

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

| Specification |
| --- |
| Identifiers for WebRTC's Statistics API # dom-rtcstats-type |

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

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


RTCOutboundRtpStreamStats: pliCount property - Web APIs

RTCOutboundRtpStreamStats: pliCount property
============================================

 The **`pliCount`** property of the
 `RTCOutboundRtpStreamStats` dictionary states the number of times the
 remote peer's `RTCRtpReceiver` sent a **Picture Loss
Indication** (**PLI**) packet to the `RTCRtpSender`
 for which this object provides statistics.

 A PLI packet indicates that some
 amount of encoded video data has been lost for one or more frames.

Value
-----

 An integer value indicating the number of times a PLI packet was sent to this sender by
 the remote peer's `RTCRtpReceiver`. These are sent by the receiver's
 decoder to notify the sender's encoder that an undefined amount of coded video data,
 which may span frame boundaries, has been lost.

**Note:** This property is only used for video streams.

Usage notes
-----------

 Upon receiving a PLI packet, the sender may have responded by sending a full frame to
 the remote peer to allow it to re-synchronize with the media. However, the primary
 purpose of a PLI packet is to allow the `RTCRtpSender` for which this
 `RTCOutboundRtpStreamStats` object provides statistics to consider techniques
 to mitigate network performance issues. This is often achieved by methods such as
 increasing the compression or lowering resolution, although the mechanisms available to
 reduce the bit rate of the stream vary from codec to codec.

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

#### No specification found

No specification data found for `api.RTCOutboundRtpStreamStats.pliCount`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

See also
--------

* RFC 4585, section 6.3.1: Definition of "PLI messages" in the document *Extended
RTP Profile for Real-time Transport Control Protocol (RTCP)-Based Feedback
(RTP/AVPF)*.


RTCOutboundRtpStreamStats: perDscpPacketsSent property - Web APIs

RTCOutboundRtpStreamStats: perDscpPacketsSent property
======================================================

 The **`perDscpPacketsSent`** property
 of the `RTCOutboundRtpStreamStats` dictionary is a record comprised of
 key/value pairs in which each key is a string representation of a Differentiated
 Services Code Point and the value is the number of packets sent for that DCSP.

**Note:** Not all operating systems make data available on a per-DSCP
 basis, so this property shouldn't be relied upon on those systems.

Value
-----

 A record comprised of string/value pairs. Each key is the string representation of a
 single Differentiated Services Code Point (DSCP)'s ID number.

**Note:** Due to network bleaching and remapping, the numbers seen on
 this record are not necessarily going to match the values as they were when the data
 was sent.

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

#### No specification found

No specification data found for `api.RTCOutboundRtpStreamStats.perDscpPacketsSent`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

See also
--------

* RFC 2474: The Differentiated Service field in IPv4 and IPv6 headers


RTCOutboundRtpStreamStats: trackId property - Web APIs

RTCOutboundRtpStreamStats: trackId property
===========================================

The **`trackId`** property of the `RTCOutboundRtpStreamStats` dictionary indicates the `id` of the `RTCSenderAudioTrackAttachmentStats` or `RTCSenderVideoTrackAttachmentStats` object representing the `MediaStreamTrack` which is being sent on this stream.

Value
-----

A string containing the ID of the `RTCSenderAudioTrackAttachmentStats` or `RTCSenderVideoTrackAttachmentStats` object representing the track which is the source of the media being sent on this stream.

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

#### No specification found

No specification data found for `api.RTCOutboundRtpStreamStats.trackId`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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


RTCOutboundRtpStreamStats: id property - Web APIs

RTCOutboundRtpStreamStats: id property
======================================

The **`id`** property of the `RTCOutboundRtpStreamStats` dictionary is a string that uniquely identifies the object for which this object provides statistics.

Using the `id`, you can correlate this statistics object with others, in order to monitor statistics over time for a given WebRTC object, such as an `RTCPeerConnection`, or an `RTCDataChannel`.

Value
-----

A string that uniquely identifies the object for which this `RTCOutboundRtpStreamStats` object provides statistics.

The format of the ID string is not defined by the specification, so you cannot reliably make any assumptions about the contents of the string, or assume that the format of the string will remain unchanged for a given object type.

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

| Specification |
| --- |
| Identifiers for WebRTC's Statistics API # dom-rtcstats-id |

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

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


TouchEvent: changedTouches property - Web APIs

TouchEvent: changedTouches property
===================================

The **`changedTouches`** read-only property is a `TouchList` whose touch points (`Touch` objects) varies depending on the event type, as follows:

* For the `touchstart` event, it is a list of the touch points that became active with the current event.
* For the `touchmove` event, it is a list of the touch points that have changed since the last event.
* For the `touchend` event, it is a list of the touch points that have been removed from the surface (that is, the set of touch points corresponding to fingers no longer touching the surface).
Value
-----

A `TouchList` whose `Touch` objects include all the touch points that contributed to this touch event.

Examples
--------

This example illustrates the `TouchEvent` object's `TouchEvent.changedTouches` property. The `TouchEvent.changedTouches` property is a `TouchList` object that contains one `Touch` object for each touch point which contributed to the event.

In following code snippet, the `touchmove` event handler iterates through the `changedTouches` list and prints the identifier of each touch point that changed since the last event.

```js
someElement.addEventListener(
  "touchmove",
  (e) => {
    // Iterate through the list of touch points that changed
    // since the last event and print each touch point's identifier.
    for (let i = 0; i < e.changedTouches.length; i++) {
      console.log(
        `changedTouches[${i}].identifier = ${e.changedTouches[i].identifier}`,
      );
    }
  },
  false,
);
```

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

| Specification |
| --- |
| Touch Events # dom-touchevent-changedtouches |

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

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


TouchEvent: TouchEvent() constructor - Web APIs

TouchEvent: TouchEvent() constructor
====================================

The **`TouchEvent()`** constructor creates a new `TouchEvent` object.

**Note:** If you construct a synthetic event using this constructor, that event will not be *trusted*, for security reasons.
 Only browser-generated `TouchEvent` objects are trusted and only trusted events trigger default actions.

Syntax
------

```js
new TouchEvent(type)
new TouchEvent(type, options)
```

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers set it to `touchstart`, `touchend`, `touchmove`, `touchcancel`

`options` Optional

An object that, *in addition of the properties defined in `UIEvent()`*, can have the following properties:

`touches` Optional

A `TouchList`, defaulting to an empty one, that is a list of objects for every point of contact currently touching the surface.

`targetTouches` Optional

 A `TouchList`, defaulting to an empty one,, that is a list of objects for every point of contact that is touching the surface
 *and* started on the element that is the target of the current event.

`changedTouches` Optional

and defaulting to `[]`, of type `Touch[]`, that is a list of objects for every point of contact which contributed to the event.

`ctrlKey` Optional

A boolean value, defaulting to `false`, indicating if the `ctrl` key was simultaneously pressed.

`shiftKey` Optional

A boolean value, defaulting to `false`, indicating if the `shift` key was simultaneously pressed.

`altKey` Optional

A boolean value, defaulting to `false`, indicating if the `alt` key was simultaneously pressed.

`metaKey` Optional

A boolean value, defaulting to `false`, indicating if the `meta` key was simultaneously pressed.

### Return value

A new `TouchEvent` object.

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

| Specification |
| --- |
| Touch Events # dom-touchevent-constructor |

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

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

See also
--------

* `TouchEvent`, the interface of the objects it constructs.


TouchEvent: metaKey property - Web APIs

TouchEvent: metaKey property
============================

The read-only **`metaKey`** property of the `TouchEvent` interface returns a boolean value indicating whether or not the `Meta` key is enabled when the touch event is created. If this key is enabled, the attribute's value is `true`. Otherwise, it is `false`.

This property is Read only .

**Note:** On Macintosh keyboards, this is the `⌘ Command` key. On Windows keyboards, this is the Windows key (`⊞`).

Value
-----

A boolean value that is `true` if the `Meta` key is enabled for this event; and `false` if the `Meta` is not enabled.

Examples
--------

The TouchEvent.altKey example includes an example of this property's usage.

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

| Specification |
| --- |
| Touch Events # dom-touchevent-metakey |

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

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


TouchEvent: altKey property - Web APIs

TouchEvent: altKey property
===========================

The read-only **`altKey`** property of the `TouchEvent` interface returns a boolean value indicating whether or not the `alt` (Alternate) key is enabled when the touch event is created. If the `alt` key is enabled, the attribute's value is `true`. Otherwise, it is `false`.

This property is Read only .

Value
-----

A boolean value that is `true` if the `alt` key is enabled for this event; and `false` if the `alt` is not enabled.

Examples
--------

This example illustrates how to access the `TouchEvent` key modifier properties: `TouchEvent.altKey`, `TouchEvent.ctrlKey`, `TouchEvent.metaKey` and `TouchEvent.shiftKey`.

In following code snippet, the `touchstart` event handler logs the state of the event's modifier keys.

```js
someElement.addEventListener(
  "touchstart",
  (e) => {
    // Log the state of this event's modifier keys
    console.log(`altKey = ${e.altKey}`);
    console.log(`ctrlKey = ${e.ctrlKey}`);
    console.log(`metaKey = ${e.metaKey}`);
    console.log(`shiftKey = ${e.shiftKey}`);
  },
  false,
);
```

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

| Specification |
| --- |
| Touch Events # dom-touchevent-altkey |

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

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


TouchEvent: touches property - Web APIs

TouchEvent: touches property
============================

**`touches`** is a read-only `TouchList` listing
 all the `Touch` objects for touch points that are currently in contact
 with the touch surface, regardless of whether or not they've changed or what their
 target element was at `touchstart` time.

 You can think of it as how many separate fingers are able to be identified as touching
 the screen.

**Note:** Touches inside the array are not necessarily ordered by order of occurrences (the
 i-th element in the array being the i-th touch that happened). You cannot assume a specific order. To determine the order of occurrences of the touches, use the `touch` object IDs.

Value
-----

 A `TouchList` listing all the `Touch` objects for touch points that are still in contact with the touch surface, regardless of whether or not they've changed or what their target element was at `touchstart`
 time.

Examples
--------

 This example illustrates the `TouchEvent` object's
 `TouchEvent.touches` property. The `TouchEvent.touches`
 property is a `TouchList` object and containing a list of
 `Touch` objects for every point of contact currently touching the surface.

 In following code snippet, the `touchstart` event handler checks the length
 of the `TouchEvent.touches` list to determine the number of touch points
 that were activated and then invokes different handlers depending on the number of touch
 points.

```js
someElement.addEventListener(
  "touchstart",
  (e) => {
    // Invoke the appropriate handler depending on the
    // number of touch points.
    switch (e.touches.length) {
      case 1:
        handle\_one\_touch(e);
        break;
      case 2:
        handle\_two\_touches(e);
        break;
      case 3:
        handle\_three\_touches(e);
        break;
      default:
        console.log("Not supported");
        break;
    }
  },
  false,
);
```

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

| Specification |
| --- |
| Touch Events # dom-touchevent-touches |

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

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


TouchEvent: shiftKey property - Web APIs

TouchEvent: shiftKey property
=============================

The read-only **`shiftKey`** property of the `TouchEvent` interface returns a boolean value indicating whether or not the `shift` key is enabled when the touch event is created. If this key is enabled, the attribute's value is `true`. Otherwise, it is `false`.

Value
-----

The boolean value `true` if the `shift` key is enabled for this event; and `false` if the `shift` key is not enabled.

Examples
--------

The TouchEvent.altKey example includes an example of this property's usage.

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

| Specification |
| --- |
| Touch Events # dom-touchevent-shiftkey |

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

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


TouchEvent: ctrlKey property - Web APIs

TouchEvent: ctrlKey property
============================

The read-only **`ctrlKey`** property of the `TouchEvent` interface returns a boolean value indicating whether the `control` (Control) key is enabled when the touch event is created. If this key is enabled, the attribute's value is `true`. Otherwise, it is `false`.

This property is Read only .

Value
-----

A boolean value that is `true` if the `control` key is enabled for this event; and `false` if the `control` is not enabled.

Examples
--------

The TouchEvent.altKey example includes an example of this property's usage.

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

| Specification |
| --- |
| Touch Events # dom-touchevent-ctrlkey |

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

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


TouchEvent: targetTouches property - Web APIs

TouchEvent: targetTouches property
==================================

The **`targetTouches`** read-only property is a `TouchList` listing all the `Touch` objects for touch points that are still in contact with the touch surface **and** whose `touchstart` event occurred inside the same target `element` as the current target element.

Value
-----

A `TouchList` listing all the `Touch` objects for touch points that are still in contact with the touch surface **and** whose `touchstart` event occurred inside the same target `element` as the current target element.

Examples
--------

This example illustrates the `TouchEvent` object's `TouchEvent.targetTouches` property. The `TouchEvent.targetTouches` property is a `TouchList` object that includes those TPs that are currently touching the surface *and* started on the element that is the target of the current event. As such, the `targetTouches` list is a strict subset of the `touches` list.

In following code snippet, the function compares the length of the `touches` list to the length of the `targetTouches` list and returns `true` if the lengths are the same and returns `false` otherwise.

```js
function touches\_in\_target(ev) {
  // Return true if all of the touches are within the target element;
  // otherwise return false.
  return ev.touches.length === ev.targetTouches.length;
}
```

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

| Specification |
| --- |
| Touch Events # dom-touchevent-targettouches |

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

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


XRProjectionLayer: fixedFoveation property - Web APIs

XRProjectionLayer: fixedFoveation property
==========================================

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

The **`fixedFoveation`** property of the `XRProjectionLayer` interface is a number indicating the amount of foveation used by the XR compositor for the layer. Fixed Foveated Rendering (FFR) renders the edges of the eye textures at a lower resolution than the center and reduces the GPU load.

It is most useful for low-contrast textures such as background images, but less for high-contrast ones such as text or detailed images. Authors can adjust the level on a per-frame basis to achieve the best tradeoff between performance and visual quality.

Value
-----

A number between 0 and 1.

* The minimum amount of foveation is indicated by 0 (full resolution).
* The maximum amount of foveation is indicated by 1 (the edges render at lower resolution).

It's up to the user agent how to interpret the numbers in this range. When changing the foveation level, the effect will visible in the next `XRFrame`.

Note that some user agents might implement certain levels of foveation, so you might need to adjust the foveation level in large increments to see an effect. Example levels:

* `0`: no foveation
* `1/3`: low foveation
* `2/3`: medium foveation
* `1.0`: maximum foveation

Some devices don't support foveated rendering. In that case `fixedFoveation` is `null` and setting it will not do anything.

Examples
--------

### Dynamically setting the level of fixed foveation rendering

The `fixedFoveation` property allows you to set the level of foveation at runtime and for each frame. To set the maximum foveation for a given `XRProjectionLayer`, use a value of `1`.

```js
let glProjectionLayer = glBinding.createProjectionLayer(/\* … \*/);
glProjectionLayer.fixedFoveation = 1; // maximum foveation
```

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrprojectionlayer-fixedfoveation |

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

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

See also
--------

* Foveated rendering


XRProjectionLayer: textureWidth property - Web APIs

XRProjectionLayer: textureWidth property
========================================

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

The read-only **`textureWidth`** property of the `XRProjectionLayer` interface indicates the width in pixels of the color textures of this layer.

The projection layer's texture width is determined by the user agent or the device. It is reported in the `XRSubImage`, which can only be accessed inside the frame loop. If you want to manage your own depth buffers and don't want to wait for first frame after layer creation to determine the required dimensions for those buffers, the `textureWidth` property allows access to layer texture width outside the frame loop. Allocation of these buffers can happen directly after layer creation.

Value
-----

A number indicating the width in pixels.

Examples
--------

### Using `textureWidth`

The `textureWidth` of a layer is useful when creating render buffers for a layer. See also `WebGL2RenderingContext.renderbufferStorageMultisample()`.

```js
let glLayer = xrGLBinding.createProjectionLayer();

let color_rb = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, color_rb);
gl.renderbufferStorageMultisample(
  gl.RENDERBUFFER,
  samples,
  gl.RGBA8,
  glLayer.textureWidth,
  glLayer.textureHeight,
);
```

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrprojectionlayer-texturewidth |

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

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

See also
--------

* `XRWebGLBinding.createProjectionLayer()`
* `WebGL2RenderingContext.renderbufferStorageMultisample()`
* `XRSubImage`


XRProjectionLayer: textureHeight property - Web APIs

XRProjectionLayer: textureHeight property
=========================================

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

The read-only **`textureHeight`** property of the `XRProjectionLayer` interface indicates the height in pixels of the color textures of this layer.

The projection layer's texture height is determined by the user agent or the device. It is reported in the `XRSubImage`, which can only be accessed inside the frame loop. If you want to manage your own depth buffers and don't want to wait for first frame after layer creation to determine the required dimensions for those buffers, the `textureHeight` property allows access to layer texture height outside the frame loop. Allocation of these buffers can happen directly after layer creation.

Value
-----

A number indicating the height in pixels.

Examples
--------

### Using `textureHeight`

The `textureHeight` of a layer is useful when creating render buffers for a layer. See also `WebGL2RenderingContext.renderbufferStorageMultisample()`.

```js
let glLayer = xrGLBinding.createProjectionLayer();

let color_rb = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, color_rb);
gl.renderbufferStorageMultisample(
  gl.RENDERBUFFER,
  samples,
  gl.RGBA8,
  glLayer.textureWidth,
  glLayer.textureHeight,
);
```

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrprojectionlayer-textureheight |

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

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

See also
--------

* `XRWebGLBinding.createProjectionLayer()`
* `WebGL2RenderingContext.renderbufferStorageMultisample()`
* `XRSubImage`


XRProjectionLayer: textureArrayLength property - Web APIs

XRProjectionLayer: textureArrayLength property
==============================================

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

The read-only **`textureArrayLength`** property of the `XRProjectionLayer` interface indicates layer's layer count for array textures when using `texture-array` as the `textureType`.

The projection layer's layer count for array textures is determined by the user agent or the device. It is reported in the `XRSubImage`, which can only be accessed inside the frame loop. If you want to manage your own depth buffers and don't want to wait for first frame after layer creation to determine the required dimensions for those buffers, the `textureArrayLength` property allows access to layer count for array textures outside the frame loop. Allocation of these buffers can happen directly after layer creation.

Value
-----

A number indicating the number of layers of the color textures when using `texture-array` as the `textureType`. Otherwise it will be `1`.

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrprojectionlayer-texturearraylength |

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

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

See also
--------

* `XRSubImage`


XRProjectionLayer: ignoreDepthValues property - Web APIs

XRProjectionLayer: ignoreDepthValues property
=============================================

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

The read-only **`ignoreDepthValues`** property of the `XRProjectionLayer` interface is a boolean indicating if the XR compositor is not making use of depth buffer values when rendering the layer.

Value
-----

A boolean. `true` indicates the XR compositor doesn't make use of depth buffer values; `false` indicates the content of the depth buffer will be used when rendering the layer.

Examples
--------

### Ignoring depth values

If the `depthFormat` option is `0` when creating a projection layer, the `ignoreDepthValues` property will be `true`. See also `XRWebGLBinding.createProjectionLayer()`.

```js
let glProjectionLayer = xrGLBinding.createProjectionLayer({
  depthFormat: 0,
});

glProjectionLayer.ignoreDepthValues; // true
```

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrprojectionlayer-ignoredepthvalues |

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

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

See also
--------

* `XRWebGLBinding.createProjectionLayer()`


RemotePlayback: connecting event - Web APIs

RemotePlayback: connecting event
================================

The **`connecting`** event of the `RemotePlayback` interface fires when the user agent initiates remote playback.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.

```js
addEventListener("connecting", (event) => {});

onconnecting = (event) => {};
```

Event type
----------

A generic `Event`.

Example
-------

In the following example the value of `RemotePlayback.state` is printed to the console when the user agent initiates a connection.

```js
RemotePlayback.onconnecting = () => {
  console.log(RemotePlayback.state);
};
```

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

| Specification |
| --- |
| Remote Playback API # dom-remoteplayback-onconnecting |

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

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


RemotePlayback: prompt() method - Web APIs

RemotePlayback: prompt() method
===============================

The **`prompt()`** method of the `RemotePlayback` interface prompts the user to select an available remote playback device and give permission for the current media to be played using that device.

If the user gives permission, the `state` will be set to `connecting` and the user agent will connect to the device to initiate playback.

If the user chooses to instead disconnect from the device, the `state` will be set to `disconnected` and user agent will disconnect from this device.

Syntax
------

```js
prompt()
```

### Parameters

None.

### Return value

A `Promise` that resolves with `undefined` after the user accepts or rejects the prompt.

### Exceptions

The promise will be rejected with one of the following exceptions:

`InvalidStateError` `DOMException`

Thrown if `disableRemotePlayback` is `true` for the media element.

`OperationError` `DOMException`

Thrown if there is already an unsettled promise for this media element, or browsing context.

`InvalidAccessError` `DOMException`

Thrown if the user has not interacted with this device recently.

`NotSupportedError` `DOMException`

Thrown if the user agent knows that remote playback of this particular media is not feasible.

`NotFoundError` `DOMException`

Thrown if remote playback is unavailable.

Security
--------

Transient user activation is required. The user has to interact with the page or a UI element in order for this feature to work.

Examples
--------

In the following example the user is prompted to select a remote playback device to play a video.

```js
devicesBtn.onclick = () => {
  // Request the user to select a remote playback device.
  videoElem.remote
    .prompt()
    // Update the UI and monitor the connected state.
    .then(updateRemotePlaybackState);
  // Otherwise, the user cancelled the selection UI or no screens were found.
};
```

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

| Specification |
| --- |
| Remote Playback API # dom-remoteplayback-prompt |

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

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


RemotePlayback: cancelWatchAvailability() method - Web APIs

RemotePlayback: cancelWatchAvailability() method
================================================

The **`cancelWatchAvailability()`** method of the `RemotePlayback` interface cancels the request to watch for one or all available devices.

Syntax
------

```js
cancelWatchAvailability()
cancelWatchAvailability(id)
```

### Parameters

`id` Optional

The `callbackId` of a particular remote playback device.

If a `callbackId` of a specific device is passed in, then that device will be removed from the list of watched devices. Otherwise, the whole list will be cleared.

### Return value

A `Promise` that resolves with `undefined`.

### Exceptions

`InvalidStateError` `DOMException`

Thrown if `disableRemotePlayback` is `true` for the media element.

`NotFoundError` `DOMException`

Thrown if an `id` is passed but it does not match any available `callbackId`.

Examples
--------

Once a remote playback device has been identified and is connected, the monitoring of available devices can be stopped using `cancelWatchAvailability().`

```js
function switchToRemoteUI() {
  // Indicate that the state is 'connecting' or 'connected' to the user.
  // For example, hide the video element as only controls are needed.
  videoElem.style.display = "none";

  // Stop monitoring the availability of remote playback devices.
  videoElem.remote.cancelWatchAvailability();
}
```

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

| Specification |
| --- |
| Remote Playback API # dom-remoteplayback-cancelwatchavailability |

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

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


RemotePlayback: watchAvailability() method - Web APIs

RemotePlayback: watchAvailability() method
==========================================

The **`watchAvailability()`** method of the `RemotePlayback` interface watches the list of available remote playback devices and returns a `Promise` that resolves with the `callbackId` of a remote playback device.

Syntax
------

```js
watchAvailability(RemotePlaybackAvailabilityCallback)
```

### Parameters

`RemotePlaybackAvailabilityCallback(boolean)`

A callback that allows the page to obtain the remote playback device availability for the corresponding media element. It is passed a boolean which, if true, indicates that remote playback is available.

### Return value

A `Promise` that resolves with an integer. This is the `callbackId` for the identified remote playback device.

### Exceptions

`InvalidStateError` `DOMException`

Thrown if `disableRemotePlayback` is `true` for the media element.

`NotSupportedError` `DOMException`

Thrown if the user agent is unable to continuously monitor the list of available remote playback devices.

Examples
--------

In the following example, after checking that there is no currently connected device, `watchAvailability()` is used to watch for remote devices becoming available. See the working example (Requires a supported device and a connected remote playback device).

```js
if (video.remote.state === "disconnected") {
  video.remote.watchAvailability(handleAvailabilityChange).then((id) => {
    log(`> Started watching remote device availability: ${id}`);
    callbackId = id;
  });
}
```

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

| Specification |
| --- |
| Remote Playback API # dom-remoteplayback-watchavailability |

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

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


RemotePlayback: connect event - Web APIs

RemotePlayback: connect event
=============================

The **`connect`** event of the `RemotePlayback` interface fires when the user agent connects to the remote device.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.

```js
addEventListener("connect", (event) => {});

onconnect = (event) => {};
```

Event type
----------

A generic `Event`.

Example
-------

In the following example the value of `RemotePlayback.state` is printed to the console when the user agent successfully connects.

```js
RemotePlayback.onconnect = () => {
  console.log(RemotePlayback.state);
};
```

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

| Specification |
| --- |
| Remote Playback API # dom-remoteplayback-onconnect |

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

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


RemotePlayback: disconnect event - Web APIs

RemotePlayback: disconnect event
================================

The **`disconnect`** event of the `RemotePlayback` interface fires when the user agent disconnects from the remote device.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.

```js
addEventListener("disconnect", (event) => {});

ondisconnect = (event) => {};
```

Event type
----------

A generic `Event`.

Example
-------

In the following example the value of `RemotePlayback.state` is printed to the console when the user agent disconnects from the remote device.

```js
RemotePlayback.disconnect = () => {
  console.log(RemotePlayback.state);
};
```

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

| Specification |
| --- |
| Remote Playback API # dom-remoteplayback-ondisconnect |

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

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


RemotePlayback: state property - Web APIs

RemotePlayback: state property
==============================

The **`state`** read-only property of the `RemotePlayback` interface returns the current state of the `RemotePlayback` connection.

Value
-----

One of:

`"connecting"`

The user agent is attempting to initiate remote playback with the selected device.

`"connected"`

The transition from local to remote playback has happened. All commands will now take place on the remote device.

`"disconnected"`

The remote playback has not been initiated, has failed to initiate, or has been stopped.

Examples
--------

In the following example the value of `RemotePlayback.state` is printed to the console when the user agent successfully connects.

```js
RemotePlayback.onconnect = () => {
  console.log(RemotePlayback.state);
};
```

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

| Specification |
| --- |
| Remote Playback API # dom-remoteplayback-state |

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

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