> Markdown version of [/videos/651-prototyping-with-hardware-and-the-web](https://www.wearedevelopers.com/videos/651-prototyping-with-hardware-and-the-web). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Prototyping with Hardware and the Web

Why rely on complex middleware to control physical interfaces? Discover how native browser APIs like Web USB seamlessly bridge JavaScript applications directly with microcontroller hardware.

- **Speakers:** George Cave
- **Event:** World Congress 2023
- **Published:** August 11, 2023
- **Duration:** 30:58
- **URL:** https://www.wearedevelopers.com/videos/651-prototyping-with-hardware-and-the-web

## Summary

Modern hardware prototyping relies heavily on web technologies, shifting the control of physical interfaces from complex intermediary software directly to native browser APIs. By utilizing Chromium's built-in capabilities, developers can seamlessly bridge JavaScript applications with microcontroller hardware to quickly iterate on embedded systems and user interfaces.

Three foundational techniques enable this web-to-hardware communication: keyboard emulation, Web USB, and Web Bluetooth. Keyboard emulation is universally compatible, turning microcontrollers into Human Interface Devices (HIDs) that translate physical inputs into standard keystrokes, though it requires hardware-level "safety stops" to prevent runaway input loops. For richer bidirectional data streaming, the Web USB API utilizes the native JavaScript Streams API to encode and decode byte sequences over serial ports strictly within the browser.

When transitioning to wireless interactions, Web Bluetooth consistently outpaces Wi-Fi for physical prototyping due to its minimal power consumption and credential-free pairing processes. By leveraging Generic Attribute Profiles (GATT) and custom microcontroller logic, teams can establish robust low-latency connections while keeping all heavy visual logic isolated and easily deployable within web frameworks.

**Keywords:** hardware prototyping, web USB API, web bluetooth API, keyboard emulation, arduino web integration, chromium serial ports, javascript streams API, HID device emulation, bluetooth LE interaction, GATT profile communication, microcontroller UI testing, embedded systems design, textdecoder serialization, physical computing interfaces

## Chapters

1. **Connecting hardware prototypes to the web browser** (00:39) — Web native APIs allow rapid iteration for building physical hardware controllers.
1. **Emulating computer keyboards with Arduino hardware boards** (02:26) — Specialized microcontrollers can automatically present themselves as human interface devices via USB.
1. **Programming keyboard emulation code with safety mechanisms** (05:47) — Implementing physical switches that write keystrokes requires emergency loops to prevent accidental system lockouts.
1. **Controlling the Chrome dinosaur game with physical prototypes** (08:24) — Aluminum foil pads function as basic hardware switches to trigger web browser events.
1. **Bidirectional hardware communication using the web USB API** (11:15) — Connecting directly over serial ports streams complex data between physical hardware and client applications.
1. **Processing serial data streams and building audio synthesizers** (14:10) — Line break transformers resolve chunked message errors for smooth sensor transmission to browser oscillators.
1. **Replacing complex wireless networking with web bluetooth connections** (18:36) — Generic attribute profiles enable direct low energy wireless linking between local prototypes and web applications.
1. **Advertising bluetooth services and parsing custom characteristic data** (21:41) — Implementing universal unique identifiers ensures web apps request and connect to correct custom hardware characteristics.
1. **Hardware recommendations and protocol compatibility for web interactions** (25:09) — Selecting specific electronic chip architectures determines whether devices support target peripheral logic and connection types.
1. **Exploring alternative microcontrollers and hardware material sourcing** (26:56) — Experience prototyping prioritizes affordable hardware boards over robust computing environments for rapid peripheral iteration.

## Related Moments

- [Sharing physical hardware access in remote browser laboratories](https://www.wearedevelopers.com/videos/941-transforming-education-a-journey-from-interactive-markdown-to-remote-labs) (from "Transforming Education: A Journey from interactive Markdown to Remote-Labs")
- [Expanding browser capabilities through Project Fugu and hardware APIs](https://www.wearedevelopers.com/videos/1299-new-browser-apis-end-of-react-create-app-smuggling-data-in-emoji-and-more-with-rowdy-rabouw) (from "New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw")
- [Connecting external hardware with web USB and Bluetooth](https://www.wearedevelopers.com/videos/832-project-fugu-extending-the-web) (from "Project Fugu: Extending the web")
- [Controlling physical hardware protocols via WebUSB and CSS](https://www.wearedevelopers.com/videos/1851-wearedevelopers-live-css-is-doomed) (from "WeAreDevelopers LIVE - CSS is DOOMed")
- [Developing specialized hardware kits for web of things integration](https://www.wearedevelopers.com/videos/557-iot-the-road-to-sustainability) (from "IoT: The road to sustainability")
- [Discovering programming through early computers and web development](https://www.wearedevelopers.com/videos/888-coffee-with-developers-andrew-taylor-code100-manchester) (from "Coffee with Developers - Andrew Taylor - CODE100 Manchester")

## Related Articles

- [Dev Digest 138 - Are you secure about this?](https://www.wearedevelopers.com/magazine/486-dev-digest-138-are-you-secure-about-this)
- [Dev Digest 139 - Soft and hard queries](https://www.wearedevelopers.com/magazine/487-dev-digest-139-soft-and-hard-queries)
- [Dev Digest 124 - None like it hot](https://www.wearedevelopers.com/magazine/460-dev-digest-124-none-like-it-hot)
- [Dev Digest 128 - Do not Google Monopoly](https://www.wearedevelopers.com/magazine/465-dev-digest-128-do-not-google-monopoly)

## Related Jobs

- [Software Engineer, React & Angular (Broker Web Platform](https://www.wearedevelopers.com/jobs/ext/1558399-software-engineer-react-angular-broker-web-platform) at **Bitpanda**
- [Senior Web Designer, Growth](https://www.wearedevelopers.com/jobs/ext/102722-senior-web-designer-growth) at **Intercom, Inc.**
- [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1377585-software-engineer) at **Bitpanda**
- [Software Engineer, React (Bitpanda Broker)](https://www.wearedevelopers.com/jobs/ext/1444421-software-engineer-react-bitpanda-broker) at **Bitpanda**
- [Senior Developer Bare-Metal and Realtime Software](https://www.wearedevelopers.com/jobs/ext/380849-senior-developer-bare-metal-and-realtime-software) at **ZEISS Group**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/679408-remote-senior-full-stack-engineer) at **Edge Impulse**