IDBDatabase: createObjectStore() method - Web APIs

IDBDatabase: createObjectStore() method
=======================================

 The **`createObjectStore()`** method of the
 `IDBDatabase` interface creates and returns a new `IDBObjectStore`.

 The method takes the name of the store as well as a parameter object that lets you
 define important optional properties. You can use the property to uniquely identify
 individual objects in the store. As the property is an identifier, it should be unique
 to every object, and every object should have that property.

 This method can be called *only* within a `versionchange`
 transaction.

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

Syntax
------

```js
createObjectStore(name)
createObjectStore(name, options)
```

### Parameters

`name`

 The name of the new object store to be created. Note that it is possible to create
 an object store with an empty name.

`options` Optional

 An options object whose attributes are optional parameters to the method. It
 includes the following properties:

`keyPath` Optional

 The key path
 to be used by the new object store. If empty or not specified, the
 object store is created without a key path and uses
 out-of-line keys.
 You can also pass in an array as a `keyPath`.

`autoIncrement` Optional

 If `true`, the object store has a key generator.
 Defaults to `false`.

### Return value

A new `IDBObjectStore`.

### Exceptions

 This method may raise a `DOMException` with a `name` of
 one of the following types:

`InvalidStateError` `DOMException`

 Thrown if the method was not called from a
 `versionchange` transaction callback.

`TransactionInactiveError` `DOMException`

 Thrown if a request is made on a source database that does not exist
 (for example, when the database has been deleted or removed). In Firefox previous to version 41,
 an `InvalidStateError` was raised in this case as well, which
 was misleading; this has now been fixed (see Firefox bug 1176165).

`ConstraintError` `DOMException`

 Thrown if an object store with the given name (based on a case-sensitive comparison)
 already exists in the connected database.

`InvalidAccessError` `DOMException`

 Thrown if `autoIncrement` is set to true and `keyPath` is
 either an empty string or an array containing an empty string.

Examples
--------

```js
// Let us open our database
const request = window.indexedDB.open("toDoList", 4);

// This handler is called when a new version of the database
// is created, either when one has not been created before
// or when a new version number is submitted by calling
// window.indexedDB.open().
// This handler is only supported in recent browsers.
request.onupgradeneeded = (event) => {
  const db = event.target.result;

  db.onerror = (event) => {
    note.innerHTML += "<li>Error loading database.</li>";
  };

  // Create an objectStore for this database

  const objectStore = db.createObjectStore("toDoList", {
    keyPath: "taskTitle",
  });

  // define what data items the objectStore will contain

  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });

  objectStore.createIndex("notified", "notified", { unique: false });

  note.innerHTML += "<li>Object store created.</li>";
};
```

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

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbdatabase-createobjectstore① |

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

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

See also
--------

* Using IndexedDB
* Starting transactions: `IDBDatabase`
* Using transactions: `IDBTransaction`
* Setting a range of keys: `IDBKeyRange`
* Retrieving and making changes to your data: `IDBObjectStore`
* Using cursors: `IDBCursor`
* Reference example: To-do Notifications (View the example live).


WEBGL_compressed_texture_astc: getSupportedProfiles() method - Web APIs

WEBGL\_compressed\_texture\_astc: getSupportedProfiles() method
===============================================================

 The **`WEBGL_compressed_texture_astc.getSupportedProfiles()`**
 method returns an array of strings containing the names of the ASTC profiles supported
 by the implementation.

Syntax
------

```js
getSupportedProfiles()
```

### Parameters

None.

### Return value

 An `Array` of string elements indicating which ASTC
 profiles are supported by the implementation. Currently, this can be:

* "ldr": Low Dynamic Range.
* "hdr": High Dynamic Range.

 Dynamic range refers to ratio between the brightest and darkest parts of the scene. Low
 dynamic ranges are for example JPEG format images which won't exceed 255:1, or CRT
 monitors which won't exceed 100:1. An HDR image stores pixel values that span the whole
 tonal range of real-world scenes (100,000:1).

Examples
--------

```js
const ext = gl.getExtension("WEBGL\_compressed\_texture\_astc");
ext.getSupportedProfiles(); // ["ldr"]
```

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

| Specification |
| --- |
| WebGL WEBGL\_compressed\_texture\_astc Extension Specification  |

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

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

See also
--------

* `WEBGL_compressed_texture_astc`


DataTransferItemList: length property - Web APIs

DataTransferItemList: length property
=====================================

 The read-only **`length`** property of the
 `DataTransferItemList` interface returns the number of items currently in
 the drag item list.

Value
-----

 The number of drag data items in the list, or 0 if the list is empty or disabled. The
 drag item list is considered to be disabled if the item list's
 `DataTransfer` object is not associated with a drag data store.

Examples
--------

This example shows the use of the `length` property.

### JavaScript

```js
function dragstart\_handler(ev) {
  console.log("dragStart");
  // Add this element's id to the drag payload so the drop handler will
  // know which element to add to its tree
  const dataList = ev.dataTransfer.items;
  dataList.add(ev.target.id, "text/plain");
  // Add some other items to the drag payload
  dataList.add("<p>Paragraph…</p>", "text/html");
  dataList.add("http://www.example.org", "text/uri-list");
}

function drop\_handler(ev) {
  console.log("Drop");
  ev.preventDefault();
  const data = ev.dataTransfer.items;
  // Loop through the dropped items and log their data
  for (let i = 0; i < data.length; i++) {
    if (data[i].kind === "string" && data[i].type.match("^text/plain")) {
      // This item is the target node
      data[i].getAsString((s) => {
        ev.target.appendChild(document.getElementById(s));
      });
    } else if (data[i].kind === "string" && data[i].type.match("^text/html")) {
      // Drag data item is HTML
      data[i].getAsString((s) => {
        console.log(`… Drop: HTML = ${s}`);
      });
    } else if (
      data[i].kind === "string" &&
      data[i].type.match("^text/uri-list")
    ) {
      // Drag data item is URI
      data[i].getAsString((s) => {
        console.log(`… Drop: URI = ${s}`);
      });
    }
  }
}

function dragover\_handler(ev) {
  console.log("dragOver");
  ev.preventDefault();
  // Set the dropEffect to move
  ev.dataTransfer.dropEffect = "move";
}

function dragend\_handler(ev) {
  console.log("dragEnd");
  const dataList = ev.dataTransfer.items;
  // Clear any remaining drag data
  dataList.clear();
}
```

### HTML

```html
<div>
  <p
 id="source"
 ondragstart="dragstart\_handler(event);"
 ondragend="dragend\_handler(event);"
 draggable="true">
    Select this element, drag it to the Drop Zone and then release the selection
    to move the element.
  </p>
</div>
<div
 id="target"
 ondrop="drop\_handler(event);"
 ondragover="dragover\_handler(event);">
  Drop Zone
</div>
```

### CSS

```css
div {
  margin: 0em;
  padding: 2em;
}

#source {
  color: blue;
  border: 1px solid black;
}

#target {
  border: 1px solid black;
}
```

### Result

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

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

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

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


DataTransferItemList: clear() method - Web APIs

DataTransferItemList: clear() method
====================================

 The `DataTransferItemList` method
 **`clear()`** removes all `DataTransferItem`
 objects from the drag data items list, leaving the list empty.

 The drag data store in which this list is kept is only writable while handling the
 `dragstart` event. While handling `drop`, the drag data store is
 in read-only mode, and this method silently does nothing. No exception is thrown.

Syntax
------

```js
clear()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

This example shows the use of the `clear()` method.

### HTML

```html
<div>
  <p
 id="source"
 ondragstart="dragstartHandler(event);"
 ondragend="dragendHandler(event);"
 draggable="true">
    Select this element, drag it to the Drop Zone and then release the selection
    to move the element.
  </p>
</div>
<div
 id="target"
 ondrop="dropHandler(event);"
 ondragover="dragoverHandler(event);">
  Drop Zone
</div>
```

### CSS

```css
div {
  margin: 0em;
  padding: 2em;
}
#source {
  color: blue;
  border: 1px solid black;
}
#target {
  border: 1px solid black;
}
```

### JavaScript

```js
function dragstartHandler(ev) {
  console.log("dragStart");

  // Add this element's id to the drag payload so the drop handler will
  // know which element to add to its tree
  const dataList = ev.dataTransfer.items;
  dataList.add(ev.target.id, "text/plain");
}

function dropHandler(ev) {
  console.log("Drop");
  ev.preventDefault();

  // Loop through the dropped items and log their data
  for (const item of ev.dataTransfer.items) {
    if (item.kind === "string" && item.type.match(/^text\/plain/)) {
      // This item is the target node
      item.getAsString((s) => {
        ev.target.appendChild(document.getElementById(s));
      });
    } else if (item.kind === "string" && item.type.match(/^text\/html/)) {
      // Drag data item is HTML
      item.getAsString((s) => {
        console.log(`… Drop: HTML = ${s}`);
      });
    } else if (item.kind === "string" && item.type.match(/^text\/uri-list/)) {
      // Drag data item is URI
      item.getAsString((s) => {
        console.log(`… Drop: URI = ${s}`);
      });
    }
  }
}

function dragoverHandler(ev) {
  console.log("dragOver");
  ev.preventDefault();

  // Set the dropEffect to move
  ev.dataTransfer.dropEffect = "move";
}

function dragendHandler(ev) {
  console.log("dragEnd");
  const dataList = ev.dataTransfer.items;

  // Clear any remaining drag data
  dataList.clear();
}
```

### Result

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

| Specification |
| --- |
| HTML Standard # dom-datatransferitemlist-clear-dev |

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

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


DataTransferItemList: remove() method - Web APIs

DataTransferItemList: remove() method
=====================================

 The **`DataTransferItemList.remove()`** method removes the
 `DataTransferItem` at the specified index from the list. If the index is
 less than zero or greater than one less than the length of the list, the list will not
 be changed.

Syntax
------

```js
remove(index)
```

### Parameters

`index`

 The zero-based index number of the item in the drag data list to remove. If the
 `index` doesn't correspond to an existing item in the list, the list is
 left unchanged.

### Return value

None (`undefined`).

### Exceptions

`InvalidStateError` `DOMException`

Thrown if the drag data store is not in read/write mode and so the item cannot be removed.

Examples
--------

### Dragging and dropping an element

This example shows the use of the `remove()` method.

#### HTML

```html
<div>
  <p id="source" draggable="true">
    Select this element, drag it to the Drop Zone and then release the selection
    to move the element.
  </p>
</div>
<div id="target">Drop Zone</div>
```

#### CSS

```css
div {
  margin: 0em;
  padding: 2em;
}

#source {
  color: blue;
  border: 1px solid black;
}

#target {
  border: 1px solid black;
}
```

#### JavaScript

```js
function dragstart\_handler(ev) {
  console.log("dragStart");
  // Add this element's id to the drag payload so the drop handler will
  // know which element to add to its tree
  const dataList = ev.dataTransfer.items;
  dataList.add(ev.target.id, "text/plain");
  // Add some other items to the drag payload
  dataList.add("<p>Paragraph…</p>", "text/html");
  dataList.add("http://www.example.org", "text/uri-list");
}

function drop\_handler(ev) {
  console.log("Drop");
  ev.preventDefault();
  const data = event.dataTransfer.items;
  // Loop through the dropped items and log their data
  for (const item of data) {
    if (item.kind === "string" && item.type.match("^text/plain")) {
      // This item is the target node
      item.getAsString((s) => {
        ev.target.appendChild(document.getElementById(s));
      });
    } else if (item.kind === "string" && item.type.match("^text/html")) {
      // Drag data item is HTML
      item.getAsString((s) => {
        console.log(`… Drop: HTML = ${s}`);
      });
    } else if (item.kind === "string" && item.type.match("^text/uri-list")) {
      // Drag data item is URI
      item.getAsString((s) => {
        console.log(`… Drop: URI = ${s}`);
      });
    }
  }
}

function dragover\_handler(ev) {
  console.log("dragOver");
  ev.preventDefault();
  // Set the dropEffect to move
  ev.dataTransfer.dropEffect = "move";
}

function dragend\_handler(ev) {
  console.log("dragEnd");
  const dataList = ev.dataTransfer.items;
  // Clear all the files. Iterate in reverse order to safely remove.
  for (let i = dataList.length - 1; i >= 0; i--) {
    if (dataList[i].kind === "file") {
      dataList.remove(i);
    }
  }
  // Clear any remaining drag data
  dataList.clear();
}

const source = document.querySelector("#source");
source.addEventListener("dragstart", dragstart_handler);
source.addEventListener("dragend", dragend_handler);

const target = document.querySelector("#target");
target.addEventListener("drop", drop_handler);
target.addEventListener("dragover", dragover_handler);
```

#### Result

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

| Specification |
| --- |
| HTML Standard # dom-datatransferitemlist-remove-dev |

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

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


DataTransferItemList: add() method - Web APIs

DataTransferItemList: add() method
==================================

 The **`DataTransferItemList.add()`** method creates a new
 `DataTransferItem` using the specified data and adds it to the drag data
 list. The item may be a `File` or a string of a
 given type. If the item is successfully added to the list, the newly-created
 `DataTransferItem` object is returned.

Syntax
------

```js
add(data, type)
add(file)
```

### Parameters

`data`

A string representing the drag item's data.

`type`

 A string of the drag item's type. Some example types are
 `text/html` and `text/plain`.

`file`

A `File` object. No type needs to be given in this case.

### Return value

 A `DataTransferItem` containing the specified data. If the drag item
 couldn't be created (for example, if the associated `DataTransfer` object
 has no data store), `null` is returned.

### Exceptions

`NotSupportedError` `DOMException`

 Thrown if the string `data` parameter was provided, and the list already contains an
 item whose `kind` is `"Plain Unicode string"` and
 whose type is equal to the specified type parameter.

Examples
--------

This example shows the use of the `add()` method.

### HTML

```html
<div>
  <p
 id="source"
 ondragstart="dragstart\_handler(event);"
 ondragend="dragend\_handler(event);"
 draggable="true">
    Select this element, drag it to the Drop Zone and then release the selection
    to move the element.
  </p>
</div>
<div
 id="target"
 ondrop="drop\_handler(event);"
 ondragover="dragover\_handler(event);">
  Drop Zone
</div>
```

### CSS

```css
div {
  margin: 0em;
  padding: 2em;
}
#source {
  color: blue;
  border: 1px solid black;
}
#target {
  border: 1px solid black;
}
```

### JavaScript

```js
function dragstart\_handler(ev) {
  console.log("dragStart");
  // Add this element's id to the drag payload so the drop handler will
  // know which element to add to its tree
  const dataList = ev.dataTransfer.items;
  dataList.add(ev.target.id, "text/plain");
  // Add some other items to the drag payload
  dataList.add("<p>Paragraph…</p>", "text/html");
  dataList.add("http://www.example.org", "text/uri-list");
}

function drop\_handler(ev) {
  console.log("Drop");
  ev.preventDefault();
  const data = event.dataTransfer.items;
  // Loop through the dropped items and log their data
  for (let i = 0; i < data.length; i++) {
    if (data[i].kind === "string" && data[i].type.match("^text/plain")) {
      // This item is the target node
      data[i].getAsString((s) => {
        ev.target.appendChild(document.getElementById(s));
      });
    } else if (data[i].kind === "string" && data[i].type.match("^text/html")) {
      // Drag data item is HTML
      data[i].getAsString((s) => {
        console.log(`… Drop: HTML = ${s}`);
      });
    } else if (
      data[i].kind === "string" &&
      data[i].type.match("^text/uri-list")
    ) {
      // Drag data item is URI
      data[i].getAsString((s) => {
        console.log(`… Drop: URI = ${s}`);
      });
    }
  }
}

function dragover\_handler(ev) {
  console.log("dragOver");
  ev.preventDefault();
  // Set the dropEffect to move
  ev.dataTransfer.dropEffect = "move";
}

function dragend\_handler(ev) {
  console.log("dragEnd");
  const dataList = ev.dataTransfer.items;
  for (let i = 0; i < dataList.length; i++) {
    dataList.remove(i);
  }
  // Clear any remaining drag data
  dataList.clear();
}
```

### Result

Result linkSpecifications
--------------

| Specification |
| --- |
| HTML Standard # dom-datatransferitemlist-add-dev |

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

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


AudioProcessingEvent: AudioProcessingEvent() constructor - Web APIs

AudioProcessingEvent: AudioProcessingEvent() constructor
========================================================

**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.

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

**Note:** Usually, this constructor is not directly called by your code, as the browser creates these objects itself and provides them to the event handler.

Syntax
------

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

### Parameters

`type`

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

`options`

An object that has the following properties:

`playbackTime`

A number representing the time when the audio will be played.

`inputBuffer`

An `AudioBuffer` containing the input audio data.

`outputBuffer`

An `AudioBuffer` where the output audio data will be written.

### Return value

A new `AudioProcessingEvent`.

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

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

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

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

See also
--------

* `AudioProcessingEvent`
* `ScriptProcessorNode`


AudioProcessingEvent: playbackTime property - Web APIs

AudioProcessingEvent: playbackTime 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.

The **`playbackTime`** read-only property of the `AudioProcessingEvent` interface represents the time when the audio will be played. It is in the same coordinate system as the time used by the `AudioContext`.

Value
-----

A number that doesn't need to be an integer.

Examples
--------

```js
const audioContext = new AudioContext();
const processor = audioContext.createScriptProcessor(256, 2, 2);

processor.addEventListener("audioprocess", (event) => {
  const inputBuffer = event.inputBuffer;
  const outputBuffer = event.outputBuffer;

  for (let channel = 0; channel < outputBuffer.numberOfChannels; channel++) {
    const inputData = inputBuffer.getChannelData(channel);
    const outputData = outputBuffer.getChannelData(channel);

    // Log the corresponding time for this audio buffer
    console.log(`Received audio data to be played at ${event.playbackTime}`);

    // Process the audio data here
    for (let i = 0; i < outputBuffer.length; i++) {
      outputData[i] = inputData[i] \* 0.5;
    }
  }
});

processor.connect(audioContext.destination);
```

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

| Specification |
| --- |
| Web Audio API # dom-audioprocessingevent-playbacktime |

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

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

See also
--------

* `AudioProcessingEvent`
* `ScriptProcessorNode`


AudioProcessingEvent: inputBuffer property - Web APIs

AudioProcessingEvent: inputBuffer 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.

The **`inputBuffer`** read-only property of the `AudioProcessingEvent` interface represents the input buffer of an audio processing event.

The input buffer is represented by an `AudioBuffer` object, which contains a collection of audio channels, each of which is an array of floating-point values representing the audio signal waveform encoded as a series of amplitudes. The number of channels and the length of each channel are determined by the channel count and buffer size properties of the `AudioBuffer`.

Value
-----

An `AudioBuffer` object.

Examples
--------

In this example, a `ScriptProcessorNode` is created with a buffer size of 256 samples, 2 input channels, and 2 output channels. When an `audioprocess` event is fired, the input and output buffers are retrieved from the event object. The audio data in the input buffer is processed, and the result is written to the output buffer. In this case, the audio data is scaled down by a factor of 0.5.

```js
const audioContext = new AudioContext();
const processor = audioContext.createScriptProcessor(256, 2, 2);

processor.addEventListener("audioprocess", (event) => {
  const inputBuffer = event.inputBuffer;
  const outputBuffer = event.outputBuffer;

  for (let channel = 0; channel < outputBuffer.numberOfChannels; channel++) {
    const inputData = inputBuffer.getChannelData(channel);
    const outputData = outputBuffer.getChannelData(channel);

    // Process the audio data here
    for (let i = 0; i < outputBuffer.length; i++) {
      outputData[i] = inputData[i] \* 0.5;
    }
  }
});

processor.connect(audioContext.destination);
```

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

| Specification |
| --- |
| Web Audio API # dom-audioprocessingevent-inputbuffer |

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

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

See also
--------

* `AudioProcessingEvent.outputBuffer`
* `ScriptProcessorNode`


AudioProcessingEvent: outputBuffer property - Web APIs

AudioProcessingEvent: outputBuffer 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.

The **`outputBuffer`** read-only property of the `AudioProcessingEvent` interface represents the output buffer of an audio processing event.

The output buffer is represented by an `AudioBuffer` object, which contains a collection of audio channels, each of which is an array of floating-point values representing the audio signal waveform encoded as a series of amplitudes. The number of channels and the length of each channel are determined by the channel count and buffer size properties of the `AudioBuffer`.

Value
-----

An `AudioBuffer` object.

Examples
--------

In this example, a `ScriptProcessorNode` is created with a buffer size of 256 samples, 2 input channels, and 2 output channels. When an `audioprocess` event is fired, the input and output buffers are retrieved from the event object. The audio data in the input buffer is processed, and the result is written to the output buffer. In this case, the audio data is scaled down by a factor of 0.5.

```js
const audioContext = new AudioContext();
const processor = audioContext.createScriptProcessor(256, 2, 2);

processor.addEventListener("audioprocess", (event) => {
  const inputBuffer = event.inputBuffer;
  const outputBuffer = event.outputBuffer;

  for (let channel = 0; channel < outputBuffer.numberOfChannels; channel++) {
    const inputData = inputBuffer.getChannelData(channel);
    const outputData = outputBuffer.getChannelData(channel);

    // Process the audio data here
    for (let i = 0; i < outputBuffer.length; i++) {
      outputData[i] = inputData[i] \* 0.5;
    }
  }
});

processor.connect(audioContext.destination);
```

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

| Specification |
| --- |
| Web Audio API # dom-audioprocessingevent-outputbuffer |

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

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

See also
--------

* `AudioProcessingEvent.inputBuffer`
* `ScriptProcessorNode`


KeyboardLayoutMap: forEach() method - Web APIs

KeyboardLayoutMap: forEach() method
===================================

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

 The **`forEach()`** method of the
 `KeyboardLayoutMap` interface executes a provided function once for
 each element of the map.

The method is otherwise the same as `Map.prototype.forEach()`.

Syntax
------

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

### Parameters

`callbackFn`

The function to execute for each element, taking three arguments:

`currentValue`

The value of the current element being processed.

`index` Optional

The index of the current element being processed.

`array` Optional

The KeyboardLayoutMap that `forEach()` is being called on.

`thisArg` Optional

 Value to use as **`this`** (i.e., the reference
 `Object`) when executing `callback`.

### Return value

None (`undefined`).

Examples
--------

The following example iterates every location- or layout-specific string and its associated keyboard code on an English QWERTY keyboard.

```js
navigator.keyboard.getLayoutMap().then((keyboardLayoutMap) => {
  keyboardLayoutMap.forEach((key, code) => {
    console.log(`${code} keyboard code represents ${key} key`);
  });
});
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-map.prototype.foreach |

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

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

See also
--------

* `Map.prototype.forEach()`


KeyboardLayoutMap: get() method - Web APIs

KeyboardLayoutMap: get() method
===============================

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

 The **`get()`** method of the
 `KeyboardLayoutMap` interface returns the element with the given
 key.

A list of valid keys is found in the UI Events KeyboardEvent code Values spec.

The method is otherwise the same as `Map.prototype.get()`.

Syntax
------

```js
get(key)
```

### Parameters

`key`

The key of the item to return from the map.

### Return value

The value of the specified key.

Examples
--------

The following example demonstrates how to get the location- or layout-specific string associated with the keyboard code that corresponds to the 'W' key on an English QWERTY keyboard.

```js
navigator.keyboard.getLayoutMap().then((keyboardLayoutMap) => {
  const upKey = keyboardLayoutMap.get("KeyW");
  window.alert(`Press ${upKey} to move up.`);
});
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-map.prototype.get |

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

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

See also
--------

* `Map.prototype.get()`


KeyboardLayoutMap: has() method - Web APIs

KeyboardLayoutMap: has() method
===============================

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

 The **`has()`** method of the
 `KeyboardLayoutMap` interface returns a boolean indicating whether the
 object has an element with the specified key.

 A list of valid keys is found in
 the UI Events KeyboardEvent code Values spec.

The method is otherwise the same as `Map.prototype.has()`.

Syntax
------

```js
has(key)
```

### Parameters

`key`

The key of an element to search for in the map.

### Return value

A `Boolean` indicating whether the specified key was found.

Examples
--------

The following example checks whether the location- or layout-specific string associated with the keyboard code that corresponds to the 'W' key on an English QWERTY keyboard exists.

```js
navigator.keyboard.getLayoutMap().then((keyboardLayoutMap) => {
  console.log(keyboardLayoutMap.has("KeyW"));
});
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-map.prototype.has |

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

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

See also
--------

* `Map.prototype.has()`


KeyboardLayoutMap: keys() method - Web APIs

KeyboardLayoutMap: keys() method
================================

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

The **`keys()`** method of the `KeyboardLayoutMap` interface returns a new Iterator object that contains the keys for each index in the `KeyboardLayoutMap` object.

The method is otherwise the same as `Map.prototype.keys()`.

Value
-----

A new Iterator object.

Examples
--------

The following example iterates every keyboard code on an English QWERTY keyboard.

```js
navigator.keyboard.getLayoutMap().then((keyboardLayoutMap) => {
  for (const code of keyboardLayoutMap.keys()) {
    console.log(`${code} keyboard code`);
  }
});
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-map.prototype.keys |

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

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

See also
--------

* `Map.prototype.keys()`


KeyboardLayoutMap: size property - Web APIs

KeyboardLayoutMap: size property
================================

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

 The **`size`** read-only property of
 the `KeyboardLayoutMap` interface returns the number of elements in the
 map.

The property is otherwise the same as `Map.prototype.size`.

Value
-----

A number.

Examples
--------

The following example get the count of the location- or layout-specific string and its associated keyboard code on an English QWERTY keyboard.

```js
navigator.keyboard.getLayoutMap().then((keyboardLayoutMap) => {
  console.log(keyboardLayoutMap.size);
});
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-get-map.prototype.size |

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

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

See also
--------

* `Map.prototype.size`


KeyboardLayoutMap: values() method - Web APIs

KeyboardLayoutMap: values() method
==================================

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

The **`values()`** method of the `KeyboardLayoutMap` interface returns a new Iterator object that contains the values for each index in the `KeyboardLayoutMap` object.

The method is otherwise the same as `Map.prototype.values()`.

Value
-----

A new Iterator object.

Examples
--------

The following example iterates every location- or layout-specific string on an English QWERTY keyboard.

```js
navigator.keyboard.getLayoutMap().then((keyboardLayoutMap) => {
  for (const key of keyboardLayoutMap.values()) {
    console.log(`${key} key`);
  }
});
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-map.prototype.values |

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

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

See also
--------

* `Map.prototype.values()`


KeyboardLayoutMap: entries() method - Web APIs

KeyboardLayoutMap: entries() method
===================================

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

The **`entries()`** method of the `KeyboardLayoutMap` interface returns a new Iterator object that contains the key/value pairs, in the same order as that provided by a `for...in` loop (the difference being that a `for-in` loop enumerates properties in the prototype chain as well).

The method is otherwise the same as `Map.prototype.entries()`.

Value
-----

A new Iterator object.

Examples
--------

The following example iterates every location- or layout-specific string and its associated keyboard code on an English QWERTY keyboard.

```js
navigator.keyboard.getLayoutMap().then((keyboardLayoutMap) => {
  for (const [code, key] of keyboardLayoutMap.entries()) {
    console.log(`${code} keyboard code represents ${key} key`);
  }
});
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-map.prototype.entries |

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

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

See also
--------

* `Map.prototype.entries()`


EncodedAudioChunk: type property - Web APIs

EncodedAudioChunk: type property
================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`type`** read-only property of the `EncodedAudioChunk` interface returns a value indicating whether the audio chunk is a key chunk, which does not relying on other frames for decoding.

Value
-----

A string, one of:

`"key"`

The data is a key chunk.

`"delta"`

The data is not a key chunk.

Examples
--------

In the following example the `type` is printed to the console.

```js
const init = {
  type: "key",
  data: audioBuffer,
  timestamp: 23000000,
  duration: 2000000,
};
chunk = EncodedAudioChunk(init);

console.log(chunk.type); //"key"
```

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

| Specification |
| --- |
| WebCodecs # dom-encodedaudiochunk-type |

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

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


EncodedAudioChunk: copyTo() method - Web APIs

EncodedAudioChunk: copyTo() method
==================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`copyTo()`** method of the `EncodedAudioChunk` interface copies the encoded chunk of audio data.

Syntax
------

```js
copyTo(destination)
```

### Parameters

`destination`

An `ArrayBuffer`, a `TypedArray`, or a `DataView` that the data can be copied to.

### Return value

None (`undefined`).

Examples
--------

In the following example an `EncodedAudioChunk` is created then copied.

```js
const init = {
  type: "key",
  data: audioBuffer,
  timestamp: 23000000,
  duration: 2000000,
};
chunk = EncodedAudioChunk(init);

chunk.copyTo(newBuffer);
```

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

| Specification |
| --- |
| WebCodecs # dom-encodedaudiochunk-copyto |

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

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


EncodedAudioChunk: timestamp property - Web APIs

EncodedAudioChunk: timestamp property
=====================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`timestamp`** read-only property of the `EncodedAudioChunk` interface returns an integer indicating the timestamp of the audio in microseconds.

Value
-----

An integer.

Examples
--------

In the following example the `timestamp` is printed to the console.

```js
const init = {
  type: "key",
  data: audioBuffer,
  timestamp: 23000000,
  duration: 2000000,
};
chunk = EncodedAudioChunk(init);

console.log(chunk.timestamp); //23000000
```

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

| Specification |
| --- |
| WebCodecs # dom-encodedaudiochunk-timestamp |

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

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


EncodedAudioChunk: EncodedAudioChunk() constructor - Web APIs

EncodedAudioChunk: EncodedAudioChunk() constructor
==================================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`EncodedAudioChunk()`** constructor creates a new `EncodedAudioChunk` object representing a chunk of encoded audio.

Syntax
------

```js
new EncodedAudioChunk(options)
```

### Parameters

`options`

An object containing the following members:

`type`

Indicates if the chunk is a key chunk that does not rely on other frames for encoding. One of:

`"key"`

The data is a key chunk.

`"delta"`

The data is not a key chunk.

`timestamp`

An integer representing the timestamp of the audio in microseconds.

`duration`

An integer representing the length of the audio in microseconds.

`data`

An `ArrayBuffer`, a `TypedArray`, or a `DataView` containing the audio data.

`transfer`

An array of `ArrayBuffer`s that `EncodedAudioChunk` will detach and take ownership of. If the array contains the `ArrayBuffer` backing `data`, `EncodedAudioChunk` will use that buffer directly instead of copying from it.

Examples
--------

In the following example a new `EncodedAudioChunk` is created.

```js
const init = {
  type: "key",
  data: audioBuffer,
  timestamp: 23000000,
  duration: 2000000,
  transfer: [audioBuffer],
};
chunk = new EncodedAudioChunk(init);
```

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

| Specification |
| --- |
| WebCodecs # dom-encodedaudiochunk-encodedaudiochunk |

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

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


EncodedAudioChunk: byteLength property - Web APIs

EncodedAudioChunk: byteLength property
======================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`byteLength`** read-only property of the `EncodedAudioChunk` interface returns the length in bytes of the encoded audio data.

Value
-----

An integer.

Examples
--------

In the following example the `byteLength` is printed to the console.

```js
const init = {
  type: "key",
  data: audioBuffer,
  timestamp: 23000000,
  duration: 2000000,
};
chunk = EncodedAudioChunk(init);

console.log(chunk.byteLength); //352800
```

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

| Specification |
| --- |
| WebCodecs # dom-encodedaudiochunk-bytelength |

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

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


EncodedAudioChunk: duration property - Web APIs

EncodedAudioChunk: duration property
====================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`duration`** read-only property of the `EncodedAudioChunk` interface returns an integer indicating the duration of the audio in microseconds.

Value
-----

An integer.

Examples
--------

In the following example the `duration` is printed to the console.

```js
const init = {
  type: "key",
  data: audioBuffer,
  timestamp: 23000000,
  duration: 2000000,
};
chunk = EncodedAudioChunk(init);

console.log(chunk.duration); //2000000
```

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

| Specification |
| --- |
| WebCodecs # dom-encodedaudiochunk-duration |

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

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


BluetoothCharacteristicProperties: write property - Web APIs

BluetoothCharacteristicProperties: write property
=================================================

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

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

 The **`write`** read-only property of the
 `BluetoothCharacteristicProperties` interface returns a
 `boolean` that is `true` if the writing to the characteristic with
 response is permitted.

Value
-----

A boolean value.

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

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothcharacteristicproperties-write |

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

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

null


BluetoothCharacteristicProperties: authenticatedSignedWrites property - Web APIs

BluetoothCharacteristicProperties: authenticatedSignedWrites property
=====================================================================

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

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

 The **`authenticatedSignedWrites`** read-only
 property of the `BluetoothCharacteristicProperties` interface returns a
 `boolean` that is `true` if signed writing to the characteristic
 value is permitted.

Value
-----

A boolean value.

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

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothcharacteristicproperties-authenticatedsignedwrites |

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

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


BluetoothCharacteristicProperties: writeWithoutResponse property - Web APIs

BluetoothCharacteristicProperties: writeWithoutResponse property
================================================================

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

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

 The **`writeWithoutResponse`** read-only
 property of the `BluetoothCharacteristicProperties` interface returns a
 `boolean` that is `true` if the writing to the characteristic
 without response is permitted.

Value
-----

A boolean value.

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

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothcharacteristicproperties-writewithoutresponse |

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

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


BluetoothCharacteristicProperties: indicate property - Web APIs

BluetoothCharacteristicProperties: indicate property
====================================================

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

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

 The **`indicate`** read-only property of the
 `BluetoothCharacteristicProperties` interface returns a
 `boolean` that is `true` if indications of the characteristic
 value with acknowledgement is permitted.

Value
-----

A boolean value.

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

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothcharacteristicproperties-indicate |

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

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


BluetoothCharacteristicProperties: reliableWrite property - Web APIs

BluetoothCharacteristicProperties: reliableWrite property
=========================================================

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

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

 The **`reliableWrite`** read-only property of
 the `BluetoothCharacteristicProperties` interface returns a
 `boolean` that is `true` if reliable writes to the characteristic
 is permitted.

Value
-----

A boolean value.

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

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothcharacteristicproperties-reliablewrite |

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

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


BluetoothCharacteristicProperties: read property - Web APIs

BluetoothCharacteristicProperties: read property
================================================

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

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

 The **`read`** read-only property of the
 `BluetoothCharacteristicProperties` interface returns a
 `boolean` that is `true` if the reading of the characteristic
 value is permitted.

Value
-----

A boolean value.

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

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothcharacteristicproperties-read |

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

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


BluetoothCharacteristicProperties: writableAuxiliaries property - Web APIs

BluetoothCharacteristicProperties: writableAuxiliaries property
===============================================================

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

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

 The **`writableAuxiliaries`** read-only
 property of the `BluetoothCharacteristicProperties` interface returns a
 `boolean` that is `true` if reliable writes to the characteristic
 descriptor is permitted.

Value
-----

A boolean value.

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

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothcharacteristicproperties-writableauxiliaries |

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

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


BluetoothCharacteristicProperties: broadcast property - Web APIs

BluetoothCharacteristicProperties: broadcast property
=====================================================

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

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

 The **`broadcast`** read-only property of the
 `BluetoothCharacteristicProperties` interface returns a
 `boolean` that is `true` if the broadcast of the characteristic
 value is permitted using the Server Characteristic Configuration Descriptor.

Value
-----

A boolean value.

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

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothcharacteristicproperties-broadcast |

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

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


BluetoothCharacteristicProperties: notify property - Web APIs

BluetoothCharacteristicProperties: notify property
==================================================

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

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

 The **`notify`** read-only property of the
 `BluetoothCharacteristicProperties` interface returns a
 `boolean` that is `true` if notifications of the characteristic
 value without acknowledgement is permitted.

Value
-----

A boolean value.

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

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothcharacteristicproperties-notify |

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

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


GPUComputePipeline: getBindGroupLayout() method - Web APIs

GPUComputePipeline: getBindGroupLayout() method
===============================================

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

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

If the `GPUComputePipeline` 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 compute pipeline using layout: "auto" to automatically generate
// appropriate bind group layouts
const computePipeline = device.createComputePipeline({
  layout: "auto",
  compute: {
    module: shaderModule,
    entryPoint: "main",
  },
});

// Create a bind group with the auto-generated layout from the compute pipeline
const computeBindGroup = device.createBindGroup({
  layout: computePipeline.getBindGroupLayout(0),
  entries: [
    {
      binding: 0,
      resource: { buffer: storageBuffer },
    },
  ],
});

// ...
```

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


GPUComputePipeline: label property - Web APIs

GPUComputePipeline: label property
==================================

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

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

```js
// ...

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

computePipeline.label = "mycomputepipeline";

console.log(computePipeline.label); // "mycomputepipeline"
```

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

```js
// ...

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

console.log(computePipeline.label); // "mycomputepipeline"
```

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


MediaTrackSettings: groupId property - Web APIs

MediaTrackSettings: groupId property
====================================

 The `MediaTrackSettings` dictionary's
 **`groupId`** property is a browsing-session unique
 string which identifies the group of devices which includes the source
 for the `MediaStreamTrack`. This lets you determine what value was selected
 to comply with your specified constraints for this property's value as described in the
 `MediaTrackConstraints.groupId` property you provided when calling either
 `getUserMedia()`.

 If needed, you can determine whether or not this constraint is supported by checking
 the value of `MediaTrackSupportedConstraints.groupId` as returned by a call
 to `MediaDevices.getSupportedConstraints()`. However, typically this is
 unnecessary since browsers will ignore any constraints they're unfamiliar with.

 Because RTP doesn't include this information, tracks associated with a
 WebRTC `RTCPeerConnection`
 will never include this property.

Value
-----

 A string whose value is a browsing-session unique identifier for a
 group of devices which includes the source of the track's contents. Two devices share
 the same group ID if they belong to the same physical hardware device. For example, a
 headset has two devices on it: a microphone which can serve as a source for audio tracks
 and a speaker which can serve as an output for audio.

 The group ID is not usable across multiple browsing sessions. However, it can be used
 to ensure that audio input and output are both being performed on the same headset, for
 example, or to ensure that the built-in camera and microphone on a phone are being used
 for video conferencing purposes.

 The actual value of the string, however, is determined by the source of the track, and
 there is no guarantee what form it will take, although the specification does recommend
 it be a GUID.

 Since this property isn't stable across browsing sessions, its usefulness when calling
 `getUserMedia()` is generally limited to
 ensuring that tasks performed during the same browsing session use devices from the same
 group (or that they don't use devices from the same group). There is no situation in
 which the groupId is useful when calling `applyConstraints()`, since the
 value can't be changed.

Examples
--------

See the Constraint exerciser example.

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediatracksettings-groupid |

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

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

See also
--------

* Media Capture and Streams API
* Capabilities, constraints, and settings
* `MediaTrackSettings.deviceId`
* `MediaTrackConstraints.groupId`
* `MediaTrackSettings`


MediaTrackSettings: latency property - Web APIs

MediaTrackSettings: latency property
====================================

 The `MediaTrackSettings` dictionary's
 **`latency`** property is a double-precision floating-point
 number indicating the estimated latency (specified in seconds) of the
 `MediaStreamTrack` as currently configured. This lets you determine what
 value was selected to comply with your specified constraints for this property's value
 as described in the `MediaTrackConstraints.latency` property you provided
 when calling either `getUserMedia()` or
 `MediaStreamTrack.applyConstraints()`.

 This is, of course, an approximation, since latency can vary for many reasons including
 CPU, transmission, and storage overhead.

 If needed, you can determine whether or not this constraint is supported by checking
 the value of `MediaTrackSupportedConstraints.latency` as returned by a call
 to `MediaDevices.getSupportedConstraints()`. However, typically this is
 unnecessary since browsers will ignore any constraints they're unfamiliar with.

 Because RTP doesn't include this information, tracks associated with a
 WebRTC `RTCPeerConnection`
 will never include this property.

Value
-----

 A double-precision floating-point number indicating the estimated latency, in seconds,
 of the audio track as currently configured.

Examples
--------

See the Constraint exerciser example.

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediatracksettings-latency |

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

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

See also
--------

* Media Capture and Streams API
* Capabilities, constraints, and settings
* `MediaTrackConstraints.latency`
* `MediaTrackSettings`


MediaTrackSettings: channelCount property - Web APIs

MediaTrackSettings: channelCount property
=========================================

 The `MediaTrackSettings` dictionary's
 **`channelCount`** property is an integer indicating how many
 audio channels the `MediaStreamTrack` is currently configured to have. This
 lets you determine what value was selected to comply with your specified constraints for
 this property's value as described in the
 `MediaTrackConstraints.channelCount` property you provided when calling
 either `getUserMedia()` or
 `MediaStreamTrack.applyConstraints()`.

 If needed, you can determine whether or not this constraint is supported by checking
 the value of `MediaTrackSupportedConstraints.channelCount` as returned by a
 call to `MediaDevices.getSupportedConstraints()`. However, typically this
 is unnecessary since browsers will ignore any constraints they're unfamiliar with.

Value
-----

 An integer value indicating the number of audio channels on the track. A value of 1
 indicates monaural sound, 2 means stereo, and so forth.

Examples
--------

See the Constraint exerciser example.

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediatracksettings-channelcount |

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

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

See also
--------

* Media Capture and Streams API
* Capabilities, constraints, and settings
* `MediaTrackConstraints.channelCount`
* `MediaTrackSettings`


MediaTrackSettings: frameRate property - Web APIs

MediaTrackSettings: frameRate property
======================================

 The `MediaTrackSettings` dictionary's
 **`frameRate`** property is a double-precision floating-point
 number indicating the frame rate, in frames per second, of the
 `MediaStreamTrack` as currently configured. This lets you determine what
 value was selected to comply with your specified constraints for this property's value
 as described in the `MediaTrackConstraints.frameRate` property you provided
 when calling either `getUserMedia()` or
 `MediaStreamTrack.applyConstraints()`.

 If needed, you can determine whether or not this constraint is supported by checking
 the value of `MediaTrackSupportedConstraints.frameRate` as returned by a
 call to `MediaDevices.getSupportedConstraints()`. However, typically this
 is unnecessary since browsers will ignore any constraints they're unfamiliar with.

Value
-----

 A double-precision floating-point number indicating the current configuration of the
 track's frame rate, in frames per second.

Examples
--------

See the Constraint exerciser example.

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediatracksettings-framerate |

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

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

See also
--------

* Media Capture and Streams API
* Capabilities, constraints, and settings
* `MediaTrackConstraints.frameRate`
* `MediaTrackSettings`


MediaTrackSettings: aspectRatio property - Web APIs

MediaTrackSettings: aspectRatio property
========================================

 The `MediaTrackSettings` dictionary's **`aspectRatio`** property is a double-precision floating-point number indicating the aspect ratio of the `MediaStreamTrack` as currently configured.
 This lets you determine what value was selected to comply with your specified constraints for this property's value as described in the `MediaTrackConstraints.aspectRatio` property you provided when calling either `getUserMedia()` or `MediaStreamTrack.applyConstraints()`.

 If needed, you can determine whether or not this constraint is supported by checking
 the value of `MediaTrackSupportedConstraints.aspectRatio` as returned by a
 call to `MediaDevices.getSupportedConstraints()`. However, typically this
 is unnecessary since browsers will ignore any constraints they're unfamiliar with.

Value
-----

 A double-precision floating-point number indicating the current configuration of the
 track's aspect ratio. The aspect ratio is computed by taking the track's width, dividing
 by its height, and rounding the result to ten decimal places. For example, the standard
 16:9 high-definition aspect ratio can be computed as 1920/1080, or 1.7777777778.

Examples
--------

See the Constraint exerciser example.

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediatracksettings-aspectratio |

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

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

See also
--------

* Media Capture and Streams API
* Capabilities, constraints, and settings
* `MediaTrackConstraints.aspectRatio`
* `MediaTrackSettings`


MediaTrackSettings: width property - Web APIs

MediaTrackSettings: width property
==================================

 The `MediaTrackSettings` dictionary's **`width`**
 property is an integer indicating the number of pixels wide
 `MediaStreamTrack` is currently configured to be. This lets you determine
 what value was selected to comply with your specified constraints for this property's
 value as described in the `MediaTrackConstraints.width` property you
 provided when calling either `getUserMedia()`
 or `MediaStreamTrack.applyConstraints()`.

 If needed, you can determine whether or not this constraint is supported by checking
 the value of `MediaTrackSupportedConstraints.width` as returned by a call
 to `MediaDevices.getSupportedConstraints()`. However, typically this is
 unnecessary since browsers will ignore any constraints they're unfamiliar with.

Value
-----

An integer value indicating the width, in pixels, of the video track as currently configured.

Examples
--------

See the Constraint exerciser example.

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediatracksettings-width |

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

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

See also
--------

* Media Capture and Streams API
* Capabilities, constraints, and settings
* `MediaTrackConstraints.width`
* `MediaTrackSettings`


MediaTrackSettings: suppressLocalAudioPlayback property - Web APIs

MediaTrackSettings: suppressLocalAudioPlayback property
=======================================================

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

The `MediaTrackSettings` dictionary's **`suppressLocalAudioPlayback`** property controls whether the audio playing in a tab will continue to be played out of a user's local speakers when the tab is captured.

For example, in cases where you broadcast a video call to an external AV system in a conference room, you will want the audio to play out of the AV system, and not the local speakers. This way, the audio will be louder and clearer, and also in sync with the conference video.

Value
-----

The value of `suppressLocalAudioPlayback` is a boolean — `true` enables local audio playback suppression, and `false` disables it.

Examples
--------

The below function sets up the constraints object specifying the options for the call to `getDisplayMedia()`. It adds the `suppressLocalAudioPlayback` constraint (requesting that captured audio is not played out of the user's local speakers) only if it is known to be supported by the browser. Capturing is then started by calling `getDisplayMedia()` and attaching the returned stream to the video element referenced by the variable `videoElem`.

```js
async function capture() {
  const supportedConstraints = navigator.mediaDevices.getSupportedConstraints();
  const displayMediaOptions = {
    audio: {},
  };

  if (supportedConstraints.suppressLocalAudioPlayback) {
    displayMediaOptions.audio.suppressLocalAudioPlayback = true;
  }

  try {
    videoElem.srcObject =
      await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
  } catch (err) {
    /\* handle the error \*/
  }
}
```

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

| Specification |
| --- |
| Screen Capture # dom-mediatracksettings-suppresslocalaudioplayback |

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

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

See also
--------

* Screen Capture API
* Using the screen capture API
* Capabilities, constraints, and settings
* `MediaDevices.getDisplayMedia()`
* `MediaStreamTrack.getConstraints()`
* `MediaStreamTrack.applyConstraints()`
* `MediaStreamTrack.getSettings()`


MediaTrackSettings: sampleRate property - Web APIs

MediaTrackSettings: sampleRate property
=======================================

 The `MediaTrackSettings` dictionary's
 **`sampleRate`** property is an integer indicating how many
 audio samples per second the `MediaStreamTrack` is currently configured
 for. This lets you determine what value was selected to comply with your specified
 constraints for this property's value as described in the
 `MediaTrackConstraints.sampleRate` property you provided when calling
 either `getUserMedia()` or
 `MediaStreamTrack.applyConstraints()`.

 If needed, you can determine whether or not this constraint is supported by checking
 the value of `MediaTrackSupportedConstraints.sampleRate` as returned by a
 call to `MediaDevices.getSupportedConstraints()`. However, typically this
 is unnecessary since browsers will ignore any constraints they're unfamiliar with.

Value
-----

 An integer value indicating how many samples each second of audio data includes. Common
 values include 44,100 (standard CD audio), 48,000 (standard digital audio), 96,000
 (commonly used in audio mastering and post-production), and 192,000 (used for
 high-resolution audio in professional recording and mastering sessions). However, lower
 values are often used to reduce bandwidth requirements; 8,000 samples per second is
 adequate for comprehensible albeit imperfect human speech, and both 11,025 FPS and
 22,050 FPS are often used for low-bandwidth, reduced quality sound and music.

Examples
--------

See the Constraint exerciser example.

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediatracksettings-samplerate |

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

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

See also
--------

* Media Capture and Streams API
* Capabilities, constraints, and settings
* `MediaTrackConstraints.sampleRate`
* `MediaTrackSettings`


MediaTrackSettings: echoCancellation property - Web APIs

MediaTrackSettings: echoCancellation property
=============================================

 The `MediaTrackSettings` dictionary's
 **`echoCancellation`** property is a Boolean value whose value
 indicates whether or not echo cancellation is enabled on an audio track. This lets you
 determine what value was selected to comply with your specified constraints for this
 property's value as described in the
 `MediaTrackConstraints.echoCancellation` property you provided when calling
 either `getUserMedia()` or
 `MediaStreamTrack.applyConstraints()`.

 Echo cancellation is a feature which attempts to prevent echo effects on a two-way
 audio connection by attempting to reduce or eliminate crosstalk between the user's
 output device and their input device. For example, it might apply a filter that negates
 the sound being produced on the speakers from being included in the input track
 generated from the microphone.

 If needed, you can determine whether or not this constraint is supported by checking
 the value of `MediaTrackSupportedConstraints.echoCancellation` as returned
 by a call to `MediaDevices.getSupportedConstraints()`. However, typically
 this is unnecessary since browsers will ignore any constraints they're unfamiliar with.

 Because RTP doesn't include this information, tracks associated with a
 WebRTC `RTCPeerConnection`
 will never include this property.

Value
-----

 A Boolean value which is `true` if the track has echo cancellation
 functionality enabled or `false` if echo cancellation is disabled.

Examples
--------

See the Constraint exerciser example.

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediatracksettings-echocancellation |

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

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

See also
--------

* Media Capture and Streams API
* Capabilities, constraints, and settings
* `MediaTrackConstraints.echoCancellation`
* `MediaTrackSettings`


MediaTrackSettings: logicalSurface property - Web APIs

MediaTrackSettings: logicalSurface property
===========================================

 The `MediaTrackSettings` dictionary's
 **`logicalSurface`** property indicates whether or not the
 display area being captured is a logical surface. Logical surfaces are those which are
 not necessarily entirely onscreen, or may even be off-screen, such as windows' backing
 buffers (where only part of the buffer is visible without scrolling the containing
 window) and offscreen rendering contexts.

Value
-----

 A Boolean value which is `true` if the video track in the stream of captured
 video is taken from a logical display surface.

 The most common scenario in which a display surface may be a logical one is if the
 selected surface contains the entire content area of a window which is too large to
 display onscreen at once. Since the window that contains the surface has to be scrolled
 to show the rest of the contents, the surface is a logical one.

 A visible display surface (that is, a surface for which `logicalSurface`
 returns `false`) is the portion of a logical display surface which is
 currently visible onscreen.

 For example, a user agent *may* choose to allow the user to choose whether to
 share the entire document (a `browser` with `logicalSurface` value
 of `true`), or just the currently visible portion of the document (where the
 `logicalSurface` of the `browser` surface is `false`).

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

| Specification |
| --- |
| Screen Capture # dom-mediatrackconstraintset-logicalsurface |

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

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

See also
--------

* Screen Capture API
* Using the screen capture API
* Capabilities, constraints, and settings
* `MediaDevices.getDisplayMedia()`
* `MediaStreamTrack.getConstraints()`
* `MediaStreamTrack.applyConstraints()`
* `MediaStreamTrack.getSettings()`


MediaTrackSettings: displaySurface property - Web APIs

MediaTrackSettings: displaySurface property
===========================================

 The `MediaTrackSettings` dictionary's
 **`displaySurface`** property indicates the type of display
 surface being captured.

Value
-----

The value of `displaySurface` is a string that comes from the `DisplayCaptureSurfaceType` enumerated type, and is one of the following:

`browser`

The stream's video track presents the entire contents of a single browser tab which the user selected during the `getDisplayMedia()` call.

`monitor`

 The video track in the stream presents the complete contents of one or more of the
 user's screens. Any empty space (if the displays are of different dimensions) is
 filled with a backdrop chosen by the user agent.

`window`

 The stream's video track presents the contents of a single window selected by the user.
 The window may be from any application, not necessarily just from within the user agent.

Not all user agents support all of these surface types.

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

| Specification |
| --- |
| Screen Capture # dom-mediatrackconstraintset-displaysurface |

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

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

See also
--------

* Screen Capture API
* Using the screen capture API
* Capabilities, constraints, and settings
* `MediaDevices.getDisplayMedia()`
* `MediaStreamTrack.getConstraints()`
* `MediaStreamTrack.applyConstraints()`
* `MediaStreamTrack.getSettings()`


MediaTrackSettings: autoGainControl property - Web APIs

MediaTrackSettings: autoGainControl property
============================================

 The `MediaTrackSettings` dictionary's
 **`autoGainControl`** property is a Boolean value whose value
 indicates whether or not automatic gain control (AGC) is enabled on an audio track. This
 lets you determine what value was selected to comply with your specified constraints for
 this property's value as described in the
 `MediaTrackConstraints.autoGainControl` property you provided when calling
 either `getUserMedia()` or
 `MediaStreamTrack.applyConstraints()`.

 Automatic gain control is a feature in which a sound source automatically manages
 changes in the volume of its source media to maintain a steady overall volume level.
 This feature is typically used on microphones, although it can be provided by other
 input sources as well.

 If needed, you can determine whether or not this constraint is supported by checking
 the value of `MediaTrackSupportedConstraints.autoGainControl` as returned
 by a call to `MediaDevices.getSupportedConstraints()`. However, typically
 this is unnecessary since browsers will ignore any constraints they're unfamiliar with.

Value
-----

 A Boolean value which is `true` if the track has automatic gain control
 enabled or `false` if AGC is disabled.

Examples
--------

See the Constraint exerciser example.

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediatracksettings-autogaincontrol |

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

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

See also
--------

* Media Capture and Streams API
* Capabilities, constraints, and settings
* `MediaTrackConstraints.autoGainControl`
* `MediaTrackSupportedConstraints`


MediaTrackSettings: noiseSuppression property - Web APIs

MediaTrackSettings: noiseSuppression property
=============================================

 The `MediaTrackSettings` dictionary's
 **`noiseSuppression`** property is a Boolean value whose value
 indicates whether or not noise suppression technology is enabled on an audio track. This
 lets you determine what value was selected to comply with your specified constraints for
 this property's value as described in the
 `MediaTrackConstraints.noiseSuppression` property you provided when calling
 either `getUserMedia()` or
 `MediaStreamTrack.applyConstraints()`.

 Noise suppression automatically filters the audio to remove background noise, hum
 caused by equipment, and the like from the sound before delivering it to your code. This
 feature is typically used on microphones, although it is technically possible it could
 be provided by other input sources as well.

 If needed, you can determine whether or not this constraint is supported by checking
 the value of `MediaTrackSupportedConstraints.noiseSuppression` as returned
 by a call to `MediaDevices.getSupportedConstraints()`. However, typically
 this is unnecessary since browsers will ignore any constraints they're unfamiliar with.

Value
-----

 A Boolean value which is `true` if the input track has noise suppression
 enabled or `false` if AGC is disabled.

Examples
--------

See the Constraint exerciser example.

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediatracksettings-noisesuppression |

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

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

See also
--------

* Media Capture and Streams API
* Capabilities, constraints, and settings
* `MediaTrackConstraints.noiseSuppression`
* `MediaTrackSupportedConstraints`


MediaTrackSettings: height property - Web APIs

MediaTrackSettings: height property
===================================

 The `MediaTrackSettings` dictionary's **`height`**
 property is an integer indicating the number of pixels tall
 `MediaStreamTrack` is currently configured to be. This lets you determine
 what value was selected to comply with your specified constraints for this property's
 value as described in the `MediaTrackConstraints.height` property you
 provided when calling either `getUserMedia()`
 or `MediaStreamTrack.applyConstraints()`.

 If needed, you can determine whether or not this constraint is supported by checking
 the value of `MediaTrackSupportedConstraints.height` as returned by a call
 to `MediaDevices.getSupportedConstraints()`. However, typically this is
 unnecessary since browsers will ignore any constraints they're unfamiliar with.

Value
-----

 An integer value indicating the height, in pixels, of the video track as currently
 configured.

Examples
--------

See the Constraint exerciser example.

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediatracksettings-height |

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

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

See also
--------

* Media Capture and Streams API
* Capabilities, constraints, and settings
* `MediaTrackConstraints.height`
* `MediaTrackSettings`


MediaTrackSettings: volume property - Web APIs

MediaTrackSettings: volume 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 `MediaTrackSettings` dictionary's **`volume`**
 property is a double-precision floating-point number indicating the volume of the
 `MediaStreamTrack` as currently configured, as a value from 0.0 (silence)
 to 1.0 (maximum supported volume for the device). This lets you determine what value was
 selected to comply with your specified constraints for this property's value as
 described in the `MediaTrackConstraints.volume` property you provided when
 calling either `getUserMedia()` or
 `MediaStreamTrack.applyConstraints()`.

 If needed, you can determine whether or not this constraint is supported by checking
 the value of `MediaTrackSupportedConstraints.volume` as returned by a call
 to `MediaDevices.getSupportedConstraints()`. However, typically this is
 unnecessary since browsers will ignore any constraints they're unfamiliar with.

Value
-----

 A double-precision floating-point number indicating the volume, from 0.0 to 1.0, of the
 audio track as currently configured.

Examples
--------

See the Constraint exerciser example.

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

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

See also
--------

* Media Capture and Streams API
* Capabilities, constraints, and settings
* `MediaTrackConstraints.volume`
* `MediaTrackSettings`


MediaTrackSettings: deviceId property - Web APIs

MediaTrackSettings: deviceId property
=====================================

 The `MediaTrackSettings` dictionary's
 **`deviceId`** property is a string which
 uniquely identifies the source for the corresponding `MediaStreamTrack` for
 the origin corresponding to the browsing session. This lets you determine what value was
 selected to comply with your specified constraints for this property's value as
 described in the `MediaTrackConstraints.deviceId` property you provided
 when calling either `getUserMedia()`.

 If needed, you can determine whether or not this constraint is supported by checking
 the value of `MediaTrackSupportedConstraints.deviceId` as returned by a
 call to `MediaDevices.getSupportedConstraints()`. However, typically this
 is unnecessary since browsers will ignore any constraints they're unfamiliar with.

 Because RTP doesn't include this information, tracks associated with a
 WebRTC `RTCPeerConnection`
 will never include this property.

Value
-----

 A string whose value is an origin-unique identifier for the track's
 source. This ID is valid across multiple browsing sessions for the same origin and is
 guaranteed to be different for all other origins, so you can safely use it to request
 the same source be used for multiple sessions, for example.

 The actual value of the string, however, is determined by the source of the track, and
 there is no guarantee what form it will take, although the specification does recommend
 it be a GUID.

 Since there is a one-to-one pairing of ID with each source, all tracks with the same
 source will share the same ID for any given origin, so
 `MediaStreamTrack.getCapabilities()` will always return exactly one value
 for `deviceId`. That makes the device ID not useful for any changes to
 constraints when calling `MediaStreamTrack.applyConstraints()`.

**Note:** An exception to the rule that device IDs are the same across browsing sessions:
 private browsing mode will use a different ID, and will change it each browsing
 session.

Examples
--------

See the Constraint exerciser example.

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediatracksettings-deviceid |

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

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

See also
--------

* Media Capture and Streams API
* Capabilities, constraints, and settings
* `MediaTrackSettings.groupId`
* `MediaTrackConstraints.deviceId`
* `MediaTrackSettings`


MediaTrackSettings: cursor property - Web APIs

MediaTrackSettings: cursor property
===================================

The `MediaTrackSettings` dictionary's **`cursor`** property indicates whether or not the cursor should be captured as part of the video track included in the `MediaStream` returned by `getDisplayMedia()`.

Value
-----

The value of `cursor` comes from the `CursorCaptureConstraint` enumerated string type, and may have one of the following values:

`always`

The mouse should always be visible in the video content of the `MediaStream`, unless the mouse has moved outside the area of the content.

`motion`

The mouse cursor should always be included in the video if it's moving, and for a short time after it stops moving.

`never`

The mouse cursor is never included in the shared video.

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

| Specification |
| --- |
| Screen Capture # dom-mediatracksettings-cursor |

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

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

See also
--------

* Screen Capture API
* Using the screen capture API
* Capabilities, constraints, and settings
* `MediaDevices.getDisplayMedia()`
* `MediaStreamTrack.getConstraints()`
* `MediaStreamTrack.applyConstraints()`
* `MediaStreamTrack.getSettings()`


MediaTrackSettings: facingMode property - Web APIs

MediaTrackSettings: facingMode property
=======================================

 The `MediaTrackSettings` dictionary's
 **`facingMode`** property is a string
 indicating the direction in which the camera producing the video track represented by
 the `MediaStreamTrack` is currently facing. This lets you determine what
 value was selected to comply with your specified constraints for this property's value
 as described in the `MediaTrackConstraints.facingMode` property you
 provided when calling either `getUserMedia()`
 or `MediaStreamTrack.applyConstraints()`.

 If needed, you can determine whether or not this constraint is supported by checking
 the value of `MediaTrackSupportedConstraints.facingMode` as returned by a
 call to `MediaDevices.getSupportedConstraints()`. However, typically this
 is unnecessary since browsers will ignore any constraints they're unfamiliar with.

 Because RTP doesn't include this information, tracks associated with a
 WebRTC `RTCPeerConnection`
 will never include this property.

Value
-----

 A string whose value is one of the strings in
 `VideoFacingModeEnum`.

### VideoFacingModeEnum

 The following strings are permitted values for the facing mode. These may represent
 separate cameras, or they may represent directions in which an adjustable camera can be
 pointed.

`"user"`

 The video source is facing toward the user; this includes, for example, the
 front-facing camera on a smartphone.

`"environment"`

 The video source is facing away from the user, thereby viewing their environment.
 This is the back camera on a smartphone.

`"left"`

 The video source is facing toward the user but to their left, such as a camera aimed
 toward the user but over their left shoulder.

`"right"`

 The video source is facing toward the user but to their right, such as a camera
 aimed toward the user but over their right shoulder.

Examples
--------

See the Constraint exerciser example.

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediatracksettings-facingmode |

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

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

See also
--------

* Media Capture and Streams API
* Capabilities, constraints, and settings
* `MediaTrackConstraints.facingMode`
* `MediaTrackSettings`


MediaTrackSettings: sampleSize property - Web APIs

MediaTrackSettings: sampleSize property
=======================================

 The `MediaTrackSettings` dictionary's
 **`sampleSize`** property is an integer indicating the linear
 sample size (in bits per sample) the `MediaStreamTrack` is currently
 configured for. This lets you determine what value was selected to comply with your
 specified constraints for this property's value as described in the
 `MediaTrackConstraints.sampleSize` property you provided when calling
 either `getUserMedia()` or
 `MediaStreamTrack.applyConstraints()`.

 If needed, you can determine whether or not this constraint is supported by checking
 the value of `MediaTrackSupportedConstraints.sampleSize` as returned by a
 call to `MediaDevices.getSupportedConstraints()`. However, typically this
 is unnecessary since browsers will ignore any constraints they're unfamiliar with.

Value
-----

 An integer value indicating how many bits each audio sample is represented by. The most
 commonly used sample size for many years now is 16 bits per sample, which was used for
 CD audio among others. Other common sample sizes are 8 (for reduced bandwidth
 requirements) and 24 (for high-resolution professional audio).

 Each audio channel on the track requires sampleSize bits.
 That means that a given sample actually uses (`sampleSize`/8)\*`channelCount` bytes of data.
 For example, 16-bit stereo audio requires (16/8)\*2 or 4 bytes per sample.

Examples
--------

See the Constraint exerciser example.

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediatracksettings-samplesize |

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

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

See also
--------

* Media Capture and Streams API
* Capabilities, constraints, and settings
* `MediaTrackConstraints.sampleSize`
* `MediaTrackSettings`