“手摸手”带你搞定 WebHID：前端如何与硬件握手言和？

花吕观

已于 2024-12-20 15:28:53 修改

阅读量1.4k

点赞数 32

文章标签：前端 javascript vue.js uni-app 状态模式 es6

于 2024-12-18 16:27:31 首次发布

本文链接：https://blog.csdn.net/Hua_Lvguan/article/details/144563701

版权

大家好，我是你们的前端大头兵--花吕观（有时候是 bug 制造机🤡）。今天带你们玩点新花样——WebHID，一个让网页直接和硬件“聊天”的 API。

传统上，要让浏览器和一些 HID（Human Interface Device）设备（比如键盘、鼠标、手柄等）沟通，简直比高考还难。但 WebHID 出现后，就像给了我们一把“车钥匙”！终于，前端也能硬气地搞定这些“硬件问题”了。

接下来，咱们 从连接到发送再到接收数据，一步步搞清楚 WebHID 的用法。

🚀 一、WebHID 是什么？

WebHID 就是浏览器提供的一个接口，让网页能够直接与 HID 设备通讯，比如：

自定义手柄（XBox、Switch手柄）
特殊键盘或鼠标......
还有那些和你有代沟的旧设备...

简单点说，它是前端和硬件握手言和的桥梁。

🌍 二、浏览器支持情况

别高兴太早！并不是所有浏览器都“识货”，当前只有部分浏览器支持 WebHID。

所以，如果你想试试 WebHID，最好先找个 Chrome 或 Edge 来玩，不然别怪代码没反应哈！

🛠️ 三、连接 HID 设备

先来个简单的 连接 HID 设备 的示例代码：

// 检查浏览器是否支持 WebHID
if ("hid" in navigator) {
  console.log("你的浏览器支持 WebHID 🎉");
} else {
  console.log("换个 Chrome 再来试试吧！😭");
}

// 连接 HID 设备
async function connectHID() {
  try {
    const devices = await navigator.hid.requestDevice({
      filters: [{ vendorId: 0x057e }] // 可指定设备的 vendorId，例：Nintendo Switch 手柄
    });

    if (devices.length > 0) {
      console.log("设备已连接 ✅", devices[0]);
    } else {
      console.log("没有选中任何设备 😢");
    }
  } catch (err) {
    console.error("连接失败：", err);
  }
}

connectHID();

👆 代码说明：

首先，navigator.hid.requestDevice 方法会弹出一个选择框，让你选择要连接的设备。
filters 可以指定设备的 vendorId 或 productId，这样只显示你关心的设备。

✉️ 四、发送数据到 HID 设备

有了连接，接下来咱们让硬件“听话”！试着发送一条数据。

async function sendData(device) {
  if (!device.opened) {
    await device.open();
    console.log("设备已打开 🎉");
  }

  const reportId = 0x01; // 设备报告 ID（通常需要查设备文档）
  const data = new Uint8Array([0x00, 0xFF]); // 发送的数据（这里是示例）

  try {
    await device.sendReport(reportId, data);
    console.log("数据已发送 ✅");
  } catch (err) {
    console.error("发送数据失败：", err);
  }
}

👆 代码说明：

使用 sendReport 方法将数据发送到设备。
reportId 是 HID 设备的一个标识，不同设备会有不同规则。

📥 五、接收设备发送的数据

设备可不只是听你命令，有时候它也会“回话”。比如游戏手柄会告诉你按键的状态。

device.addEventListener("inputreport", (event) => {
  const { data, device, reportId } = event;
  console.log(`接收到来自设备 ${device.productName} 的数据:`, data);
});

👆 代码说明：

inputreport 事件是 WebHID 接收数据的关键。
数据会以 Uint8Array 格式返回，你需要解析数据，具体解析规则要查阅设备的说明书或协议。

🤖 六、完整的流程示例

整合一下，写个完整的连接、发送、接收数据的例子：

async function initHID() {
  if (!("hid" in navigator)) {
    console.error("你的浏览器不支持 WebHID 😭");
    return;
  }

  const devices = await navigator.hid.requestDevice({
    filters: [{ vendorId: 0x057e }] // 指定设备（这里是任天堂手柄的例子）
  });

  if (devices.length === 0) {
    console.log("没有选择设备！");
    return;
  }

  const device = devices[0];
  await device.open();
  console.log("设备已连接：", device.productName);

  // 发送数据
  const data = new Uint8Array([0x00, 0xFF]);
  await device.sendReport(0x01, data);
  console.log("已发送数据 🎉");

  // 接收数据
  device.addEventListener("inputreport", (event) => {
    console.log("接收到数据：", event.data);
  });
}

initHID();

⚠️ 七、WebHID 开发注意事项