当前位置：首页 > 文章列表 > 文章 > 前端 > 手把手教你用WebUSB检测USB设备，超简单教程！

手把手教你用WebUSB检测USB设备，超简单教程！

2025-06-22 19:19:12 0浏览收藏

想让你的网页应用直接与USB设备交互？本文手把手教你使用WebUSB API检测USB设备，实现JavaScript与硬件的无缝连接，简单易懂！首先，通过`navigator.usb.requestDevice()`请求设备权限，连接设备后，利用`transferIn()`和`transferOut()`方法进行数据传输。操作完成后，记得关闭连接。需要注意的是，WebUSB的浏览器兼容性存在差异，Chrome和Edge支持较好。此外，本文还探讨了WebUSB的权限处理和安全风险防范，助你构建安全可靠的WebUSB应用。赶紧来学习，解锁WebUSB的强大功能吧！

要检测USB设备并实现JavaScript与硬件交互，可通过WebUSB API实现。首先调用navigator.usb.requestDevice()请求权限并获取设备对象；接着通过device.open()、selectConfiguration()和claimInterface()连接设备；然后使用transferIn()和transferOut()进行数据传输；操作完成后调用device.close()关闭连接。需注意，仅Chrome和Edge较好支持WebUSB，Safari和Firefox支持有限；用户拒绝授权时应提供提示和重试机制；为防范安全风险，应验证数据、使用HTTPS并依赖浏览器的权限控制机制。

js如何检测USB设备 WebUSB接口调用方法解析

检测USB设备，本质上就是让JavaScript能够与USB硬件进行交互。WebUSB API的出现，让这件事成为了可能，但也带来了一些新的挑战和思考。

解决方案

WebUSB API 提供了一种方式，让网页应用可以直接访问连接到用户的USB设备。它允许网页应用发送和接收数据，执行自定义操作，而无需安装驱动程序或使用平台特定的API。

请求USB设备权限：
首先，你的网页应用需要获得用户的许可才能访问USB设备。这可以通过调用navigator.usb.requestDevice()方法来实现。
```
navigator.usb.requestDevice({ filters: [{ vendorId: 0xYOUR_VENDOR_ID }] })
.then(device => {
  console.log("设备已连接:", device);
  // 在这里进行后续操作，比如连接设备、发送数据等
})
.catch(error => {
  console.error("请求设备失败:", error);
});
```
vendorId是USB设备的供应商ID。你可以通过设备管理器（Windows）或系统信息（macOS）找到它。 filters 允许你指定要请求的设备类型，使得用户更容易选择正确的设备。

连接到USB设备：

一旦你获得了USBDevice对象，你就可以连接到设备。

device.open()
.then(() => device.selectConfiguration(1)) // 选择一个配置
.then(() => device.claimInterface(0))    // 声明一个接口
.then(() => {
  console.log("设备连接成功");
  // 现在可以进行数据传输
})
.catch(error => {
  console.error("连接设备失败:", error);
});

selectConfiguration()和claimInterface()是必要的步骤，用于配置设备和声明你想要使用的接口。

数据传输：

WebUSB API 提供了 transferIn() 和 transferOut() 方法来发送和接收数据。

// 发送数据
let data = new Uint8Array([0x01, 0x02, 0x03]);
device.transferOut(1, data) // 端点1
.then(result => {
  console.log("数据发送成功:", result);
})
.catch(error => {
  console.error("数据发送失败:", error);
});

// 接收数据
device.transferIn(2, 64) // 端点2, 长度64字节
.then(result => {
  console.log("数据接收成功:", result.data);
})
.catch(error => {
  console.error("数据接收失败:", error);
});

transferOut() 用于发送数据到设备，transferIn() 用于从设备接收数据。你需要指定端点（endpoint），它是USB设备上用于数据传输的特定地址。

关闭连接：

完成操作后，记得关闭连接。

device.close()
.then(() => console.log("设备连接已关闭"))
.catch(error => console.error("关闭设备连接失败:", error));

WebUSB的兼容性如何？哪些浏览器支持？

WebUSB API 并非所有浏览器都支持。 Chrome 和 Edge 浏览器提供了较好的支持，而 Safari 和 Firefox 的支持则相对有限。在使用 WebUSB 之前，务必检查目标浏览器的兼容性，并提供合适的降级方案。可以使用 navigator.usb 来检测浏览器是否支持 WebUSB。

if ('usb' in navigator) {
  console.log('WebUSB is supported!');
} else {
  console.log('WebUSB is not supported.');
}

如何处理WebUSB的权限问题？用户拒绝授权怎么办？

用户授权是WebUSB的关键。如果用户拒绝授权，你需要提供友好的提示，并解释为什么需要访问USB设备。可以考虑提供一个“重试”按钮，让用户再次尝试授权。此外，你可以存储用户的授权状态，避免每次都请求授权。

navigator.usb.requestDevice({ filters: [{ vendorId: 0xYOUR_VENDOR_ID }] })
.then(device => {
  // ...
})
.catch(error => {
  if (error.name === 'SecurityError') {
    alert('用户拒绝了USB设备访问权限。');
  } else {
    console.error("请求设备失败:", error);
  }
});