angular中连接HID设备

注意点：连接之后，要把光标聚焦到一个输入框中！当扫码枪扫描到信息之后会将扫描到的信息输入到输入框当中，如果不聚焦输入框，并没有任何效果！

实现步骤

1. HTML 模板 (`app.component.html`)

我们添加一个设备列表供用户选择：

<button (click)="requestHIDDevices()">Select HID Device</button>

<!-- 设备选择列表 -->
<div *ngIf="availableDevices.length > 0">
  <h3>Select a Device:</h3>
  <ul>
    <li *ngFor="let device of availableDevices; let i = index" (click)="connectToDevice(device)">
      {{ device.productName || 'Unnamed Device' }} (Vendor ID: {{ device.vendorId }}, Product ID: {{ device.productId }})
    </li>
  </ul>
</div>

<!-- 当前连接的设备信息 -->
<div *ngIf="connectedDevice">
  <h3>Connected Device:</h3>
  <p>Product Name: {{ connectedDevice.productName }}</p>
  <p>Vendor ID: {{ connectedDevice.vendorId }}</p>
  <p>Product ID: {{ connectedDevice.productId }}</p>
</div>

<button (click)="requestHIDDevices()">Select HID Device</button>

<!-- 设备选择列表 -->
<div *ngIf="availableDevices.length > 0">
  <h3>Select a Device:</h3>
  <ul>
    <li *ngFor="let device of availableDevices; let i = index" (click)="connectToDevice(device)">
      {{ device.productName || 'Unnamed Device' }} (Vendor ID: {{ device.vendorId }}, Product ID: {{ device.productId }})
    </li>
  </ul>
</div>

<!-- 当前连接的设备信息 -->
<div *ngIf="connectedDevice">
  <h3>Connected Device:</h3>
  <p>Product Name: {{ connectedDevice.productName }}</p>
  <p>Vendor ID: {{ connectedDevice.vendorId }}</p>
  <p>Product ID: {{ connectedDevice.productId }}</p>
</div>

2. TypeScript 代码 (`app.component.ts`)

以下是完整的逻辑：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  availableDevices: HIDDevice[] = []; // 可用设备列表
  connectedDevice: HIDDevice | null = null; // 当前连接的设备

  async requestHIDDevices() {
    try {
      // 请求用户选择 HID 设备
      const devices = await navigator.hid.requestDevice({
        filters: [] // 空数组表示允许用户选择所有可用的 HID 设备
      });

      if (devices.length === 0) {
        console.warn('No device selected');
        return;
      }

      // 将用户选择的设备存储到 availableDevices 中
      this.availableDevices = devices;

      console.log('Available devices:', this.availableDevices);
    } catch (error) {
      console.error('Error requesting HID devices:', error);
    }
  }

  async connectToDevice(device: HIDDevice) {
    try {
      // 如果设备已经打开，直接返回
      if (device.opened) {
        console.log('Device is already opened');
        this.connectedDevice = device;
        return;
      }

      // 打开设备连接
      await device.open();
      console.log('Device opened successfully');

      // 更新当前连接的设备
      this.connectedDevice = device;

      // 监听设备输入数据
      device.addEventListener('inputreport', (event) => {
        const { data, device, reportId } = event;
        console.log(`Received input report from device: ${device.productName}`);
        console.log('Report ID:', reportId);
        console.log('Data:', new Uint8Array(data.buffer));
      });
    } catch (error) {
      console.error('Error connecting to HID device:', error);
    }
  }
}

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  availableDevices: HIDDevice[] = []; // 可用设备列表
  connectedDevice: HIDDevice | null = null; // 当前连接的设备

  async requestHIDDevices() {
    try {
      // 请求用户选择 HID 设备
      const devices = await navigator.hid.requestDevice({
        filters: [] // 空数组表示允许用户选择所有可用的 HID 设备
      });

      if (devices.length === 0) {
        console.warn('No device selected');
        return;
      }

      // 将用户选择的设备存储到 availableDevices 中
      this.availableDevices = devices;

      console.log('Available devices:', this.availableDevices);
    } catch (error) {
      console.error('Error requesting HID devices:', error);
    }
  }

  async connectToDevice(device: HIDDevice) {
    try {
      // 如果设备已经打开，直接返回
      if (device.opened) {
        console.log('Device is already opened');
        this.connectedDevice = device;
        return;
      }

      // 打开设备连接
      await device.open();
      console.log('Device opened successfully');

      // 更新当前连接的设备
      this.connectedDevice = device;

      // 监听设备输入数据
      device.addEventListener('inputreport', (event) => {
        const { data, device, reportId } = event;
        console.log(`Received input report from device: ${device.productName}`);
        console.log('Report ID:', reportId);
        console.log('Data:', new Uint8Array(data.buffer));
      });
    } catch (error) {
      console.error('Error connecting to HID device:', error);
    }
  }
}

关键点解释

requestHIDDevices 方法
- 调用 navigator.hid.requestDevice 弹出设备选择对话框。
- 用户可以选择一个或多个设备，这些设备会被存储到 availableDevices 数组中。
- 在模板中，我们使用 *ngFor 遍历 availableDevices，将设备列表显示给用户。
用户手动选择设备
- 用户点击设备列表中的某个设备时，调用 connectToDevice(device) 方法。
- 这确保了只有用户明确选择的设备才会被连接。
设备连接
- 在 connectToDevice 方法中，检查设备是否已打开（device.opened）。
- 如果未打开，则调用 device.open() 打开设备，并更新 connectedDevice。
监听设备数据
- 使用 inputreport 事件监听设备的输入数据。
- 数据以 Uint8Array 的形式提供，可以根据设备协议解析数据。

示例运行流程

用户点击 "Select HID Device" 按钮。
浏览器弹出设备选择对话框，用户选择一个或多个设备。
页面显示设备列表，用户点击其中一个设备。
点击后，程序连接该设备并显示设备信息。
如果设备有输入数据，程序会实时监听并打印数据。

注意事项

设备过滤
- 如果你希望限制用户只能选择特定类型的设备，可以在 filters 中指定 vendorId 和 productId。
安全性
- WebHID API 只能在 HTTPS 环境下使用。
用户体验
- 设备列表可以通过更友好的 UI（例如按钮或下拉菜单）来呈现。
- 如果设备没有 productName，可以显示默认名称（如 "Unnamed Device"）。