WebHID API - Web APIs | MDN
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
HIDDeviceobjects. HIDInputReportEvent-
Passed to the
HIDDeviceinputreportevent when an input report is received from any associated HID device. HIDConnectionEvent-
Passed to
HIDconnectanddisconnectevents 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 |