WebHID API 允许网页在用户明确授权下直接与HID设备通信，支持传感器、按钮等硬件的异步安全访问；需通过navigator.hid.requestDevice()获取许可，解析inputreport数据并实时更新DOM，部分设备还支持sendReport反向控制。
WebHID API 允许网页在用户明确授权的前提下，直接与 HID（Human Interface Device）类硬件通信，比如定制传感器、工业按钮、LED 控制板、游戏手柄扩展设备等。它不依赖驱动或中间服务，通过浏览器原生支持实现异步、安全的原始设备访问，并可将采集到的数据实时映射到 DOM 中进行可视化或交互控制。
前提与权限：先获取用户许可
WebHID 不自动连接设备，必须由用户主动触发（如点击按钮），且仅支持安全上下文（https 或 localhost）。调用 navigator.hid.requestDevice() 会弹出系统级设备选择框。
- 需指定
filters精确匹配目标设备（如 vendorId + productId 或 usagePage/usage）；不填则列出所有可访问 HID 设备 - 首次授权后，同一站点后续可复用已允许设备（通过
navigator.hid.getDevices()获取） - 移动端（Android Chrome 123+）也支持，但需启用
chrome://flags/#enable-webhid（稳定版默认开启）
异步连接与事件监听：处理输入报告
连接成功后，设备返回一个 HIDDevice 实例。它提供 open() 方法（返回 Promise），打开后即可监听 inputreport 事件接收原始字节数据。
-
device.open()必须在用户手势后调用，否则被拒绝 -
inputreport事件含data: DataView，需按设备协议解析（例如第0字节为按键状态，第1–2字节为16位传感器值） - 建议使用
device.addEventListener('inputreport', handler)持续监听，而非轮询
解析原始数据并更新 DOM：轻量实时映射
从 DataView 提取数值后，可直接操作 DOM —— 无需框架，用原生 JS 即可完成响应式输出。关键在于避免阻塞主线程和频繁重排。
- 用
Uint8Array.from(data.buffer)转为易读数组，再按协议取字段（如data.getUint16(1, true)读小端16位） - 更新 DOM 推荐使用
textContent或style.transform等低开销属性；大量图表可用<canvas>+requestAnimationFrame - 示例：收到温度值后，更新页面中
<span id="temp"></span>的文本，并改变背景色：el.textContent = `${val}°C`; el.style.color = val > 30 ? 'red' : 'inherit';
发送输出报告：反向控制硬件
部分 HID 设备支持输出报告（如点亮 LED、设置蜂鸣器、配置采样率）。需确认设备 descriptor 中存在 output report，并调用 device.sendReport()。
-
sendReport()接收 reportId（若设备有多个 report）和buffer（ArrayBuffer或TypedArray） - 注意：不是所有设备都开放输出能力；某些需厂商自定义 usage page，需提前在 filter 中声明
- 可封装为函数，配合按钮点击或 DOM 变化触发，实现“网页控硬件”闭环
