Learn Measure Blog Live About
A generic game controller

Human interface devices on the web: a few quick examples

Connecting to uncommon devices from your app.

Updated

The WebHID API is part of the capabilities project and is currently in development. This post will be updated as the implementation progresses.

What is the WebHID API?

There is a long tail of human interface devices (HIDs) that are too new, too old, or too uncommon to be accessible by systems' device drivers. The WebHID API solves this by providing a way to implement device-specific logic in JavaScript.

Suggested use cases for the WebHID API

An HID takes input from or provides output to humans. Examples of devices include keyboards, pointing devices (mice, touchscreens, etc.), and gamepads. The HID protocol makes it possible to access these devices on desktop computers using operating system drivers. The web platform supports HIDs by relying on these drivers.

The inability to access uncommon HID devices is particularly painful when it comes to gamepad support. Gamepads designed for PC often use HID for gamepad inputs (buttons, joysticks, triggers) and outputs (LEDs, rumble). However, gamepad inputs and outputs are not well standardized and web browsers often require custom logic for specific devices. This is unsustainable and results in poor support for the long tail of older and uncommon devices. It also causes the browser to depend on quirks present in the behavior of specific devices.

Current status

Step Status
1. Create explainer Complete
2. Create initial draft of specification In Progress
3. Gather feedback & iterate on design In progress
4. Origin trial Starts in Chrome 85
5. Launch Not started

Demos, demos, demos

One of my team members is currently working on a how-to article. Since WebHID is starting an origin trial in Chrome 85, some of us wanted to give you a heads up and share a few demos to play with. If you're curious about how any of these samples work, the source code for all of them is available on GitHub. There's a barebones code example in the explainer.

To use the demos, enable the #enable-experimental-web-platform-features flag in chrome://flags.

MacBook Pro keyboard backlight

The biggest barrier to trying out any of these demos is lack of access to the device. Fortunately, if you have a MacBook Pro with a TouchBar, you don't need to buy anything. This demo lets you use the API right from your laptop. It also shows how WebHID can be used to unlock functionality of built-in devices, not just peripherals.

Author: FWeinb
Demo/Source: Keyboard Backlight

Game controllers

Next up is something fewer of you are likely to have. Sony's DualShock 4 is a wireless controller for PlayStation 4 game consoles.

The DualShock 4 Demo uses WebHID to receive the raw input reports from the DualShock 4 and provides a high-level API to access the controller's gyroscope, accelerometer, touchpad, button, and thumbstick inputs. It also supports rumble and setting the color of an RGB LED housed within the controller.

Author: TheBITLINK
Demo: DualShock 4 Demo (Source)

The BlinkStick Strip

BlinkStick Strip is a HID-compliant light strip with 8 RGB LEDs. The demo allows the user to select from several blink patterns including chase, blink, and Larson scanner (aka Cylon).

Author: Robat Williams
Demo: blinkstick-strip (source)

What does this demo do? (Wait for it.) It blinks. Actually it's three demos that use the blink(1) USB notification light.

blink(1) is simple and well-documented, which makes it a great option for getting started with HID.

Author: Tod E. Kurt
Demos: blink(1) (source)

Conclusion

I hope I've piqued your interest in the WebHID API. Watch this space in the coming weeks for updates and for Part II of the introduction which will show you how to use the API yourself.

Helpful links

Acknowledgements

Thank you to Pete LePage and Kayce Basques for reviews of this article.

Photo by Ugur Akdemir on Unsplash

Last updated: Improve article