怎样利用WebUSB API与硬件设备进行通信？-js教程-PHP中文网

怎样利用WebUSB API与硬件设备进行通信？

幻影之瞳

发布： 2025-09-27 14:37:01

原创

544人浏览过

WebUSB API允许网页通过浏览器直接与USB设备通信。在安全上下文下，调用navigator.usb.requestDevice()请求设备连接，用户授权后获得访问权限。接着调用device.open()打开设备，selectConfiguration()选择配置，claimInterface()独占接口。使用transferOut()发送数据，transferIn()接收数据，实现与硬件交互。需在用户操作中触发请求，监听disconnect事件处理设备断开，捕获异常确保稳定性。该技术适用于调试工具、教育设备和IoT面板，在Chrome等支持环境中实用性强。

怎样利用webusb api与硬件设备进行通信？

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('设备就绪'); });

登录后复制

发送与接收数据

设备准备好后，即可通过控制传输、中断传输或批量传输与硬件交互：

通义万相

通义万相，一个不断进化的AI艺术创作大模型

596

查看详情

使用 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 控制面板。虽然目前兼容性有限，但在受控环境下非常实用。

以上就是怎样利用WebUSB API与硬件设备进行通信？的详细内容，更多请关注php中文网其它相关文章！