recursal/MDN huggingface dataset:
USB: getDevices() method
========================

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

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

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

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

 The **`getDevices`** method of the `USB` interface
 returns a `Promise` that resolves with an array of `USBDevice`
 objects for paired attached devices. For information on pairing devices, see
 `USB.requestDevice()`.

Syntax
------


```js
getDevices()
```

### Parameters

None.

### Return value

 A `Promise` that resolves with an array of `USBDevice`
 objects.

Examples
--------

 The following example logs the product name and serial number of paired devices to the
 console. For information on pairing devices, see
 `USB.requestDevice()`.


```js
navigator.usb.getDevices().then((devices) => {
  console.log(`Total devices: ${devices.length}`);
  devices.forEach((device) => {
    console.log(
      `Product name: ${device.productName}, serial number ${device.serialNumber}`,
    );
  });
});
```

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

| Specification |
| --- |
| WebUSB API # ref-for-dom-usb-getdevices② |

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

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

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


**Note:** You will rarely if ever construct an `RTCDataChannelEvent` by hand; these
 events are normally created and sent by the WebRTC layer itself.


Syntax
------


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

### Parameters

`type`

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


`options`

An object that, *in addition of the properties defined in `Event()`*, can have the following properties:

`channel`

A `RTCDataChannel`, representing the data channel being associated with the event.


### Return value

A new `RTCDataChannelEvent` object configured as specified.

Example
-------

 In this example, a new `datachannel` event is created. `dc` is a
 data channel which already exists.


```js
const event = new RTCDataChannelEvent("datachannel", { channel: dc });
```

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcdatachannelevent-constructor |

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

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

See also
--------

* WebRTC
* `RTCDataChannel`
* `RTCPeerConnection`
* A simple RTCDataChannel sample
RTCDataChannelEvent: channel property
=====================================

 The read-only property **`RTCDataChannelEvent.channel`**
 returns the `RTCDataChannel` associated with the event.

Value
-----

 A `RTCDataChannel` object representing the data channel linking the
 receiving `RTCPeerConnection` to its remote peer.

Example
-------

 The first line of code in the `datachannel` event handler shown below takes
 the channel from the event object and saves it locally for use by the code handling data
 traffic.


```js
pc.ondatachannel = (event) => {
  inboundDataChannel = event.channel;
  inboundDataChannel.onmessage = handleIncomingMessage;
  inboundDataChannel.onopen = handleChannelOpen;
  inboundDataChannel.onclose = handleChannelClose;
};
```

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-datachannelevent-channel |

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

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

See also
--------

* `datachannel`
* `RTCDataChannel`
* A simple RTCDataChannel sample
* `RTCPeerConnection`
NDEFRecord: toRecords() 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 **`toRecords()`**
 method of the `NDEFRecord` interface converts
 `NDEFRecord.data` to a sequence of records based on
 `NDEFRecord.recordType`, and returns the result. This allows
 parsing the payloads of record types which may contain nested records, such
 as smart poster and external type records.

Syntax
------


```js
toRecords()
```

### Parameters

None.

### Return value

A list of `NDEFRecord`s.

Exceptions
----------

`NotSupported` `DOMException`

 Indicates that the User Agent does not know how to parse this combination of
 `NDEFRecord.data` and `NDEFRecord.recordType`.


Examples
--------

Read an external record with an NDEF message as payload

 The example uses external type records to create application-defined records.
 These records may contain an `NDEFMessage` as payload, with its own
 `NDEFRecord` objects, including local types that are used in the
 context of the application. Notice that the smart poster record type also
 contains an NDEF message as payload.

 Because NDEF gives no guarantee on the ordering of records, using an external
 type record with an NDEF message as payload can be useful for encapsulating
 related data.

 This example shows how to read an external record for social posts, which
 contains an `NDEFMessage`, containing a text record and a record
 with the local type "act" (action), with a definition borrowed from smart
 poster, but used in local application context.


```js
const ndefReader = new NDEFReader();
await ndefReader.scan();
ndefReader.onreading = (event) => {
  const externalRecord = event.message.records.find(
    (record) => record.type === "example.com:smart-poster",
  );

  let action, text;

  for (const record of externalRecord.toRecords()) {
    if (record.recordType === "text") {
      const decoder = new TextDecoder(record.encoding);
      text = decoder.decode(record.data);
    } else if (record.recordType === ":act") {
      action = record.data.getUint8(0);
    }
  }

  switch (action) {
    case 0: // do the action
      console.log(`Post "${text}" to timeline`);
      break;
    case 1: // save for later
      console.log(`Save "${text}" as a draft`);
      break;
    case 2: // open for editing
      console.log(`Show editable post with "${text}"`);
      break;
  }
};
```

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

| Specification |
| --- |
| Web NFC API # dom-ndefrecord-torecords |

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

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

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

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

 The **`encoding`**
 property of the `NDEFRecord` interface returns the encoding of
 a textual payload, or `null` otherwise.

Syntax
------


```js
NDEFRecord.encoding
```

### Value

 A string which can be one of the following: `"utf-8"`,
 `"utf-16"`, `"utf-16le"`, or `"utf-16be"`.

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

| Specification |
| --- |
| Web NFC API # dom-ndefrecord-encoding |

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

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

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

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

 The **`lang`**
 property of the `NDEFRecord` interface returns the language of
 a textual payload, or `null` if one was not supplied.

 The record might be missing a language tag, for example, if the recorded information is
 not locale-specific.

Syntax
------


```js
NDEFRecord.lang
```

### Value

A string.

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

| Specification |
| --- |
| Web NFC API # dom-ndefrecord-lang |

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

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

See also
--------

* HTML `lang` attribute, that declares content language of the document or its elements
* HTTP headers that declare content language: `Content-Language` and `Accept-Language`
NDEFRecord: recordType property
===============================

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

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

 The **`recordType`**
 property of the `NDEFRecord` interface returns the record type of the record.

Syntax
------


```js
NDEFRecord.recordType
```

### Value

A string which can be one of the following:

`"empty"`

An empty NDEF record.

`"text"`

A text NDEF record.

`"url"`

A URI NDEF record.

`"smart-poster"`

A "smart poster" NDEF record.

`"absolute-url"`

An absolute URL NDEF record.

`"mime"`

A MIME type NDEF record.

`"unknown"`

The NDEF record type is not known.

local type name

 Represents a local type name, frequently used to specify NDEF record embedded within
 another record.


external type name

A custom string consisting of a domain name and custom type name separated by a colon (":").

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

| Specification |
| --- |
| Web NFC API # dom-ndefrecord-recordtype |

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

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

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

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

 The **`id`** property of the
 `NDEFRecord` interface returns the record identifier, which is an
 absolute or relative URL used to identify the record.

 This identifier is created by the generator of the record which is solely responsible
 for enforcing record identifier uniqueness. Web NFC does not sign the NFC content, thus
 record consumer should not make any assumptions about integrity or authenticity of the
 identifier or any other part of the records.

Syntax
------


```js
NDEFRecord.id
```

### Value

A string.

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

| Specification |
| --- |
| Web NFC API # dom-ndefrecord-id |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
NDEFRecord: NDEFRecord() 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 **`NDEFRecord()`**
 constructor of the Web NFC API returns a
 newly constructed `NDEFRecord` object that represents data that can be
 read from, or written to, compatible NFC devices; e.g. NFC tags supporting NDEF.

Syntax
------


```js
new NDEFRecord(options)
```

### Parameters

`options`

An object with the following properties:

`data` Optional

Contains the data to be transmitted. It can be a string object or literal, an `ArrayBuffer`, a `TypedArray`, a `DataView`, or an array of nested records.

`encoding` Optional

A string specifying the record's encoding.

`id` Optional

A developer-defined identifier for the record.

`lang` Optional

A valid language tag according to RFC 5646: Tags for Identifying Languages (also known as BCP 47).

`mediaType` Optional

A valid MIME type.

`recordType`

A string indicating the type of data stored in `data`. It must be one of the following values:

`"absolute-url"`

An absolute URL to the data.

`"empty"`

An empty `NDEFRecord`.

`"mime"`

A valid MIME type.

`"smart-poster"`

A smart poster as defined by the NDEF-SMARTPOSTER specification.

`"text"`

Text as defined by the NDEF-TEXT specification.

`"unknown"`

The record type is not known.

`"URL"`

A URL as defined by the NDEF-URI specification.


### Return value

A new `NDEFRecord`.

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

| Specification |
| --- |
| Web NFC API # dom-ndefrecord-constructor |

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

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

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

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

 The **`data`**
 property of the `NDEFRecord` interface returns a
 `DataView` containing the raw bytes of the record's payload.

Syntax
------


```js
NDEFRecord.data
```

### Value

A `DataView` that contains encoded payload data of the record.

Examples
--------

 The following example loops over the records in an `NDEFMessage`
 object, which is retrieved from `NDEFReadingEvent.message`. After
 selecting a record based on its `mediaType`, it then decodes what's stored in the `data` property.


```js
const ndef = new NDEFReader();
await ndef.scan();
ndef.onreading = (event) => {
  const decoder = new TextDecoder();
  for (const record of event.message.records) {
    if (record.mediaType === "application/json") {
      const json = JSON.parse(decoder.decode(record.data));
      const article = /^[aeio]/i.test(json.title) ? "an" : "a";
      console.log(`${json.name} is ${article} ${json.title}`);
    }
  }
};
```

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

| Specification |
| --- |
| Web NFC API # dom-ndefrecord-data |

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

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

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

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

 The **`mediaType`**
 property of the `NDEFRecord` interface returns the MIME type of the record. This value will be `null` if `recordType` is not equal to `"mime"`.

Syntax
------


```js
NDEFRecord.mediaType
```

### Value

 A string, containing the MIME type of the record
 payload.

Examples
--------

The following example loops over the records in an `NDEFMessage` object, which is retrieved from `NDEFReadingEvent.message`. It then uses the `mediaType` property to determine which of the records to parse.


```js
const ndef = new NDEFReader();
await ndef.scan();
ndef.onreading = (event) => {
  const decoder = new TextDecoder();
  for (const record of event.message.records) {
    if (record.mediaType === "application/json") {
      const json = JSON.parse(decoder.decode(record.data));
      const article = /^[aeio]/i.test(json.title) ? "an" : "a";
      console.log(`${json.name} is ${article} ${json.title}`);
    }
  }
};
```

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

| Specification |
| --- |
| Web NFC API # dom-ndefrecord-mediatype |

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

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

 The **`CanvasGradient.addColorStop()`** method adds a new color stop,
 defined by an `offset` and a `color`, to a given canvas gradient.

Syntax
------


```js
addColorStop(offset, color)
```

### Parameters

`offset`

 A number between `0` and `1`, inclusive, representing the
 position of the color stop. `0` represents the start of the gradient and
 `1` represents the end.


`color`

 A CSS `<color>` value
 representing the color of the stop.


### Return value

None (`undefined`).

### Exceptions

`IndexSizeError` `DOMException`

Thrown if `offset` is not between 0 and 1 (both included).

`SyntaxError` `DOMException`

Thrown if `color` cannot be parsed as a CSS `<color>` value.

Examples
--------

### Adding stops to a gradient

 This example uses the `addColorStop` method to add stops to a linear
 `CanvasGradient` object. The gradient is then used to fill a rectangle.

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

let gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "green");
gradient.addColorStop(0.7, "white");
gradient.addColorStop(1, "pink");
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);
```


#### Result

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

| Specification |
| --- |
| HTML Standard # dom-canvasgradient-addcolorstop-dev |

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

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

See also
--------

* The interface defining this method: `CanvasGradient`
* `CanvasRenderingContext2D.createLinearGradient()`
* `CanvasRenderingContext2D.createRadialGradient()`
TextTrackList: removeTrack event
================================

The **`removetrack`** event is fired when a track is removed from a `TextTrackList`.

Syntax
------

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


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

onremovetrack = (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("removetrack", (event) => {
  console.log(`Text track: ${event.track.label} removed`);
});
```


Using the `onremovetrack` event handler property:


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

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

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

| Specification |
| --- |
| HTML Standard # event-media-removetrack |
| HTML Standard # handler-tracklist-onremovetrack |

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

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

See also
--------

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

 The **`TextTrackList`** method
 **`getTrackById()`** returns the first
 `TextTrack` object from the track list whose
 `id` matches the
 specified string. This lets you find a specified track if you know its ID
 string.

Syntax
------


```js
getTrackById(id)
```

### Parameters

`id`

 A string indicating the ID of the track to locate within the track
 list.


### Return value

 A `TextTrack` object indicating the first track found within the
 `TextTrackList` whose `id` matches the specified string. If no
 match is found, this method returns `null`.

 The tracks are searched in their natural order; that is, in the order defined by the
 media resource itself, or, if the resource doesn't define an order, the relative order
 in which the tracks are declared by the media resource.

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

| Specification |
| --- |
| HTML Standard # dom-texttracklist-gettrackbyid-dev |

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

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

 The read-only **`TextTrackList`**
 property **`length`** returns the number of entries in the
 `TextTrackList`, each of which is a `TextTrack` representing
 one track in the media element.

 A value of 0 indicates that there are no text
 tracks in the media.

Value
-----

 A number indicating how many text tracks are included in the
 `TextTrackList`. Each track can be accessed by treating the
 `TextTrackList` as an array of objects of type `TextTrack`.

Examples
--------

 This snippet gets the number of text tracks in the first media element found in the
 DOM by `querySelector()`.


```js
const mediaElem = document.querySelector("video, audio");
let numTextTracks = 0;

if (mediaElem.textTracks) {
  numTextTracks = mediaElem.textTracks.length;
}
```


 Note that this sample checks to be sure `HTMLMediaElement.textTracks` is
 defined, to avoid failing on browsers without support for `TextTrack`.

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

| Specification |
| --- |
| HTML Standard # dom-texttracklist-length |

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

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

The **`change`** event is fired when a text track is made active or inactive, or a `TextTrackList` is otherwise changed.

Syntax
------

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


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

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

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

A generic `Event` with no added properties.

Examples
--------

Using `addEventListener()`:


```js
const mediaElement = document.querySelectorAll("video, audio")[0];
mediaElement.textTracks.addEventListener("change", (event) => {
  console.log(`'${event.type}' event fired`);
});
```


Using the `onchange` event handler property:


```js
const mediaElement = document.querySelector("video, audio");
mediaElement.textTracks.onchange = (event) => {
  console.log(`'${event.type}' event fired`);
};
```

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

| Specification |
| --- |
| HTML Standard # event-media-change |
| HTML Standard # handler-tracklist-onchange |

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

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

See also
--------

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