Connection to rare devices from your application.
Updated
The WebHID API is part of capabilities project and is currently under development. This post will be updated as implementation progresses.
What is the WebHID API?
There is a long list of Human Interface Devices (HIDs) that are too new, too old, or rare for system device drivers to access. 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 information from humans or provides them with results. 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 HID based on these drivers.
The inability to access rare HID devices is particularly painful when it comes to gamepad compatibility. Gamepads designed for PC often use HID for gamepad inputs (buttons, joysticks, triggers) and outputs (LED, rumble). However, the 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 queue of older and rare devices. It also makes the browser dependent on quirks present in the behavior of specific devices.
Actual state
| He passed | Condition |
|---|---|
| 1. Create an explainer | To complete |
| 2. Create initial draft specification | In progress |
| 3. Collect feedback and repeat the design | In progress |
| 4. Proof of origin | Get started in Chrome 86 |
| 5. Launch | Not started |
Give, give, give
One of my team members is currently working on an how-to article. Since WebHID is starting a proof of origin on Chrome 86, some of us wanted to let you know and share some demos to play with. If you're curious about how any of these examples work, the source code for all of them is available on GitHub. There is a barebones code example in the explainer.
To use the demos, enable the #enable-experimental-web-platform-features flag on chrome://flags.
MacBook Pro keyboard backlight
The biggest barrier to trying 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 allows you to use the API directly from your laptop. It also shows how WebHID can be used to unlock the functionality of embedded devices, not just peripherals.
Author: FWeinb
Demo / Source: Keyboard backlight
Game controllers
The next step is something that less of you probably have. The Sony 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 gyro, accelerometer, touchpad, button, and joystick inputs. It also supports rumble and set the color of an RGB LED housed within the controller.
Author: TheBITLINK
Manifestation: 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 (aka Cylon) scanner.
Author: Robat williams
Manifestation: flashing strip (source)
Blink, blink, blink
What does this demo do? (Wait for it.) Blink. It's actually three demos using the flashing USB notification light (1).
blink (1) is simple and well documented, making it a great choice to get started with HID.
Author: Tod E. Kurt
Population: blink (1) (source)
conclusion
I hope I have piqued your interest in the WebHID API. Watch this space in the next few weeks for updates and Getting Started Part II, which will show you how to use the API yourself.
Helpful Links
Do you want to go deeper?
Thanks
Thanks to Pete LePage and Kayce Basques to review this article.
Photo by Ugur Akdemir in Unsplash
