recursal/MDN huggingface dataset:
TextTrackList: addtrack event
=============================

The **`addtrack`** event is fired when a track is added to a `TextTrackList`.

Syntax
------

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


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

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

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

A `TrackEvent`. Inherits from `Event`.

Event

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

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

`track` Read only 

The `TextTrack` object to which the event refers.

Examples
--------

Using `addEventListener()`:


```js
const mediaElement = document.querySelector("video, audio");

mediaElement.textTracks.addEventListener("addtrack", (event) => {
  console.log(`Text track: ${event.track.label} added`);
});
```


Using the `onaddtrack` event handler property:


```js
const mediaElement = document.querySelector("video, audio");

mediaElement.textTracks.onaddtrack = (event) => {
  console.log(`Text track: ${event.track.label} added`);
};
```

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

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

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

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

See also
--------

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

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

The **`readable`** property of the `MediaStreamTrackProcessor` interface returns a `ReadableStream`.

Value
-----

A `ReadableStream`.

Examples
--------

In the following example video frames from the `ReadableStream` are transformed.


```js
const trackProcessor = new MediaStreamTrackProcessor({ track: videoTrack });
const trackGenerator = new MediaStreamTrackGenerator({ kind: "video" });

/\* \*/

trackProcessor.readable
  .pipeThrough(transformer)
  .pipeTo(trackGenerator.writable);
```

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

| Specification |
| --- |
| MediaStreamTrack Insertable Media Processing using Streams # dom-mediastreamtrackprocessor-readable |

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

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

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

The **`MediaStreamTrackProcessor()`** constructor creates a new `MediaStreamTrackProcessor` object which consumes a `MediaStreamTrack` object's source and generates a stream of media frames.

Syntax
------


```js
new MediaStreamTrackProcessor(options)
```

### Parameters

`options`

An object with the following properties:

`track`

A `MediaStreamTrack`.

`maxBufferSize` Optional

An integer specifying the maximum number of media frames to be buffered.


Examples
--------

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


```js
const trackProcessor = new MediaStreamTrackProcessor({ track: videoTrack });
```

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

| Specification |
| --- |
| MediaStreamTrack Insertable Media Processing using Streams # dom-mediastreamtrackprocessor-mediastreamtrackprocessor |

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

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

The **`data`** property of the `RTCEncodedAudioFrame` interface returns a buffer containing the data for an encoded frame.

Value
-----

An `ArrayBuffer`.

Examples
--------

This example WebRTC encoded transform shows how you might get the frame data in a `TransformStream` `transform()` function modify the bits.

 The `transform()` function constructs a `DataView` on the buffer in the frame `data` property, and also creates a view on a new `ArrayBuffer`.
 It then writes the negated bytes in the original data to the new buffer, assigns the buffer to the encoded frame `data` property, and enqueues the modified frame on the stream.


```js
addEventListener("rtctransform", (event) => {
  const transform = new TransformStream({
    async transform(encodedFrame, controller) {
      // Reconstruct the original frame.
      const view = new DataView(encodedFrame.data);

      // Construct a new buffer
      const newData = new ArrayBuffer(encodedFrame.data.byteLength);
      const newView = new DataView(newData);

      // Negate all bits in the incoming frame
      for (let i = 0; i < encodedFrame.data.byteLength; ++i) {
        newView.setInt8(i, ~view.getInt8(i));
      }

      encodedFrame.data = newData;
      controller.enqueue(encodedFrame);
    },
  });
  event.transformer.readable
    .pipeThrough(transform)
    .pipeTo(event.transformer.writable);
});
```


Note that the surrounding code shown here is described in Using WebRTC Encoded Transforms.

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

| Specification |
| --- |
| WebRTC Encoded Transform # dom-rtcencodedaudioframe-data |

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

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

See also
--------

* Using WebRTC Encoded Transforms
RTCEncodedAudioFrame: timestamp property
========================================

The readonly **`timestamp`** property of the `RTCEncodedAudioFrame` interface indicates the time at which frame sampling started.

Value
-----

A positive integer containing the sampling instant of the first byte in this frame, in microseconds.

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

| Specification |
| --- |
| WebRTC Encoded Transform # dom-rtcencodedaudioframe-timestamp |

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

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

See also
--------

* Using WebRTC Encoded Transforms
CompressionStream: CompressionStream() constructor
==================================================

The **`CompressionStream()`** constructor creates a new `CompressionStream` object which compresses a stream of data.

Syntax
------


```js
new CompressionStream(format)
```

### Parameters

`format`

One of the following allowed compression formats:

`"gzip"`

Compresses the stream using the GZIP format.

`"deflate"`

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


`"deflate-raw"`

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


Exceptions
----------

`TypeError`

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

Examples
--------

In this example a stream is compressed using gzip compression.


```js
const compressedReadableStream = inputReadableStream.pipeThrough(
  new CompressionStream("gzip"),
);
```

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

| Specification |
| --- |
| Compression Streams # dom-compressionstream-compressionstream |

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

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

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

Value
-----

A `WritableStream`.

Examples
--------

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


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

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

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

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

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

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

Value
-----

A `ReadableStream`.

Examples
--------

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


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

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

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

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

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

 The **`mode`** read-only property of the `Request`
 interface contains the mode of the request (e.g., `cors`,
 `no-cors`, `same-origin`, `navigate` or `websocket`.) This is used
 to determine if cross-origin requests lead to valid responses, and which properties of the response are readable.

Value
-----

A `RequestMode` value.

The associated *mode*, available values of which are:

`same-origin`

 If a request is made to another origin with this mode
 set, the result is an error. You could use this to ensure that a request is always
 being made to your origin.


`no-cors`

 Prevents the method from being anything other than `HEAD`, `GET` or `POST`, and the headers from being anything other than CORS-safelisted request headers.
 If any ServiceWorkers intercept these requests, they may not add or override any headers except for those that are CORS-safelisted request headers.
 In addition, JavaScript may not access any properties of the resulting `Response`.
 This ensures that ServiceWorkers do not affect the semantics of the Web and prevents security and privacy issues arising from leaking data across domains.


`cors`

 Allows cross-origin requests, for example to access various
 APIs offered by 3rd party vendors. These are expected to adhere to the CORS protocol. Only a limited set of headers are exposed in the `Response`, but the body is
 readable.


`navigate`

A mode for supporting navigation. The `navigate` value is intended to be used only by HTML navigation. A navigate request is created only while navigating between documents.

`websocket`

A special mode used only when establishing a WebSocket connection.


### Default mode

 Requests can be initiated in a variety of ways, and the mode for a request depends on
 the particular means by which it was initiated.

 For example, when a `Request` object is created using the
 `Request()` constructor, the value of the `mode` property
 for that `Request` is set to `cors`.

 However, for requests created other than by the `Request()`
 constructor, `no-cors` is typically used as the mode; for example, for
 embedded resources where the request is initiated from markup, unless the
 `crossorigin`
 attribute is present, the request is in most cases made using the `no-cors`
 mode — that is, for the `<link>` or `<script>` elements
 (except when used with modules), or `<img>`, `<audio>`,
 `<video>`, `<object>`, `<embed>`, or
 `<iframe>` elements.

Examples
--------

 In the following snippet, we create a new request using the
 `Request()` constructor (for an image file in the same directory as
 the script), then save the request mode in a variable:


```js
const myRequest = new Request("flowers.jpg");
const myMode = myRequest.mode; // returns "cors" by default
```

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

| Specification |
| --- |
| Fetch Standard # ref-for-dom-request-mode② |

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

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

See also
--------

* ServiceWorker API
* HTTP access control (CORS)
* HTTP
Request: blob() method
======================

 The **`blob()`** method of the `Request` interface
 reads the request body and returns it as a promise that resolves with a `Blob`.

Syntax
------


```js
blob()
```

### Parameters

None.

### Return value

A promise that resolves with a `Blob`.

Examples
--------


```js
const obj = { hello: "world" };
const myBlob = new Blob([JSON.stringify(obj, null, 2)], {
  type: "application/json",
});

const request = new Request("/myEndpoint", {
  method: "POST",
  body: myBlob,
});

request.blob().then((myBlob) => {
  // do something with the blob sent in the request
});
```

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

| Specification |
| --- |
| Fetch Standard # ref-for-dom-body-blob① |

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

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

See also
--------

* `Response.blob()`
Request: integrity property
===========================

The **`integrity`** read-only property of the `Request` interface contains the subresource integrity value of the request.

Value
-----

The value that was passed as the `options.integrity` argument when constructing the `Request`.

If an integrity has not been specified, the property returns `''`.

Examples
--------

In the following snippet, we create a new request using the `Request()` constructor (for an image file in the same directory as the script), then reads the request's integrity. Because the request was created without a specific integrity, the property returns an empty string.


```js
const myRequest = new Request("flowers.jpg");
console.log(myRequest.integrity); // ""
```


In the example below, the request was created with a specific integrity value, so the property returns that value. Note that there's no validation of the integrity value; the property returns exactly what was passed in.


```js
const myRequest = new Request("flowers.jpg", {
  integrity: "sha256-abc123",
});
console.log(myRequest.integrity); // "sha256-abc123"
```

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

| Specification |
| --- |
| Fetch Standard # ref-for-dom-request-integrity② |

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

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

See also
--------

* ServiceWorker API
* HTTP access control (CORS)
* HTTP
Request: headers property
=========================

 The **`headers`** read-only property of the
 `Request` interface contains the `Headers` object associated
 with the request.

Value
-----

A `Headers` object.

Examples
--------

 In the following snippet, we create a new request using the
 `Request()` constructor (for an image file in the same directory as
 the script), then save the request headers in a variable:


```js
const myRequest = new Request("flowers.jpg");
const myHeaders = myRequest.headers; // Headers {}
```


 To add a header to the `Headers` object we use
 `Headers.append`; we then create a new `Request` along with a
 2nd init parameter, passing headers in as an init option:


```js
const myHeaders = new Headers();
myHeaders.append("Content-Type", "image/jpeg");

const myInit = {
  method: "GET",
  headers: myHeaders,
  mode: "cors",
  cache: "default",
};

const myRequest = new Request("flowers.jpg", myInit);

const myContentType = myRequest.headers.get("Content-Type"); // returns 'image/jpeg'
```

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

| Specification |
| --- |
| Fetch Standard # ref-for-dom-request-headers② |

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

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

See also
--------

* ServiceWorker API
* HTTP access control (CORS)
* HTTP
Request: url property
=====================

 The **`url`** read-only property of the `Request`
 interface contains the URL of the request.

Value
-----

A string indicating the URL of the request.

Examples
--------

 In the following snippet, we create a new request using the
 `Request()` constructor (for an image file in the same directory as
 the script), then save the URL of the request in a variable:


```js
const myRequest = new Request("flowers.jpg");
const myURL = myRequest.url; // "https://github.com/mdn/dom-examples/tree/main/fetch/fetch-request/flowers.jpg"
```

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

| Specification |
| --- |
| Fetch Standard # ref-for-dom-request-url③ |

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

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

See also
--------

* ServiceWorker API
* HTTP access control (CORS)
* HTTP
Request: signal property
========================

The read-only **`signal`** property of the `Request` interface returns the `AbortSignal` associated with the request.

Value
-----

An `AbortSignal` object.

Examples
--------


```js
// Create a new abort controller
const controller = new AbortController();

// Create a request with this controller's AbortSignal object
const req = new Request("/", { signal: controller.signal });

// Add an event handler logging a message in case of abort
req.signal.addEventListener("abort", () => {
  console.log("abort");
});

// In case of abort, log the AbortSignal reason, if any
fetch(req).catch(() => {
  if (signal.aborted) {
    if (signal.reason) {
      console.log(`Request aborted with reason: ${signal.reason}`);
    } else {
      console.log("Request aborted but no reason was given.");
    }
  } else {
    console.log("Request not aborted, but terminated abnormally.");
  }
});

// Actually abort the request
controller.abort();
```

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

| Specification |
| --- |
| Fetch Standard # ref-for-dom-request-signal② |

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

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

 The **`arrayBuffer()`** method of the `Request` interface
 reads the request body and returns it as a promise that resolves with an `ArrayBuffer`.

Syntax
------


```js
arrayBuffer()
```

### Parameters

None.

### Return value

A promise that resolves with an `ArrayBuffer`.

Examples
--------


```js
const myArray = new Uint8Array(10);

const request = new Request("/myEndpoint", {
  method: "POST",
  body: myArray,
});

request.arrayBuffer().then((buffer) => {
  // do something with the buffer sent in the request
});
```

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

| Specification |
| --- |
| Fetch Standard # ref-for-dom-body-arraybuffer① |

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

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

See also
--------

* `Response.arrayBuffer()`
Request: redirect property
==========================

The **`redirect`** read-only property of the `Request` interface contains the mode for how redirects are handled.

Value
-----

A `RequestRedirect` enum value, which can be one the following strings:

* `follow`
* `error`
* `manual`

If not specified when the request is created, it takes the default value of `follow`.

Examples
--------

In the following snippet, we create a new request using the `Request()` constructor (for an image file in the same directory as the script), then save the request `redirect` value in a variable:


```js
const myRequest = new Request("flowers.jpg");
const myCred = myRequest.redirect;
```

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

| Specification |
| --- |
| Fetch Standard # ref-for-dom-request-redirect② |

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

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

See also
--------

* ServiceWorker API
* HTTP access control (CORS)
* HTTP
Request: text() method
======================

 The **`text()`** method of the `Request` interface
 reads the request body and returns it as a promise that resolves with a `String`.
 The response is *always* decoded using UTF-8.

Syntax
------


```js
text()
```

### Parameters

None.

### Return value

A Promise that resolves with a `String`.

Examples
--------


```js
const text = "Hello world";

const request = new Request("/myEndpoint", {
  method: "POST",
  body: text,
});

request.text().then((text) => {
  // do something with the text sent in the request
});
```

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

| Specification |
| --- |
| Fetch Standard # ref-for-dom-body-text① |

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

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

See also
--------

* `Response.text()`
Request: referrer property
==========================

 The **`referrer`** read-only property of the
 `Request` interface is set by the user agent to be the referrer of the
 Request. (e.g., `client`, `no-referrer`, or a URL.)


**Note:** If `referrer`'s value is `no-referrer`,
 it returns an empty string.


Value
-----

A string representing the request's referrer.

Examples
--------

 In the following snippet, we create a new request using the
 `Request()` constructor (for an image file in the same directory as
 the script), then save the request referrer in a variable:


```js
const myRequest = new Request("flowers.jpg");
const myReferrer = myRequest.referrer; // returns "about:client" by default
```

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

| Specification |
| --- |
| Fetch Standard # ref-for-dom-request-referrer① |

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

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

See also
--------

* ServiceWorker API
* HTTP access control (CORS)
* HTTP
Request: clone() method
=======================

The **`clone()`** method of the `Request` interface creates a copy of the current `Request` object.

 Like the underlying `ReadableStream.tee` api,
 the `body` of a cloned `Response`
 will signal backpressure at the rate of the *faster* consumer of the two bodies,
 and unread data is enqueued internally on the slower consumed `body`
 without any limit or backpressure.
 Beware when you construct a `Request` from a stream and then `clone` it.

`clone()` throws a `TypeError` if the request body has already been used. In fact, the main reason `clone()` exists is to allow multiple uses of body objects (when they are one-use only.)

If you intend to modify the request, you may prefer the `Request` constructor.

Syntax
------


```js
clone()
```

### Parameters

None.

### Return value

A `Request` object, which is an exact copy of the `Request` that `clone()` was called on.

Examples
--------

In the following snippet, we create a new request using the `Request()` constructor (for an image file in the same directory as the script), then clone the request.


```js
const myRequest = new Request("flowers.jpg");
const newRequest = myRequest.clone(); // a copy of the request is now stored in newRequest
```

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

| Specification |
| --- |
| Fetch Standard # ref-for-dom-request-clone① |

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

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

See also
--------

* ServiceWorker API
* HTTP access control (CORS)
* HTTP