Angular项目中无法访问USB设备问题求助

我来帮你排查下这个WebUSB的问题，这种情况通常是几个常见的限制没处理好，咱们一步步来捋：

1. 必须在安全上下文环境中运行 #

WebUSB API 只能在安全上下文（HTTPS协议或者localhost本地开发环境）下正常工作。哪怕你能打印出navigator.usb对象，非安全上下文下调用getDevices()、监听connect/disconnect事件都会直接失效，不会有任何响应。

• 开发环境：Angular默认的ng serve用的是localhost，这个是符合要求的，没问题。
• 生产环境：必须部署到HTTPS服务器上，不然WebUSB功能完全用不了。

2. 设备需要用户主动授权 #

WebUSB有严格的权限机制，不能直接获取已连接的USB设备——除非你的网站之前已经获得过该设备的授权。第一次必须通过用户交互（比如点击按钮）触发requestDevice()，让用户手动选择并授权你的网站访问设备。

举个Angular组件里的实现例子：

async requestUsbDevice() {
  try {
    // 替换成你的设备vendorId和productId，用于过滤设备
    const device = await navigator.usb.requestDevice({
      filters: [
        { vendorId: 0x1234 }, // 设备的厂商ID，必填
        { productId: 0x5678 } // 可选，设备的产品ID，更精确匹配
      ]
    });
    console.log('已授权设备:', device);
    // 授权后，后续调用getDevices()就能拿到这个设备了
    const devices = await navigator.usb.getDevices();
    console.log('已授权的所有设备:', devices);
  } catch (error) {
    console.error('授权失败或用户取消:', error);
  }
}

然后在模板里加个按钮触发这个方法：

<button (click)="requestUsbDevice()">授权USB设备</button>

注意：浏览器不允许自动弹出授权对话框，必须由用户的主动交互（比如点击、触摸）触发，所以别把requestDevice()放在组件初始化的钩子（比如ngOnInit）里，那样会被浏览器拦截。

3. 正确配置设备过滤条件 #

如果requestDevice()弹出的对话框里看不到你的设备，大概率是filters配置不对。你需要先找到设备的vendorId和productId：

• Chrome浏览器：打开chrome://device-log/，连接设备后查看日志里的设备信息；
• Windows：设备管理器里找到设备，右键“属性”→“详细信息”→选择“硬件ID”，里面的VID_xxxx就是vendorId，PID_xxxx是productId；
• Mac：关于本机→系统报告→USB，找到你的设备查看对应的厂商ID和产品ID。

4. 检查Angular Zone的影响（可选） #

有时候Angular的Zone.js可能会影响异步事件的监听，你可以尝试把事件监听放在NgZone里运行，确保Angular能捕获到事件：

import { Component, NgZone, OnInit } from '@angular/core';

@Component({
  selector: 'app-usb-test',
  templateUrl: './usb-test.component.html',
  styleUrls: ['./usb-test.component.css']
})
export class UsbTestComponent implements OnInit {
  constructor(private ngZone: NgZone) {}

  ngOnInit(): void {
    this.ngZone.run(() => {
      navigator.usb.addEventListener('connect', ev => {
        console.log('设备已连接:', ev.device);
      });
      navigator.usb.addEventListener('disconnect', ev => {
        console.log('设备已断开:', ev.device);
      });
    });
  }
}

5. 确认浏览器兼容性 #

WebUSB目前仅在Chrome、Edge等基于Chromium的浏览器中支持，Firefox、Safari暂时不支持这个API，确保你用的是兼容的浏览器测试。

按照上面的步骤来，先完成设备授权，之后getDevices()就能返回已授权的设备，connect/disconnect事件也会正常触发了。

内容的提问来源于stack exchange，提问作者Pianisimo