WebUSB API允许网页通过浏览器直接与USB设备通信。在安全上下文下，调用navigator.usb.requestDevice()请求设备连接，用户授权后获得访问权限。接着调用device.open()打开设备，selectConfiguration()选择配置，claimInterface()独占接口。使用transferOut()发送数据，transferIn()接收数据，实现与硬件交互。需在用户操作中触发请求，监听disconnect事件处理设备断开，捕获异常确保稳定性。该技术适用于调试工具、教育设备和IoT面板，在Chrome等支持环境中实用性强。
WebUSB API 让网页可以直接与 USB 设备通信，无需安装原生驱动或专用软件。只要浏览器支持（目前主要为 Chrome 及基于 Chromium 的浏览器），你就可以在网页中读取和控制兼容的 USB 硬件。
启用 WebUSB 并请求设备连接
要使用 WebUSB，必须通过安全上下文（即 HTTPS 或 localhost）运行页面。第一步是请求用户选择一个 USB 设备：
- 调用 navigator.usb.requestDevice() 并传入过滤条件（如 vendorId 和 productId）
- 用户会看到系统级设备选择对话框，授权后获得对设备的访问权限
示例代码：
navigator.usb.requestDevice({ filters: [{ vendorId: 0x1234 }] })
.then(device => {
console.log('已连接设备:', device.productName);
})
.catch(error => {
console.error('用户拒绝或未找到设备:', error);
});
打开设备并配置接口
获取设备实例后，需要打开它并设置正确的配置和接口，才能进行数据传输：
- 调用 device.open() 打开设备连接
- 多数设备需选择一个配置（通常为 configuration[0]）
- 接着 claimInterface() 来独占某个接口，防止其他程序干扰
示例流程：
device.open()
.then(() => device.selectConfiguration(1))
.then(() => device.claimInterface(0))
.then(() => { console.log('设备就绪'); });
发送与接收数据
设备准备好后，即可通过控制传输、中断传输或批量传输与硬件交互：
- 使用 transferOut() 向设备发送数据（例如控制指令）
- 使用 transferIn() 从设备读取数据（需指定端点号）
- 某些设备需持续轮询或监听中断，可用循环或 await 响应
发送数据示例：
const data = new Uint8Array([0x01, 0x02, 0x03]); device.transferOut(0x01, data);
接收数据示例：
device.transferIn(0x81, 64)
.then(result => {
const received = new Uint8Array(result.data.buffer);
console.log('收到数据:', received);
});
处理权限与错误
WebUSB 受严格安全限制，常见问题包括权限拒绝、设备断开或接口被占用：
- 始终在用户操作（如点击按钮）中调用 requestDevice，避免自动弹窗被拦截
- 监听 disconnect 事件及时清理状态：navigator.usb.addEventListener('disconnect', ...)
- 捕获异常并提示用户重新连接或检查设备
基本上就这些。WebUSB 简化了网页与硬件的对接流程，适合开发调试工具、教育设备或 IoT 控制面板。虽然目前兼容性有限，但在受控环境下非常实用。
