Web USB API调用device.open()报错：访问被拒绝问题求助

问题描述 #

尝试通过Web USB API访问智能卡读卡器（Vendor ID: 0x04E8，Product ID: 0x5780），绑定按钮点击事件触发设备请求，但调用device.open()时抛出错误：

DOMException: Failed to execute 'open' on 'USBDevice': Access denied.

已尝试终止疑似占用设备的应用但未解决，已知同类Web应用可实现该功能，推测Windows系统中存在其他进程占用设备导致Chrome无法访问。

相关代码：

async function requestDevice() {
  const vendorId = 0x04E8;
  const productId = 0x5780;
  navigator.usb.requestDevice({ filters: [{ vendorId, productId }] })
    .then(device => {
       return device.open()
        .then(
           console.log(device.name);
         )
    })
    .catch(error => console.error(error));
}

排查与解决步骤 #

• 精准定位占用设备的进程

  1. 打开Windows设备管理器，找到目标读卡器，右键选「属性」→「详细信息」，复制「设备实例路径」（格式类似USB\VID_04E8&PID_5780\XXXXXX）。
  2. 用管理员权限打开命令提示符，执行：

     powercfg /devicequery wake_armed
     

     或者用Process Explorer工具，搜索刚才复制的设备实例路径，找到占用进程后强制终止，再重新测试。
  3. 注意系统自带的「智能卡」服务也可能占用设备，可在services.msc中找到该服务，临时停止后测试，完成后再恢复。

• 检查Chrome权限与日志

  1. 确保Chrome版本在61以上（Web USB API最低支持版本）。
  2. 在地址栏输入chrome://device-log/，查看设备访问的详细日志，确认权限拒绝的具体原因。
  3. 输入chrome://settings/content/usbDevices，检查当前网站是否已获得该设备的访问权限，若未授权，重新触发设备选择流程并确认授权。

• 修正代码语法问题
  原代码中then回调的写法有误，console.log未被正确包裹在函数中，改用async/await写法更简洁易排查：

  async function requestDevice() {
    const vendorId = 0x04E8;
    const productId = 0x5780;
    try {
      const device = await navigator.usb.requestDevice({ filters: [{ vendorId, productId }] });
      await device.open();
      console.log(device.name);
      // 后续可添加配置选择、接口声明等操作
      // await device.selectConfiguration(1);
      // await device.claimInterface(0);
    } catch (error) {
      console.error(error);
    }
  }
  

• 检查设备驱动兼容性

  1. 确认读卡器驱动为官方最新版本，旧驱动可能不支持Web USB访问模式。
  2. 尝试卸载驱动后重新安装，或切换到WinUSB通用驱动（部分设备需手动指定驱动才能被Web USB识别）。

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