Skip to content

WebUSB example

Uses WebUsbProvider as a polyfill for the native Web Serial API. Ideal for Android Chrome where Web Serial is unavailable.

Setup

ts
import {
  AbstractSerialDevice,
  delimiter,
  WebUsbProvider,
} from "webserial-core";

// Inject the WebUSB provider once, before constructing any device.
// usbControlInterfaceClass / usbTransferInterfaceClass = 255 covers
// CP210x, CH340, and other vendor-class USB-UART bridges.
AbstractSerialDevice.setProvider(
  new WebUsbProvider({
    usbControlInterfaceClass: 255,
    usbTransferInterfaceClass: 255,
  }),
);

Full example

ts
import {
  AbstractSerialDevice,
  delimiter,
  WebUsbProvider,
} from "webserial-core";
import type { SerialPortFilter } from "webserial-core";

AbstractSerialDevice.setProvider(
  new WebUsbProvider({
    usbControlInterfaceClass: 255,
    usbTransferInterfaceClass: 255,
  }),
);

class UsbDevice extends AbstractSerialDevice<string> {
  constructor(filters?: SerialPortFilter[]) {
    super({
      baudRate: 9600,
      dataBits: 8,
      stopBits: 1,
      parity: "none",
      flowControl: "none",
      bufferSize: 255,
      commandTimeout: 3000,
      parser: delimiter("\n"),
      autoReconnect: true,
      autoReconnectInterval: 1500,
      handshakeTimeout: 2000,
      filters: filters ?? [],
    });
  }

  protected async handshake(): Promise<boolean> {
    return true;
  }
}

// Filter to CP2102 (ESP32 / NodeMCU)
const device = new UsbDevice([{ usbVendorId: 0x10c4, usbProductId: 0xea60 }]);

device.on("serial:connected", () => console.log("Connected via WebUSB!"));
device.on("serial:data", (line) => console.log("←", line));
device.on("serial:error", (err) => console.error(err.message));

await device.connect();
await device.send("LED_ON\n");

Common USB vendor IDs

DeviceVendor IDProduct ID
ESP32 / NodeMCU (CP2102)0x10c40xea60
ESP32 / NodeMCU (CH340)0x1a860x7523
Arduino Uno0x23410x0043
Arduino Nano0x04030x6001

Live demo

👉 Open interactive demo — runs directly in your browser

Or run locally:

bash
npm run dev
# Then open http://localhost:5173/demos/web-usb/

Source: demos/web-usb/

Released under the MIT License.