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

想让你的网页应用直接与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并依赖浏览器的权限控制机制。

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

解决方案

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

1. 请求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 允许你指定要请求的设备类型，使得用户更容易选择正确的设备。

2. 连接到USB设备：

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

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

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

3. 数据传输：

   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设备上用于数据传输的特定地址。

4. 关闭连接：

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

   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);
  }
});

WebUSB有哪些安全风险？如何防范？

WebUSB 带来了新的安全风险，因为恶意网站可能会利用它来控制用户的USB设备。 为了防范这些风险，浏览器通常会要求用户明确授权，并限制网页应用对USB设备的访问。 作为开发者，你应该始终验证你接收到的数据，避免执行未经验证的操作。 此外，应该使用 HTTPS 来保护数据传输，防止中间人攻击。

到这里，我们也就讲完了《手把手教你用WebUSB检测USB设备，超简单教程！》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于JavaScript,数据传输,浏览器兼容性,USB设备,WebUSBAPI的知识点！