WebHID API可在支持的浏览器中实现网页与HID设备通信。首先确认环境:使用Chrome 89+或Chromium内核浏览器,网站需HTTPS(localhost例外),并通过'hid' in navigator判断支持性。接着调用navigator.hid.requestDevice({ filters })请求用户授权并选择设备,可按vendorId、productId或usagePage过滤。连接后需调用device.open()建立通道,并监听inputreport事件获取字节流数据进行解析。同时应监听connect和disconnect事件处理设备插拔,捕获异常以提升健壮性。注意保存已授权设备避免重复请求,且须依设备文档正确解析报告格式与字节序。目前仅部分浏览器支持,需兼顾兼容性与安全限制。
WebHID API 让网页可以直接与人体学输入设备(如键盘、游戏手柄、自定义 HID 设备)通信,适用于需要精细控制或特殊外设交互的应用场景。要接入这类设备,需通过
浏览器
请求用户授权并建立连接。
启用和检查 WebHID 支持
目前 WebHID 主要在 Chrome 89+ 和基于 Chromium 的浏览器中支持。使用前先确认环境是否支持:
确保浏览器为最新版 Chrome 或 Edge网站必须运行在 HTTPS 环境下(本地开发可使用 localhost)检查全局对象是否存在:navigator.hid
可通过以下代码判断支持情况:
请求连接 HID 设备
通过
navigator.hid.requestDevice()
弹出选择框,让用户挑选要连接的设备。通常根据 vendorId、productId 或 usagePage 过滤目标设备。
常见 usagePage 值:键盘(0x06)、通用桌面控制(0x01)等可同时指定多个过滤条件缩小范围
示例代码:
监听输入数据
成功连接后,需打开设备并监听 inputreport 事件获取原始数据流。
Comet AI 浏览器
下载 Comet AI 浏览器,体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作,让 AI 成为你的浏览副驾,大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
调用device.open()建立通信通道绑定inputreport事件处理函数数据以字节流形式返回,需按协议解析
基本监听逻辑:
处理设备插拔和权限问题
用户可能中途断开设备,或拒绝授权。应监听设备变化事件并妥善处理异常。
监听navigator.hid.onconnect和ondisconnect捕获 open()、sendFeatureReport() 中的异常保存已授权设备列表,避免重复请求
示例监听:
基本上就这些。WebHID 提供了直接访问底层 HID 设备的能力,但需注意安全限制和兼容性。只要设备符合 HID 规范且用户允许,就能实现低延迟的数据读取。不复杂但容易忽略的是正确解析报告描述符和字节顺序。建议参考设备文档明确数据结构。基本上就这些。
if ('hid' in navigator) {
console.log('WebHID 可用');
} else {
console.log('当前环境不支持 WebHID');
}const filters = [
{ vendorId: 0xabcd, productId: 0x1234 }, // 指定具体设备
{ usagePage: 0xff00, usage: 0x01 } // 自定义用途设备
];
const devices = await navigator.hid.requestDevice({ filters });
// 用户选择后返回设备实例数组for (const device of devices) {
await device.open();
device.addEventListener('inputreport', (event) => {
const { data, reportId } = event;
const bytes = new Uint8Array(data.buffer);
console.log(`收到报告 #${reportId}:`, bytes);
// 在此处解析按钮状态、坐标等
});
}navigator.hid.addEventListener('connect', (event) => {
console.log('新设备接入:', event.device.productName);
});
navigator.hid.addEventListener('disconnect', (event) => {
console.log('设备断开:', event.device.productName);
});