0

0

如何用WebHID API接入人机接口设备?

夢幻星辰

夢幻星辰

发布时间:2025-09-27 14:15:02

|

397人浏览过

|

来源于php中文网

原创

WebHID API可在支持的浏览器中实现网页与HID设备的双向通信。首先需在HTTPS环境下检查浏览器兼容性:if ('hid' in navigator)。通过navigator.hid.requestDevice()请求用户授权并选择设备,可使用vendorId、productId等过滤。连接后调用device.open()并监听inputreport事件接收数据,数据为DataView格式,需解析为Uint8Array处理。如设备支持,可用sendReport发送输出报告控制硬件。目前Chrome 89+支持,核心难点在于理解设备特定的数据协议。

如何用webhid api接入人机接口设备?

WebHID API 让网页可以直接与键盘、鼠标、游戏手柄等 HID 设备通信,适用于需要精细控制硬件的场景。要使用 WebHID 接入设备,需通过浏览器请求用户授权并建立连接。

启用与检测 WebHID 支持

目前 WebHID 主要在 Chrome 89+ 和部分基于 Chromium 的浏览器中支持。使用前先检查浏览器是否支持:

if ('hid' in navigator) {
  console.log('WebHID 可用');
} else {
  console.log('当前浏览器不支持 WebHID');
}

注意:页面必须运行在 HTTPS 环境下(或本地开发时的 localhost),否则 API 不可用。

请求连接 HID 设备

调用 navigator.hid.requestDevice() 弹出设备选择框,用户可从中授权一个或多个设备:

const devices = await navigator.hid.requestDevice({
  filters: [{ vendorId: 0x1234, productId: 0x5678 }] // 按厂商/产品 ID 过滤
});

如果不指定 filters,用户可以看到所有可识别的 HID 设备。常见字段还包括 usagePageusage,用于按功能筛选(如游戏控制器、条码扫描器)。

监听输入数据

设备连接后,需打开会话并监听输入报告:

币商智能量化机器人交易系统
币商智能量化机器人交易系统

币商智能量化机器人交易系统具备接入火币,ok币,币安,比特儿系统的API接口,用户只需开通API权限即可接入,由于无转出转入权限,所以非常安全,设置机器人点位24小时自动量化交易。

下载
for (const device of devices) {
  await device.open();
  device.addEventListener('inputreport', (event) => {
    const { data, reportId } = event;
    const bytes = new Uint8Array(data.buffer);
    console.log(`收到数据,Report ID: ${reportId}`, bytes);
  });
}

inputreport 事件会在设备发送数据时触发,data 是一个 DataView 对象,需根据设备协议解析原始字节

发送输出报告(可选)

若设备支持写入操作(如控制 LED 或震动反馈),可通过 sendReport 发送数据:

await device.sendReport(reportId, new Uint8Array([0x01, 0x02, 0x03]));

reportId 和数据格式需参考设备文档,错误的格式可能导致无响应或设备异常。

基本上就这些。只要设备被正确识别且用户授权,WebHID 能实现稳定的双向通信。难点通常在于理解设备的数据格式和用途定义。建议配合官方 SDK 或抓包工具分析原始数据流。

相关专题

更多
chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

704

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

708

2023.11.06

if什么意思
if什么意思

if的意思是“如果”的条件。它是一个用于引导条件语句的关键词,用于根据特定条件的真假情况来执行不同的代码块。本专题提供if什么意思的相关文章,供大家免费阅读。

703

2023.08.22

硬盘接口类型介绍
硬盘接口类型介绍

硬盘接口类型有IDE、SATA、SCSI、Fibre Channel、USB、eSATA、mSATA、PCIe等等。详细介绍:1、IDE接口是一种并行接口,主要用于连接硬盘和光驱等设备,它主要有两种类型:ATA和ATAPI,IDE接口已经逐渐被SATA接口;2、SATA接口是一种串行接口,相较于IDE接口,它具有更高的传输速度、更低的功耗和更小的体积;3、SCSI接口等等。

980

2023.10.19

PHP接口编写教程
PHP接口编写教程

本专题整合了PHP接口编写教程,阅读专题下面的文章了解更多详细内容。

39

2025.10.17

http与https有哪些区别
http与https有哪些区别

http与https的区别:1、协议安全性;2、连接方式;3、证书管理;4、连接状态;5、端口号;6、资源消耗;7、兼容性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1528

2024.08.16

苹果官网入口直接访问
苹果官网入口直接访问

苹果官网直接访问入口是https://www.apple.com/cn/,该页面具备0.8秒首屏渲染、HTTP/3与Brotli加速、WebP+AVIF双格式图片、免登录浏览全参数等特性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

115

2025.12.24

拼豆图纸在线生成器
拼豆图纸在线生成器

拼豆图纸生成器有PixelBeads在线版、BeadGen和“豆图快转”;推荐通过pixelbeads.online或搜索“beadgen free online”直达官网,避开需注册的诱导页面。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

84

2025.12.24

俄罗斯搜索引擎yandex官方入口地址(最新版)
俄罗斯搜索引擎yandex官方入口地址(最新版)

Yandex官方入口网址是https://yandex.com。用户可通过网页端直连或移动端浏览器直接访问,无需登录即可使用搜索、图片、新闻、地图等全部基础功能,并支持多语种检索与静态资源精准筛选。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

553

2025.12.24

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
如何进行WebSocket调试
如何进行WebSocket调试

共1课时 | 0.1万人学习

TypeScript全面解读课程
TypeScript全面解读课程

共26课时 | 5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号