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 或抓包工具分析原始数据流。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

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

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

826

2023.08.11

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

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

741

2023.11.06

if什么意思
if什么意思

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

773

2023.08.22

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

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

1074

2023.10.19

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

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

169

2025.10.17

php8.4实现接口限流的教程
php8.4实现接口限流的教程

PHP8.4本身不内置限流功能,需借助Redis(令牌桶)或Swoole(漏桶)实现;文件锁因I/O瓶颈、无跨机共享、秒级精度等缺陷不适用高并发场景。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1222

2025.12.29

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

16

2026.01.19

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

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

2065

2024.08.16

拼多多赚钱的5种方法 拼多多赚钱的5种方法
拼多多赚钱的5种方法 拼多多赚钱的5种方法

在拼多多上赚钱主要可以通过无货源模式一件代发、精细化运营特色店铺、参与官方高流量活动、利用拼团机制社交裂变,以及成为多多进宝推广员这5种方法实现。核心策略在于通过低成本、高效率的供应链管理与营销,利用平台社交电商红利实现盈利。

31

2026.01.26

热门下载

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

精品课程

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

共1课时 | 0.1万人学习

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

共26课时 | 5万人学习

前端工程化(ES6模块化和webpack打包)
前端工程化(ES6模块化和webpack打包)

共24课时 | 5.1万人学习

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

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