Connect a USB or HID device

USB and Bluetooth devices are everywhere, and quite necessary to users to accomplish their tasks. Some are common, like the keyboard and the computer mouse, and others are less common, like specialized keyboards for financial traders.

The common devices are ready to plug in and use because the operating system recognizes the device and already has a driver to use the device. Other, less common devices are not so easy to use as they require special drivers to be found and installed at the operating system level.

Is there a way to use uncommon devices in a web-based application without requiring drivers at the operating system level?

WebUSB and WebHID

WebUSB and WebHID solve this problem.

WebUSB is a JavaScript API that provides secure access to USB devices from web applications like OpenFin platforms and applications. A related protocol, WebHID, focuses on devices that provide input or output to humans. WebHID was originally intended exclusively for USB devices, but has since been expanded to other protocols such as Bluetooth.

Runtime v34 or later offers secure, permissions-based functions to support these protocols in OpenFin.

Configure WebUSB or WebHID access

You include the vendorId and productId of the devices in the permissions section of your manifest or desktop owner settings:

"permissions": {
    "webAPIs": ["hid", "usb"],
    "devices": [{ "vendorId": 1452, "productId": 591 }]
}

Any device in the devices array will have permissions for both WebHID and WebUSB.

To find the vendorId and productId values, see Obtain the vendor ID and product ID.

Access a connected device

To access a USB or HID device in OpenFin, call the navigate.usb.requestDevice or navigate.hid.requestDevice functions. The requestDevice function will return only the devices in the permissions property and will not show any dialog.

Find all connected devices

To find all USB or HID connected devices, call the navigate.usb.getDevices or navigate.hid.getDevices functions. These functions will return an array of USBDevice or HIDDevice objects for the devices specified in the manifest or desktop owner settings:

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

Notification of connect and disconnect events

USB and HID devices can be connected or disconnected at any time. To be notified of these events, subscribe to the connect and disconnect events for the device of interest:

navigator.hid.addEventListener('disconnect', (event) => {
  console.log(`HID disconnected: ${event.device.productName}`);
  console.dir(event);
});

Obtain the vendor ID and product ID

Attach the WebUSB or WebHID device to your computer.
In a WebUSB supported browser such as Google Chrome, press F12 to bring up the browser development tools.
In the development tools Console tab, enter await navigator.usb.requestDevice({ filters: [] }) to identify an USB device, or await navigator.hid.requestDevice({ filters: [] }) to identify a HID device. A pop up will appear listing all USB or HID devices detected by the computer.
Select the device you want to identify and click the Connect button.
The requestDevice function returns a USBDevice or HIDDevice object. The object will contain the productId and vendorId of the USB or HID device.