调用WebUSB的claimInterface时触发受保护类DOMException错误求助

错误本质 #

这个报错的核心原因是：你尝试声明的USB接口已经被系统驱动程序占用，比如：

• Blue Snowball这类音频设备的音频接口被系统音频服务接管
• 游戏手柄、键盘这类HID设备的输入接口被系统输入子系统占用
• Arduino默认串口模式下，串口接口会被系统串口驱动占用

这些属于系统"protected class"的接口，WebUSB没有权限抢占，和设备是否支持WebUSB无关。

代码修正步骤 #

1. 避免重复获取设备 #

requestDevice成功后已经返回了目标设备，没必要再调用getDevices，直接用返回的设备对象即可，避免引用混乱：

let usbReader;
document.querySelector("#header").addEventListener("click", (e) => {
    navigator.usb.requestDevice({filters:[]}) // 留空显示所有可访问设备
    .then(device => {
        usbReader = device;
        console.log("选中设备:", device);
        usbConnected();
    })
    .catch(err => console.error("请求设备失败:", err));
});

2. 动态选择可用接口，不要硬写接口号 #

不能直接固定claimInterface(2)，要先查看设备的配置和接口信息，挑选**未被系统占用、属于厂商自定义类（bInterfaceClass=0xff）**的接口：

function usbConnected(){
    usbReader.open()
    .then(() => {
        // 打印设备所有配置，方便排查可用接口
        console.log("设备配置详情:", usbReader.configurations);
        // 选择设备的第一个配置（通常为配置1，建议动态确认）
        const targetConfig = usbReader.configurations[0];
        return usbReader.selectConfiguration(targetConfig.configurationValue);
    })
    .then(() => {
        // 筛选出未被占用的厂商自定义接口
        const usableInterface = usbReader.configurations[0].interfaces.find(iface => {
            const altSetting = iface.alternates[0];
            return altSetting.interfaceClass === 0xff && !iface.claimed;
        });
        if (!usableInterface) {
            throw new Error("未找到可用WebUSB接口，设备所有接口可能已被系统占用");
        }
        return usbReader.claimInterface(usableInterface.interfaceNumber);
    })
    .then(() => {
        console.log("接口声明成功，可开始数据通信");
        // 后续端点读写逻辑写在这里
    })
    .catch(err => console.error("操作失败:", err));
}

额外注意事项 #

• Arduino设备：需要刷入支持WebUSB的专用固件，默认串口固件会让接口被系统串口驱动占用，无法通过WebUSB声明。
• ID扫描仪：如果是模拟键盘输入的HID类设备，系统会直接接管输入，这种情况应该用HID API而非WebUSB。
• 测试优先选**厂商自定义类（bInterfaceClass=0xff）**的USB设备，这类设备通常不会被系统自动占用，更适合WebUSB开发。

内容的提问来源于stack exchange，提问作者Spectre