MediaMetadata: title property - Web APIs

MediaMetadata: title property
=============================

 The **`title`** property of the
 `MediaMetaData` interface returns or sets the title of the media to be
 played.

Value
-----

A `String` containing the title of the media.

Examples
--------

 The following example checks for browser compatibility and sets the current metadata
 for the media session.

```js
if ("mediaSession" in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: "Unforgettable",
    artist: "Nat King Cole",
    album: "The Ultimate Collection (Remastered)",
    artwork: [
      {
        src: "https://dummyimage.com/96x96",
        sizes: "96x96",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/128x128",
        sizes: "128x128",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/192x192",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/256x256",
        sizes: "256x256",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/384x384",
        sizes: "384x384",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/512x512",
        sizes: "512x512",
        type: "image/png",
      },
    ],
  });
}
```

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

| Specification |
| --- |
| Media Session # dom-mediametadata-title |

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

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


MediaMetadata: album property - Web APIs

MediaMetadata: album property
=============================

 The **`album`** property of the
 `MediaMetaData` interface returns or sets the name of the album or
 collection containing the media to be played.

Value
-----

A `String` containing the name of the album.

Examples
--------

 The following example checks for browser compatibility and sets the current metadata
 for the media session.

```js
if ("mediaSession" in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: "Unforgettable",
    artist: "Nat King Cole",
    album: "The Ultimate Collection (Remastered)",
    artwork: [
      {
        src: "https://dummyimage.com/96x96",
        sizes: "96x96",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/128x128",
        sizes: "128x128",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/192x192",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/256x256",
        sizes: "256x256",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/384x384",
        sizes: "384x384",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/512x512",
        sizes: "512x512",
        type: "image/png",
      },
    ],
  });
}
```

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

| Specification |
| --- |
| Media Session # dom-mediametadata-album |

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

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


MediaMetadata: MediaMetadata() constructor - Web APIs

MediaMetadata: MediaMetadata() constructor
==========================================

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

Syntax
------

```js
new MediaMetadata()
new MediaMetadata(metadata)
```

### Parameters

`metadata` Optional

The metadata parameters are as follows:

`title` Optional

The title of the media to be played. It defaults to the empty string (`""`).

`artist` Optional

The name of the artist, group, creator, etc. of the media to be played. It defaults to the empty string (`""`).

`album` Optional

The name of the album, or collection, containing the media to be played. It defaults to the empty string (`""`).

`artwork` Optional

An `Array` of objects that represent images associated with the playing media that defaults to be an empty array. The object structure is:

`src`

The URL from which the user agent fetches the image's data.

`sizes` Optional

Specifies the resource in multiple sizes so the user agent doesn't have to scale a single image. It defaults to the empty string (`""`).

`type` Optional

The MIME type hint for the user agent that allows it to ignore images of types that it doesn't support. However, the user agent may still use MIME type sniffing after downloading the image to determine its type. It defaults to the empty string (`""`).

Example
-------

 The following example creates a new `MediaMetadata` object using the
 correct format of metadata.

```js
if ("mediaSession" in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: "Unforgettable",
    artist: "Nat King Cole",
    album: "The Ultimate Collection (Remastered)",
    artwork: [
      {
        src: "https://dummyimage.com/96x96",
        sizes: "96x96",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/128x128",
        sizes: "128x128",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/192x192",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/256x256",
        sizes: "256x256",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/384x384",
        sizes: "384x384",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/512x512",
        sizes: "512x512",
        type: "image/png",
      },
    ],
  });
}
```

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

| Specification |
| --- |
| Media Session # dom-mediametadata-mediametadata |

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

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


MediaMetadata: artist property - Web APIs

MediaMetadata: artist property
==============================

 The **`artist`** property of the
 `MediaMetaData` interface returns or sets the name of the artist, group,
 creator, etc., of the media to be played.

Value
-----

A `String` containing the name of the artist.

Examples
--------

 The following example checks for browser compatibility and sets the current metadata
 for the media session.

```js
if ("mediaSession" in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: "Unforgettable",
    artist: "Nat King Cole",
    album: "The Ultimate Collection (Remastered)",
    artwork: [
      {
        src: "https://dummyimage.com/96x96",
        sizes: "96x96",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/128x128",
        sizes: "128x128",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/192x192",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/256x256",
        sizes: "256x256",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/384x384",
        sizes: "384x384",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/512x512",
        sizes: "512x512",
        type: "image/png",
      },
    ],
  });
}
```

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

| Specification |
| --- |
| Media Session # dom-mediametadata-artist |

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

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


VideoTrackList: selectedIndex property - Web APIs

VideoTrackList: selectedIndex property
======================================

 The read-only **`VideoTrackList`**
 property **`selectedIndex`** returns the index of the
 currently selected track, if any, or `-1` otherwise.

Value
-----

 A number indicating the index of the currently selected track, if any, or
 `-1` otherwise.

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

| Specification |
| --- |
| HTML Standard # dom-videotracklist-selectedindex-dev |

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

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


VideoTrackList: getTrackById() method - Web APIs

VideoTrackList: getTrackById() method
=====================================

 The **`VideoTrackList`** method
 **`getTrackById()`** returns the first
 `VideoTrack` object from the track list whose `id` matches the specified string.

 This lets you find a specified track if
 you know its ID string.

Syntax
------

```js
getTrackById(id)
```

### Parameters

`id`

 A string indicating the ID of the track to locate within the track
 list.

### Return value

 A `VideoTrack` object indicating the first track found within the
 `VideoTrackList` whose `id` matches the specified string. If no
 match is found, this method returns `null`.

 The tracks are searched in their natural order; that is, in the order defined by the
 media resource itself, or, if the resource doesn't define an order, the relative order
 in which the tracks are declared by the media resource.

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

| Specification |
| --- |
| HTML Standard # dom-videotracklist-gettrackbyid-dev |

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

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


VideoTrackList: length property - Web APIs

VideoTrackList: length property
===============================

 The read-only **`VideoTrackList`**
 property **`length`** returns the number of entries in the
 `VideoTrackList`, each of which is a `VideoTrack` representing
 one video track in the media element.

 A value of 0 indicates that there are no
 video tracks in the media.

Value
-----

 A number indicating how many video tracks are included in the
 `VideoTrackList`. Each track can be accessed by treating the
 `VideoTrackList` as an array of objects of type `VideoTrack`.

Examples
--------

 This snippet gets the number of video tracks in the first `<video>`
 element found in the DOM by `querySelector()`.

```js
const videoElem = document.querySelector("video");
let numVideoTracks = 0;

if (videoElem.videoTracks) {
  numVideoTracks = videoElem.videoTracks.length;
}
```

 Note that this sample checks to be sure `HTMLMediaElement.videoTracks` is
 defined, to avoid failing on browsers without support for `VideoTrack`.

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

| Specification |
| --- |
| HTML Standard # dom-videotracklist-length-dev |

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

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


VideoTrackList: addtrack event - Web APIs

VideoTrackList: addtrack event
==============================

The `addtrack` event is fired when a video track is added to a `VideoTrackList`.

Syntax
------

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

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

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

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

A `TrackEvent`. Inherits from `Event`.

Event

TrackEventEvent properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`track` Read only

The newly-added `VideoTrack` the event is in reference to.

Examples
--------

Using `addEventListener()`:

```js
const videoElement = document.querySelector("video");

videoElement.videoTracks.addEventListener("addtrack", (event) => {
  console.log(`Video track: ${event.track.label} added`);
});
```

Using the `onaddtrack` event handler property:

```js
const videoElement = document.querySelector("video");

videoElement.videoTracks.onaddtrack = (event) => {
  console.log(`Video track: ${event.track.label} added`);
};
```

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

| Specification |
| --- |
| HTML Standard # event-media-addtrack |
| HTML Standard # handler-tracklist-onaddtrack |

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

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

See also
--------

* Related events: `removetrack`, `change`
* This event on `AudioTrackList` targets: `addtrack`
* This event on `MediaStream` targets: `addtrack`
* Media Capture and Streams API
* WebRTC


VideoTrackList: change event - Web APIs

VideoTrackList: change event
============================

The `change` event is fired when a video track is made active or inactive, for example by changing the track's `selected` property.

Syntax
------

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

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

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

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

A generic `Event` with no added properties.

Examples
--------

Using `addEventListener()`:

```js
const videoElement = document.querySelector("video");
videoElement.videoTracks.addEventListener("change", (event) => {
  console.log(`'${event.type}' event fired`);
});

// changing the value of `selected` will trigger the `change` event
const toggleTrackButton = document.querySelector(".toggle-track");
toggleTrackButton.addEventListener("click", () => {
  const track = videoElement.videoTracks[0];
  track.selected = !track.selected;
});
```

Using the `onchange` event handler property:

```js
const videoElement = document.querySelector("video");
videoElement.videoTracks.onchange = (event) => {
  console.log(`'${event.type}' event fired`);
};

// changing the value of `selected` will trigger the `change` event
const toggleTrackButton = document.querySelector(".toggle-track");
toggleTrackButton.addEventListener("click", () => {
  const track = videoElement.videoTracks[0];
  track.selected = !track.selected;
});
```

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

| Specification |
| --- |
| HTML Standard # event-media-change |
| HTML Standard # handler-tracklist-onchange |

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

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

See also
--------

* Related events: `addtrack`, `removetrack`
* This event on `AudioTrackList` targets: `change`
* Media Capture and Streams API
* WebRTC


VideoTrackList: removetrack event - Web APIs

VideoTrackList: removetrack event
=================================

The `removetrack` event is fired when a video track is removed from a `VideoTrackList`.

Syntax
------

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

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

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

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

A `TrackEvent`. Inherits from `Event`.

Event

TrackEventEvent properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`track` Read only

The newly-removed `VideoTrack` the event is in reference to.

Examples
--------

Using `addEventListener()`:

```js
const videoElement = document.querySelector("video");

videoElement.videoTracks.addEventListener("removetrack", (event) => {
  console.log(`Video track: ${event.track.label} removed`);
});
```

Using the `onremovetrack` event handler property:

```js
const videoElement = document.querySelector("video");

videoElement.videoTracks.onremovetrack = (event) => {
  console.log(`Video track: ${event.track.label} removed`);
};
```

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

| Specification |
| --- |
| HTML Standard # event-media-removetrack |
| HTML Standard # handler-tracklist-onremovetrack |

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

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

See also
--------

* Related events: `addtrack`, `change`
* This event on `AudioTrackList` targets: `removetrack`
* This event on `MediaStream` targets: `removetrack`
* Media Capture and Streams API
* WebRTC


MediaKeyStatusMap: get() method - Web APIs

MediaKeyStatusMap: get() method
===============================

 The **`get`** property of the
 `MediaKeyStatusMap` interface returns the value associated with the given
 key, or `undefined` if there is none.

Syntax
------

```js
get(key)
```

### Parameters

`key`

The key whose value you want returned.

### Return value

The value associated with the given key, or `undefined`.

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

| Specification |
| --- |
| Encrypted Media Extensions # dom-mediakeystatusmap-get |

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

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


MediaKeyStatusMap: entries() method - Web APIs

MediaKeyStatusMap: entries() method
===================================

 The **`entries()`** read-only property
 of the `MediaKeyStatusMap` interface returns a new Iterator object,
 containing an array of [key, value] pairs for each element in the status map, in
 insertion order.

Syntax
------

```js
entries()
```

### Parameters

None.

### Return value

### Exceptions

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

#### No specification found

No specification data found for `api.MediaKeyStatusMap.entries`.
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.


MediaKeyStatusMap: has() method - Web APIs

MediaKeyStatusMap: has() method
===============================

 The **`has`** property of the
 `MediaKeyStatusMap` interface returns a `Boolean`, asserting
 whether a value has been associated with the given key.

Syntax
------

```js
has(key)
```

### Parameters

`key`

The key whose value you want returned

### Return value

A `Boolean`.

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

| Specification |
| --- |
| Encrypted Media Extensions # dom-mediakeystatusmap-has |

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

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


MediaKeyStatusMap: values() method - Web APIs

MediaKeyStatusMap: values() method
==================================

 The **`values`** property of the
 `MediaKeyStatusMap` interface returns a new Iterator object, containing
 values for each element in the status map, in insertion order.

Syntax
------

```js
values()
```

### Parameters

None.

### Return value

A new iterator.

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

#### No specification found

No specification data found for `api.MediaKeyStatusMap.values`.
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.


MediaKeyStatusMap: size property - Web APIs

MediaKeyStatusMap: size property
================================

 The **`size`** read-only property of
 the `MediaKeyStatusMap` interface returns the number of key/value paIrs
 in the status map.

Value
-----

A long integer.

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

| Specification |
| --- |
| Encrypted Media Extensions # dom-mediakeystatusmap-size |

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

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


MediaKeyStatusMap: keys() method - Web APIs

MediaKeyStatusMap: keys() method
================================

 The **`keys`** property of the
 `MediaKeyStatusMap` interface returns a new Iterator object, containing
 keys for each element in the status map, in insertion order.

Syntax
------

```js
keys()
```

### Parameters

None.

### Return value

A new iterator.

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

#### No specification found

No specification data found for `api.MediaKeyStatusMap.keys`.
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.


MediaKeyStatusMap: forEach() method - Web APIs

MediaKeyStatusMap: forEach() method
===================================

 The **`forEach`** property of the
 `MediaKeyStatusMap` interface calls callback once for each key-value pair
 in the status map, in insertion order. If an argument is present it will be passed to
 the callback.

Syntax
------

```js
forEach(callbackFn)
forEach(callbackFn, thisArg)
```

### Parameters

`callbackFn`

Function to execute for each element, taking three arguments:

`currentValue`

The current element being processed in the array.

`index` Optional

The index of the current element being processed in the array.

`array` Optional

Which array `forEach()` is being applied to.

`thisArg` Optional

Value used as `this` when executing `callback`.

### Return value

None (`undefined`).

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

#### No specification found

No specification data found for `api.MediaKeyStatusMap.forEach`.
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.


ConstantSourceNode: offset property - Web APIs

ConstantSourceNode: offset property
===================================

 The read-only `offset` property of the `ConstantSourceNode`
 interface returns a `AudioParam` object indicating the numeric a-rate value which is always returned
 by the source when asked for the next sample.

**Note:** While the `AudioParam` named `offset` is read-only, the
 `value` property within is not. So you can change the value of
 `offset` by setting the value of
 `ConstantSourceNode.offset.value`:

```js
myConstantSourceNode.offset.value = newValue;
```

Value
-----

 An `AudioParam` object indicating the a-rate value returned for every
 sample by this node. The default value is 1.0.

 To access the `offset` parameter's current value, access the parameter's
 `value` property, as shown in the syntax box above.

Examples
--------

 This example shows how to set up a `ConstantSourceNode` so its
 `offset` is used as the input to a pair of `GainNode`s; this
 snippet is derived from the complete example you can find in Controlling multiple parameters with ConstantSourceNode.

```js
gainNode2 = context.createGain();
gainNode3 = context.createGain();
gainNode2.gain.value = gainNode3.gain.value = 0.5;

volumeSliderControl.value = gainNode2.gain.value;

constantSource = context.createConstantSource();
constantSource.connect(gainNode2.gain);
constantSource.connect(gainNode3.gain);
```

 First, the gain nodes are created and configured, and a slider control's value is set
 to match the gain on the two nodes. Then we create a new
 `ConstantSourceNode` and make it the source for the two gain nodes'
 `GainNode.gain` values. Each of those values is also an
 `AudioParam`.

 Let's say we have an event handler (for `click` events, in this case) which
 needs to respond by altering the value of the two gain nodes. With the linkage above in
 place, that can be done using this simple event handler:

```js
function handleClickEvent(event) {
  constantSource.offset.value = volumeSliderControl.value;
}
```

 All this function has to do is fetch the current value of the slider control we're
 using to control the paired nodes' gains, then store that value into the
 `ConstantSourceNode`'s `offset` parameter. That's done by changing
 the contents of its `AudioParam.value` property. The two gain nodes quickly
 adopt the new volume level.

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

| Specification |
| --- |
| Web Audio API # dom-constantsourcenode-offset |

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

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

See also
--------

* Using the Web Audio API
* `ConstantSourceNode`
* `AudioNode`
* `AudioParam`


ConstantSourceNode: ConstantSourceNode() constructor - Web APIs

ConstantSourceNode: ConstantSourceNode() constructor
====================================================

 The **`ConstantSourceNode()`** constructor creates a new
 `ConstantSourceNode` object instance, representing an audio source which
 constantly outputs samples whose values are always the same.

Syntax
------

```js
new ConstantSourceNode(context, options)
```

### Parameters

`context`

 An `AudioContext` representing the audio context you want the node to
 be associated with.

`options`

 A `ConstantSourceOptions` dictionary object defining the properties you
 want the `ConstantSourceNode` to have:

`offset`

 A read-only `AudioParam` specifying the
 constant value generated by the source. The default is 1.0. The normal range is
 -1.0 to 1.0, but the value can be anywhere in the range from
 `-Infinity` to `+Infinity`.

Examples
--------

 In this example, an audio context is created, then a `ConstantSourceNode` is
 established with its `offset` initialized to 0.5.

```js
let audioContext = new AudioContext();

let myConstantSource = new ConstantSourceNode(audioContext, { offset: 0.5 });
```

**Note:** The new `ConstantSourceNode` created by the
 constructor has a
 `channelCount` of
 2.

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

| Specification |
| --- |
| Web Audio API # dom-constantsourcenode-constructor-constantsourcenode |

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

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


InputDeviceInfo: getCapabilities() method - Web APIs

InputDeviceInfo: getCapabilities() method
=========================================

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

The **`getCapabilities()`** method of the `InputDeviceInfo` interface returns a `MediaTrackCapabilities` object describing the primary audio or video track of the device's `MediaStream`.

Syntax
------

```js
getCapabilities()
```

### Parameters

None.

### Return value

A `MediaTrackCapabilities` object which specifies the value or range of values which are supported for each of the user agent's supported constrainable properties, containing the following members:

`deviceId`

A `ConstrainDOMString` object containing the device ID.

`groupId`

A `ConstrainDOMString` object containing a group ID.

`autoGainControl`

 A `ConstrainBoolean` object reporting if the source can do auto gain control.
 If the feature can be controlled by a script the source will report both true and false as possible values.

`channelCount`

A `ConstrainULong` containing the channel count or range of channel counts.

`echoCancellation`

 A `ConstrainBoolean` object reporting if the source can do echo cancellation.
 If the feature can be controlled by a script the source will report both true and false as possible values.

`latency`

A `ConstrainDouble` containing the latency or range of latencies.

`noiseSuppression`

 A `ConstrainBoolean` object reporting if the source can do noise suppression.
 If the feature can be controlled by a script the source will report both true and false as possible values.

`sampleRate`

A `ConstrainULong` containing the sample rate or range of sample rates.

`sampleSize`

A `ConstrainULong` containing the sample size or range of sample sizes.

`aspectRatio`

A `ConstrainDouble` containing the video aspect ratio (width in pixels divided by height in pixels) or range of aspect ratios.

`facingMode`

A `ConstrainDOMString` object containing the camera facing mode. A camera may report multiple facings, for example "left" and "user".

`frameRate`

A `ConstrainDouble` containing the frame rate or range of frame rates which are acceptable.

`height`

A `ConstrainULong` containing the video height or range of heights in pixels.

`width`

A `ConstrainULong` containing the video width or range of widths in pixels.

`resizeMode`

A `ConstrainDOMString` object containing the mode or an array of modes the UA can use to derive the resolution of the video track.

**Note:** If the user has not granted permission to access the input device an empty object will be returned.

Examples
--------

In the following example we ask for permission to access audio and video devices with `mediaDevices.getUserMedia()`, as to use `getCapabilities()` we need permission to access the devices.

If `device` is an `InputDeviceInfo` object, then `getCapabilities()` will return an object with members representing its capabilities. A video stream will not include auto properties such as `noiseSuppression`, for example.

```js
// Get permission to access audio or video devices
navigator.mediaDevices.getUserMedia({ audio: true, video: true });

navigator.mediaDevices.enumerateDevices().then((devices) => {
  devices.forEach((device) => {
    console.log(device.getCapabilities()); // a MediaTrackCapabilities object.
  });
});
```

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

| Specification |
| --- |
| Media Capture and Streams # dom-inputdeviceinfo-getcapabilities |

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

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

See also
--------

* `MediaStreamTrack.getCapabilities()`, which also return a `MediaTrackCapabilities` object.


NavigationDestination: sameDocument property - Web APIs

NavigationDestination: sameDocument property
============================================

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

 The **`sameDocument`** read-only property of the
 `NavigationDestination` interface returns `true` if the navigation is to the same `document` as the current `Document` value, or `false` otherwise.

This is useful for checking whether the navigation will be same-document or cross-document.

Value
-----

A boolean.

Examples
--------

```js
navigation.addEventListener("navigate", (event) => {
  console.log(event.destination.sameDocument);
});
```

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

| Specification |
| --- |
| HTML Standard # the-navigationdestination-interface:dom-navigationdestination-samedocument-2 |

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

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

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo


NavigationDestination: url property - Web APIs

NavigationDestination: url property
===================================

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

 The **`url`** read-only property of the
 `NavigationDestination` interface returns the URL being navigated to.

Value
-----

A string.

Examples
--------

### Handling a navigation using `intercept()`

```js
navigation.addEventListener("navigate", (event) => {
  // Exit early if this navigation shouldn't be intercepted,
  // e.g. if the navigation is cross-origin, or a download request
  if (shouldNotIntercept(event)) {
    return;
  }

  const url = new URL(event.destination.url);

  if (url.pathname.startsWith("/articles/")) {
    event.intercept({
      async handler() {
        // The URL has already changed, so show a placeholder while
        // fetching the new content, such as a spinner or loading page
        renderArticlePagePlaceholder();

        // Fetch the new content and display when ready
        const articleContent = await getArticleContent(url.pathname);
        renderArticlePage(articleContent);
      },
    });
  }
});
```

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

| Specification |
| --- |
| HTML Standard # the-navigationdestination-interface:dom-navigationdestination-url-2 |

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

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

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo


NavigationDestination: key property - Web APIs

NavigationDestination: key property
===================================

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

 The **`key`** read-only property of the
 `NavigationDestination` interface returns the `key` value of the destination `NavigationHistoryEntry` if the `NavigateEvent.navigationType` is `traverse`, or an empty string otherwise.

The `key` is a unique, UA-generated value that represents the history entry's slot in the history entries list, used to navigate to this place in the history via `Navigation.traverseTo()`. It will be reused by other entries that replace the entry in the list (i.e. if the `NavigateEvent.navigationType` is `replace`).

Value
-----

A string representing the `key` of the destination `NavigationHistoryEntry`, or an empty string.

Examples
--------

```js
navigation.addEventListener("navigate", (event) => {
  console.log(event.destination.key);
});
```

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

| Specification |
| --- |
| HTML Standard # the-navigationdestination-interface:dom-navigationdestination-key-2 |

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

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

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo


NavigationDestination: id property - Web APIs

NavigationDestination: id property
==================================

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

 The **`id`** read-only property of the
 `NavigationDestination` interface returns the `id` value of the destination `NavigationHistoryEntry` if the `NavigateEvent.navigationType` is `traverse`, or an empty string otherwise.

The `id` is a unique, UA-generated value that always represents the history entry, useful to correlate a history entry with an external resource such as a storage cache.

Value
-----

A string representing the `id` of the destination `NavigationHistoryEntry`, or an empty string.

Examples
--------

```js
navigation.addEventListener("navigate", (event) => {
  console.log(event.destination.id);
});
```

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

| Specification |
| --- |
| HTML Standard # the-navigationdestination-interface:dom-navigationdestination-id-2 |

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

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

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo


NavigationDestination: getState() method - Web APIs

NavigationDestination: getState() method
========================================

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

 The **`getState()`** method of the
 `NavigationDestination` interface returns a clone of the developer-supplied state associated with the destination `NavigationHistoryEntry`, or navigation operation (e.g. `navigate()`) as appropriate.

Syntax
------

```js
getState()
```

### Parameters

None.

### Return value

A value representing the state. This can be any type.

If no state is defined, it returns `undefined`.

### Exceptions

None.

Examples
--------

```js
navigation.addEventListener("navigate", (event) => {
  console.log(event.destination.getState());
});
```

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

| Specification |
| --- |
| HTML Standard # the-navigationdestination-interface:dom-navigationdestination-getstate-2 |

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

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

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo
* Methods that allow state to be updated — `Navigation.navigate()`, `Navigation.reload()`, and `Navigation.updateCurrentEntry()`


NavigationDestination: index property - Web APIs

NavigationDestination: index property
=====================================

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

 The **`index`** read-only property of the
 `NavigationDestination` interface returns the `index` value of the destination `NavigationHistoryEntry` if the `NavigateEvent.navigationType` is `traverse`, or `-1` otherwise.

Value
-----

A number representing the `index` of the destination `NavigationHistoryEntry`, or -1.

Examples
--------

```js
navigation.addEventListener("navigate", (event) => {
  console.log(event.destination.index);
});
```

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

| Specification |
| --- |
| HTML Standard # the-navigationdestination-interface:dom-navigationdestination-index-2 |

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

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

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo


CanMakePaymentEvent: respondWith() method - Web APIs

CanMakePaymentEvent: respondWith() method
=========================================

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

The **`respondWith()`** method of the `CanMakePaymentEvent` interface enables the service worker to respond appropriately to signal whether it is ready to handle payments.

Syntax
------

```js
respondWith(response)
```

### Parameters

`response`

A `Promise` that resolves with a boolean value to signal that it is ready to handle a payment request: (`true`), or not (`false`).

### Return value

None (`undefined`).

Examples
--------

```js
self.addEventListener("canmakepayment", (e) => {
  e.respondWith(
    new Promise((resolve, reject) => {
      someAppSpecificLogic()
        .then((result) => {
          resolve(result);
        })
        .catch((error) => {
          reject(error);
        });
    }),
  );
});
```

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

| Specification |
| --- |
| Payment Handler API # dom-canmakepaymentevent-respondwith |

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

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

See also
--------

* Payment Handler API
* Web-based payment apps overview
* Setting up a payment method
* Life of a payment transaction
* Using the Payment Request API
* Payment processing concepts


CanMakePaymentEvent: CanMakePaymentEvent() constructor - Web APIs

CanMakePaymentEvent: CanMakePaymentEvent() constructor
======================================================

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

The **`CanMakePaymentEvent()`** constructor creates a new `CanMakePaymentEvent` object instance.

Syntax
------

```js
new CanMakePaymentEvent(type)
```

### Parameters

`type`

A string representing the type of event. In the case of `CanMakePaymentEvent` this is always `canmakepayment`.

Examples
--------

A developer would not use this constructor manually. A new `CanMakePaymentEvent` object is constructed when a handler is invoked as a result of the `canmakepayment` event firing.

```js
self.addEventListener("canmakepayment", (e) => {
  e.respondWith(
    new Promise((resolve, reject) => {
      someAppSpecificLogic()
        .then((result) => {
          resolve(result);
        })
        .catch((error) => {
          reject(error);
        });
    }),
  );
});
```

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

| Specification |
| --- |
| Payment Handler API # dom-canmakepaymentevent-constructor |

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

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

See also
--------

* Payment Handler API
* Web-based payment apps overview
* Setting up a payment method
* Life of a payment transaction
* Using the Payment Request API
* Payment processing concepts


MediaStreamAudioSourceNode: mediaStream property - Web APIs

MediaStreamAudioSourceNode: mediaStream property
================================================

 The `MediaStreamAudioSourceNode` interface's
 read-only **`mediaStream`** property indicates the
 `MediaStream` that contains the audio track from which the node is
 receiving audio.

 This stream was specified when the node was first created,
 either using the `MediaStreamAudioSourceNode()` constructor or the
 `AudioContext.createMediaStreamSource()` method.

Value
-----

 A `MediaStream` representing the stream which contains the
 `MediaStreamTrack` serving as the source of audio for the node.

 The user agent uses the first audio track it finds on the specified
 stream as the audio source for this node. However, there is no way to be certain which
 track that will be on multi-track streams. If the specific track matters to you, or you
 need to have access to the track itself, you should use a
 `MediaStreamTrackAudioSourceNode` instead.

Examples
--------

```js
const audioCtx = new window.AudioContext();
let options = {
  mediaStream: stream,
};

let source = new MediaStreamAudioSourceNode(audioCtx, options);
console.log(source.mediaStream);
```

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

| Specification |
| --- |
| Web Audio API # dom-mediastreamaudiosourcenode-mediastream |

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

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


MediaStreamAudioSourceNode: MediaStreamAudioSourceNode() constructor - Web APIs

MediaStreamAudioSourceNode: MediaStreamAudioSourceNode() constructor
====================================================================

 The Web Audio API's **`MediaStreamAudioSourceNode()`** constructor
 creates and returns a new `MediaStreamAudioSourceNode` object which uses
 the first audio track of a given `MediaStream` as its source.

**Note:** Another way to create a
 `MediaStreamAudioSourceNode` is to call
 the `AudioContext.createMediaStreamSource()` method, specifying the stream
 from which you want to obtain audio.

Syntax
------

```js
new MediaStreamAudioSourceNode(context, options)
```

### Parameters

`context`

 An `AudioContext` representing the audio context you want the node to
 be associated with.

`options`

An object defining the properties you want the `MediaStreamAudioSourceNode` to have:

`mediaStream`

A required property which specifies the `MediaStream` from which to obtain audio for the node.

### Return value

 A new `MediaStreamAudioSourceNode` object representing the audio node
 whose media is obtained from the specified source stream.

### Exceptions

`InvalidStateError` `DOMException`

Thrown if the specified `MediaStream` does not contain any audio tracks.

Examples
--------

 This example uses `getUserMedia()` to obtain
 access to the user's camera, then creates a new
 `MediaStreamAudioSourceNode` from its `MediaStream`.

```js
// define variables
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// getUserMedia block - grab stream
// put it into a MediaStreamAudioSourceNode
if (navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices
    .getUserMedia(
      // constraints: audio and video for this app
      {
        audio: true,
        video: false,
      },
    )
    .then((stream) => {
      const options = {
        mediaStream: stream,
      };

      const source = new MediaStreamAudioSourceNode(audioCtx, options);
      source.connect(audioCtx.destination);
    })
    .catch((err) => {
      console.error(`The following gUM error occurred: ${err}`);
    });
} else {
  console.log("new getUserMedia not supported on your browser!");
}
```

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

| Specification |
| --- |
| Web Audio API # dom-mediastreamaudiosourcenode-mediastreamaudiosourcenode |

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

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


GPURenderPipeline: label property - Web APIs

GPURenderPipeline: label property
=================================

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

 The **`label`** property of the
 `GPURenderPipeline` 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.createRenderPipeline()` or `GPUDevice.createRenderPipelineAsync()` call, or you can get and set it directly on the `GPURenderPipeline` 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 `GPURenderPipeline.label`:

```js
// ...

const pipelineDescriptor = {
  vertex: {
    module: shaderModule,
    entryPoint: "vertex\_main",
    buffers: vertexBuffers,
  },
  fragment: {
    module: shaderModule,
    entryPoint: "fragment\_main",
    targets: [
      {
        format: navigator.gpu.getPreferredCanvasFormat(),
      },
    ],
  },
  primitive: {
    topology: "triangle-list",
  },
  layout: "auto",
};

const renderPipeline = device.createRenderPipeline(pipelineDescriptor);

renderPipeline.label = "myrenderpipeline";

console.log(renderPipeline.label); // "myrenderpipeline"
```

Setting a label via a `GPUDevice.createRenderPipeline()` call, and then getting it via `GPURenderPipeline.label`:

```js
// ...

const pipelineDescriptor = {
  vertex: {
    module: shaderModule,
    entryPoint: "vertex\_main",
    buffers: vertexBuffers,
  },
  fragment: {
    module: shaderModule,
    entryPoint: "fragment\_main",
    targets: [
      {
        format: navigator.gpu.getPreferredCanvasFormat(),
      },
    ],
  },
  primitive: {
    topology: "triangle-list",
  },
  layout: "auto",
  label: "myrenderpipeline",
};

const renderPipeline = device.createRenderPipeline(pipelineDescriptor);

console.log(renderPipeline.label); // "myrenderpipeline"
```

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


GPURenderPipeline: getBindGroupLayout() method - Web APIs

GPURenderPipeline: getBindGroupLayout() method
==============================================

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

 The **`getBindGroupLayout()`** method of the
 `GPURenderPipeline` interface returns the pipeline's `GPUBindGroupLayout` object with the given index (i.e. included in the originating `GPUDevice.createRenderPipeline()` or `GPUDevice.createRenderPipelineAsync()` call's pipeline layout).

If the `GPURenderPipeline` was created with `layout: "auto"`, this method is the only way to retrieve the `GPUBindGroupLayout`s generated by the pipeline.

Syntax
------

```js
getBindGroupLayout(index)
```

### Parameters

`index`

A number representing the index of the `GPUBindGroupLayout` to return.

### Return value

A `GPUBindGroupLayout` object instance.

### Validation

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

* `index` is less than the number of `GPUBindGroupLayout` objects used in the pipeline layout.
Examples
--------

**Note:** You can see complete working examples with `getBindGroupLayout()` in action in the WebGPU samples.

```js
// ...

// Create a render pipeline using layout: "auto" to automatically generate
// appropriate bind group layouts
const fullscreenQuadPipeline = device.createRenderPipeline({
  layout: "auto",
  vertex: {
    module: device.createShaderModule({
      code: fullscreenTexturedQuadWGSL,
    }),
    entryPoint: "vert\_main",
  },
  fragment: {
    module: device.createShaderModule({
      code: fullscreenTexturedQuadWGSL,
    }),
    entryPoint: "frag\_main",
    targets: [
      {
        format: presentationFormat,
      },
    ],
  },
  primitive: {
    topology: "triangle-list",
  },
});

// ...

// Create a bind group with the auto-generated layout from the render pipeline
const showResultBindGroup = device.createBindGroup({
  layout: fullscreenQuadPipeline.getBindGroupLayout(0),
  entries: [
    {
      binding: 0,
      resource: sampler,
    },
    {
      binding: 1,
      resource: textures[1].createView(),
    },
  ],
});

// ...
```

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

| Specification |
| --- |
| WebGPU # dom-gpupipelinebase-getbindgrouplayout |

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

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

See also
--------

* The WebGPU API


MIDIAccess: inputs property - Web APIs

MIDIAccess: inputs property
===========================

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

The **`inputs`** read-only property of the `MIDIAccess` interface provides access to any available MIDI input ports.

Value
-----

A `MIDIInputMap` instance.

Examples
--------

The `Navigator.requestMIDIAccess()` method returns a promise that resolves with a `MIDIAccess` object. Printing the value of `inputs` to the console returns a `MIDIInputMap`.

```js
navigator.requestMIDIAccess().then((access) => {
  console.log(access.inputs);
});
```

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

| Specification |
| --- |
| Web MIDI API # dom-midiaccess-inputs |

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

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


MIDIAccess: sysexEnabled property - Web APIs

MIDIAccess: sysexEnabled property
=================================

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

The **`sysexEnabled`** read-only property of the `MIDIAccess` interface indicates whether system exclusive support is enabled on the current MIDIAccess instance.

Value
-----

A boolean value.

Examples
--------

The `Navigator.requestMIDIAccess()` method returns a promise that resolves with a `MIDIAccess` object. Printing the value of `sysexEnabled` to the console returns a boolean value, which is `true` if system exclusive support is enabled.

```js
navigator.requestMIDIAccess().then((access) => {
  console.log(access.sysexEnabled);
});
```

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

| Specification |
| --- |
| Web MIDI API # dom-midiaccess-sysexenabled |

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

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


MIDIAccess: statechange event - Web APIs

MIDIAccess: statechange event
=============================

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

The **`statechange`** event of the `MIDIAccess` interface is fired when a new MIDI port is added or when an existing port changes state.

Syntax
------

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

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

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

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

A `MIDIConnectionEvent`. Inherits from `Event`.

Event

MIDIConnectionEventEvent properties
----------------

`MIDIConnectionEvent.port` Read only

Returns a reference to a `MIDIPort` instance for a port that has been connected or disconnected.

Example
-------

The `Navigator.requestMIDIAccess()` method returns a promise that resolves with a `MIDIAccess` object. When a port changes state, information about that port is printed to the console.

```js
navigator.requestMIDIAccess().then((access) => {
  access.onstatechange = (event) => {
    console.log(event.port.name, event.port.manufacturer, event.port.state);
  };
});
```

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

| Specification |
| --- |
| Web MIDI API # dom-midiaccess-onstatechange |

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

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


MIDIAccess: outputs property - Web APIs

MIDIAccess: outputs property
============================

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

The **`outputs`** read-only property of the `MIDIAccess` interface provides access to any available MIDI output ports.

Value
-----

A `MIDIOutputMap` instance.

Examples
--------

The `Navigator.requestMIDIAccess()` method returns a promise that resolves with a `MIDIAccess` object. Printing the value of `outputs` to the console returns a `MIDIOutputMap`.

```js
navigator.requestMIDIAccess().then((access) => {
  console.log(access.outputs);
});
```

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

| Specification |
| --- |
| Web MIDI API # dom-midiaccess-outputs |

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

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


CSSTranslate: z property - Web APIs

CSSTranslate: z property
========================

 The **`z`** property of the
 `CSSTranslate` interface representing the z-component of the translating
 vector. A positive value moves the element towards the viewer, and a negative value
 farther away.

 If this value is present then the transform is a 3D transform and the `is2D`
 property will be set to false.

Value
-----

A `<length>`.

Examples
--------

To Do

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-csstranslate-z |

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

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


CSSTranslate: CSSTranslate() constructor - Web APIs

CSSTranslate: CSSTranslate() constructor
========================================

 The **`CSSTranslate()`** constructor creates a
 new `CSSTranslate` object representing the translate() value of the
 individual `transform` property in CSS.

Syntax
------

```js
new CSSTranslate(x, y)
new CSSTranslate(x, y, z)
```

### Parameters

`x`

 A value for the x-axis of the `CSSTranslate` object to be constructed.
 This must be a `<length-percentage>`.

`y`

 A value for the y-axis of the `CSSTranslate` object to be constructed.
 This must be a `<length-percentage>`.

`z` Optional

 A value for the z-axis of the `CSSTranslate` object to be constructed.
 This must be a `<length>`.

 If a value is passed for the `z-axis` this is a 3d transform. The value of
 `is2D` will be set to false.

### Exceptions

`TypeError`

 Raised if the value of `CSSTranslate.x` or `CSSTranslate.y` is
 not a `<length-percentage>`.

`TypeError`

 Raised if the value of `CSSTranslate.z` exists but is not a
 `<length>`.

Examples
--------

To do

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-csstranslate-csstranslate |

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

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


CSSTranslate: y property - Web APIs

CSSTranslate: y property
========================

 The **`y`** property of the
 `CSSTranslate` interface gets and sets the ordinate or y-axis of the
 translating vector.

Value
-----

A `<length-percentage>`

Examples
--------

To Do

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-csstranslate-y |

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

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


CSSTranslate: x property - Web APIs

CSSTranslate: x property
========================

 The **`x`** property of the
 `CSSTranslate` interface gets and sets the abscissa or x-axis of the
 translating vector.

Value
-----

A `<length-percentage>`

Examples
--------

To Do

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-csstranslate-x |

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

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


DecompressionStream: DecompressionStream() constructor - Web APIs

DecompressionStream: DecompressionStream() constructor
======================================================

The **`DecompressionStream()`** constructor creates a new `DecompressionStream` object which decompresses a stream of data.

Syntax
------

```js
new DecompressionStream(format)
```

### Parameters

`format`

One of the following compression formats:

`"gzip"`

Decompress the stream using the GZIP format.

`"deflate"`

 Decompress the stream using the DEFLATE algorithm in ZLIB Compressed Data Format.
 The ZLIB format includes a header with information about the compression method and the uncompressed size of the data, and a trailing checksum for verifying the integrity of the data

`"deflate-raw"`

Decompress the stream using the DEFLATE algorithm without a header and trailing checksum.

Exceptions
----------

`TypeError`

Thrown if the format passed to the constructor is not supported.

Examples
--------

In this example a gzip-compressed blob is decompressed.

```js
const ds = new DecompressionStream("gzip");
const decompressedStream = blob.stream().pipeThrough(ds);
```

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

| Specification |
| --- |
| Compression Streams # dom-decompressionstream-decompressionstream |

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

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


DecompressionStream: readable property - Web APIs

DecompressionStream: readable property
======================================

The **`readable`** read-only property of the `DecompressionStream` interface returns a `ReadableStream`.

Value
-----

A `ReadableStream`.

Examples
--------

The following example returns a `ReadableStream` from a `DecompressionStream`.

```js
let stream = new DecompressionStream("gzip");
console.log(stream.readable); //a ReadableStream
```

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

| Specification |
| --- |
| Streams Standard # dom-generictransformstream-readable |

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

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


DecompressionStream: writable property - Web APIs

DecompressionStream: writable property
======================================

The **`writable`** read-only property of the `DecompressionStream` interface returns a `WritableStream`.

Value
-----

A `WritableStream`.

Examples
--------

The following example returns a `WritableStream` from a `DecompressionStream`.

```js
let stream = new DecompressionStream("gzip");
console.log(stream.writable); // A WritableStream
```

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

| Specification |
| --- |
| Streams Standard # dom-generictransformstream-writable |

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

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


VRStageParameters: sizeX property - Web APIs

VRStageParameters: sizeX property
=================================

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

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

The **`sizeX`** read-only property of the `VRStageParameters` interface *returns the width* of the play-area bounds in meters.

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

The bounds are defined as an axis-aligned rectangle on the floor, for safety purposes. Content should not require the user to move beyond these bounds; however, it is possible for the user to ignore the bounds resulting in position values outside of this rectangle. The center of the rectangle is at (0,0,0) in standing-space coordinates.

Value
-----

A float representing the width in meters.

Examples
--------

See `VRStageParameters` for example code.

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

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

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

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

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

See also
--------

* WebVR API


VRStageParameters: sittingToStandingTransform property - Web APIs

VRStageParameters: sittingToStandingTransform property
======================================================

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

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

The **`sittingToStandingTransform`** read-only property of the `VRStageParameters` interface contains a matrix that transforms the sitting-space view matrices of `VRFrameData` to standing-space.

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

Basically, this can be passed into your WebGL code to transform the rendered view from a sitting to standing view.

Value
-----

A 16-element `Float32Array` containing the components of a 4×4 transform matrix.

Examples
--------

See `VRStageParameters` for example code.

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

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

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

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

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

See also
--------

* WebVR API


VRStageParameters: sizeY property - Web APIs

VRStageParameters: sizeY property
=================================

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

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

The **`sizeY`** read-only property of the `VRStageParameters` interface *returns the depth* of the play-area bounds in meters.

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

The bounds are defined as an axis-aligned rectangle on the floor, for safety purposes. Content should not require the user to move beyond these bounds; however, it is possible for the user to ignore the bounds resulting in position values outside of this rectangle. The center of the rectangle is at (0,0,0) in standing-space coordinates.

Value
-----

A float representing the depth in meters.

Examples
--------

See `VRStageParameters` for example code.

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

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

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

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

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

See also
--------

* WebVR API


AnimationTimeline: currentTime property - Web APIs

AnimationTimeline: currentTime property
=======================================

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

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

* Learn more
* See full compatibility
* Report feedback
The **`currentTime`** read-only property of the Web Animations API's `AnimationTimeline` interface returns the timeline's current time in milliseconds, or `null` if the timeline is inactive.

Value
-----

A number representing the timeline's current time in milliseconds, or `null` if the timeline is inactive.

Reduced time precision
----------------------

 To offer protection against timing attacks and fingerprinting, the precision of `animationTimeline.currentTime` might get rounded depending on browser settings.
 In Firefox, the `privacy.reduceTimerPrecision` preference is enabled by default and defaults to 20us in Firefox 59; in 60 it will be 2ms.

```js
// reduced time precision (2ms) in Firefox 60
animationTimeline.currentTime;
// 23.404
// 24.192
// 25.514
// …

// reduced time precision with `privacy.resistFingerprinting` enabled
animationTimeline.currentTime;
// 49.8
// 50.6
// 51.7
// …
```

In Firefox, you can also enable `privacy.resistFingerprinting`; the precision will be 100ms or the value of `privacy.resistFingerprinting.reduceTimerPrecision.microseconds`, whichever is larger.

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

| Specification |
| --- |
| Web Animations # dom-animationtimeline-currenttime |

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

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

See also
--------

* Web Animations API
* `AnimationTimeline`
* `DocumentTimeline` inherits this property
* `Document.timeline` returns a timeline object which inherits this property


FetchEvent: replacesClientId property - Web APIs

FetchEvent: replacesClientId property
=====================================

 The **`replacesClientId`** read-only property of the
 `FetchEvent` interface is the `id` of the
 `client` that is being replaced during a page navigation.

 For example, when navigating from page A to page B `replacesClientId` is the
 ID of the client associated with page A. It can be an empty string when navigating from
 `about:blank` to another page, as `about:blank`'s client will be
 reused, rather than be replaced.

 Additionally, if the fetch isn't a navigation, `replacesClientId` will be an
 empty string. This could be used to access/communicate with a client that will
 imminently be replaced, right before a navigation.

Value
-----

A string.

Examples
--------

```js
self.addEventListener("fetch", (event) => {
  console.log(event.replacesClientId);
});
```

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

| Specification |
| --- |
| Service Workers # fetch-event-replacesClientId |

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

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

See also
--------

* Using Service Workers
* Service workers basic code example
* Using web workers


FetchEvent: resultingClientId property - Web APIs

FetchEvent: resultingClientId property
======================================

 The **`resultingClientId`** read-only property of the
 `FetchEvent` interface is the `id` of the
 `client` that replaces the previous client during a page
 navigation.

 For example, when navigating from page A to page B `resultingClientId` is
 the ID of the client associated with page B.

 If the fetch request is a subresource request or the request's
 `destination` is
 `report`, `resultingClientId` will be an empty string.

Value
-----

A string.

Examples
--------

```js
self.addEventListener("fetch", (event) => {
  console.log(event.resultingClientId);
});
```

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

| Specification |
| --- |
| Service Workers # fetch-event-resultingclientid |

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

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

See also
--------

* Using Service Workers
* Service workers basic code example
* Using web workers


FetchEvent: isReload property - Web APIs

FetchEvent: isReload property
=============================

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

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

 The **`isReload`** read-only property of the
 `FetchEvent` interface returns `true` if the event was
 dispatched by the user attempting to reload the page, and `false` otherwise.
 Pressing the refresh button is a reload while clicking a link and pressing the back
 button is not.

Value
-----

A boolean value.

Examples
--------

```js
self.addEventListener("fetch", (event) => {
  event.respondWith(async () => {
    if (event.isReload) {
      //Return something
    } else {
      //Return something else
    }
  })();
});
```

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

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

See also
--------

* Using Service Workers
* Service workers basic code example
* Using web workers


FetchEvent: clientId property - Web APIs

FetchEvent: clientId property
=============================

 The **`clientId`** read-only property of the
 `FetchEvent` interface returns the id of the `Client` that the
 current service worker is controlling.

 The `Clients.get()` method could then be passed this ID to retrieve the
 associated client.

Value
-----

A string that represents the client ID.

Examples
--------

```js
self.addEventListener("fetch", (event) => {
  console.log(event.clientId);
});
```

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

| Specification |
| --- |
| Service Workers # fetch-event-clientid |

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

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

See also
--------

* Using Service Workers
* Service workers basic code example
* Using web workers


FetchEvent: respondWith() method - Web APIs

FetchEvent: respondWith() method
================================

 The **`respondWith()`** method of
 `FetchEvent` prevents the browser's default fetch handling, and
 allows you to provide a promise for a `Response` yourself.

 In most cases you can provide any response that the receiver understands. For example,
 if an `<img>` initiates the request, the response body needs to be
 image data. For security reasons, there are a few global rules:

* You can only return `Response` objects of `type` "`opaque`" if the `fetchEvent.request` object's
 `mode` is "`no-cors`". This prevents the
 leaking of private data.
* You can only return `Response` objects of `type` "`opaqueredirect`" if the `fetchEvent.request`
 object's `mode` is "`manual`".
* You cannot return `Response` objects of `type` "`cors`" if the `fetchEvent.request` object's
 `mode` is "`same-origin`".
### Specifying the final URL of a resource

 From Firefox 59 onwards, when a service worker provides a `Response` to
 `FetchEvent.respondWith()`, the `Response.url` value will be
 propagated to the intercepted network request as the final resolved URL. If the
 `Response.url` value is the empty string, then the
 `FetchEvent.request.url` is used as the final URL.

 In the past the `FetchEvent.request.url` was used as the
 final URL in all cases. The provided `Response.url` was effectively
 ignored.

 This means, for example, if a service worker intercepts a stylesheet or worker script,
 then the provided `Response.url` will be used to resolve any relative
 `@import` or
 `importScripts()` subresource loads
 (Firefox bug 1222008).

 For most types of network request this change has no impact because you can't observe
 the final URL. There are a few, though, where it does matter:

* If a `fetch()` is intercepted,
 then you can observe the final URL on the result's `Response.url`.
* If a worker script is
 intercepted, then the final URL is used to set
 `self.location`
 and used as the base URL for relative URLs in the worker script.
* If a stylesheet is intercepted, then the final URL is used as the base URL for
 resolving relative `@import` loads.

 Note that navigation requests for `Windows` and
 `iframes` do NOT use the final URL. The way the HTML
 specification handles redirects for navigations ends up using the request URL for the
 resulting `Window.location`. This means sites can still provide an
 "alternate" view of a web page when offline without changing the user-visible URL.

Syntax
------

```js
respondWith(response)
```

### Parameters

`response`

 A `Response` or a `Promise` that resolves to a
 `Response`. Otherwise, a network error is returned to Fetch.

### Return value

None (`undefined`).

### Exceptions

`NetworkError` `DOMException`

 Returned if a network error is triggered on certain combinations of
 `FetchEvent.request.mode` and
 `Response.type` values, as hinted at in the "global rules"
 listed above.

`InvalidStateError` `DOMException`

 Returned if the event has not been dispatched or `respondWith()` has
 already been invoked.

Examples
--------

 This fetch event tries to return a response from the cache API, falling back to the
 network otherwise.

```js
addEventListener("fetch", (event) => {
  // Prevent the default, and handle the request ourselves.
  event.respondWith(
    (async () => {
      // Try to get the response from a cache.
      const cachedResponse = await caches.match(event.request);
      // Return it if we found one.
      if (cachedResponse) return cachedResponse;
      // If we didn't find a match in the cache, use the network.
      return fetch(event.request);
    })(),
  );
});
```

**Note:** `caches.match()` is a
 convenience method. Equivalent functionality is to call
 `cache.match()` on each cache (in the order returned by
 `caches.keys()`) until a
 `Response` is returned.

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

| Specification |
| --- |
| Service Workers # fetch-event-respondwith |

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

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

See also
--------

* Using Service Workers
* Fetch API


FetchEvent: request property - Web APIs

FetchEvent: request property
============================

 The **`request`** read-only property of the
 `FetchEvent` interface returns the `Request` that triggered
 the event handler.

 This property is non-nullable (since version 46, in the case of Firefox.) If a request
 is not provided by some other means, the constructor `options` object must
 contain a request (see `FetchEvent()`.)

Value
-----

A `Request` object.

Examples
--------

 This code snippet is from the service worker fetch sample (run the fetch sample live). The `onfetch` event handler
 listens for the `fetch` event. When fired, pass a promise that back to the
 controlled page to `FetchEvent.respondWith()`.
 This promise resolves to the first matching URL request in the `Cache`
 object. If no match is found, the code fetches a response from the network.

 The code also handles exceptions thrown from the
 `fetch()` operation. Note that an HTTP error
 response (e.g., 404) will not trigger an exception. It will return a normal response
 object that has the appropriate error code set.

```js
self.addEventListener("fetch", (event) => {
  console.log("Handling fetch event for", event.request.url);

  event.respondWith(
    caches.match(event.request).then((response) => {
      if (response) {
        console.log("Found response in cache:", response);

        return response;
      }
      console.log("No response found in cache. About to fetch from network…");

      return fetch(event.request)
        .then((response) => {
          console.log("Response from network is:", response);

          return response;
        })
        .catch((error) => {
          console.error("Fetching failed:", error);

          throw error;
        });
    }),
  );
});
```

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

| Specification |
| --- |
| Service Workers # fetch-event-request |

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

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

See also
--------

* Using Service Workers
* Service workers basic code example
* Using web workers


FetchEvent: FetchEvent() constructor - Web APIs

FetchEvent: FetchEvent() constructor
====================================

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

Syntax
------

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

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers always set it to `fetch`.

`options`

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

`request`

The `Request` object that would have triggered the event handler.

`preloadResponse`

A `Promise` which returns a previously-loaded response to the client.

`clientId` Optional

The `Client` that the current service worker is controlling. It defaults to `""`.

`isReload`
Deprecated
 Optional

 A boolean value that signifies whether the page was reloaded or not when
 the event was dispatched. `true` if yes, and `false` if not.
 Typically, pressing the refresh button in a browser is a reload, while clicking a
 link and pressing the back button is not. If not present, it defaults to
 `false`.

`replacesClientId` Optional

A string which identifies the client which is being replaced by `resultingClientId`. It defaults to `""`.

`resultingClientId` Optional

A string containing the new `clientId` if the client changes as a result of the page load. It defaults to `""`

`handled`

A *pending* promise that will be fulfilled once the event has been handled.

Return value
------------

A new `FetchEvent` object.

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

| Specification |
| --- |
| Service Workers # dom-fetchevent-fetchevent |

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

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

See also
--------

* `Promise`
* Fetch API


FetchEvent: preloadResponse property - Web APIs

FetchEvent: preloadResponse property
====================================

The **`preloadResponse`** read-only property of the `FetchEvent` interface returns a `Promise` that resolves to the navigation preload `Response` if navigation preload was triggered, or `undefined` otherwise.

Navigation preload is triggered if navigation preload is enabled, the request is a `GET` request, and the request is a navigation request (generated by the browser when loading pages and iframes).

A service worker can wait on this promise in its fetch event handler in order to track completion of a fetch request made during service-worker boot.

Value
-----

A `Promise` that resolves to a `Response` or otherwise to `undefined`.

Examples
--------

This code snippet is from Speed up Service Worker with Navigation Preloads.

 The `onfetch` event handler listens for the `fetch` event.
 When fired, the handler calls `FetchEvent.respondWith()` to pass a promise back to the controlled page.
 This promise will resolve with the requested resource.

 If there is a matching URL request in the `Cache` object, then the code returns a promise for fetching the response from the cache.
 If no match is found in the cache, the code returns the promise in `preloadResponse`.
 If there is no matching cache or preloaded response, the code fetches the response from the network and returns the associated promise.

```js
addEventListener("fetch", (event) => {
  event.respondWith(
    (async () => {
      // Respond from the cache if we can
      const cachedResponse = await caches.match(event.request);
      if (cachedResponse) return cachedResponse;

      // Else, use the preloaded response, if it's there
      const response = await event.preloadResponse;
      if (response) return response;

      // Else try the network.
      return fetch(event.request);
    })(),
  );
});
```

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

| Specification |
| --- |
| Service Workers # fetch-event-preloadresponse |

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

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

See also
--------

* Speed up Service Worker with Navigation Preloads
* Using Service Workers
* Service workers basic code example
* Using web workers


FetchEvent: handled property - Web APIs

FetchEvent: handled property
============================

The **`handled`** property of the `FetchEvent` interface returns a promise indicating if the event has been handled by the fetch algorithm or not. This property allows executing code after the browser has consumed a response, and is usually used together with the `waitUntil()` method.

Value
-----

A `Promise` that is pending while the event has not been handled, and fulfilled once it has.

Examples
--------

```js
addEventListener("fetch", (event) => {
  event.respondWith(
    (async function () {
      const response = await doCalculateAResponse(event.request);

      event.waitUntil(
        (async function () {
          await doSomeAsyncStuff(); // optional

          // Wait for the event to be consumed by the browser
          await event.handled;

          return doFinalStuff(); // Finalize AFTER the event has been consumed
        })(),
      );

      return response;
    })(),
  );
});
```

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

| Specification |
| --- |
| Service Workers # dom-fetchevent-handled |

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

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

See also
--------

* `ExtendableEvent.waitUntil()`


GPUAdapter: requestDevice() method - Web APIs

GPUAdapter: requestDevice() method
==================================

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

 The **`requestDevice()`** method of the
 `GPUAdapter` interface returns a `Promise` that fulfills with a `GPUDevice` object, which is the primary interface for communicating with the GPU.

Syntax
------

```js
requestDevice()
requestDevice(descriptor)
```

### Parameters

`descriptor` Optional

An object containing the following properties:

`defaultQueue` Optional

An object that provides information for the device's default `GPUQueue` (as returned by `GPUDevice.queue`). This object has a single property — `label` — which provides the default queue with a `label` value. If no value is provided, this defaults to an empty object, and the default queue's label will be an empty string.

`label` Optional

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

`requiredFeatures` Optional

An array of strings representing additional functionality that you want supported by the returned `GPUDevice`. The `requestDevice()` call will fail if the `GPUAdapter` cannot provide these features. See `GPUSupportedFeatures` for a full list of possible features. This defaults to an empty array if no value is provided.

`requiredLimits` Optional

An object containing properties representing the limits that you want supported by the returned `GPUDevice`. The `requestDevice()` call will fail if the `GPUAdapter` cannot provide these limits. Each key must be the name of a member of `GPUSupportedLimits`. This defaults to an empty object if no value is provided.

**Note:** Not all features and limits will be available to WebGPU in all browsers that support it, even if they are supported by the underlying hardware. See the `features` and `limits` pages for more information.

### Return value

A `Promise` that fulfills with a `GPUDevice` object instance.

If you make a duplicate call, i.e. call `requestDevice()` on a `GPUAdapter` that `requestDevice()` was already called on, the promise fulfills with a device that is immediately lost. You can then get information on how the device was lost via `GPUDevice.lost`.

### Exceptions

`OperationError` `DOMException`

The promise rejects with an `OperationError` if the limits included in the `requiredLimits` property are not supported by the `GPUAdapter`, either because they are not valid limits, or because their values are higher than the adapter's values for those limits.

`TypeError` `DOMException`

The promise rejects with a `TypeError` if the features included in the `requiredFeatures` property are not supported by the `GPUAdapter`.

Examples
--------

### Basic example

```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 device = await adapter.requestDevice();

  // ...
}
```

### Requesting specific features and limits

In the following code we:

1. Check whether a `GPUAdapter` has the `texture-compression-astc` feature available. If so, we push it into the array of `requiredFeatures`.
2. Query the `GPUAdapter.limits` value of `maxBindGroups` to see if it is equal to or greater than 6. Our theoretical example app ideally needs 6 bind groups, so if the returned value is >= 6, we add a maximum limit of 6 to the `requiredLimits` object.
3. Request a device with those feature and limit requirements, plus a `defaultQueue` label.

```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 requiredFeatures = [];

  if (adapter.features.has("texture-compression-astc")) {
    requiredFeatures.push("texture-compression-astc");
  }

  const requiredLimits = {};

  // App ideally needs 6 bind groups, so we'll try to request what the app needs
  if (adapter.limits.maxBindGroups >= 6) {
    requiredLimits.maxBindGroups = 6;
  }

  const device = await adapter.requestDevice({
    defaultQueue: {
      label: "myqueue",
    },
    requiredFeatures,
    requiredLimits,
  });

  // ...
}
```

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

| Specification |
| --- |
| WebGPU # dom-gpuadapter-requestdevice |

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

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

See also
--------

* The WebGPU API


GPUAdapter: requestAdapterInfo() method - Web APIs

GPUAdapter: requestAdapterInfo() method
=======================================

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

 The **`requestAdapterInfo()`** method of the
 `GPUAdapter` interface returns a `Promise` that fulfills with a `GPUAdapterInfo` object containing identifying information about an adapter.

The intention behind this method is to allow developers to request specific details about the user's GPU so that they can preemptively apply workarounds for GPU-specific bugs, or provide different codepaths to better suit different GPU architectures. Providing such information does present a security risk — it could be used for fingerprinting — therefore the information shared is to be kept at a minimum, and different browser vendors are likely to share different information types and granularities.

**Note:** The specification includes an `unmaskHints` parameter for `requestAdapterInfo()`, which is intended to mitigate the security risk mentioned above. Once it is supported, developers will be able to specify the values they really need to know, and users will be given a permission prompt asking them if they are OK to share this information when the method is invoked. Browser vendors are likely to share more useful information if it is guarded by a permissions prompt, as it makes the method a less viable target for fingerprinting.

Syntax
------

```js
requestAdapterInfo()
```

### Parameters

None.

### Return value

A `Promise` that fulfills with a `GPUAdapterInfo` object instance.

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.vendor);
  console.log(adapterInfo.architecture);

  // ...
}
```

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

| Specification |
| --- |
| WebGPU # dom-gpuadapter-requestadapterinfo |

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

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

See also
--------

* The WebGPU API


GPUAdapter: isFallbackAdapter property - Web APIs

GPUAdapter: isFallbackAdapter property
======================================

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

 The **`isFallbackAdapter`** read-only property of the
 `GPUAdapter` interface returns `true` if the adapter is a fallback adapter, and `false` if not.

Value
-----

A boolean.

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 fallback = adapter.isFallbackAdapter;
  console.log(fallback);

  // ...
```

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

| Specification |
| --- |
| WebGPU # dom-gpuadapter-isfallbackadapter |

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

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

See also
--------

* The WebGPU API


GPUAdapter: limits property - Web APIs

GPUAdapter: limits property
===========================

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

 The **`limits`** read-only property of the
 `GPUAdapter` interface returns a `GPUSupportedLimits` object that describes the limits supported by the adapter.

You should note that, rather than reporting the exact limits of each GPU, browsers will likely report different tier values of different limits to reduce the unique information available to drive-by fingerprinting. For example, the tiers of a certain limit might be 2048, 8192, and 32768. If your GPU's actual limit is 16384, the browser will still report 8192.

Given that different browsers will handle this differently and the tier values may change over time, it is hard to provide an accurate account of what limit values to expect — thorough testing is advised.

Value
-----

A `GPUSupportedLimits` object instance.

Examples
--------

In the following code we query the `GPUAdapter.limits` value of `maxBindGroups` to see if it is equal to or greater than 6. Our theoretical example app ideally needs 6 bind groups, so if the returned value is >= 6, we add a maximum limit of 6 to the `requiredLimits` object, and request a device with that limit requirement using `GPUAdapter.requestDevice()`:

```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 requiredLimits = {};

  // App ideally needs 6 bind groups, so we'll try to request what the app needs
  if (adapter.limits.maxBindGroups >= 6) {
    requiredLimits.maxBindGroups = 6;
  }

  const device = await adapter.requestDevice({
    requiredLimits,
  });

  // ...
}
```

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

| Specification |
| --- |
| WebGPU # dom-gpuadapter-limits |

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

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

See also
--------

* The WebGPU API


GPUAdapter: features property - Web APIs

GPUAdapter: features property
=============================

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

 The **`features`** read-only property of the
 `GPUAdapter` interface returns a `GPUSupportedFeatures` object that describes additional functionality supported by the adapter.

You should note that not all features will be available to WebGPU in all browsers that support it, even if the features are supported by the underlying hardware. This could be due to constraints in the underlying system, browser, or adapter. For example:

* The underlying system might not be able to guarantee exposure of a feature in a way that is compatible with a certain browser.
* The browser vendor might not have found a secure way to implement support for that feature, or might just not have gotten round to it yet.

If you are hoping to take advantage of a specific additional feature in a WebGPU app, thorough testing is advised.

Value
-----

A `GPUSupportedFeatures` object instance. This is a setlike object.

Examples
--------

In the following code we check whether a `GPUAdapter` has the `texture-compression-astc` feature available. If so, we push it into the array of `requiredFeatures`, and request a device with that feature requirement using `GPUAdapter.requestDevice()`

```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 requiredFeatures = [];

  if (adapter.features.has("texture-compression-astc")) {
    requiredFeatures.push("texture-compression-astc");
  }

  const device = await adapter.requestDevice({
    requiredFeatures,
  });

  // ...
}
```

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

| Specification |
| --- |
| WebGPU # dom-gpuadapter-features |

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

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

See also
--------

* The WebGPU API