Web USB detect device

Updated on 27 August 2021
tool Chrome web browser
features WebUSB
This tutorial is more than 1 year old. If the steps below do not work, then please check the latest versions and the documentations of the individual tools used.

Before starting

Dependancies

Ensure the following dependancies are downloaded and available:

Code

Download code View demo webusb-detect-demo.html
<label for="vendorId">Vendor ID: 0x</label>
<input type="text" name="vendorId" placeholder="vendorId" id="vendor" value="2a03">

<p><a href="#" id="click">Click me to get USB device info</a></p>

<script>
  click.onclick = function() {
    var vendorId = '0x' + document.getElementById('vendor').value

    navigator.usb.requestDevice({ filters: [
      { 'vendorId': vendorId }
    ] })
    .then(device => {
      console.log(device)
      console.log("Product ID: " + device.productId.toString(16))
      console.log("Vendor ID: " + device.vendorId.toString(16))
    })
    .catch(error => { console.log(error) })
  }
</script>

Browser console

Open the browser developer console.

Web USB detect device browser

Description

Connect to a compatible USB device and detect it on the browser. Check lsusb on Linux or system_profiler SPUSBDataType on MacOSX for Vendor ID and Product ID.

References