如何在Angular中实现与Human Interface Device(HID)的连接及设备详情获取

WebHID是浏览器原生API，无需额外NPM包即可直接在Angular中使用，以下是具体实现步骤和示例：

1. 封装HID管理服务 #

创建一个全局服务来统一处理设备连接、枚举逻辑，避免组件代码冗余：

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class HidService {
  // 请求用户授权连接HID设备
  async requestDevice(filters?: HIDDeviceFilter[]): Promise<HIDDevice | null> {
    try {
      const devices = await navigator.hid.requestDevice({ filters });
      return devices[0] || null;
    } catch (err) {
      console.error('请求HID设备失败:', err);
      return null;
    }
  }

  // 获取已连接的HID设备列表
  async getConnectedDevices(): Promise<HIDDevice[]> {
    try {
      return await navigator.hid.getDevices();
    } catch (err) {
      console.error('获取已连接设备失败:', err);
      return [];
    }
  }

  constructor() {
    // 监听设备连接/断开事件
    navigator.hid.addEventListener('connect', (event) => {
      console.log('设备已连接:', event.device);
      // 可在此添加状态更新逻辑
    });

    navigator.hid.addEventListener('disconnect', (event) => {
      console.log('设备已断开:', event.device);
      // 可在此添加断开后的处理逻辑
    });
  }
}

2. 在组件中调用服务获取设备详情 #

通过组件触发设备连接，并展示设备信息：

import { Component } from '@angular/core';
import { HidService } from './hid.service';

@Component({
  selector: 'app-hid-manager',
  template: `
    <button (click)="connectTargetDevice()">连接目标HID设备</button>
    <div *ngIf="currentDevice" class="device-info">
      <h3>设备详情</h3>
      <p>设备ID: {{currentDevice.deviceId}}</p>
      <p>产品名称: {{currentDevice.productName || '未知'}}</p>
      <p>厂商ID: {{currentDevice.vendorId | number:'hex'}}</p>
      <p>产品ID: {{currentDevice.productId | number:'hex'}}</p>
    </div>
  `
})
export class HidManagerComponent {
  currentDevice: HIDDevice | null = null;

  constructor(private hidService: HidService) {}

  async connectTargetDevice() {
    // 可添加过滤器限定目标设备，比如指定厂商ID和产品ID
    const deviceFilters = [{ vendorId: 0x1234, productId: 0x5678 }];
    this.currentDevice = await this.hidService.requestDevice(deviceFilters);
  }
}

关键注意事项 #

• 浏览器兼容性：仅支持Chrome/Edge 89及以上版本，Firefox、Safari暂未支持
• 环境要求：必须在HTTPS环境下使用（本地开发的localhost不受限制）
• 权限限制：requestDevice方法必须由用户主动交互（如点击按钮）触发，不能在页面加载时自动调用

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