WebHID API

Limited availability

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

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.

A Human Interface Device (HID) is a type of device that takes input from or provides output to humans. It also refers to the HID protocol, a standard for bi-directional communication between a host and a device that is designed to simplify the installation procedure. The HID protocol was originally developed for USB devices but has since been implemented over many other protocols, including Bluetooth.

Interfaces

HID

Provides methods for connecting to HID devices, listing attached HID devices and event handlers for connected HID devices.

HIDDevice

Represents an HID device. It's possible for a single physical device to be represented by multiple HIDDevice objects.

HIDInputReportEvent

Passed to the HIDDevice inputreport event when an input report is received from any associated HID device.

HIDConnectionEvent

Passed to HID connect and disconnect events when a device is connected or disconnected.

Examples

You can connect to a device with the requestDevice() method. In this case, we select from all the available devices.

js
const device = await navigator.hid.requestDevice({ filters: [] });
// A popup titled `... wants to connect to a HID Device` with `Cancel` and `Connect` buttons will show up with a device list to select from.
// Select one and click on `Connect` button. Then the device will be an array with the selected device in it.

We can retrieve all the devices the website has been granted access to previously and log the device names to the console.

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

We can register event listeners for disconnection of any HID devices.

js
navigator.hid.addEventListener("disconnect", (event) => {
  console.log(`HID disconnected: ${event.device.productName}`);
  console.dir(event);
});
// For example, when my connected keyboard gets disconnected, the log in the console will show:
// HID disconnected: USB Keyboard
// {
//    bubbles: false
//    cancelBubble: false
//    cancelable: false
//    composed: false
//    currentTarget: HID {onconnect: null, ondisconnect: null}
//    defaultPrevented: false
//    device: HIDDevice {oninputreport: null, opened: false, vendorId: 6700, productId: 11555, productName: "USB Keyboard", …}
//    eventPhase: 0
//    isTrusted: true
//    path: []
//    returnValue: true
//    srcElement: HID {onconnect: null, ondisconnect: null}
//    target: HID {onconnect: null, ondisconnect: null}
//    timeStamp: 18176.600000023842
//    type: "disconnect"
// }

// The event above is an instance of the HIDConnectionEvent interface.

Specifications

Specification
WebHID API
# dom-hid

Browser compatibility

BCD tables only load in the browser