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

创作时间:

作者:

@小白创作中心

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

引用

CSDN

https://blog.csdn.net/Naisu_kun/article/details/132539918

Web HID API是浏览器中用于与HID（Human Interface Device）设备进行交互的实验性API，允许网页直接读写HID设备的数据。本文将详细介绍Web HID API的基础使用方法，并通过一个实际的HID透传测试工具项目，展示如何在纯前端环境中实现与HID设备的交互。

目的

最近在研究HID透传功能（参考《STM32 USB使用记录：HID类设备（后篇）》）。市面上现有的各种测试工具都存在一些问题，因此决定自己开发一个测试工具。考虑到纯前端方案的便利性，这里对Web HID API的相关内容进行记录。

基础说明

Web HID API的相关内容主要参考以下资源：

需要注意的是，这个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 disconnected: ", event.device);
};

设备选择与授权

使用以下方法可以显示电脑上的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();

设备操作

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

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

数据读写

对于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等内容
};