This guide will show how the combination of the Open Source TinyUSB USB port software and the Chrome WebUSB browser capability provides programmers and users the ability to plug in microcontroller-based projects and have them interact with the user in a web browser. No additional code is required on the display computer other than a standard Chrome browser window (ie. no plug-ins, etc.)

This capability is ideal for schools, learning, ease of use, and assistive technology applications.

What is WebUSB?

WebUSB is a recent standard for securely providing access to USB devices from web pages. It is available in Chrome 61 since September, 2017 and all current versions.

One of the reasons the WebUSB API has been created: to provide a way to expose USB device services to the Web. With this API, hardware manufacturers are able to build cross-platform JavaScript SDKs for their devices. But most importantly, this makes USB safer and easier to use by bringing it to the Web.

Let's see what you can expect with the WebUSB API:

  1. Buy a USB device.
  2. Plug it into your computer.
  3. A notification appears right away, with the right website to go to for this device.
  4. Simply click on it. Website is there and ready to use!
  5. Click to connect and a USB device chooser shows up in Chrome, where you can pick your device.
  6. Tada!

What would this procedure be like without the WebUSB API?

  • Read a box, label, or search on line and possibly end up on the wrong website.
  • Have to install a native application.
  • Is it supported on my operating system? Make sure you download the "right" thing.
  • Scary OS prompts popup and warn you about installing drivers/applications from the Internet.
  • Malfunctioning code harms the whole computer. The Web is built to contain malfunctioning websites.
  • Only use the USB device once? On the Web, the website is gone once you closed tab. On a computer the code sticks around.

How does TinyUSB Help?

TinyUSB is an open-source cross-platform USB Host/Device stack for embedded system. It is designed to be memory-safe with no dynamic allocation and thread-safe with all interrupt events are deferred then handled in the stack's task function.

While there are some other USB stacks for microcontrollers, notably the Arduino stack, TinyUSB is compatible with a wide range of microcontrollers, has better device support, and is MIT licensed.

The TinyUSB library is on Adafruit's GitHub repo here.

WebUSB and TinyUSB Together

Adafruit has worked to ensure TinyUSB works with WebUSB. Together, they allow Adafruit and compatible microcontrollers to work with WebUSB browsers like Chrome with no drivers on the host computer/tablet/phone/chromebook. Super simple and this works well in environments like schools.

This guide was first published on Aug 27, 2019. It was last updated on Aug 27, 2019.

This page (Overview) was last updated on Aug 13, 2019.

Text editor powered by tinymce.