recursal/MDN huggingface dataset:
AbortController: abort() method
===============================

 The **`abort()`** method of the `AbortController` interface aborts an asynchronous operation before it has completed.
 This is able to abort fetch requests, the consumption of any response bodies, or streams.

Syntax
------


```js
abort()
abort(reason)
```

### Parameters

`reason` Optional

 The reason why the operation was aborted, which can be any JavaScript value.
 If not specified, the reason is set to "AbortError" `DOMException`.


### Return value

None (`undefined`).

Examples
--------

In the following snippet, we aim to download a video using the Fetch API.

We first create a controller using the `AbortController()` constructor, then grab a reference to its associated `AbortSignal` object using the `AbortController.signal` property.

When the fetch request is initiated, we pass in the `AbortSignal` as an option inside the request's options object (the `{signal}` below). This associates the signal and controller with the fetch request and allows us to abort it by calling `AbortController.abort()`, as seen below in the second event listener.


```js
const controller = new AbortController();
const signal = controller.signal;

const url = "video.mp4";
const downloadBtn = document.querySelector(".download");
const abortBtn = document.querySelector(".abort");

downloadBtn.addEventListener("click", fetchVideo);

abortBtn.addEventListener("click", () => {
  controller.abort();
  console.log("Download aborted");
});

function fetchVideo() {
  fetch(url, { signal })
    .then((response) => {
      console.log("Download complete", response);
    })
    .catch((err) => {
      console.error(`Download error: ${err.message}`);
    });
}
```


**Note:** When `abort()` is called, the `fetch()` promise rejects with an `Error` of type `DOMException`, with name `AbortError`.

You can find a full working example on GitHub; you can also see it running live.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-abortcontroller-abortcontroller① |

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

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

See also
--------

* Fetch API
EyeDropper: open() method
=========================

**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 **`EyeDropper.open()`** method starts the eyedropper mode, returning a promise which is fulfilled once the user has selected a color and exited the eyedropper mode.

Syntax
------


```js
open()
open(options)
```

### Parameters

`options` Optional

An options object to pass an `AbortSignal` signal:

`signal` Optional

An `AbortSignal`. The eyedropper mode will be aborted when the `AbortSignal`'s `abort()` method is called.


### Return value

A `Promise` that eventually resolves when the user selects a pixel color from the screen.

The promise resolves to an object with the following property:

`sRGBHex`

A string representing the selected color, in hexadecimal sRGB format (`#aabbcc`).

### Exceptions

Exceptions are not thrown but returned when the `Promise` is rejected.

`NotAllowedError` `DOMException`

Thrown if `open()` is not called via a transient user activation.

`InvalidStateError` `DOMException`

Thrown if another eye dropper has already opened.

`AbortError` `DOMException`

Thrown if the user aborts the selection by pressing the `Esc` key or if the selection is aborted by an `AbortController` being passed as an argument to `open()`.

`OperationError` `DOMException`

Thrown if the selection fails for other reasons.

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

| Specification |
| --- |
| EyeDropper API # dom-eyedropper-open |

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

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

See also
--------

* The `EyeDropper` interface it belongs to.
EyeDropper: EyeDropper() constructor
====================================

**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 **`EyeDropper()`** constructor returns a new `EyeDropper` object.

Syntax
------


```js
new EyeDropper()
```

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

| Specification |
| --- |
| EyeDropper API # eyedropper-interface |

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

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

See also
--------

* The `EyeDropper` interface it belongs to.
WindowClient: visibilityState property
======================================

 The **`visibilityState`** read-only property of the
 `WindowClient` interface indicates the visibility of the current client.
 This value can be one of `"hidden"`, `"visible"`, or
 `"prerender"`.

Value
-----

A string (See `Document.visibilityState` for values).

Examples
--------


```js
event.waitUntil(
  clients
    .matchAll({
      type: "window",
    })
    .then((clientList) => {
      for (const client of clientList) {
        if (client.url === "/" && "focus" in client) {
          if (client.visibilityState === "hidden") return client.focus();
        }
      }
      if (clients.openWindow) {
        return clients.openWindow("/");
      }
    }),
);
```

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

| Specification |
| --- |
| Service Workers # client-visibilitystate |

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

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

 The **`focus()`** method of the `WindowClient`
 interface gives user input focus to the current client and returns a
 `Promise` that resolves to the existing
 `WindowClient`.

Syntax
------


```js
focus()
```

### Parameters

None.

### Return value

A `Promise` that resolves to the existing `WindowClient`.

### Exceptions

`InvalidAccessError` `DOMException`

The promise is rejected with this exception if none of the windows in the app's origin have transient activation.

Security requirements
---------------------

* At least one window in the app's origin must have transient activation.
Examples
--------


```js
self.addEventListener("notificationclick", (event) => {
  console.log("On notification click: ", event.notification.tag);
  event.notification.close();

  // This looks to see if the current is already open and
  // focuses if it is
  event.waitUntil(
    clients
      .matchAll({
        type: "window",
      })
      .then((clientList) => {
        for (const client of clientList) {
          if (client.url === "/" && "focus" in client) return client.focus();
        }
        if (clients.openWindow) return clients.openWindow("/");
      }),
  );
});
```

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

| Specification |
| --- |
| Service Workers # client-focus |

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

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

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

The **`ancestorOrigins`** read-only property of the `WindowClient` interface is an array of strings listing the origins of all ancestors of the browsing context represented by this `WindowClient` in reverse order.

The first element in the array is the origin of this window's parent, and the last element is the origin of the top-level browsing context. If this window is itself a top-level browsing context, then `ancestorOrigins` is an empty array.

Value
-----

An array of strings.

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

| Specification |
| --- |
| Service Workers # client-ancestororigins |

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

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

 The **`navigate()`** method of the `WindowClient`
 interface loads a specified URL into a controlled client page then returns a
 `Promise` that resolves to the existing `WindowClient`.

Syntax
------


```js
navigate(url)
```

### Parameters

`url`

The location to navigate to.

### Return value

A `Promise` that resolves to the existing `WindowClient` if the URL is from the same origin as the service worker, or `null` otherwise.

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

| Specification |
| --- |
| Service Workers # client-navigate |

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

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

 The **`focused`** read-only property of the
 `WindowClient` interface is a boolean value that indicates whether
 the current client has focus.

Value
-----

A boolean value.

Examples
--------


```js
self.addEventListener("notificationclick", (event) => {
  console.log("On notification click: ", event.notification.tag);
  event.notification.close();

  // This looks to see if the current is already open and
  // focuses if it is
  event.waitUntil(
    clients
      .matchAll({
        type: "window",
      })
      .then((clientList) => {
        for (const client of clientList) {
          if (client.url === "/" && "focus" in client) {
            if (!client.focused) return client.focus();
          }
        }

        if (clients.openWindow) return clients.openWindow("/");
      }),
  );
});
```

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

| Specification |
| --- |
| Service Workers # client-focused |

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

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

The **`getContributingSources()`** method of the `RTCRtpReceiver` interface returns an array of objects, each corresponding to one CSRC (contributing source) identifier received by the current `RTCRtpReceiver` in the last ten seconds.

Syntax
------


```js
getContributingSources()
```

### Parameters

None.

### Return value

 An array of objects, each describing one of the contributing sources that provided data to the incoming stream in the past ten seconds.
 These objects contain the following properties:

`audioLevel` Optional

A floating-point value between 0.0 and 1.0 specifying the audio level contained in the last RTP packet played from the contributing source.

 The value is on a linear scale and is defined in units of dBov, or decibels (overload).
 This is the amplitude relative to the point at which clipping of the audio begins to occur.
 A value of 1.0 represents 0 dBov (maximum volume), a value of 0.0 represents silence, and a value of 0.5 represents approximately 6 dB SPL (decibels of sound pressure level) change in the sound pressure level from 0 dBov.


If this property is not present then no volume level was provided by the source.

`rtpTimestamp` Optional

 The RTP timestamp (an integer `DOMHighResTimeStamp`) of the media.
 This source-generated timestamp indicates the time at which the media in this packet, scheduled for play out at the time indicated by `timestamp`, was initially sampled or generated.
 It may be useful for sequencing and synchronization purposes.


`source` Optional

 A positive integer value specifying the CSRC identifier of the contributing source.
 This uniquely identifies the source of the particular stream RTP packets.


`timestamp` Optional

A `DOMHighResTimeStamp` indicating the most recent time at which a frame originating from this source was delivered to the receiver's `MediaStreamTrack`

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcrtpreceiver-getcontributingsources |

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

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

The **`getParameters()`** method of the `RTCRtpReceiver` interface returns an object describing the current configuration for the encoding and transmission of media on the receiver's `track`.

Syntax
------


```js
getParameters()
```

### Parameters

None.

### Return value

An object indicating the current configuration of the receiver.

`codecs`

 An array of `RTCRtpCodecParameters` objects describing the set of codecs from which the sender or receiver will choose.
 This parameter cannot be changed once initially set.


`headerExtensions`

 An array of zero or more RTP header extensions, each identifying an extension supported by the sender or receiver.
 Header extensions are described in RFC 3550, section 5.3.1. This parameter cannot be changed once initially set.


`rtcp`

 An `RTCRtcpParameters` object providing the configuration parameters used for RTCP on the sender or receiver.
 This parameter cannot be changed once initially set.


Examples
--------

This example obtains the canonical name (CNAME) being used for RTCP on an `RTCRtpReceiver`.


```js
function getRtcpCNAME(receiver) {
  let parameters = receiver.getParameters();

  return parameters.rtcp.cname;
}
```

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcrtpreceiver-getparameters |

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

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

The **`getSynchronizationSources()`** method of the `RTCRtpReceiver` interface returns an array of objects, each corresponding to one SSRC (synchronization source) identifier received by the current `RTCRtpReceiver` in the last ten seconds.

Syntax
------


```js
getSynchronizationSources()
```

### Parameters

None.

### Return value

 An array of objects, each describing one of the synchronization sources that provided data to the incoming stream in the past ten seconds.
 These objects contain the following properties:

`audioLevel`

A floating-point value between 0.0 and 1.0 specifying the audio level contained in the last RTP packet played from the synchronization source.

 The value is on a linear scale and is defined in units of dBov, or decibels (overload).
 This is the amplitude relative to the point at which clipping of the audio begins to occur.
 A value of 1.0 represents 0 dBov (maximum volume), a value of 0.0 represents silence, and a value of 0.5 represents approximately 6 dB SPL (decibels of sound pressure level) change in the sound pressure level from 0 dBov.


This value is required and always present.

`rtpTimestamp` Optional

 The RTP timestamp (an integer `DOMHighResTimeStamp`) of the media.
 This source-generated timestamp indicates the time at which the media in this packet, scheduled for play out at the time indicated by `timestamp`, was initially sampled or generated.
 It may be useful for sequencing and synchronization purposes.


`source` Optional

 A positive integer value specifying the SSRC identifier of the synchronization source.
 This uniquely identifies the source of the particular stream RTP packets.


`timestamp` Optional

A `DOMHighResTimeStamp` indicating the most recent time at which a frame originating from this source was delivered to the receiver's `MediaStreamTrack`

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcrtpreceiver-getsynchronizationsources |

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

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

 The **`transform`** property of the `RTCRtpReceiver` object is used to insert a transform stream (`TransformStream`) running in a worker thread into the receiver pipeline.
 This allows stream transforms to be applied to encoded video and audio frames as they arrive from the packetizer (before they are played/rendered).

 The transform that is to be added is defined using an `RTCRtpScriptTransform` and its associated `Worker`.
 If the transform is set in the peer connection `track` event handler, the transform stream will receive the first full incoming frame for the track.

### Value

A `RTCRtpScriptTransform`, or `null` if the receiver has no associated transform stream.

Example
-------

Note that this is part of a larger example in the guide topic Using WebRTC Encoded Transforms.

Adding a transform for incoming frames
--------------------------------------

 This example shows how you add a WebRTC encoded transform to modify an incoming stream.
 The code assumes that there is an `RTCPeerConnection` called `peerConnection` that is already connected to a remote peer.

 To add a transform stream into the pipeline for incoming frames we need to construct an `RTCRtpScriptTransform` and assign it to the receiver's `transform` property.
 We can do this in the `track` event handler as shown.
 This event is fired on the peer connection whenever the remote end sends a track.
 The `event.receiver` property is an `RTCRtpReceiver`.


```js
const worker = new Worker("worker.js");
peerConnection.ontrack = (event) => {
  event.receiver.transform = new RTCRtpScriptTransform(worker, {
    someOption: "receiverTransform",
  });
};
```


 Because the transform is constructed immediately after creation of the `RTCRtpReceiver`, it will receive the first incoming frame.
 The object passed as the second parameter in the `RTCRtpScriptTransform` constructor is sent to the worker thread, and can be used by worker code to provide a different transform for the incoming frames than is used for outgoing frames.

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

| Specification |
| --- |
| WebRTC Encoded Transform # dom-rtcrtpsender-transform |

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

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

See also
--------

* Using WebRTC Encoded Transforms
* `RTCRtpSender.transform`
RTCRtpReceiver: getStats() method
=================================

The `RTCRtpReceiver` method **`getStats()`** asynchronously requests an `RTCStatsReport` object which provides statistics about incoming traffic on the owning `RTCPeerConnection`, returning a `Promise` whose fulfillment handler will be called once the results are available.

Syntax
------


```js
getStats()
```

### Parameters

None.

### Return value

 A JavaScript `Promise` which is fulfilled once the statistics are available.
 The promise's fulfillment handler receives as a parameter a `RTCStatsReport` object containing the collected statistics.

The returned statistics include those from all streams which are coming in through the `RTCRtpReceiver`, as well as any of their dependencies.

These might include, for example, statistics with types: `inbound-rtp`, `candidate-pair`, `local-candidate`, `remote-candidate`.

Examples
--------

This simple example obtains the statistics for an `RTCRtpReceiver` and updates an element's `innerText` to display the number of packets lost.


```js
receiver.getStats().then((stats) => {
  document.getElementById("lostpackets").innerText = stats.packetsLost;
});
```

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # widl-RTCRtpReceiver-getStats-Promise-RTCStatsReport |

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

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

See also
--------

* WebRTC API
* `RTCStatsReport`
* `RTCRtpSender.getStats()`
* `RTCPeerConnection.getStats()`
RTCRtpReceiver: track property
==============================

 The **`track`** read-only property of the
 `RTCRtpReceiver` interface returns the `MediaStreamTrack`
 associated with the current `RTCRtpReceiver` instance.

Value
-----

A `MediaStreamTrack` instance.

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtpreceiver-track |

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

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

 The read-only **`transport`** property of an
 `RTCRtpReceiver` object provides the `RTCDtlsTransport` object
 used to interact with the underlying transport over which the receiver is exchanging
 Real-time Transport Control Protocol (RTCP) packets.

 This transport is responsible for receiving the data for the media on the receiver's
 `track`.

Syntax
------


```js
rtcRtpReceiver.transport
```

### Value

 An `RTCDtlsTransport` object representing the underlying transport being
 used by the receiver to exchange packets with the remote peer, or `null` if
 the receiver isn't yet connected to a transport.

Description
-----------

 When the `RTCRtpReceiver` is first created, the value of
 `transport` is `null`. This is replaced with an
 `RTCDtlsTransport` once the receiver's transport has been established.

 Note that when bundling is in effect—that is, when the `RTCPeerConnection`
 was created with a configuration object whose `bundlePolicy` is `max-compat`
 or `max-bundle`—multiple receivers may be sharing the same transport; in this
 case, all of them are using the same connection to transmit and/or receive
 RTP and RTCP packets.

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcrtpreceiver-transport |

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

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

 The read-only `RTCDataChannel` property **`label`**
 returns a string containing a name describing the data channel. These
 labels are not required to be unique.

 You may use the label as you wish; you could use it to identify all the channels that
 are being used for the same purpose, by giving them all the same name. Or you could give
 each channel a unique label for tracking purposes. It's entirely up to the design
 decisions made when building your site or app.

A unique ID can be found in the `id` property.

**Note:** A data channel's label is set when the channel is created by calling
 `RTCPeerConnection.createDataChannel()`. It cannot be changed after that.


Value
-----

 A string identifier assigned by the website or app when the data channel was created,
 as specified when `RTCPeerConnection.createDataChannel()` was called to
 create the channel.

Example
-------

 This sample creates a data channel on an `RTCPeerConnection`, then, some
 time later, sets the content of a UI element to display the channel's name.


```js
const pc = new RTCPeerConnection();
const dc = pc.createDataChannel("my channel");

// …

document.getElementById("channel-name").innerHTML =
  `<span class='channelName'>${dc.label}</span>`;
```

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-datachannel-label |

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

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

See also
--------

* WebRTC
* `RTCDataChannel`
* `RTCDataChannel.id`
* `RTCPeerConnection.createDataChannel()`