recursal/MDN huggingface dataset:
HIDDevice: close() 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
**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 **`close()`** method of the `HIDDevice` interface closes the connection to the HID device.

Syntax
------


```js
close()
```

### Parameters

None.

### Return value

A `Promise` that resolves with `undefined` once the connection is closed.

Examples
--------

In the following example we close the HID device, once all data has been sent and received.


```js
await device.close();
```

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

| Specification |
| --- |
| WebHID API # dom-hiddevice-close |

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

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

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
**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 **`productId`** read-only property of the `HIDDevice` interface returns the product ID of the connected HID device.

Value
-----

An integer. If the device has no product ID, or the product ID cannot be accessed this will return `0`.

Examples
--------

The following example retrieves devices with `HID.getDevices()` and logs the value of `productId` to the console.


```js
document.addEventListener("DOMContentLoaded", async () => {
  let devices = await navigator.hid.getDevices();
  devices.forEach((device) => {
    console.log(`HID: ${device.productId}`);
  });
});
```

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

| Specification |
| --- |
| WebHID API # dom-hiddevice-productid |

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

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

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
**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 **`inputreport`** event of the `HIDDevice` interface fires when a new report is received from the HID device.

Syntax
------

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


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

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

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

An `HIDInputReportEvent`. Inherits from `Event`.

Event

HIDInputReportEventEvent properties
----------------

*This interface also inherits properties from `Event`.*

`HIDInputReportEvent.data` Read only 

A `DataView` containing the data from the input report, excluding the `reportId` if the HID interface uses report IDs.

`HIDInputReportEvent.device` Read only 

The `HIDDevice` instance that represents the HID interface that sent the input report.

`HIDInputReportEvent.reportId` Read only 

The one-byte identification prefix for this report, or 0 if the HID interface does not use report IDs.

Example
-------

The following example demonstrates listening for an `inputreport` event that will allow the application to detect which button is pressed on a Joy-Con Right device. You can see more examples, and live demos in the article Connecting to uncommon HID devices.


```js
device.addEventListener("inputreport", (event) => {
  const { data, device, reportId } = event;

  // Handle only the Joy-Con Right device and a specific report ID.
  if (device.productId !== 0x2007 && reportId !== 0x3f) return;

  const value = data.getUint8(0);
  if (value === 0) return;

  const someButtons = { 1: "A", 2: "X", 4: "B", 8: "Y" };
  console.log(`User pressed button ${someButtons[value]}.`);
});
```

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

| Specification |
| --- |
| WebHID API # dom-hiddevice-oninputreport |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HIDDevice: sendFeatureReport() 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
**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 **`sendFeatureReport()`** method of the `HIDDevice` interface sends a feature report to the HID device. Feature reports are a way for HID devices and applications to exchange non-standardized HID data.

The `reportId` for each of the report formats that this device supports can be retrieved from `HIDDevice.collections`.

Syntax
------


```js
sendFeatureReport(reportId, data)
```

### Parameters

`reportId`

An 8-bit report ID. If the HID device does not use report IDs, send `0`.

`data`

Bytes as an `ArrayBuffer`, a `TypedArray`, or a `DataView`.

### Return value

A `Promise` that resolves with `undefined` once the report has been sent.

### Exceptions

`NotAllowedError` `DOMException`

Thrown if sending the report fails for any reason.

Examples
--------

In the following example `sendFeatureReport()` makes a device blink. You can see more examples and live demos in the article Connecting to uncommon HID devices.


```js
const reportId = 1;
for (let i = 0; i < 10; i++) {
  // Turn off
  await device.sendFeatureReport(reportId, Uint32Array.from([0, 0]));
  await waitFor(100);
  // Turn on
  await device.sendFeatureReport(reportId, Uint32Array.from([512, 0]));
  await waitFor(100);
}
```

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

| Specification |
| --- |
| WebHID API # dom-hiddevice-sendfeaturereport |

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

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

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
**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 **`vendorId`** read-only property of the `HIDDevice` interface returns the vendor ID of the connected HID device. This identifies the vendor of the device.

Value
-----

An integer. If the device has no vendor ID, or the vendor ID cannot be accessed this will return `0`.

Examples
--------

The following example retrieves devices with `HID.getDevices()` and logs the value of `vendorId` to the console.


```js
document.addEventListener("DOMContentLoaded", async () => {
  let devices = await navigator.hid.getDevices();
  devices.forEach((device) => {
    console.log(`HID: ${device.vendorId}`);
  });
});
```

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

| Specification |
| --- |
| WebHID API # dom-hiddevice-vendorid |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HIDDevice: forget() 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 **`forget()`** method of the `HIDDevice` interface closes the connection to the HID device and forgets the device.

Syntax
------


```js
forget()
```

### Parameters

None.

### Return value

A `Promise` that resolves with `undefined` once the connection is closed, the device is forgotten, and the permission is reset.

Example
-------

In the following example we connect to a Nintendo Switch Joy-Con Right HID device, blink once, and disconnect from it.


```js
async function blink() {
  const devices = await navigator.hid.requestDevice({
    filters: [
      {
        vendorId: 0x057e, // Nintendo Co., Ltd
        productId: 0x2007, // Joy-Con Right
      },
    ],
  });
  const device = devices[0];
  await device.open();
  // Turn off
  await device.sendFeatureReport(reportId, Uint32Array.from([0, 0]));
  await waitFor(100);
  // Turn on
  await device.sendFeatureReport(reportId, Uint32Array.from([512, 0]));
  await new Promise((resolve) => setTimeout(resolve, 100));
  // Finally, disconnect from it
  await device.forget();
}
blink();
```

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

| Specification |
| --- |
| WebHID API # dom-hiddevice-forget |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HIDDevice: open() 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
**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 **`open()`** method of the `HIDDevice` interface requests that the operating system opens the HID device.

**Note:** HID devices are not opened automatically. Therefore, a `HIDDevice` returned by `HID.requestDevice()` must be opened with this method before it is available to transfer data.

Syntax
------


```js
open()
```

### Parameters

None.

### Return value

A `Promise` that resolves with `undefined` once the connection is opened.

### Exceptions

`InvalidStateError` `DOMException`

Thrown if the connection is already open.

`NotAllowedError` `DOMException`

Thrown if the attempt to open the connection fails for any reason.

Examples
--------

In the following example, we wait for the HID connection to open before attempting to send or receive data.


```js
await device.open();
```

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

| Specification |
| --- |
| WebHID API # dom-hiddevice-open |

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

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

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
**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 **`opened`** read-only property of the `HIDDevice` interface returns true if the connection to the `HIDDevice` is open and ready to transfer data.

Value
-----

A boolean value, true if the connection is open.

Examples
--------

The following example retrieves devices with `HID.getDevices()` and logs the value of `opened` to the console.


```js
document.addEventListener("DOMContentLoaded", async () => {
  let devices = await navigator.hid.getDevices();
  devices.forEach((device) => {
    console.log(`HID: ${device.opened}`);
  });
});
```

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

| Specification |
| --- |
| WebHID API # dom-hiddevice-opened |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HIDDevice: sendReport() 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
**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 **`sendReport()`** method of the `HIDDevice` interface sends an output report to the HID device.

The `reportId` for each of the report formats that this device supports can be retrieved from `HIDDevice.collections`.

Syntax
------


```js
sendReport(reportId, data)
```

### Parameters

`reportId`

An 8-bit report ID. If the HID device does not use report IDs, send `0`.

`data`

Bytes as an `ArrayBuffer`, a `TypedArray`, or a `DataView`.

### Return value

A `Promise` that resolves with `undefined` once the report has been sent.

### Exceptions

`NotAllowedError` `DOMException`

Thrown if sending the report fails for any reason.

Examples
--------

The example below shows how to make a Joy-Con device rumble using output reports. You can see more examples, and live demos in the article Connecting to uncommon HID devices.


```js
// First, send a command to enable vibration.
// Magical bytes come from https://github.com/mzyy94/joycon-toolweb
const enableVibrationData = [1, 0, 1, 64, 64, 0, 1, 64, 64, 0x48, 0x01];
await device.sendReport(0x01, new Uint8Array(enableVibrationData));

// Then, send a command to make the Joy-Con device rumble.
// Actual bytes are available in the sample.
const rumbleData = [
  /\* … \*/
];
await device.sendReport(0x10, new Uint8Array(rumbleData));
```

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

| Specification |
| --- |
| WebHID API # dom-hiddevice-sendreport |

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

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

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
**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 **`productName`** read-only property of the `HIDDevice` interface returns the product name of the connected HID device.

Value
-----

A string.

Examples
--------

The following example retrieves devices with `HID.getDevices()` and logs the value of `productName` to the console.


```js
document.addEventListener("DOMContentLoaded", async () => {
  let devices = await navigator.hid.getDevices();
  devices.forEach((device) => {
    console.log(`HID: ${device.productName}`);
  });
});
```

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

| Specification |
| --- |
| WebHID API # dom-hiddevice-productname |

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

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

The **`createScriptURL()`** method of the `TrustedTypePolicy` interface creates a `TrustedScriptURL` object using a policy created by `TrustedTypePolicyFactory.createPolicy()`.

Syntax
------


```js
createScriptURL(input)
createScriptURL(input, args)
```

### Parameters

`input`

A string containing the string to be sanitized by the policy.

`args` Optional

Additional arguments to be passed to the function represented by `TrustedTypePolicy`.

### Return value

A `TrustedScriptURL` object.

### Exceptions

`TypeError`

Thrown if `TrustedTypePolicy` does not contain a function to run on the input.

Examples
--------

In the below example a string containing the URL to an external resource is used as the input for `createScriptURL()`. The policy can check that this is an allowed URL before inserting it into an injection sink that could cause this external script to be executed.


```js
const escaped = escapeURLPolicy.createScriptURL(
  "https://example.com/my-script.js",
);
```

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

| Specification |
| --- |
| Trusted Types # dom-trustedtypepolicy-createscripturl |

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

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

The **`createHTML()`** method of the `TrustedTypePolicy` interface creates a `TrustedHTML` object using a policy created by `TrustedTypePolicyFactory.createPolicy()`.

Syntax
------


```js
createHTML(input)
createHTML(input, args)
```

### Parameters

`input`

A string containing the string to be sanitized by the policy.

`args` Optional

Additional arguments to be passed to the function represented by `TrustedTypePolicy`.

### Return value

A `TrustedHTML` object.

### Exceptions

`TypeError`

Thrown if `TrustedTypePolicy` does not contain a function to run on the input.

Examples
--------

In the below example a string containing a potentially dangerous script is used as the input for `createHTML()`. Dangerous code inserted by a user could then be sanitized before insertion into any injection sink.


```js
const escaped = escapeHTMLPolicy.createHTML("<img src=x onerror=alert(1)>");
```

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

| Specification |
| --- |
| Trusted Types # dom-trustedtypepolicy-createhtml |

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

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

The **`createScript()`** method of the `TrustedTypePolicy` interface creates a `TrustedScript` object using a policy created by `TrustedTypePolicyFactory.createPolicy()`.

Syntax
------


```js
createScript(input)
createScript(input, args)
```

### Parameters

`input`

A string containing the string to be sanitized by the policy.

`args` Optional

Additional arguments to be passed to the function represented by `TrustedTypePolicy`.

### Return value

A `TrustedScript` object.

### Exceptions

`TypeError`

Thrown if `TrustedTypePolicy` does not contain a function to run on the input.

Examples
--------

In the below example a string containing a potentially risky script is used as the input for `createScript()`. The policy can sanitize this script before inserting it into an injection sink that could cause it to be executed.


```js
const sanitized = scriptPolicy.createScript("eval('2 + 2')");
```

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

| Specification |
| --- |
| Trusted Types # dom-trustedtypepolicy-createscript |

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

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

The **`name`** read-only property of the `TrustedTypePolicy` interface returns the name of the policy.

Value
-----

A string containing the name of the policy.

Examples
--------

In the below example a policy called `myEscapePolicy` is created using `TrustedTypePolicyFactory.createPolicy()` and is represented by the object `escapeHTMLPolicy`. Calling `name` on this object returns the string "myEscapePolicy".


```js
const escapeHTMLPolicy = trustedTypes.createPolicy("myEscapePolicy", {
  createHTML: (string) => string.replace(/>/g, "<"),
});

console.log(escapeHTMLPolicy.name); /\* "myEscapePolicy" \*/
```

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

| Specification |
| --- |
| Trusted Types # dom-trustedtypepolicy-name |

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

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

 The **`HTMLVideoElement`** method
 **`requestPictureInPicture()`** issues an asynchronous request
 to display the video in picture-in-picture mode.

 It's not guaranteed that the video will be put into picture-in-picture. If permission
 to enter that mode is granted, the returned `Promise` will resolve and the
 video will receive a `enterpictureinpicture` event to let it know that it's now in picture-in-picture.

Syntax
------


```js
requestPictureInPicture()
```

### Parameters

None.

### Return value

 A `Promise` that will resolve to a `PictureInPictureWindow`
 object that can be used to listen when a user will resize that floating window.

### Exceptions

`NotSupportedError` `DOMException`

Thrown if the feature is not supported (for example, disabled by a user preference or by a platform limitation).

`SecurityError` `DOMException`

Thrown if the feature is blocked by a Permissions Policy.

`InvalidStateError` `DOMException`

Thrown if the video element's `readState` is `HAVE_NOTHING`, or if the video element has no video track, or if the video element's `disablePictureInPicture` attribute is `true`.

`NotAllowedError` `DOMException`

Thrown if `document.pictureInPictureElement` is `null` and the document does not have transient activation.

Security
--------

Transient user activation is required. The user has to interact with the page or a UI element for this feature to work.

Examples
--------

 This example requests that the video enters Picture-in-Picture mode, and sets an event
 listener to handle the floating window resizing.


```js
function enterPictureInPicture() {
  videoElement.requestPictureInPicture().then((pictureInPictureWindow) => {
    pictureInPictureWindow.addEventListener(
      "resize",
      () => onPipWindowResize(),
      false,
    );
  });
}
```

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

| Specification |
| --- |
| Picture-in-Picture # request-pip |

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

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

See also
--------

* The `<video>` element
* `HTMLVideoElement.disablePictureInPicture`
* `Document.pictureInPictureEnabled`
* `Document.exitPictureInPicture()`
* `Document.pictureInPictureElement`
* `:picture-in-picture`