Human interface devices on the web: a few quick examples

Success:
The WebHID API, part of the capabilities project,
launched in Chrome 89.

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….

Success:
The WebHID API, part of the capabilities project,
launched in Chrome 89.

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.

Demos, demos, demos

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.

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

PlayStation 4 Wireless controller

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)

Nintendo Switch Joy-Con controllers

Play the Chrome dino ? offline game by actually jumping with a Nintendo Switch Joy-Con
controller in your pants pockets. This demo is powered by
Joy-Con WebHID, a WebHID driver for the
Nintendo Switch Joy-Con controllers.

Author: Thomas Steiner
Demo: Chrome Dino WebHID
(demo source,
driver 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)

Acknowledgements

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

Photo by Ugur
Akdemir
on Unsplash


Print Share Comment Cite Upload Translate
APA
Joe Medley | Sciencx (2024-03-29T15:10:57+00:00) » Human interface devices on the web: a few quick examples. Retrieved from https://www.scien.cx/2020/07/22/human-interface-devices-on-the-web-a-few-quick-examples/.
MLA
" » Human interface devices on the web: a few quick examples." Joe Medley | Sciencx - Wednesday July 22, 2020, https://www.scien.cx/2020/07/22/human-interface-devices-on-the-web-a-few-quick-examples/
HARVARD
Joe Medley | Sciencx Wednesday July 22, 2020 » Human interface devices on the web: a few quick examples., viewed 2024-03-29T15:10:57+00:00,<https://www.scien.cx/2020/07/22/human-interface-devices-on-the-web-a-few-quick-examples/>
VANCOUVER
Joe Medley | Sciencx - » Human interface devices on the web: a few quick examples. [Internet]. [Accessed 2024-03-29T15:10:57+00:00]. Available from: https://www.scien.cx/2020/07/22/human-interface-devices-on-the-web-a-few-quick-examples/
CHICAGO
" » Human interface devices on the web: a few quick examples." Joe Medley | Sciencx - Accessed 2024-03-29T15:10:57+00:00. https://www.scien.cx/2020/07/22/human-interface-devices-on-the-web-a-few-quick-examples/
IEEE
" » Human interface devices on the web: a few quick examples." Joe Medley | Sciencx [Online]. Available: https://www.scien.cx/2020/07/22/human-interface-devices-on-the-web-a-few-quick-examples/. [Accessed: 2024-03-29T15:10:57+00:00]
rf:citation
» Human interface devices on the web: a few quick examples | Joe Medley | Sciencx | https://www.scien.cx/2020/07/22/human-interface-devices-on-the-web-a-few-quick-examples/ | 2024-03-29T15:10:57+00:00
https://github.com/addpipe/simple-recorderjs-demo