Error when trying to claim interface for WebUSB

Question

I am trying to use WebUSB in order to read data from a physical ID scanner on a website. However, when I try to claim the interface I get the following error:

Uncaught (in promise) DOMException: Failed to execute 'claimInterface' on 'USBDevice': The requested interface implements a protected class.

This error happens with every USB device I plug in. I tried an Arduino, a Blue Snowball microphone, a gamepad, almost everything. No luck.

I feel it's important to know that I did come across sources saying this error is due to the device not supporting WebUSB, but I feel that is highly unlikely as I tried a wide variety of USB devices.

My current JS code:

let usbReader;
        document.querySelector("#header").addEventListener("click", (e)=>{
            navigator.usb.requestDevice({filters:[/*{vendorId: 3468}*/]}).then(function(device){
                console.log(device);
                (navigator.usb.getDevices().then((p)=>{
                    if(p.length > 0){
                        usbReader = p[0];
                        usbConnected();
                    }
                }));
             });
        });

        function usbConnected(){
            usbReader.open()
                .then(()=>usbReader.selectConfiguration(1))
                .then(()=>usbReader.claimInterface(2)); // line in which the error occurs
        }

It's also important to know I tried switching the configuration and interfaces.

Answer 1

I solved the issue by using WebHID instead. Input now works great!

let device;

document.querySelector("#header").addEventListener("click", async (e) => {
  device = (await navigator.hid.requestDevice({filters:[]}))[0];
  console.log(device);
  device.open();
  device.oninputreport = function(inp) {
    console.log(inp.data.getUint8(0));
  }
});