讲师中心 微信公众号

工具推荐

视频效率加速
Laper
Laper

剧本策划到成片协作

剧云
剧云

中文短剧剧本制作平台

AniShort
AniShort

AI短剧协同制作平台

updream

一键生成高质量推广成片

谷歌浏览器如何使用WebHID API连接硬件设备【物联网】

落雪吖_1274

落雪吖_1274

发布时间:2026-02-14 21:44:03

|

687人浏览过

|

来源于php中文网

原创

WebHID API在Chrome 89+中需满足安全上下文、用户授权、设备兼容等条件才能连接USB HID设备:检查版本与flags、通过按钮触发requestDevice、open设备并监听inputreport、验证描述符符合HID规范、确保HTTPS或localhost环境。

谷歌浏览器如何使用webhid api连接硬件设备【物联网】

如果您尝试在谷歌浏览器中通过WebHID API与USB HID硬件设备进行通信,但无法建立连接,则可能是由于权限未授予、设备未正确声明或浏览器环境不满足要求。以下是实现此功能的具体步骤:

一、确保浏览器版本与启用实验性功能

WebHID API目前仅在Chrome 89及以上版本中默认启用,但需确认当前运行的Chrome为稳定版且未被企业策略禁用。部分旧版或定制内核浏览器可能完全屏蔽该API。

1、在地址栏输入 chrome://version,查看版本号是否 ≥ 89。

2、访问 chrome://flags/#enable-web-hid,确认该实验性标志处于“Enabled”状态。

3、重启浏览器使更改生效。

二、在网页中请求HID设备访问权限

WebHID要求用户主动授权,不能自动连接设备。必须通过用户手势(如点击按钮)触发 navigator.hid.requestDevice(),否则调用将被拒绝。

1、在HTML中添加一个按钮元素,例如:。

2、为按钮绑定点击事件,在事件处理函数中调用 navigator.hid.requestDevice({ filters: [...] })。

3、在filters数组中指定目标设备的vendorId和productId,或使用usagePage与usage匹配通用HID类设备(如0x01页面下的0x06键盘)。

三、处理设备连接后的接口操作

成功获取设备对象后,需监听输入报告、打开报告通道,并向设备发送输出报告。所有I/O操作均基于HIDDevice实例,且必须在设备已连接且已打开的状态下执行。

1、调用 device.open() 建立与设备的通信会话。

CDP浏览器大师
CDP浏览器大师

CDP浏览器大师:通过Chrome DevTools Protocol驱动已登录浏览器实现自动化任务,解决反爬封号、选择器失效、SPA路由难导航、固定sleep不准四大痛点。核心能力包括UA伪装、WebGL/Canvas指纹混淆、智能等待、动态选择器以及可视化调试。

下载

2、使用 device.addEventListener('inputreport', handler) 监听来自设备的数据流。

3、构造 Uint8Array 数据并调用 device.sendReport(reportId, data) 向设备发送控制指令。

四、检查USB设备描述符兼容性

WebHID仅支持符合HID规范的设备,且设备描述符中必须包含完整的Report Descriptor。若设备使用自定义协议或省略了标准HID类描述符,Chrome将无法识别其为合法HID设备。

1、使用工具如USBlyzer(Windows)或lsusb -v(Linux/macOS)读取设备完整描述符。

2、确认bInterfaceClass字段值为0x03(HID类),且接口描述符中包含HID类特定头。

3、验证Report Descriptor长度非零,并能被Chrome解析为有效结构(可通过chrome://device-log查看hid相关日志)。

五、处理跨源与安全上下文限制

WebHID API强制要求页面运行在安全上下文中:即必须通过HTTPS提供服务(localhost除外),且不能嵌套在非安全iframe中。混合内容或data: URL也会导致API不可用。

1、确认当前页面URL以https://开头,或为http://localhost(含端口)。

2、检查控制台是否报错 SecurityError: HID access is only supported in secure contexts.。

3、若部署在本地开发环境,使用Python的python -m http.server 8000 --bind 127.0.0.1启动服务,避免file://协议加载。

相关文章

谷歌浏览器
谷歌浏览器

谷歌浏览器Google Chrome是一款可让您更快速、轻松且安全地使用网络的浏览器。Google Chrome的设计超级简洁,使用起来得心应手。这里提供了谷歌浏览器纯净安装包,有需要的小伙伴快来保存下载体验吧!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

Flowith
Flowith Hot

Flowith是一款基于画布和智能体工作流的 AI 协作工作空间。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

相关专题

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

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

2986

2023.08.11

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

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

6199

2023.11.06

Chrome开启无痕模式
Chrome开启无痕模式

本专题整合了Chrome无痕模式开启相关内容,阅读专题下面的文章了解更多详细教程。

4427

2026.03.24

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

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

3248

2023.10.19

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

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

5469

2025.10.17

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

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

3909

2025.12.29

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

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

506

2026.01.19

windows查看端口占用情况
windows查看端口占用情况

Windows端口可以认为是计算机与外界通讯交流的出入口。逻辑意义上的端口一般是指TCP/IP协议中的端口,端口号的范围从0到65535,比如用于浏览网页服务的80端口,用于FTP服务的21端口等等。怎么查看windows端口占用情况呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

3479

2023.07.26

Go-Zero API开发使用教程
Go-Zero API开发使用教程

本专题聚焦Go-Zero的API开发,拆解.api描述文件的语法结构、路由与分组定义、参数绑定与校验规则,说明统一响应体、JWT鉴权、跨域与接口文档生成的落地方式,并给出网关聚合与接口测试的实践建议。

20

2026.11.12

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
MDN CSS 文档与布局指南
MDN CSS 文档与布局指南

共0课时 | 0人学习

Postman安装指南
Postman安装指南

共0课时 | 0人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn