recursal/MDN huggingface dataset:
NavigatorUAData
===============

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

**Note:** This feature is available in Web Workers

The **`NavigatorUAData`** interface of the `User-Agent Client Hints API` returns information about the browser and operating system of a user.

An instance of this object is returned by calling `Navigator.userAgentData`. Therefore, this interface has no constructor.

**Note:** The terms *high entropy* and *low entropy* refer to the amount of information these values reveal about the browser. The values returned as properties are deemed low entropy, and unlikely to identify a user. The values returned by `NavigatorUAData.getHighEntropyValues()` could potentially reveal more information. These values are therefore retrieved via a `Promise`, allowing time for the browser to request user permission, or make other checks.

Instance properties
-------------------

`NavigatorUAData.brands` Read only  
Experimental

Returns an array of brand information containing the browser name and version.

`NavigatorUAData.mobile` Read only  
Experimental

Returns `true` if the user-agent is running on a mobile device.

`NavigatorUAData.platform` Read only  
Experimental

Returns the platform brand the user-agent is running on.

Instance methods
----------------

`NavigatorUAData.getHighEntropyValues()` 
Experimental

Returns a `Promise` that resolves with a dictionary object containing the *high entropy* values the user-agent returns.

`NavigatorUAData.toJSON()` 
Experimental

A *serializer* that returns a JSON representation of the *low entropy* properties of the `NavigatorUAData` object.

Examples
--------

### Getting the brands

The following example prints the value of `NavigatorUAData.brands` to the console.


```js
console.log(navigator.userAgentData.brands);
```

### Returning high entropy values

In the following value a number of hints are requested using the `NavigatorUAData.getHighEntropyValues()` method. When the promise resolves, this information is printed to the console.


```js
navigator.userAgentData
  .getHighEntropyValues([
    "architecture",
    "model",
    "platform",
    "platformVersion",
    "fullVersionList",
  ])
  .then((ua) => {
    console.log(ua);
  });
```

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

| Specification |
| --- |
| User-Agent Client Hints # navigatoruadata |

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

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

See also
--------

* Improving user privacy and developer experience with User-Agent Client Hints
XRCylinderLayer
===============

**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 **`XRCylinderLayer`** interface of the WebXR Device API is a layer that takes up a curved rectangular space in the virtual environment. Only the front of the layer is visible.

`XRCylinderLayer` requires the `layers` feature to be enabled for the `XRSession`. You can request it in `XRSystem.requestSession()`.

To create a new `XRCylinderLayer`, call either:

* `XRWebGLBinding.createCylinderLayer()` for a WebGL opaque texture layer, or
* `XRMediaBinding.createCylinderLayer()` for an HTML `<video>` playback layer.

To present layers to the XR device, add them to the `layers` render state using `XRSession.updateRenderState()`.

EventTarget

XRLayer

XRCompositionLayer

XRCylinderLayerInstance properties
-------------------

*Inherits properties from its parent, `XRCompositionLayer`.*

`XRCylinderLayer.aspectRatio` 
Experimental

A number indicating the ratio of the visible cylinder section. It is the ratio of the width of the visible section of the cylinder divided by its height. The width is calculated by multiplying the `radius` with the `centralAngle`.

`XRCylinderLayer.centralAngle` 
Experimental

A number indicating the angle in radians of the visible section of the cylinder.

`XRCylinderLayer.radius` 
Experimental

A number indicating the radius of the cylinder.

`XRCylinderLayer.space` 
Experimental

An `XRSpace` representing the layer's spatial relationship with the user's physical environment.

`XRCylinderLayer.transform` 
Experimental

An `XRRigidTransform` representing the offset and orientation relative to `space`.

Instance methods
----------------

*Inherits methods from its parents, `XRCompositionLayer` and `EventTarget`*.

Events
------

`redraw` 
Experimental

Sent to the `XRCylinderLayer` object when the underlying resources of the layer are lost or when the XR Compositor can no longer reproject the layer. If this event is sent, authors should redraw the content of the layer in the next XR animation frame.

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

| Specification |
| --- |
| WebXR Layers API Level 1 # xrcylinderayertype |

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

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

See also
--------

* `XRLayer`
* `EventTarget`
* `XRCompositionLayer`
* `XREquirectLayer`
* `XRCubeLayer`
* `XRQuadLayer`
* `XRProjectionLayer`
WebGLSampler
============

The **`WebGLSampler`** interface is part of the WebGL 2 API and stores sampling parameters for `WebGLTexture` access inside of a shader.

WebGLObject

WebGLSampler
When working with `WebGLSampler` objects, the following methods of the `WebGL2RenderingContext` are useful:

* `WebGL2RenderingContext.createSampler()`
* `WebGL2RenderingContext.deleteSampler()`
* `WebGL2RenderingContext.isSampler()`
* `WebGL2RenderingContext.bindSampler()`
* `WebGL2RenderingContext.getSamplerParameter()`
Examples
--------

### Creating a `WebGLSampler` object

in this example, `gl` must be a `WebGL2RenderingContext`. `WebGLSampler` objects are not available in WebGL 1.


```js
const sampler = gl.createSampler();
```

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

| Specification |
| --- |
| WebGL 2.0 Specification # 3.3 |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Insertable Streams for MediaStreamTrack API
===========================================

The **Insertable Streams for MediaStreamTrack API** provides a method of adding new components to a `MediaStreamTrack`.

Concepts and Usage
------------------

When processing video or audio, you sometimes want to insert additional elements or otherwise process the stream. For example, an application might include two tracks that need to be combined, such as a weather map and video of a presenter explaining the map. Or, you may want to do processing on a track to blur backgrounds, remove background noise, or introduce other elements (such as adding funny hats to people, and so on). This API provides a method to do this by giving direct access to the stream, thus allowing it to be manipulated.

Interfaces
----------

`MediaStreamTrackGenerator`

Creates a `WritableStream` that acts as a `MediaStreamTrack` source.

`MediaStreamTrackProcessor`

Consumes a `MediaStreamTrack` object's source and generates a stream of media frames.

Examples
--------

The following example is from the article Insertable streams for MediaStreamTrack, and demonstrates a barcode scanner application that highlights a barcode in a video stream. This transforms the stream accessed via `MediaStreamTrackProcessor.readable`.


```js
const stream = await getUserMedia({ video: true });
const videoTrack = stream.getVideoTracks()[0];

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

const transformer = new TransformStream({
  async transform(videoFrame, controller) {
    const barcodes = await detectBarcodes(videoFrame);
    const newFrame = highlightBarcodes(videoFrame, barcodes);
    videoFrame.close();
    controller.enqueue(newFrame);
  },
});

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

The **`HTMLHRElement`** interface provides special properties (beyond those of the `HTMLElement` interface it also has available to it by inheritance) for manipulating `<hr>` elements.

EventTarget

Node

Element

HTMLElement

HTMLHRElementInstance properties
-------------------

*Inherits properties from its parent, `HTMLElement`.*

`HTMLHRElement.align` 
Deprecated

A string, an enumerated attribute indicating alignment of the rule with respect to the surrounding context.

`HTMLHRElement.color` 
Deprecated

A string representing the name of the color of the rule.

`HTMLHRElement.noshade` 
Deprecated

A boolean value that sets the rule to have no shading.

`HTMLHRElement.size` 
Deprecated

A string representing the height of the rule.

`HTMLHRElement.width` 
Deprecated

A string representing the width of the rule on the page.

Instance methods
----------------

*No specific method; inherits methods from its parent, `HTMLElement`*.

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

| Specification |
| --- |
| HTML Standard # htmlhrelement |

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

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

See also
--------

* The HTML element implementing this interface: `<hr>`
DOMPointReadOnly
================

The **`DOMPointReadOnly`** interface specifies the coordinate and perspective fields used by `DOMPoint` to define a 2D or 3D point in a coordinate system.

**Note:** This feature is available in Web Workers

There are two ways to create a new `DOMPointReadOnly` instance. First, you can use its constructor, passing in the values of the parameters for each dimension and, optionally, the perspective:


```js
/\* 2D \*/
const point2D = new DOMPointReadOnly(50, 50);

/\* 3D \*/
const point3D = new DOMPointReadOnly(50, 50, 25);

/\* 3D with perspective \*/
const point3DPerspective = new DOMPointReadOnly(100, 100, 100, 1.0);
```


The other option is to use the static `DOMPointReadOnly.fromPoint()` method:


```js
const point = DOMPointReadOnly.fromPoint({ x: 100, y: 100, z: 50, w: 1.0 });
```

Constructor
-----------

`DOMPointReadOnly()`

Creates a new `DOMPointReadOnly` object given the values of its coordinates and perspective. To create a point using an object, you can instead use `DOMPointReadOnly.fromPoint()`.

Instance properties
-------------------

`DOMPointReadOnly.x` Read only 

The point's horizontal coordinate, `x`.

`DOMPointReadOnly.y` Read only 

The point's vertical coordinate, `y`.

`DOMPointReadOnly.z` Read only 

The point's depth coordinate, `z`.

`DOMPointReadOnly.w` Read only 

The point's perspective value, `w`.

Static methods
--------------

`DOMPointReadOnly.fromPoint()`

A static method that creates a new `DOMPointReadOnly` object given the coordinates provided in the specified object.

Instance methods
----------------

`matrixTransform()`

Applies a matrix transform specified as an object to the `DOMPointReadOnly` object.

`toJSON()`

Returns a JSON representation of the `DOMPointReadOnly` object.

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

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # DOMPoint |

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

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

See also
--------

* `DOMPoint`
* `DOMRect`
* `DOMMatrix`
MimeTypeArray
=============

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The **`MimeTypeArray`** interface returns an array of `MimeType` instances, each of which contains information about a supported browser plugins. This object is returned by `Navigator.mimeTypes`.

**Note:** This interface was an attempt to create an unmodifiable list and only continues to be supported to not break code that's already using it. Modern APIs use types that wrap around ECMAScript array types instead, so you can treat them like ECMAScript arrays, and at the same time impose additional semantics on their usage (such as making their items read-only).

Instance properties
-------------------

`MimeTypeArray.length` 
Deprecated

The number of items in the array.

Instance methods
----------------

`MimeTypeArray.item()` 
Deprecated

Returns the `MimeType` object with the specified index.

`MimeTypeArray.namedItem()` 
Deprecated

Returns the `MimeType` object with the specified name.

Example
-------

The following example tests whether a plugin is available for the 'application/pdf' mime type and if so, logs its description.


```js
const mimeTypes = navigator.mimeTypes;
const pdf = mimeTypes.namedItem("application/pdf");

if (pdf) {
  console.log(pdf.description);
}
```

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

| Specification |
| --- |
| HTML Standard # mimetypearray |

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

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

**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.

`PresentationConnectionList` is the collection of incoming presentation connections.

EventTarget

PresentationConnectionListInstance properties
-------------------

`PresentationConnectionList.connections` Read only  
Experimental

Returns the non-terminated set of `PresentationConnection`s in the set of presentation controllers.

### Event Handlers

`PresentationConnectionList.onconnectionavailable` 
Experimental

Fired whenever a new presentation connection becomes available.

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

| Specification |
| --- |
| Presentation API # interface-presentationconnectionlist |

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

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

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

The **`AuthenticatorResponse`** interface of the Web Authentication API is the base interface for interfaces that provide a cryptographic root of trust for a key pair. The child interfaces include information from the browser such as the challenge origin and either may be returned from `PublicKeyCredential.response`.

Interfaces based on AuthenticatorResponse
-----------------------------------------

Below is a list of interfaces based on the AuthenticatorResponse interface.

* `AuthenticatorAssertionResponse`
* `AuthenticatorAttestationResponse`
Instance properties
-------------------

`AuthenticatorResponse.clientDataJSON`

A JSON string in an `ArrayBuffer`, representing the client data that was passed to `CredentialsContainer.create()` or `CredentialsContainer.get()`.

Instance methods
----------------

None.

Examples
--------

### Getting an AuthenticatorAssertionResponse


```js
const options = {
  challenge: new Uint8Array([
    /\* bytes sent from the server \*/
  ]),
};

navigator.credentials
  .get({ publicKey: options })
  .then((credentialInfoAssertion) => {
    const assertionResponse = credentialInfoAssertion.response;
    // send assertion response back to the server
    // to proceed with the control of the credential
  })
  .catch((err) => console.error(err));
```

### Getting an AuthenticatorAttestationResponse


```js
const publicKey = {
  challenge: new Uint8Array([
    21, 31, 105 /\* 29 more random bytes generated by the server \*/,
  ]),
  rp: {
    name: "Example CORP",
    id: "login.example.com",
  },
  user: {
    id: new Uint8Array(16),
    name: "jdoe@example.com",
    displayName: "John Doe",
  },
  pubKeyCredParams: [
    {
      type: "public-key",
      alg: -7,
    },
  ],
};

navigator.credentials
  .create({ publicKey })
  .then((newCredentialInfo) => {
    const attestationResponse = newCredentialInfo.response;
  })
  .catch((err) => console.error(err));
```

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

| Specification |
| --- |
| Web Authentication: An API for accessing Public Key Credentials - Level 3 # authenticatorresponse |

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

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

See also
--------

* `AuthenticatorAttestationResponse`
* `AuthenticatorAssertionResponse`
* `PublicKeyCredential.response`
XRWebGLDepthInformation
=======================

**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 **`XRWebGLDepthInformation`** interface contains depth information from the GPU/WebGL (returned by `XRWebGLBinding.getDepthInformation()`).

XRDepthInformation

XRWebGLDepthInformation
This interface inherits properties from its parent, `XRDepthInformation`.

Instance properties
-------------------

`XRDepthInformation.height` Read only 

Contains the height of the depth buffer (number of rows).

`XRDepthInformation.normDepthBufferFromNormView` Read only 

An `XRRigidTransform` that needs to be applied when indexing into the depth buffer. The transformation that the matrix represents changes the coordinate system from normalized view coordinates to normalized depth buffer coordinates that can then be scaled by depth buffer's `width` and `height` to obtain the absolute depth buffer coordinates.

`XRDepthInformation.rawValueToMeters` Read only 

Contains the scale factor by which the raw depth values must be multiplied in order to get the depths in meters.

`XRWebGLDepthInformation.texture` Read only  
Experimental

A `WebGLTexture` containing depth buffer information as an opaque texture.

`XRDepthInformation.width` Read only 

Contains the width of the depth buffer (number of columns).

Examples
--------

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

| Specification |
| --- |
| WebXR Depth Sensing Module # xrwebgldepthinformation |

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

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

See also
--------

* `XRDepthInformation`
* `XRCPUDepthInformation`
* `XRWebGLBinding.getDepthInformation()`
SpeechGrammarList
=================

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

The **`SpeechGrammarList`** interface of the Web Speech API represents a list of `SpeechGrammar` objects containing words or patterns of words that we want the recognition service to recognize.

Grammar is defined using JSpeech Grammar Format (**JSGF**.) Other formats may also be supported in the future.

Constructor
-----------

`SpeechGrammarList()` 
Experimental

Creates a new `SpeechGrammarList` object.

Instance properties
-------------------

`SpeechGrammarList.length` Read only  
Experimental

Returns the number of `SpeechGrammar` objects contained in the `SpeechGrammarList`.

Instance methods
----------------

`SpeechGrammarList.item()` 
Experimental

Standard getter — allows individual `SpeechGrammar` objects to be retrieved from the `SpeechGrammarList` using array syntax.

`SpeechGrammarList.addFromURI()` 
Experimental

Takes a grammar present at a specific URI and adds it to the `SpeechGrammarList` as a new `SpeechGrammar` object.

`SpeechGrammarList.addFromString()` 
Experimental

Adds a grammar in a string to the `SpeechGrammarList` as a new `SpeechGrammar` object.

Examples
--------

In our simple Speech color changer example, we create a new `SpeechRecognition` object instance using the `SpeechRecognition()` constructor, create a new `SpeechGrammarList`, add our grammar string to it using the `SpeechGrammarList.addFromString` method, and set it to be the grammar that will be recognized by the `SpeechRecognition` instance using the `SpeechRecognition.grammars` property.


```js
const grammar =
  "#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;";
const recognition = new SpeechRecognition();
const speechRecognitionList = new SpeechGrammarList();
speechRecognitionList.addFromString(grammar, 1);
recognition.grammars = speechRecognitionList;
```

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

| Specification |
| --- |
| Web Speech API # speechgrammarlist |

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

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

See also
--------

* Web Speech API
Selection API
=============

**Note:** This API is *not available* in Web Workers (not exposed via `WorkerNavigator`).

The **Selection API** enables developers to access and manipulate the portion of a document selected by the user.

The `Window.getSelection()` and `Document.getSelection()` methods return a `Selection` object representing the portion of the document selected by the user. A `Selection` object provides methods to:

* access the currently selected nodes
* modify the current selection, expanding or collapsing it or selecting an entirely different part of the document
* delete parts of the current selection from the DOM.

The Selection API also provides two events, both firing on `Document`:

* the `selectstart` event is fired when the user starts to make a new selection
* the `selectionchange` event is fired when the current selection changes.
Interfaces
----------

`Selection`

An interface which represents the part of the document selected by the user or the current position of the caret.

`Document.getSelection()`

A method returning a `Selection` object representing the current selection or current position of the caret.

`Window.getSelection()`

A method returning a `Selection` object representing the current selection or current position of the caret.

`Document.selectionchange`

An event which is fired when the current selection is changed.

`Node.selectstart`

An event which is fired when a user starts a new selection.

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

| Specification |
| --- |
| Selection API # selection-interface |