0

0

如何用BOM获取用户的USB设备信息?

煙雲

煙雲

发布时间:2025-07-03 23:01:01

|

850人浏览过

|

来源于php中文网

原创

要通过浏览器获取usb设备信息,必须使用webusb api而非bom,且需用户授权。首先,网页必须运行在https环境下;其次,调用navigator.usb.requestdevice()必须由用户手势触发,如点击按钮;接着,用户需从弹出的对话框中手动选择设备并授权;然后,通过返回的device对象可获取厂商id、产品id、设备名称等基本信息;最后,若需进一步通信,需打开设备、选择配置并声明接口,同时注意操作完成后释放资源。

如何用BOM获取用户的USB设备信息?

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

如何用BOM获取用户的USB设备信息?

解决方案

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

如何用BOM获取用户的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设备,更别提在用户不知情的情况下读取它们的详细信息。

如何用BOM获取用户的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)。如果不支持,就优雅地降级,比如提示用户使用支持的浏览器,或者提供一个桌面应用作为替代方案。

易优cms汽车车辆租赁源码1.7.2
易优cms汽车车辆租赁源码1.7.2

由于疫情等原因大家都开始习惯了通过互联网上租车服务的信息多方面,且获取方式简便,不管是婚庆用车、旅游租车、还是短租等租车业务。越来越多租车企业都开始主动把租车业务推向给潜在需求客户,所以如何设计一个租车网站,以便在同行中脱颖而出就重要了,易优cms针对租车行业市场需求、目标客户、盈利模式等,进行策划、设计、制作,建设一个符合用户与搜索引擎需求的租车网站源码。 网站首页

下载

另一个挑战是设备的驱动问题。WebUSB API是与设备的USB驱动进行交互的。如果用户的操作系统没有安装正确的驱动,或者驱动有问题,即使WebUSB API本身工作正常,也可能无法成功连接或通信。这通常不是前端代码能解决的,但你可以在用户遇到连接问题时,引导他们检查设备驱动。

再来,设备状态管理也容易出问题。USB设备可能会在任何时候被拔出,或者进入休眠状态。你需要监听navigator.usb.onconnectnavigator.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应用来说,无疑是一个重要的里程碑。

相关专题

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

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

822

2023.08.11

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

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

737

2023.11.06

edge是什么浏览器
edge是什么浏览器

Edge是一款由Microsoft开发的网页浏览器,是Windows 10操作系统中默认的浏览器,其目标是提供更快、更安全、更现代化的浏览器体验。本专题为大家提供edge浏览器相关的文章、下载、课程内容,供大家免费下载体验。

1374

2023.08.21

IE浏览器自动跳转EDGE如何恢复
IE浏览器自动跳转EDGE如何恢复

ie浏览器自动跳转edge的解决办法:1、更改默认浏览器设置;2、阻止edge浏览器的自动跳转;3、更改超链接的默认打开方式;4、禁用“快速网页查看器”;5、卸载edge浏览器;6、检查第三方插件或应用程序等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

379

2024.03.05

如何解决Edge打开但没有标题的问题
如何解决Edge打开但没有标题的问题

若 Microsoft Edge 浏览器打开后无标题(窗口空白或标题栏缺失),可尝试以下方法解决: 重启 Edge:关闭所有窗口,重新启动浏览器。 重置窗口布局:右击任务栏 Edge 图标 → 选择「最大化」或「还原」。 禁用扩展:进入 edge://extensions 临时关闭插件测试。 重置浏览器设置:前往 edge://settings/reset 恢复默认配置。 更新或重装 Edge:检查最新版本,或通过控制面板修复

916

2025.04.24

if什么意思
if什么意思

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

768

2023.08.22

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

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

1051

2023.10.19

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

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

127

2025.10.17

c++空格相关教程合集
c++空格相关教程合集

本专题整合了c++空格相关教程,阅读专题下面的文章了解更多详细内容。

0

2026.01.23

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Rust 教程
Rust 教程

共28课时 | 4.7万人学习

PostgreSQL 教程
PostgreSQL 教程

共48课时 | 7.6万人学习

Git 教程
Git 教程

共21课时 | 2.9万人学习

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

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