recursal/MDN huggingface dataset:
MediaStream: clone() method
===========================

 The **`clone()`** method of the `MediaStream`
 interface creates a duplicate of the `MediaStream`. This new
 `MediaStream` object has a new unique `id` and
 contains clones of every `MediaStreamTrack` contained by the
 `MediaStream` on which `clone()` was called.

Syntax
------


```js
clone()
```

### Parameters

None.

### Return value

 A new `MediaStream` instance which has a new unique ID and contains clones
 of every `MediaStreamTrack` contained by the `MediaStream` on
 which `clone()` was called.

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediastream-clone |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MediaStream: getTrackById() method
==================================

 The **`getTrackById()`** method of the `MediaStream` interface
 returns a `MediaStreamTrack` object representing the track with the specified ID
 string. If there is no track with the specified ID, this method returns `null`.

Syntax
------


```js
getTrackById(id)
```

### Parameters

`id`

A string which identifies the track to be returned.

### Return value

 If a track is found for which `MediaStreamTrack.id` matches the specified
 `id` string, that `MediaStreamTrack` object is returned.
 Otherwise, the returned value is `null`.

Examples
--------

 This example activates a commentary track on a video by ducking the audio level of the
 main audio track to 50%, then enabling the commentary track.


```js
stream.getTrackById("primary-audio-track").applyConstraints({ volume: 0.5 });
stream.getTrackById("commentary-track").enabled = true;
```

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediastream-gettrackbyid |

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

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

See also
--------

* `MediaStream`
* `MediaStreamTrack.id`
MediaStream: id property
========================

 The **`id`** read-only property of the `MediaStream` interface is a
 string containing 36 characters denoting a unique identifier (GUID)
 for the object.

Value
-----

A string.

Examples
--------


```js
const promise = navigator.mediaDevices.getUserMedia({
  audio: true,
  video: true,
});

promise.then((stream) => {
  console.log(stream.id);
});
```

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediastream-id |

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

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

See also
--------

* `MediaStream`, the interface this property belongs to.
MediaStream: removetrack event
==============================

The **`removetrack`** event is fired when a new `MediaStreamTrack` object has been removed from a `MediaStream`.

This event is not cancelable and does not bubble.

Syntax
------

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


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

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

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

A `MediaStreamTrackEvent`. Inherits from `Event`.

Event

MediaStreamTrackEventEvent properties
----------------

*Also inherits properties from its parent interface, `Event`.*

`MediaStreamTrackEvent.track` Read only 

A `MediaStreamTrack` object representing the track which was removed from the stream.

Examples
--------

Using `addEventListener()`:


```js
const stream = new MediaStream();

stream.addEventListener("removetrack", (event) => {
  console.log(`${event.track.kind} track removed`);
});
```


Using the `onremovetrack` event handler property:


```js
const stream = new MediaStream();

stream.onremovetrack = (event) => {
  console.log(`${event.track.kind} track removed`);
};
```

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

| Specification |
| --- |
| Media Capture and Streams # event-mediastream-removetrack |

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

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

See also
--------

* Related events: `addtrack`
* This event on `AudioTrackList` targets: `removetrack`
* This event on `VideoTrackList` targets: `removetrack`
* Media Capture and Streams API
* WebRTC
MediaStream: active property
============================

 The **`active`** read-only property of the
 `MediaStream` interface returns a Boolean value which is
 `true` if the stream is currently active; otherwise, it returns
 `false`. A stream is considered **active** if at least one of
 its `MediaStreamTrack`s does not have its property `MediaStreamTrack.readyState`
 set to `ended`. Once every track has ended, the stream's `active` property becomes
 `false`.

Value
-----

 A Boolean value which is `true` if the stream is currently active;
 otherwise, the value is `false`.

Examples
--------

 In this example, a new stream whose source is the user's local camera and microphone is
 requested using `getUserMedia()`. When that
 stream becomes available (that is, when the returned `Promise` is fulfilled,
 a button on the page is updated based on whether or not the stream is currently active.


```js
const promise = navigator.mediaDevices.getUserMedia({
  audio: true,
  video: true,
});

promise.then((stream) => {
  const startBtn = document.querySelector("#startBtn");
  startBtn.disabled = stream.active;
});
```

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediastream-active |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MediaStream: MediaStream() constructor
======================================

The **`MediaStream()`** constructor returns a newly-created `MediaStream`, which serves as a collection of media tracks, each represented by a `MediaStreamTrack` object.

 If any parameters are given, the specified tracks are added to the new stream.
 Otherwise, the stream has no tracks.

Syntax
------


```js
new MediaStream()
new MediaStream(stream)
new MediaStream(tracks)
```

### Parameters

`stream` Optional

 A different `MediaStream` object whose tracks are added to the
 newly-created stream automatically. The tracks are not removed from the original
 stream, so they're shared by the two streams.


`tracks` Optional

 An `Array` of `MediaStreamTrack` objects, one for each
 track to add to the stream.


### Return value

 A newly-created `MediaStream` object, either empty, or containing the
 tracks provided, if any.

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediastream-constructor |

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

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

See also
--------

* `MediaStream`
MediaStream: removeTrack() method
=================================

 The **`removeTrack()`** method of the `MediaStream` interface removes a
 `MediaStreamTrack` from a stream.

Syntax
------


```js
removeTrack(track)
```

### Parameters

`track`

A `MediaStreamTrack` that will be removed from the stream.

### Return value

None (`undefined`).

Examples
--------

 The following example demonstrates how to remove the audio and video tracks from a `MediaStream`.
 `fetchStreamFunction` is an event handler for `fetchStreamButton`. When the button is clicked, audio
 and video are captured from the system's devices. `removeTracksFunction` is the event handler for `removeTracksButton`.
 When this button is clicked, the audio and video tracks are removed from the `MediaStream`.


```js
let initialStream = null;
let newStream = null;

let fetchStreamButton = document.getElementById("fetchStream");
let removeTracksButton = document.getElementById("removeTracks");

async function fetchStreamFunction() {
  initialStream = await navigator.mediaDevices.getUserMedia({
    video: { width: 620, height: 310 },
    audio: true,
  });
  if (initialStream) {
    await attachToDOM(initialStream);
  }
}

async function attachToDOM(stream) {
  newStream = new MediaStream(stream.getTracks());
  document.querySelector("video").srcObject = newStream;
}

async function removeTracksFunction() {
  let videoTrack = newStream.getVideoTracks()[0];
  let audioTrack = newStream.getAudioTracks()[0];

  newStream.removeTrack(videoTrack);
  newStream.removeTrack(audioTrack);

  // Stream will be empty
  console.log(newStream.getTracks());
}

fetchStreamButton.addEventListener("click", fetchStreamFunction);
removeTracksButton.addEventListener("click", removeTracksFunction);
```

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediastream-removetrack |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MediaStream: getTracks() method
===============================

 The **`getTracks()`** method of the
 `MediaStream` interface returns a sequence that represents all the
 `MediaStreamTrack` objects in this
 stream's `track set`,
 regardless of `MediaStreamTrack.kind`.

Syntax
------


```js
getTracks()
```

### Parameters

None.

### Return value

An array of `MediaStreamTrack` objects.

Examples
--------


```js
navigator.mediaDevices
  .getUserMedia({ audio: false, video: true })
  .then((mediaStream) => {
    document.querySelector("video").srcObject = mediaStream;
    // Stop the stream after 5 seconds
    setTimeout(() => {
      const tracks = mediaStream.getTracks();
      tracks[0].stop();
    }, 5000);
  });
```

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediastream-gettracks |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MediaStream: addtrack event
===========================

The **`addtrack`** event is fired when a new `MediaStreamTrack` object has been added to a `MediaStream`.

This event is not cancelable and does not bubble.

Syntax
------

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


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

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

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

A `MediaStreamTrackEvent`. Inherits from `Event`.

Event

MediaStreamTrackEventEvent properties
----------------

*Also inherits properties from its parent interface, `Event`.*

`MediaStreamTrackEvent.track` Read only 

A `MediaStreamTrack` object representing the track which was added to the stream.

Examples
--------

Using `addEventListener()`:


```js
const stream = new MediaStream();

stream.addEventListener("addtrack", (event) => {
  console.log(`New ${event.track.kind} track added`);
});
```


Using the `onaddtrack` event handler property:


```js
const stream = new MediaStream();

stream.onaddtrack = (event) => {
  console.log(`New ${event.track.kind} track added`);
};
```

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

| Specification |
| --- |
| Media Capture and Streams # event-mediastream-addtrack |

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

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

See also
--------

* Related events: `removetrack`
* This event on `AudioTrackList` targets: `addtrack`
* This event on `VideoTrackList` targets: `addtrack`
* Media Capture and Streams API
* WebRTC
MediaStream: getVideoTracks() method
====================================

 The **`getVideoTracks()`** method of the
 `MediaStream` interface returns a sequence of
 `MediaStreamTrack` objects representing the video tracks in this stream.

Syntax
------


```js
getVideoTracks()
```

### Parameters

None.

### Return value

 An array of `MediaStreamTrack` objects, one for each video track contained
 in the media stream. Video tracks are those tracks whose
 `kind` property is `video`. The array
 is empty if the stream contains no video tracks.


**Note:** The order of the tracks is not defined by the specification,
 and may not be the same from one call to `getVideoTracks()` to another.


Examples
--------

 The following example, extracted from Chrome's
Image Capture / Photo Resolution Sample, uses `getVideoTracks()` to
 retrieve a track for passing to the `ImageCapture()` constructor.


```js
let imageCapture;

navigator.mediaDevices.getUserMedia({ video: true }).then((mediaStream) => {
  document.querySelector("video").srcObject = mediaStream;

  const track = mediaStream.getVideoTracks()[0];
  imageCapture = new ImageCapture(track);

  return imageCapture.getPhotoCapabilities();
});
```

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediastream-getvideotracks |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CredentialsContainer: preventSilentAccess() method
==================================================

 The **`preventSilentAccess()`** method
 of the `CredentialsContainer` interface sets a flag that specifies
 whether automatic log in is allowed for future visits to the current origin, then
 returns an empty `Promise`. For
 example, you might call this, after a user signs out of a website to ensure that
 they aren't automatically signed in on the next site visit. Mediation varies by origin,
 and is an added check point of browser stored credentials, informing a user of an
 account login status. This method is typically called after a user signs out of a
 website, ensuring this user's login information is not automatically passed on the next
 site visit.

 Earlier versions of the spec called this method `requireUserMediation()`.
 The Browser compatibility section has support details.

Syntax
------


```js
preventSilentAccess()
```

### Parameters

None.

### Return value

An empty `Promise`.

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

| Specification |
| --- |
| Credential Management Level 1 # dom-credentialscontainer-preventsilentaccess |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CredentialsContainer: store() method
====================================

 The **`store()`** method of the
 `CredentialsContainer` stores a set of credentials for the user inside a
 `Credential` instance, returning this in a `Promise`.


**Note:** This method is restricted to top-level contexts. Calls to it within an
 `<iframe>` element will resolve without effect.


Syntax
------


```js
store(credentials)
```

### Parameters

`credentials`

A valid `Credential` instance.

### Return value

A `Promise` that resolves to `undefined`.

Examples
--------

### Storing a password credential at successful authentication

 This code would be executed after a user signs up or logs in and the server confirms
 the credential is correct.


```js
// Check if the browser supports password credentials (and the Credential Management API)
if ("PasswordCredential" in window) {
  let credential = new PasswordCredential({
    id: "example-username",
    name: "Carina Anand", // In case of a login, the name comes from the server.
    password: "correct horse battery staple",
  });

  navigator.credentials.store(credential).then(
    () => {
      console.info("Credential stored in the user agent's credential manager.");
    },
    (err) => {
      console.error("Error while storing the credential: ", err);
    },
  );
}
```

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

| Specification |
| --- |
| Credential Management Level 1 # dom-credentialscontainer-store |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
BluetoothRemoteGATTDescriptor: readValue() method
=================================================

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

 The
 **`BluetoothRemoteGATTDescriptor.readValue()`**
 method returns a `Promise` that resolves to
 an `ArrayBuffer` holding a duplicate of the `value` property if
 it is available and supported. Otherwise it throws an error.

Syntax
------


```js
readValue()
```

### Parameters

None.

### Return value

A `Promise` that resolves to an `ArrayBuffer`.

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

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothremotegattdescriptor-readvalue |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
BluetoothRemoteGATTDescriptor: uuid property
============================================

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

 The **`BluetoothRemoteGATTDescriptor.uuid`** read-only property returns the UUID of the characteristic descriptor.
 For example '`00002902-0000-1000-8000-00805f9b34fb`' for theClient Characteristic Configuration descriptor.

Value
-----

A UUID.

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

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothremotegattdescriptor-uuid |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
BluetoothRemoteGATTDescriptor: value property
=============================================

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

 The **`BluetoothRemoteGATTDescriptor.value`**
 read-only property returns an `ArrayBuffer` containing the currently cached
 descriptor value. This value gets updated when the value of the descriptor is read.

Value
-----

An `ArrayBuffer`.

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

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothremotegattdescriptor-value |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
BluetoothRemoteGATTDescriptor: writeValue() method
==================================================

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

 The **`BluetoothRemoteGATTDescriptor.writeValue()`**
 method sets the value property to the bytes contained in
 an `ArrayBuffer` and returns a `Promise`.

Syntax
------


```js
writeValue(array)
```

### Parameters

`array`

Sets the value with the bytes contained in the array.

### Return value

A `Promise`.

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

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothremotegattdescriptor-writevalue |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
BluetoothRemoteGATTDescriptor: characteristic property
======================================================

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

 The **`BluetoothRemoteGATTDescriptor.characteristic`**
 read-only property returns the `BluetoothRemoteGATTCharacteristic` this
 descriptor belongs to.

Value
-----

An instance of `BluetoothRemoteGATTCharacteristic`.

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

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothremotegattdescriptor-characteristic |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSPrimitiveValue: setStringValue() method
==========================================

**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 **`setStringValue()`** method of the
 `CSSPrimitiveValue` interface is used to set a string value. If the
 property attached to this value can't accept the specified unit or the string value, the
 value will be unchanged and a `DOMException` will be raised.


**Note:** This method was part of an attempt to create a typed CSS Object Model. This attempt has been abandoned, and most browsers do
 not implement it.


To achieve your purpose, you can use:

* the untyped CSS Object Model, widely supported, or
* the modern CSS Typed Object Model API, less supported and considered experimental.

Syntax
------


```js
setStringValue(stringType, stringValue)
```

### Parameters

`stringType`

 An `unsigned short` representing the type of the value. Possible values
 are:


| Constant | Description |
| --- | --- |
| `CSS_ATTR` | The value is an `attr()` function. |
| `CSS_IDENT` | The value is an identifier. |
| `CSS_STRING` | The value is a `<string>`. |
| `CSS_URI` | The value is a `url()`. |

`stringValue`

A string representing the new string value.

### Return value

None (`undefined`).

### Exceptions

`InvalidAccessError` `DOMException`

 Thrown if the CSS value doesn't contain a string value
 or if the string value can't be converted into the specified unit.


`NoModificationAllowedError' `DOMException`

Thrown if the property is read-only.

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

 This feature was originally defined in the DOM Style Level 2 specification, but has been dropped from any
 standardization effort since then.

It has been superseded by a modern, but incompatible, CSS Typed Object Model API that is now on the standard track.

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSPrimitiveValue: getRGBColorValue() method
============================================

**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 **`getRGBColorValue()`** method of the
 `CSSPrimitiveValue` interface is used to get an RGB color value. If this
 CSS value doesn't contain a RGB color value, a `DOMException` is raised.
 Modification to the corresponding style property can be achieved using the
 `RGBColor` interface.


**Note:** This method was part of an attempt to create a typed CSS Object Model. This attempt has been abandoned, and most browsers do
 not implement it.


To achieve your purpose, you can use:

* the untyped CSS Object Model, widely supported, or
* the modern CSS Typed Object Model API, less supported and considered experimental.

Syntax
------


```js
getRGBColorValue()
```

### Parameters

None.

### Return value

An `RGBColor` object representing the color value.

### Exceptions

| **Type** | **Description** |
| --- | --- |
| `DOMException` | An `INVALID_ACCESS_ERR` is raised if the attached property can't return an RGB color value (i.e. this is not `CSS_RGBCOLOR`). |

Examples
--------


```js
const cs = window.getComputedStyle(document.body);
const cssValue = cs.getPropertyCSSValue("color");
console.log(cssValue.getRGBColorValue());
```

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

 This feature was originally defined in the DOM Style Level 2 specification, but has been dropped from any
 standardization effort since then.

It has been superseded by a modern, but incompatible, CSS Typed Object Model API that is now on the standard track.

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

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