如何通过 Web HID API 与人类接口设备进行直接通信?

Web HID API 允许网页通过 HTTPS 直接与 HID 设备通信,需用户授权并使用较新 Chromium 浏览器,在指定 vendorId 和 productId 后可通过 requestDevice 选择设备,open 后监听 inputreport 接收数据,调用 sendReport 发送指令,适用于工业、医疗等专用硬件交互场景。

如何通过 web hid api 与人类接口设备进行直接通信?

Web HID API 允许网页应用与连接到用户设备的 HID(Human Interface Device)进行直接通信,比如游戏手柄、键盘、自定义硬件等。这项功能打破了传统浏览器只能通过操作系统抽象层访问输入设备的限制,使开发者能更精细地控制特定外设。

启用 Web HID 支持

目前 Web HID API 主要在基于 Chromium 的浏览器中支持,如 Chrome 89+ 和 Edge。确保你的浏览器版本较新,并且运行在支持的平台上(Chrome OS、Linux、macOS、Windows)。

无需额外安装插件或扩展,但需要用户主动授权才能访问设备。网站必须通过 HTTPS 提供服务(本地开发可使用 localhost)。

请求并连接 HID 设备

使用 navigator.hid.requestDevice() 方法可以让用户从列表中选择一个或多个 HID 设备。

示例代码:

async function connectToDevice() {  const filters = [    { vendorId: 0x1234, productId: 0x5678 } // 指定设备的 VID 和 PID  ];  try {    const devices = await navigator.hid.requestDevice({ filters });    for (const device of devices) {      console.log(`已连接设备: ${device.productName}`);      await device.open(); // 打开设备以开始通信      setupEventListeners(device);    }  } catch (err) {    console.error("无法获取设备:", err);  }}

如果没有指定过滤条件,用户会看到所有可用的 HID 设备列表。建议使用 vendorId 和 productId 精确匹配目标设备。

读取和发送数据

设备打开后,可通过监听 inputreport 事件接收来自设备的数据报告。

同时可以调用 device.sendReport() 向设备发送输出报告(如果设备支持)。

示例:

function setupEventListeners(device) {  device.addEventListener("inputreport", (event) => {    const { data, reportId } = event;    const bytes = new Uint8Array(data.buffer);    console.log(`收到报告 ID ${reportId}:`, bytes);    // 处理接收到的数据,例如解析按钮状态或传感器值  });}// 发送数据到设备(例如点亮 LED)async function sendOutputReport(device, reportId, data) {  await device.sendReport(reportId, data);}

实际应用场景与注意事项

Web HID 适用于需要与特殊外设交互的应用,如工业控制器、医疗仪器、教育硬件或 DIY 项目。

用户必须手动授予每次访问权限,不能后台静默连接 并非所有 HID 设备都暴露给网页 —— 部分系统关键设备(如主键盘)会被屏蔽 注意报告 ID 和数据格式需参考设备的技术文档(通常为 HID 报告描述符定义) 跨平台兼容性可能受限,尤其在不同操作系统的权限处理上存在差异

基本上就这些。只要设备支持、浏览器环境合规,并正确解析数据格式,就能实现稳定通信。虽然能力强大,但也需谨慎使用,避免滥用对用户造成困扰。

以上就是如何通过 Web HID API 与人类接口设备进行直接通信?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1529313.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月20日 21:00:42
下一篇 2025年12月15日 18:57:49

相关推荐

发表回复

登录后才能评论
关注微信