recursal/MDN huggingface dataset:
MediaStreamTrack: contentHint property
======================================

The **`contentHint`** property of the `MediaStreamTrack` interface is a string that hints at the type of content the track contains. Allowable values depend on the value of the `MediaStreamTrack.kind` property.

Value
-----

A string with one of the following values:

`""`

No `contentHint` has been set.

`"speech"`

The track should be treated as if it contains speech data. When setting this value, the value of `MediaStreamTrack.kind` must be `"audio"`.

`"speech-recognition"`

The track should be treated as if it contains data for the purpose of speech recognition by a machine. When setting this value, the value of `MediaStreamTrack.kind` must be `"audio"`.

`"music"`

The track should be treated as if it contains music. When setting this value, the value of `MediaStreamTrack.kind` must be `"audio"`.

`"motion"`

The track should be treated as if it contains video where motion is important. For example, webcam video, movies or video games. When setting this value, the value of `MediaStreamTrack.kind` must be `"video"`.

`"detail"`

The track should be treated as if video details are extra important. For example, presentations or web pages with text content, painting or line art. When setting this value, the value of `MediaStreamTrack.kind` must be `"video"`.

`"text"`

The track should be treated as if video details are extra important, and that significant sharp edges and areas of consistent color can occur frequently. For example, presentations or web pages with text content. When setting this value, the value of `MediaStreamTrack.kind` must be `"video"`.

Examples
--------

### A function that sets the contentHint

This function takes a stream and a `contentHint` value, and applies the hint to each track. See the full example here, showing how different `contentHint` values change how the tracks display.


```js
function setVideoTrackContentHints(stream, hint) {
  const tracks = stream.getVideoTracks();
  tracks.forEach((track) => {
    if ("contentHint" in track) {
      track.contentHint = hint;
      if (track.contentHint !== hint) {
        console.error(`Invalid video track contentHint: "${hint}"`);
      }
    } else {
      console.error("MediaStreamTrack contentHint attribute not supported");
    }
  });
}
```

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

| Specification |
| --- |
| MediaStreamTrack Content Hints # dom-mediastreamtrack-contenthint |

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

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

The **`label`** read-only property of the `MediaStreamTrack` interface returns a string containing a user agent-assigned label that identifies the track source, as in `"internal microphone"`.

 The string may be left empty and is empty as long as no source has been connected.
 When the track is disassociated from its source, the label is not changed.

Syntax
------


```js
const label = track.label
```

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediastreamtrack-label |

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

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

See also
--------

* WebRTC
MediaStreamTrack: id property
=============================

 The **`id`** read-only property of the `MediaStreamTrack` interface returns a
 string containing a unique identifier (GUID) for the track, which is
 generated by the user agent.

Syntax
------


```js
const id = track.id
```

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

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

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

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

See also
--------

* WebRTC
MediaStreamTrack: unmute event
==============================

The **`unmute`** event is sent to a `MediaStreamTrack` when the track's source is once again able to provide media data after a period of not being able to do so.

This ends the `muted` state that began with the `mute` event.

**Note:** The condition that most people think of as "muted" (that is, a user-controllable way to silence a track) is actually managed using the `MediaStreamTrack.enabled` property, for which there are no events.

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("unmute", (event) => {});

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

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

A generic `Event`.

Examples
--------

In this example, event handlers are established for the `mute` and `unmute` events in order to detect when the media is not flowing from the source for the `MediaStreamTrack` stored in the variable `musicTrack`.


```js
musicTrack.addEventListener(
  "mute",
  (event) => {
    document.getElementById("timeline-widget").style.backgroundColor = "#aaa";
  },
  false,
);

musicTrack.addEventListener(
  "unmute",
  (event) => {
    document.getElementById("timeline-widget").style.backgroundColor = "#fff";
  },
  false,
);
```


With these event handlers in place, when the track `musicTrack` enters its `muted` state, the element with the ID `timeline-widget` gets its background color changed to `#aaa`. When the track exits the muted state—detected by the arrival of an `unmuted` event—the background color is restored to white.

You can also use the `onunmute` event handler property to set up a handler for this event; similarly, the `onmute` event handler is available for setting up a handler for the `mute` event. The following example shows this:


```js
musicTrack.onmute = (event) => {
  document.getElementById("timeline-widget").style.backgroundColor = "#aaa";
};

musicTrack.mute = (event) => {
  document.getElementById("timeline-widget").style.backgroundColor = "#fff";
};
```

### Unmute tracks through receivers

The following example shows how to unmute tracks using receivers.


```js
// Peer 1 (Receiver)
audioTrack.addEventListener("unmute", (event) => {
  // Do something in UI
});

videoTrack.addEventListener("unmute", (event) => {
  // Do something in UI
});

// Peer 2 (Sender)
const transceivers = peer.getTransceivers();

const audioTrack = transceivers[0];
audioTrack.direction = "sendrecv";

const videoTrack = transceivers[1];
videoTrack.direction = "sendrecv";
```


`transceivers` is an array of `RTCRtpTransceiver` where you can find the audio or video track sent and received. For more information, see the `direction` article.

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

| Specification |
| --- |
| Media Capture and Streams # event-mediastreamtrack-unmute |

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

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

See also
--------

* The `mute` event
MediaStreamTrack: ended event
=============================

The **`ended`** event of the `MediaStreamTrack` interface is fired when playback or streaming has stopped because the end of the media was reached or because no further data is available.

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("ended", (event) => {});

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

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

A generic `Event`.

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

`ended` events fire when the media stream track's source permanently stops sending data on the stream. There are various ways this can happen, including:

* There is no more data left to send.
* The user revoked the permissions needed for the data to be sent.
* The hardware generating the source data has been removed or ejected.
* A remote peer has permanently stopped sending data; pausing media *does not* generate an `ended` event.
Examples
--------

This example sets up an event handler for the `ended` event, which changes an on-screen icon to indicate that the track is no longer active.


```js
track.addEventListener("ended", () => {
  let statusElem = document.getElementById("status-icon");
  statusElem.src = "/images/stopped-icon.png";
});
```


You can also set up the event handler using the `onended` property:


```js
track.onended = () => {
  let statusElem = document.getElementById("status-icon");

  statusElem.src = "/images/stopped-icon.png";
};
```

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediastreamtrack-onended |

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

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

See also
--------

* The HTMLMediaElement `playing` event
* The HTMLMediaElement `waiting` event
* The HTMLMediaElement `seeking` event
* `<audio>`
* `<video>`
* The HTMLMediaElement `ended` event
* The AudioScheduledSourceNode `ended` event
MediaStreamTrack: muted property
================================

 The **`muted`** read-only property of the
 `MediaStreamTrack` interface returns a boolean value
 indicating whether or not the track is currently unable to provide media output.


**Note:** To implement a way for users to mute and unmute a track, use the
 `enabled` property. When a track is disabled
 by setting `enabled` to `false`, it generates only empty frames
 (audio frames in which every sample is 0, or video frames in which every pixel is
 black).


Value
-----

 A boolean which is `true` if the track is currently muted, or
 `false` if the track is currently unmuted.


**Note:** When possible, avoid polling `muted` to monitor the track's muting status.
 Instead, add event listeners for the `mute` and `unmute` events.


Examples
--------

 This example counts the number of tracks in an array of `MediaStreamTrack`
 objects which are currently muted.


```js
let mutedCount = 0;

trackList.forEach((track) => {
  if (track.muted) {
    mutedCount += 1;
  }
});
```

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediastreamtrack-muted |

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

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

 The **`getSettings()`** method of the
 `MediaStreamTrack` interface returns a `MediaTrackSettings`
 object containing the current values of each of the constrainable properties for the
 current `MediaStreamTrack`.

See Capabilities, constraints, and settings for details on how to work with constrainable properties.

Syntax
------


```js
getSettings()
```

### Parameters

None.

### Return value

 A `MediaTrackSettings` object describing the current configuration of the
 track's constrainable properties.


**Note:** The returned object identifies the current values of every
 constrainable property, including those which are platform defaults rather than having
 been expressly set by the site's code. To instead fetch the most-recently established
 constraints for the track's properties, as specified by the site's code, use
 `getConstraints()`.


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

| Specification |
| --- |
| Media Capture and Streams # dom-mediastreamtrack-getsettings |

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

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

 The **`getCapabilities()`** method of
 the `MediaStreamTrack` interface returns a
 `MediaTrackCapabilities` object which specifies the values or range of
 values which each constrainable property, based upon the platform and user agent.

 Once you know what the browser's capabilities are, your script can use
 `applyConstraints()` to ask for the
 track to be configured to match ideal or acceptable settings. See Capabilities, constraints, and settings for details on how to work with constrainable properties.

Syntax
------


```js
getCapabilities()
```

### Parameters

None.

### Return value

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

`deviceId`

A `ConstrainDOMString` object containing the device ID.

`groupId`

A `ConstrainDOMString` object containing a group ID.

`autoGainControl`

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


`channelCount`

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

`echoCancellation`

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


`latency`

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

`noiseSuppression`

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


`sampleRate`

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

`sampleSize`

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

`aspectRatio`

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

`facingMode`

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

`frameRate`

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

`height`

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

`width`

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

`resizeMode`

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

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

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

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

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

See also
--------

* `InputDeviceInfo.getCapabilities()`, which also return a `MediaTrackCapabilities` object.
MediaStreamTrack: kind property
===============================

 The **`kind`** read-only property of the `MediaStreamTrack` interface returns a string set to `"audio"` if the track is an audio track and to `"video"` if it is a video track.
 It doesn't change if the track is disassociated from its source.

Value
-----

The possible values are a string with one of the following values:

* `"audio"`: the track is an audio track.
* `"video"`: the track is a video track.
Specifications
--------------

| Specification |
| --- |
| Media Capture and Streams # dom-mediastreamtrack-kind |

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

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

See also
--------

* WebRTC
MediaStreamTrack: mute event
============================

The **`mute`** event is sent to a `MediaStreamTrack` when the track's source is temporarily unable to provide media data.

When the track is once again able to produce media output, an `unmute` event is sent.

During the time between the `mute` event and the `unmute` event, the value of the track's `muted` property is `true`.

**Note:** The condition that most people think of as "muted" (that is, a user-toggled state of silencing a track) is actually managed using the `MediaStreamTrack.enabled` property, for which there are no events.

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("mute", (event) => {});

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

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

A generic `Event`.

Examples
--------

In this example, event handlers are established for the `mute` and `unmute` events in order to detect when the media is not flowing from the source for the `MediaStreamTrack` referenced by `musicTrack`.


```js
musicTrack.addEventListener(
  "mute",
  (event) => {
    document.getElementById("timeline-widget").style.backgroundColor = "#aaa";
  },
  false,
);

musicTrack.addEventListener(
  "unmute",
  (event) => {
    document.getElementById("timeline-widget").style.backgroundColor = "#fff";
  },
  false,
);
```


With these event handlers in place, when the track `musicTrack` enters its `muted` state, the element with the ID `timeline-widget` gets its background color changed to `#aaa`. When the track exits the muted state—detected by the arrival of an `unmute` event—the background color is restored to white.

You can also use the `onmute` event handler property to set up a handler for this event; similarly, the `onunmute` event handler is available for setting up a handler for the `unmute` event. The following example shows this:


```js
musicTrack.onmute = (event) => {
  document.getElementById("timeline-widget").style.backgroundColor = "#aaa";
};

musicTrack.onunmute = (event) => {
  document.getElementById("timeline-widget").style.backgroundColor = "#fff";
};
```

### Mute tracks through receivers

The following example shows how to mute tracks using receivers.


```js
// Peer 1 (Receiver)
audioTrack.addEventListener("mute", (event) => {
  // Do something in UI
});

videoTrack.addEventListener("mute", (event) => {
  // Do something in UI
});

// Peer 2 (Sender)
const transceivers = peer.getTransceivers();

const audioTrack = transceivers[0];
audioTrack.direction = "recvonly";

const videoTrack = transceivers[1];
videoTrack.direction = "recvonly";
```


`transceivers` is an array of `RTCRtpTransceiver` where you can find the audio or video track sent and received. For more information, see the `direction` article.

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediastreamtrack-onmute |

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

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

See also
--------

* `unmute` event
* `direction`
MediaStreamTrack: readyState property
=====================================

The **`readyState`** read-only property of the `MediaStreamTrack` interface returns an enumerated value giving the status of the track.

Value
-----

It takes one of the following values:

* `"live"` which indicates that an input is connected and does its
 best-effort in providing real-time data. In that case, the output of data can be
 switched on or off using the `MediaStreamTrack.enabled` property.
* `"ended"` which indicates that the input is not giving any more data and
 will never provide new data.
Specifications
--------------

| Specification |
| --- |
| Media Capture and Streams # dom-mediastreamtrack-readystate |

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

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

See also
--------

* Media Capture and Streams API
* WebRTC
* The `ended` event
MediaStreamTrack: clone() method
================================

 The **`clone()`** method of the `MediaStreamTrack`
 interface creates a duplicate of the `MediaStreamTrack`. This new
 `MediaStreamTrack` object is identical except for its unique
 `id`.

Syntax
------


```js
clone()
```

### Parameters

None.

### Return value

 A new `MediaStreamTrack` instance which is identical to the one
 `clone()` was called, except for its new unique
 `id`.

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

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

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

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

The **`getEntriesByName()`** method of the `PerformanceObserverEntryList` interface returns a list of explicitly observed performance entry objects for a given `name` and `entry type`. The list's members are determined by the set of entry types specified in the call to the `observe()` method. The list is available in the observer's callback function (as the first parameter in the callback).

Syntax
------


```js
getEntriesByName(name)
getEntriesByName(name, type)
```

### Parameters

`name`

A string representing the name of the entry to retrieve.

`type` Optional

A string representing the type of entry to retrieve such as `"mark"`. The valid entry types are listed in `PerformanceEntry.entryType`.

### Return value

A list of explicitly *observed* performance entry objects that have the specified `name` and `type`. If the `type` argument is not specified, only the `name` will be used to determine the entries to return. The items will be in chronological order based on the entries' `startTime`. If no objects meet the specified criteria, an empty list is returned.

Examples
--------

### Working with getEntries, getEntriesByName and getEntriesByType

The following example shows the difference between the `getEntries()`, `getEntriesByName()`, and `getEntriesByType()` methods.


```js
const observer = new PerformanceObserver((list, obs) => {
  // Log all entries
  let perfEntries = list.getEntries();
  perfEntries.forEach((entry) => {
    console.log(`${entry.name}'s duration: ${entry.duration}`);
  });

  // Log entries named "debugging" with type "measure"
  perfEntries = list.getEntriesByName("debugging", "measure");
  perfEntries.forEach((entry) => {
    console.log(`${entry.name}'s duration: ${entry.duration}`);
  });

  // Log entries with type "mark"
  perfEntries = list.getEntriesByType("mark");
  perfEntries.forEach((entry) => {
    console.log(`${entry.name}'s startTime: ${entry.startTime}`);
  });
});

// Subscribe to various performance event types
observer.observe({
  entryTypes: ["mark", "measure", "navigation", "resource"],
});
```

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

| Specification |
| --- |
| Performance Timeline # dom-performanceobserverentrylist-getentriesbyname |

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

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