使用 Web HID API 在浏览器中进行HID设备交互（纯前端）

文章目录

• 目的
• 基础说明
• 示例工程（HID透传测试工具）
• 总结

目的

最近在搞HID透传 《STM32 USB使用记录：HID类设备（后篇）》 。

市面上的各种测试工具都或多或少存在问题，所以就自己写一个工具进行测试。目前来说纯前端方案编写这个工具应该是最方便的，这里对 Web HID API 相关内容做个记录。

基础说明

Web HID API 相关内容参考如下：
https://developer.mozilla.org/en-US/docs/Web/API/WebHID_API
https://developer.mozilla.org/en-US/docs/Web/API/HID
https://developer.mozilla.org/en-US/docs/Web/API/HIDDevice
https://developer.mozilla.org/en-US/docs/Web/API/HIDInputReportEvent
https://wicg.github.io/webhid/

这个API目前还处于实验性质，只有电脑上的Chrome、Edge、Opera等浏览器支持：

另外还需要注意的是从网页操作设备是比较容易产生安全风险的，所以这个API只支持本地调用或者是HTTPS方式调用。

使用下面方法可以侦测电脑上HID设备插入与拔出：

// 全局HID设备插入事件 navigator.hid.onconnect = (event) => { console.log("HID connected: ", event.device); }; // 全局HID设备拔出事件 navigator.hid.ondisconnect = (event) => { console.log("HID connected: ", event.device); };

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

使用下面方法可以显示电脑上的HID设备选择授权，或者显示已授权的HID设备列表：

// requestDevice方法将显示一个包含已连接设备列表的对话框，用户选择可以并授予其中一个设备访问权限 const devices = await navigator.hid.requestDevice({ filters: [] }); // 注意这里返回的是一个数组 // const devices = await navigator.hid.requestDevice({ // filters: [{ // vendorId: 0xabcd, // 根据VID进行过滤 // productId: 0x1234, // 根据PID进行过滤 // usagePage: 0x0c, // 根据usagePage进行过滤 // usage: 0x01, // 根据usage进行过滤 // },], // }); // getDevices方法可以返回已连接的授权过的设备列表 // let devices = await navigator.hid.getDevices();

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

使用下面方法可以打开或关闭HID设备等：

if (!device.opened) { // 检查设备是否打开 await device.open(); // 打开设备 } // await device.close(); // 关闭设备 // await device.forget() // 遗忘设备

• 1
• 2
• 3
• 4
• 5

使用下面可以读写数据：
对于HID设备而言主要有 feature 、 input 、 output 三项可以用来数据读写交互的当然前提是设备自身支持。

// 读取Feature const dataView = await device.receiveFeatureReport(reportId); // 写Feature await device.sendFeatureReport(reportId, data); // 向HID设备发送数据 await device.sendReport(reportId, data); // reportId写0表示不适用reportId // 监听来自HID设备的数据（input） device.oninputreport = (event) => { console.log(event); // event中包含device、reportId、data等内容 };

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

示例工程（HID透传测试工具）

代码与说明：《基于 Web HID API 的HID透传测试工具（纯前端）》
项目地址：https://github.com/NaisuXu/HID_Passthrough_Tool

总结

使用 Web HID API 访问HID设备非常方便，目前来说唯一的问题是这还是实验性质的功能，可能之后接口还会变动，等根据实际情况进行调整。