17370845950

WebUSB API允许HTTPS网页在用户授权下通过requestDevice、open、claimInterface三步连接USB设备，仅Chromium系浏览器支持，需用户手势触发并确认权限，数据收发依赖正确端点地址。

JavaScript 本身不能直接操作 USB 设备，但现代浏览器（Chrome、Edge、Opera 等）支持 WebUSB API，它允许网页在用户明确授权的前提下，与兼容的 USB 设备通信。关键前提是：设备必须符合 USB 协议规范，网页需运行在 HTTPS 环境下，且用户主动触发（比如点击按钮），不能自动连接。

WebUSB 使用前提和限制

不是所有设备都能用，也不是所有浏览器都支持：

• 仅 Chromium 内核浏览器支持（Chrome 61+、Edge 79+、Opera 48+），Firefox 和 Safari 暂不支持
• 页面必须通过 HTTPS（本地开发可用 localhost）
• 调用必须由用户手势触发（如 click、touchstart），不能在页面加载时自动执行
• 用户会看到系统级权限弹窗，必须手动点“允许”，每次新设备或新网站首次连接都需要确认
• 设备需有明确的接口类（如 HID、CDC、Vendor-specific），且不能是系统关键设备（如键盘、鼠标、显示器）

基本连接流程：requestDevice + open + claimInterface

三步走：找设备 → 打开设备 → 占用接口。每一步都返回 Promise，需 await 或 .then() 处理：

• navigator.usb.requestDevice({ filters: [...] })：弹出设备选择框，filters 可按 vendorId、productId 或 classCode 精准匹配（避免列出所有设备）
• device.open()：建立与设备的连接（类似打开文件）
• device.claimInterface(interfaceNumber)：抢占指定接口（USB 设备常有多个接口，比如一个用于控制，一个用于数据）

示例片段：

async function connectToMyDevice() {
  try {
    const device = await navigator.usb.requestDevice({
      filters: [{ vendorId: 0x1234, productId: 0x5678 }]
    });
    await device.open();
    await device.selectConfiguration(1); // 选配置（通常为1）
    await device.claimInterface(0);      // 占用接口0
    console.log('已连接并占用接口0');
  } catch (err) {
    console.error('连接失败：', err.message);
  }
}

读写数据：transferIn / transferOut

数据收发依赖端点（endpoint），需先查设备描述符确认端点地址（如 0x81 是 IN 端点，0x01 是 OUT 端点）：

• device.transferIn(endpointNumber, length)：从设备读取数据，返回 { data: DataView, status: 'ok' }
• device.transferOut(endpointNumber, data)：向设备发送数据，data 可为 ArrayBuffer 或 Uint8Array
• 注意端点方向和最大包长（maxPacketSize），超长需分包；IN/OUT 地址必须与设备描述符一致，否则报错

断开与清理：close + forget

用完记得释放资源，避免设备被锁死：

• device.close()：关闭连接（但设备仍被网页“记住”）
• navigator.usb.getDevices() 可获取已授权的设备列表，适合恢复上次连接
• 若要彻底清除授权记录，可调用 device.forget()（用户下次需重新授权）
• 页面卸载前建议监听 beforeunload 自动 close，防止异常断连

基本上就这些。WebUSB 不复杂但容易忽略权限和端点细节，调试时多看 Chrome 的 chrome://usb 页面和 DevTools 的 Application → USB 面板，能直观看到设备枚举和接口状态。