如何通过 Web HID API 与人类接口设备进行直接通信？-js教程-PHP中文网

如何通过 Web HID API 与人类接口设备进行直接通信？

狼影

发布： 2025-10-13 17:37:01

原创

1156人浏览过

Web HID API 允许网页通过 HTTPS 直接与 HID 设备通信，需用户授权并使用较新 Chromium 浏览器，在指定 vendorId 和 productId 后可通过 requestDevice 选择设备，open 后监听 inputreport 接收数据，调用 sendReport 发送指令，适用于工业、医疗等专用硬件交互场景。

如何通过 web hid api 与人类接口设备进行直接通信？

Web HID API 允许网页应用与连接到用户设备的 HID（Human Interface Device）进行直接通信，比如游戏手柄、键盘、自定义硬件等。这项功能打破了传统浏览器只能通过操作系统抽象层访问输入设备的限制，使开发者能更精细地控制特定外设。

启用 Web HID 支持

目前 Web HID API 主要在基于 Chromium 的浏览器中支持，如 Chrome 89+ 和 Edge。确保你的浏览器版本较新，并且运行在支持的平台上（Chrome OS、Linux、macOS、Windows）。

无需额外安装插件或扩展，但需要用户主动授权才能访问设备。网站必须通过 HTTPS 提供服务（本地开发可使用 localhost）。

请求并连接 HID 设备

使用 navigator.hid.requestDevice() 方法可以让用户从列表中选择一个或多个 HID 设备。

示例代码：

async function connectToDevice() {
  const filters = [
    { vendorId: 0x1234, productId: 0x5678 } // 指定设备的 VID 和 PID
  ];

  try {
    const devices = await navigator.hid.requestDevice({ filters });
    for (const device of devices) {
      console.log(`已连接设备: ${device.productName}`);
      await device.open(); // 打开设备以开始通信
      setupEventListeners(device);
    }
  } catch (err) {
    console.error("无法获取设备:", err);
  }
}

登录后复制

如果没有指定过滤条件，用户会看到所有可用的 HID 设备列表。建议使用 vendorId 和 productId 精确匹配目标设备。

微信 WeLM

WeLM不是一个直接的对话机器人，而是一个补全用户输入信息的生成模型。

查看详情

读取和发送数据

设备打开后，可通过监听 inputreport 事件接收来自设备的数据报告。

同时可以调用 device.sendReport() 向设备发送输出报告（如果设备支持）。

示例：

function setupEventListeners(device) {
  device.addEventListener("inputreport", (event) => {
    const { data, reportId } = event;
    const bytes = new Uint8Array(data.buffer);
    console.log(`收到报告 ID ${reportId}:`, bytes);
    // 处理接收到的数据，例如解析按钮状态或传感器值
  });
}

// 发送数据到设备（例如点亮 LED）
async function sendOutputReport(device, reportId, data) {
  await device.sendReport(reportId, data);
}

登录后复制