What Is the WebUSB API? The WebUSB API provides classes and methods that allow us to connect devices and send or receive data via USB on web browsers. Quick Overview of How to Use WebUSB We use the method to display the pairing dialog to the user. After the user selects a USB device from the dialog, it returns the selected device as an instance. USB.requestDevice() USBDevice We can later send or receive data from this device. To get a list of the already paired devices, we can use the method. USB.getDevices() WebUSB Supported Browsers Not all browsers might support the WebUSB API. At the moment, the supported browsers are Google Chrome, Microsoft Edge, Opera, Samsung Internet, and Baidu Browser. You can . check which browsers support WebUSB One way to check if the browser supports WebUSB with JavaScript is: if (!('usb' in navigator)) {
	console.log('WebUSB API is not supported!');
} WebUSB API Is Only Available in Secure Contexts (HTTPS) The WebUSB API can only be used in secure contexts, in other words, it must be served over or URLs. https:// wss:// However, you can still test it on because, according to MDN Web Docs, resources that are local are considered to have been delivered securely: localhost Locally-delivered resources such as those with http://127.0.0.1 URLs, http://localhost and http://*.localhost URLs (e.g. http://dev.whatever.localhost/), and file:// URLs are also considered to have been delivered securely. Enable or Disable WebUSB API If you want to disable the WebUSB API, you can add an HTTP header , and use the attribute for iframes. Here is an example for Node.js: Permissions-Policy: usb=() allow res.setHeader('Permissions-Policy', 'usb=()'); If you try to use the WebUSB API after disabling it, you will get an error: . Check out for more details. Permissions policy violation: usb is not allowed in this document MDN Web Docs - Permissions Policy WebUSB API With an Example Let's explore how we can use the WebUSB API with step-by-step examples. Pairing and Connecting to a USB Device Using WebUSB We can use the method to pair and gain access to the USB device. This method opens a dialog in the browser where we can select the USB device we want to connect to. Upon success, it returns an instance of . USB.requestDevice() USBDevice If no device is selected, it throws an exception: Failed to execute 'requestDevice' on 'USB': No device selected. This method can only be called with user gestures like clicks. Otherwise, it throws an exception: Failed to execute 'requestDevice' on 'USB': Must be handling a user gesture to show a permission request. To reset permission to the USB device, we can use . device.forget() Let's write some code. Add a simple button that calls the method on click: USB.requestDevice() <button onclick="requestDevice()">Request device</button>
…
async function requestDevice() {
  try {
    const device = await navigator.usb.requestDevice({ filters: [] });
    console.log(device);
  } catch (e) {
    console.error(e);
  }
} The parameter is used to specify a list of objects for possible devices we would like to pair. If left empty, it returns all USB devices. Filter objects can have properties like , , , , , and . filters vendorId productId classCode subclassCode protocolCode serialNumber For example, if we only want to get a list of Apple devices, the code should look like this: navigator.usb.requestDevice({ filters: [{ vendorId: 0x05ac }] }); Here is . the list of USB ID’s Getting the List of Already Paired Devices Once we pair and get permission, we can get all paired devices using the method. We only need to use the method once to get permission, and thereafter we can get an array of paired devices with . USB.getDevices() USB.requestDevice() USB.getDevices() async function getDevices() {
  const devices = await navigator.usb.getDevices();
  devices.forEach((device) => {
    console.log(`Name: ${device.productName}, Serial: ${device.serialNumber}`);
  });
  return devices;
} Sending Data to a USB Device Using WebUSB API Now that we have permission to use the USB device and can get the paired device list, let's see how we can send data to it. Here's a simple code that sends data to a connected device: async function transferOutTest(device) {
  await device.open();
  await device.selectConfiguration(1);
  await device.claimInterface(0);
  await device.transferOut(
    2,
    new Uint8Array(
      new TextEncoder().encode('Test value\n')
    ),
  );
  await device.close();
} starts the device session. open() selects device-specific configuration. selectConfiguration() claims the device-specific interface for exclusive access. claimInterface() sends data to the USB device. transferOut() releases interfaces and ends the device session. close() Example of Printing Labels Using WebUSB API I created a . You can get it from GitHub, but here is a shorter version: simple example of how to print labels with TSPL and WebUSB API <button onclick="requestDevice()">Request device</button><br><br>
<button id="device"></button>

<script>
async function requestDevice() {
  try {
    const device = await navigator.usb.requestDevice({ filters: [] });
    const elem = document.querySelector('#device');
    elem.textContent = `Print with '${device.productName}'`;
    elem.onclick = () => testPrint(device);
  } catch (e) {
    console.error(e);
  }
}

async function testPrint(device) {
  const cmds = [
    'SIZE 48 mm,25 mm',
    'CLS',
    'TEXT 30,10,"4",0,1,1,"HackerNoon"',
    'TEXT 30,50,"2",0,1,1,"WebUSB API"',
    'BARCODE 30,80,"128",70,1,0,2,2,"altospos.com"',
    'PRINT 1',
    'END',
  ];
  
  await device.open();
  await device.selectConfiguration(1);
  await device.claimInterface(0);
  await device.transferOut(
    device.configuration.interfaces[0].alternate.endpoints.find(obj => obj.direction === 'out').endpointNumber,
    new Uint8Array(
      new TextEncoder().encode(cmds.join('\r\n'))
    ),
  );
  await device.close();
}
</script> And the result looks like this: If you're interested in learning more about TSPL/TSPL2, I have written a few articles that you might find helpful. They cover topics like how to print labels and images, as well as how to print receipts using TSPL and JavaScript. I wrote these articles after adding printing support to , hoping that these would be useful to someone in a similar situation. Alto's POS & Inventory How to Print labels with TSPL and JavaScript How to Print IMAGES with TSPL and JavaScript How to Print Receipts With TSPL and JavaScript Some useful tools: - Use this to get device details and create a test device. chrome://device-log/ - This shows logs related to devices. chrome://device-log/ - You may need to install a driver on Windows. Zadig - Generic USB drivers for Windows No War! ✋🏽

This story contains new, firsthand information uncovered by the writer.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

The writer is smart, but don't just like, take their word for it. #DoYourOwnResearch

Running business made Easy with Free Alto's Cloud POS

2022 - HackerNoon Contributor of the Year - Flutter

2022 - Software Developer of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Flutter

Nominated for 2022 - Software Developer of the Year

Too Long; Didn't Read

Making security fun one episode at a time

Exploring the WebUSB API: Connecting to USB Devices and Printing With TSPL/TSPL2

Too Long; Didn't Read

Altynbek Usenbekov

STORY’S CREDIBILITY

Original Reporting

Code License

DYOR

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Exploring the WebUSB API: Connecting to USB Devices and Printing With TSPL/TSPL2

Too Long; Didn't Read

Altynbek Usenbekov

STORY’S CREDIBILITY

Original Reporting

Code License

DYOR

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES