Choosing the right browser API for your hardware device

Connecting a web app to a physical device—a camera, a sensor, a printer—means picking the right browser API. Too often, developers jump straight to low-level connectivity APIs when a high-level, purpose-built API does the job with less code and a better user experience. This guide sorts the options by the task you're trying to accomplish, starting with the simplest approaches and only descending to low-level protocols when necessary.

Handling input from keyboards, pointers, and gamepads

For standard human input, listen for KeyboardEvent or PointerEvent DOM events. If the device is a game controller, the Gamepad API reports button presses and axis movements directly.

Capturing audio and video

MediaDevices.getUserMedia() provides live audio and video streams from cameras and microphones. Beyond simple capture, the API supports controlling camera pan, tilt, and zoom, adjusting settings like brightness and contrast, and taking still images. The Web Audio API layers on effects, visualizations, and spatial audio processing.

Printing, authentication, and file access

  • Printing: window.print() opens the browser's standard print dialog, letting the user select any available printer as the destination.
  • Security keys: WebAuthn creates origin-scoped, public-key credentials using hardware authenticators—whether USB, Bluetooth, NFC, or platform-based fingerprint and screen-lock readers.
  • Local files: The File System Access API reads and writes changes directly to files and folders. A fallback is the traditional File API, which relies on a user-initiated file picker dialog.

Reading sensors, location, and battery

  • Motion and environment: The Generic Sensor API exposes raw readings from accelerometers, gyroscopes, ambient light sensors, and magnetometers. Where unsupported, the DeviceMotion and DeviceOrientation events provide comparable mobile sensor data.
  • Geolocation: The Geolocation API returns the device's latitude and longitude.
  • Power status: The Battery API reports charge level and fires notifications when charging state or level changes.

Communicating over the network

For streaming media to external displays, the Remote Playback API targets smart TVs and wireless speakers, while the Presentation API renders a web page on a secondary display. When the hardware exposes a web server, standard Fetch API calls and WebSockets handle data exchange. For interactive, multiplexed connections, WebTransport addresses the need for raw TCP/UDP sockets, and WebRTC enables peer-to-peer data transfer between browsers.

François Beaufort

Low-level connectivity: wireless options

When higher-level APIs fall short, the right low-level protocol depends on your physical link. For near-field communication (within 5–10 cm), Web NFC reads and writes to tags. For Bluetooth Low Energy, Web Bluetooth connects to devices, especially those using standardized GATT services which have published specifications. Bluetooth Classic devices with serial profiles can use Serial over Bluetooth, where a custom RFCOMM service requires a vendor-supplied UUID for the requestPort() call.

Low-level connectivity: wired options

For wired connections, consider these APIs in order:

  1. WebHID: This suits devices that speak the Human Interface Device protocol. Understanding HID report descriptors is critical, often requiring vendor documentation or reverse engineering via USB traffic analysis tools.
  2. Web Serial: For serial devices without documentation, reverse engineering is possible by capturing raw USB traffic, or you can probe with serial terminal tools if the device uses human-readable commands.
  3. WebUSB: For direct USB communication, undocumented clients require either good guesses or deep inspection of USB descriptors, aided by raw traffic captures and Chromium's internal about://usb-internals diagnostic page.

Reverse-engineering tools like Wireshark work on both USB and Bluetooth traffic. For Bluetooth, utility apps can introspect GATT services, and Chromium-based browsers include the diagnostic page about://bluetooth-internals. Specialized web apps, such as dump tools for HID devices, can also translate raw descriptors into readable formats.