CODEWITHSUNDEEP
javascriptgoogle-chromewebusb
Rishi Anand
Rishi Anand

Reputation: 51

WebUSB API not able to find compatible device

I am trying to access my USB device through web pages (over HTTPS). My USB device is up and running and has also enabled Experimental Web Platform features chrome://flags/#enable-experimental-web-platform-features. Even though I have provided the correct vendorId and productId in the code, chrome shows the message "No compatible devices found". Where am I going wrong? Below is my code

<!DOCTYPE html>
<html lang="en">
  <head> 
  </head>
  <body>
    <button id="request-device">Request Device</button>
    <script>
document.getElementById("request-device").addEventListener("click", ()=>{
            navigator.usb.requestDevice({filters: [{vendorId: 0x03F0}, {productId: 0x5A07}]})
            .then((usbDevice)=>{
                console.log("product name: "+usbDevice.productName);
            })
            .catch((e)=>{
                console.log("There is no devie...."+e);
            });
        });
    </script>
  </body>
</html>

Upvotes: 4

Views: 6058

Answers (1)

Reilly Grant
Reilly Grant

Reputation: 6083

There are a few reasons why the device may not appear:

The first is that Chrome is not detecting that the device has been connected. Chrome logs each USB device it discovers in chrome://device-log. Check there that your device has been detected. It will also provide detailed device information in the "Devices" tab of chrome://usb-internals.

The other reason is that Chrome may be hiding the device because it does not implement any interfaces which a website is allowed to claim using the WebUSB API. For example, if the device is a USB mass storage device that interface is not claimable and if there are no other interfaces the device will be hidden. Due to a bug in Chrome 90, if the device has no interfaces it will not appear either. This will be fixed in Chrome 91 and you can verify that fix in the latest beta-channel update.

Upvotes: 4

Related Questions