BOM获取USB设备信息的技巧解析
怎么入门文章编程?需要学习哪些知识点?这是新手们刚接触编程时常见的问题;下面golang学习网就来给大家整理分享一些知识点,希望能够给初学者一些帮助。本篇文章就来介绍《BOM获取USB设备信息的方法解析》,涉及到,有需要的可以收藏一下
要通过浏览器获取USB设备信息,必须使用WebUSB API而非BOM,且需用户授权。首先,网页必须运行在HTTPS环境下;其次,调用navigator.usb.requestDevice()必须由用户手势触发,如点击按钮;接着,用户需从弹出的对话框中手动选择设备并授权;然后,通过返回的device对象可获取厂商ID、产品ID、设备名称等基本信息;最后,若需进一步通信,需打开设备、选择配置并声明接口,同时注意操作完成后释放资源。

要直接用浏览器对象模型(BOM)来获取用户的USB设备详细信息,说实话,这事儿没那么简单,甚至可以说,你直接想用BOM去“扫描”用户的USB设备列表,那是不可能的。浏览器出于安全和隐私的考虑,对这种底层硬件访问有着极其严格的限制。不过,如果你指的是通过浏览器环境下的API,那么现代浏览器确实提供了WebUSB API,它允许网页在用户明确授权的情况下,与特定的USB设备进行交互。这并非传统意义上BOM的直接能力,而是浏览器提供的一项高级功能,它通过navigator.usb这个对象来暴露接口。

解决方案
利用WebUSB API与用户的USB设备进行交互,获取其基本信息。这个过程需要用户的主动授权和明确的选择,这是浏览器安全模型的核心。

async function getUsbDeviceInfo() {
try {
// 1. 请求用户选择一个USB设备
// 这一步必须由用户手势触发,例如点击按钮
const device = await navigator.usb.requestDevice({
filters: [
// 你可以指定过滤器来限制用户能选择的设备类型
// 例如:{ vendorId: 0xABCD, productId: 0x1234 }
// 如果不指定,用户可以看到所有可用的USB设备
]
});
// 2. 获取设备的基本信息
console.log(`设备名称: ${device.productName || '未知名称'}`);
console.log(`厂商ID: 0x${device.vendorId.toString(16).toUpperCase()}`);
console.log(`产品ID: 0x${device.productId.toString(16).toUpperCase()}`);
console.log(`序列号: ${device.serialNumber || '无序列号'}`);
console.log(`设备类: 0x${device.deviceClass.toString(16).toUpperCase()}`);
console.log(`协议: 0x${device.deviceProtocol.toString(16).toUpperCase()}`);
console.log(`子类: 0x${device.deviceSubclass.toString(16).toUpperCase()}`);
// 3. 打开设备并配置(如果需要进一步通信)
await device.open();
if (device.configuration === null) {
await device.selectConfiguration(1); // 选择第一个配置
}
await device.claimInterface(0); // 声明第一个接口
console.log('设备已成功打开并声明接口。');
// 此时你可以开始与设备进行数据传输
// 例如:await device.transferIn(endpointNumber, length);
// 或者:await device.transferOut(endpointNumber, data);
} catch (error) {
console.error('获取USB设备信息或操作失败:', error);
if (error.name === 'NotFoundError') {
console.log('用户取消了设备选择,或者没有找到符合条件的设备。');
} else if (error.name === 'SecurityError') {
console.log('可能不是HTTPS环境,或者权限被拒绝。');
}
} finally {
// 确保在操作完成后关闭设备,释放资源
// if (device && device.opened) {
// await device.close();
// console.log('设备已关闭。');
// }
}
}
// 示例:通常会绑定到一个按钮点击事件
// document.getElementById('connectUsbButton').addEventListener('click', getUsbDeviceInfo);要运行这段代码,你的网页必须运行在HTTPS环境下,并且navigator.usb对象可用(浏览器支持WebUSB API)。
WebUSB API的局限性与安全性考量
使用WebUSB API来获取USB设备信息,听起来很酷,但它并非没有限制。实际上,这些限制正是为了保护用户隐私和系统安全而设计的,这背后是浏览器安全模型的一次深刻体现。你不能像桌面应用那样随意枚举所有连接的USB设备,更别提在用户不知情的情况下读取它们的详细信息。

首先,必须是HTTPS环境。这是强制性的,HTTP下根本无法调用WebUSB API。其次,需要用户手势触发。navigator.usb.requestDevice()这个方法,必须由用户的主动行为(比如点击一个按钮)来调用。这意味着你不能在页面加载时就偷偷摸摸地去探测用户的USB设备。再次,用户需要明确选择和授权。当requestDevice()被调用时,浏览器会弹出一个对话框,列出符合你指定过滤条件的USB设备(如果没有过滤器,则列出所有可访问的设备),用户必须手动选择一个设备并点击“连接”。如果用户拒绝,或者没有选择任何设备,你的代码就无法继续。最后,你只能获取有限的、非敏感的信息。通过device对象,你可以获取到设备的厂商ID(vendorId)、产品ID(productId)、产品名称(productName)、序列号(serialNumber)等基本信息。至于更深层次、更私密的设备固件信息或者设备内部状态,除非设备本身提供了特定的USB接口和命令来暴露这些数据,否则浏览器是无法直接读取的。这确保了恶意网站无法通过WebUSB API来指纹识别用户或窃取数据。
常见的挑战与解决方案
在实际开发中,你可能会遇到一些让人头疼的问题,这很正常。WebUSB虽然强大,但它毕竟是运行在浏览器沙箱里的。
一个常见的挑战是浏览器兼容性。虽然主流浏览器如Chrome、Edge已经很好地支持WebUSB,但Firefox和Safari的支持度就差一些,或者说,Safari目前根本不支持。这意味着你的应用可能无法在所有用户的浏览器上工作。对此,我的建议是,在调用WebUSB API之前,先进行特性检测:if ('usb' in navigator)。如果不支持,就优雅地降级,比如提示用户使用支持的浏览器,或者提供一个桌面应用作为替代方案。
另一个挑战是设备的驱动问题。WebUSB API是与设备的USB驱动进行交互的。如果用户的操作系统没有安装正确的驱动,或者驱动有问题,即使WebUSB API本身工作正常,也可能无法成功连接或通信。这通常不是前端代码能解决的,但你可以在用户遇到连接问题时,引导他们检查设备驱动。
再来,设备状态管理也容易出问题。USB设备可能会在任何时候被拔出,或者进入休眠状态。你需要监听navigator.usb.onconnect和navigator.usb.ondisconnect事件来处理设备的连接和断开。当设备断开时,你正在进行的任何传输都会失败,需要妥善处理错误。同时,记得在完成操作后调用device.close()来释放设备资源,避免资源泄露。
WebUSB API在实际场景中的应用潜力
尽管有上述限制,WebUSB API的出现依然为Web应用打开了一扇通往硬件世界的大门,它的应用潜力是相当可观的。这不再是那种只能在本地桌面应用里才能玩转的领域了。
一个非常直接且有用的场景是固件更新。设想一下,你的智能硬件产品需要更新固件,过去用户可能需要下载一个桌面应用,或者通过特定的烧录工具来完成。现在,你可以直接在浏览器里提供一个网页,用户连接设备后,通过WebUSB API直接上传固件文件到设备,完成更新。这极大地简化了用户操作,提升了用户体验。
另一个例子是教育和创客领域。许多可编程的微控制器(如Arduino、micro:bit)和机器人套件都通过USB与电脑通信。WebUSB使得基于Web的编程环境可以直接与这些硬件交互,实时上传代码、接收传感器数据。这对于在线编程教学、远程实验等场景来说,简直是革命性的。孩子们可以在浏览器里编写代码,然后直接“烧录”到他们的机器人上,看到实时的效果,这比安装复杂的IDE要友好得多。
此外,特定专业设备的数据采集与控制也是一个亮点。比如,某些医疗设备、测量仪器或工业控制器,它们通过USB接口与计算机连接。WebUSB使得Web应用能够直接从这些设备中读取数据,或者发送控制指令。这为远程监控、数据可视化和基于Web的设备管理提供了新的可能性。当然,这通常需要设备厂商的支持,因为你需要了解设备的USB协议规范才能进行有效的通信。
所以,虽然“用BOM获取USB设备信息”这个说法在字面上有些误导,但通过WebUSB API,我们确实能在浏览器里实现与USB设备的深度交互,这对于构建更强大的Web应用来说,无疑是一个重要的里程碑。
今天关于《BOM获取USB设备信息的技巧解析》的内容介绍就到此结束,如果有什么疑问或者建议,可以在golang学习网公众号下多多回复交流;文中若有不正之处,也希望回复留言以告知!
Golang搭建简单博客系统教程
- 上一篇
- Golang搭建简单博客系统教程
- 下一篇
- Deepseek满血版+GeniusScan使用指南
-
- 文章 · 前端 | 1天前 |
- 表单 aria-describedby 关联错误提示的可访问设计
- 349浏览 收藏
-
- 文章 · 前端 | 1天前 | 前端 · css · 组合选择器 CSS :is specificity :where 级联层
- CSS :is 组合选择器时的 specificity 控制
- 327浏览 收藏
-
- 文章 · 前端 | 1天前 | javascript · DNS耗时 PerformanceResourceTiming TLS耗时
- PerformanceResourceTiming 拆分 DNS 与 TLS 耗时
- 108浏览 收藏
-
- 文章 · 前端 | 4天前 | 前端 · websocket ·
- WebSocket 重连退避与页面卸载的收尾
- 381浏览 收藏
-
- 文章 · 前端 | 4天前 |
- Fetch keepalive 处理页面卸载前的小请求
- 291浏览 收藏
-
- 文章 · 前端 | 4天前 |
- CSS @scope 限定组件样式作用域的迁移方法
- 294浏览 收藏
-
- 文章 · 前端 | 4天前 |
- View Transition API 在 SPA 状态切换中的降级方案
- 142浏览 收藏
-
- 文章 · 前端 | 4天前 | javascript · 表单 · FormData FormDataEvent formdata事件 原生表单
- FormDataEvent 统一拦截原生表单数据的实现
- 288浏览 收藏
-
- 文章 · 前端 | 5天前 | html · javascript · 表单 · requestSubmit form.submit HTML表单校验
- requestSubmit 与 form.submit 有什么区别
- 392浏览 收藏
-
- 文章 · 前端 | 5天前 |
- scheduler.yield 怎么把长任务拆开又保持优先级
- 110浏览 收藏
-
- 文章 · 前端 | 5天前 | CSS 滚动动画 animation-timeline scroll-timeline
- CSS scroll-timeline 怎么驱动滚动进度动画
- 251浏览 收藏
-
- 文章 · 前端 | 5天前 |
- IntersectionObserver scrollMargin 怎么处理嵌套滚动容器
- 380浏览 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 485次学习
-
- PubMedQA
- 深入了解PubMedQA生物医学问答数据集,涵盖其核心功能、使用方法及在临床决策、药物研发等场景的应用,助力提升NLP模型性能。
- 312次使用
-
- H2O EvalGPT
- H2O EvalGPT是H2O.ai推出的开源LLM评估平台,提供详细的大模型性能排行榜、行业特定基准测试及A/B测试功能,助您快速选择最适合项目的高性能大语言模型。
- 370次使用
-
- LMArena
- LMArena是加州大学伯克利分校推出的AI模型匿名评测平台。通过盲测投票机制,用户可对比不同大模型回答并生成实时排行榜,助力开发者优化模型及用户选择最佳AI工具。
- 367次使用
-
- HELM
- 深入了解斯坦福推出的HELM(Holistic Evaluation of Language Models)大模型评测体系。本文解析其核心功能、安装配置步骤及应用场景,涵盖准确性、公平性、鲁棒性等多维度指标,助力开发者全面优化语言模型性能。
- 335次使用
-
- MMBench
- MMBench是由上海人工智能实验室等机构联合推出的多模态基准测试平台,提供细粒度能力评估、大规模数据集及VLMEvalKit工具。本文详细介绍其核心功能、安装使用方法及应用场景,助力开发者全面评估多模态模型性能。
- 157次使用
-
- JavaScript函数定义及示例详解
- 2025-05-11 502浏览
-
- 智能体安全引领产业升级——国内AI安全产品市场深度分析
- 2026-08-21 501浏览
-
- CSS变量简化按钮悬停效果技巧
- 2026-05-31 501浏览
-
- JavaScript符号类型详解与应用
- 2026-05-31 501浏览
-
- HTML剪贴板复制粘贴怎么用
- 2026-05-26 501浏览

