Chrome调用USBDevice claimInterface失败，如何实现网页读取NFC？

错误原因解析 #

你遇到的Uncaught (in promise) DOMException: Failed to execute 'claimInterface' on 'USBDevice': The requested interface implements a protected class错误，本质是Chrome对标准USB设备类的保护机制：
你的NFC读卡器属于CCID类（接口类代码0x0B），这类标准设备类被浏览器列为受保护范畴，目的是避免Web应用与系统内置驱动或其他进程冲突，因此不允许通过Web USB API直接调用claimInterface声明接口。

网页实现NFC读取的可行方案 #

方案一：使用Web NFC API（推荐） #

Web NFC是浏览器原生提供的NFC标签读取API，无需直接操作USB底层，更简洁且符合Web标准，适用场景：

• 环境要求：HTTPS协议（本地开发可使用localhost）；Chrome浏览器（Android端支持完善，桌面端需配合兼容的NFC读卡器并开启chrome://flags/#enable-web-nfc）。
• 示例代码：

// 监听NFC标签扫描事件
async function readNFCTag() {
  try {
    const reader = new NDEFReader();
    await reader.scan();
    
    reader.onreading = event => {
      console.log("NFC标签UID:", event.serialNumber);
      // 读取NDEF数据
      for (const record of event.message.records) {
        console.log("记录类型:", record.recordType);
        console.log("记录内容:", new TextDecoder().decode(record.data));
      }
    };
  } catch (error) {
    console.error("读取NFC标签失败:", error);
  }
}

// 绑定按钮触发
document.getElementById('readCard').addEventListener('click', readNFCTag);

方案二：使用厂商专属Web SDK #

部分NFC读卡器厂商会提供封装好的Web SDK，已处理好USB权限和底层通信逻辑，直接调用即可实现读取功能，无需自己编写USB传输代码。

方案三：修改设备USB接口类（仅适用于硬件开发者） #

如果拥有设备固件修改权限，可将设备的USB接口类改为非标准自定义类（避开0x0B等受保护类），并添加Web USB扩展描述符，这样就能通过Web USB API正常声明接口并传输数据。

针对现有Web USB代码的补充说明 #

如果坚持使用Web USB方案，需先确认：

1. 设备是否添加了Web USB扩展描述符（厂商为Web兼容专门配置）；
2. 关闭系统中所有占用该NFC设备的进程/软件，避免驱动冲突；
3. 通过Chrome的chrome://device-log/查看设备接口类，确认是否为受保护类。

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