使用 Web HID API 在浏览器中进行HID设备交互(纯前端)

news2024/11/22 23:03:56

文章目录

  • 目的
  • 基础说明
  • 示例工程(HID透传测试工具)
  • 总结

目的

最近再搞HID透传 《STM32 USB使用记录:HID类设备(后篇)》 。

市面上的各种测试工具都或多或少存在问题,所以就自己写一个工具进行测试。目前来说纯前端方案编写这个工具应该是最方便的,这里对 Web HID API 相关内容做个记录。

基础说明

Web HID API 相关内容参考如下:
https://developer.mozilla.org/en-US/docs/Web/API/WebHID_API
https://developer.mozilla.org/en-US/docs/Web/API/HID
https://developer.mozilla.org/en-US/docs/Web/API/HIDDevice
https://developer.mozilla.org/en-US/docs/Web/API/HIDInputReportEvent
https://wicg.github.io/webhid/

需要特别注意的是从网页操作设备是比较容易产生安全风险的,所以这个API只支持本地调用或者是HTTPS方式调用。

使用下面方法可以侦测电脑上HID设备插入与拔出:

// 全局HID设备插入事件
navigator.hid.onconnect = (event) => {
    console.log("HID connected: ", event.device);
};

// 全局HID设备拔出事件
navigator.hid.ondisconnect = (event) => {
    console.log("HID connected: ", event.device);
};

使用下面方法可以显示电脑上的HID设备选择授权,或者显示已授权的HID设备列表:

// requestDevice方法将显示一个包含已连接设备列表的对话框,用户选择可以并授予其中一个设备访问权限
const devices = await navigator.hid.requestDevice({ filters: [] });
// 注意这里返回的是一个数组

// const devices = await navigator.hid.requestDevice({
//     filters: [{
//         vendorId: 0xabcd,  // 根据VID进行过滤
//         productId: 0x1234, // 根据PID进行过滤
//         usagePage: 0x0c,   // 根据usagePage进行过滤
//         usage: 0x01,       // 根据usage进行过滤
//     },],
// });

// getDevices方法可以返回已连接的授权过的设备列表
// let devices = await navigator.hid.getDevices(); 

使用下面方法可以打开或关闭HID设备等:

if (!device.opened) { // 检查设备是否打开
    await device.open(); // 打开设备
}
// await device.close(); // 关闭设备
// await device.forget() // 遗忘设备

使用下面可以读写数据:
对于HID设备而言主要有 featureinputoutput 三项可以用来数据读写交互的当然前提是设备自身支持。

// 读取Feature
const dataView = await device.receiveFeatureReport(reportId);

// 写Feature
await device.sendFeatureReport(reportId, data);

// 向HID设备发送数据
await device.sendReport(reportId, data); // reportId写0表示不适用reportId

// 监听来自HID设备的数据(input)
device.oninputreport = (event) => {
    console.log(event); // event中包含device、reportId、data等内容
};

示例工程(HID透传测试工具)

代码与说明:《基于 Web HID API 的HID透传测试工具(纯前端)》
项目地址:https://github.com/NaisuXu/HID_Passthrough_Tool
在这里插入图片描述

总结

使用 Web HID API 访问HID设备非常方便,目前来说唯一的问题是这还是实验性质的功能,可能之后接口还会变动,等根据实际情况进行调整。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/975254.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

运动耳机选购攻略、好的运动耳机推荐

如今,蓝牙耳机不仅是手机的最佳伴侣,也成为了运动爱好者的必备装备。但是,在如此众多的蓝牙耳机中,你是否对选购感到困惑呢?实际上,选择适合运动的蓝牙耳机需要考虑许多因素,如舒适度、稳固性、…

app自动化测试(Android)

Capability 是一组键值对的集合(比如:"platformName": "Android")。Capability 主要用于通知 Appium 服务端建立 Session 需要的信息。客户端使用特定语言生成 Capabilities,最终会以 JSON 对象的形式发送给 …

气象站的构成及功能应用

气象站是一种用于观测、记录和报告天气数据的设备。它是由数据采集系统、通讯系统、供电系统和立杆支架构成。 一、气象站的构成: 数据采集系统:用于测量气温、湿度、风速、风向、气压、降雨量、雪深等气象参数。 通讯系统:收集和处理传感…

深度解析lettuce,为什么单连接也可以处理高并发redis请求

简介 什么是lettuce Spring Boot自2.0版本开始默认使用Lettuce作为Redis的客户端(注1)。Lettuce客户端基于Netty的NIO框架实现,对于大多数的Redis操作,只需要维持单一的连接即可高效支持业务端的并发请求 —— 这点与Jedis的连接…

电子科大软件系统架构设计——面向对象建模基础

文章目录 面向对象建模基础UML建模语言UML模型图用例图活动图类图顺序图通信图状态机图构件图部署图包图对象图组合结构图扩展图交互概览图时间图 BPMN建模语言业务建模定义模型元素流对象活动事件网关 流数据人工制品泳池和泳道 建模案例订单采购流程建模电商系统订货业务流程…

ITIL重大事件管理综合指南

什么是ITIL中的重大事件 重大事件是一个高影响力的紧急问题,通常影响整个组织或其主要部分。重大事件几乎总是导致组织的服务变得不可用,从而导致该组织的业务受到打击,并最终影响其财务状况。重大事件可以通过两种方式影响组织的服务&#…

MATLAB中movmean函数用法

目录 语法 说明 示例 向量的中心移动平均值 向量的尾部移动平均值 矩阵的移动平均值 包含缺失值的向量的移动平均值 基于样本点计算移动平均值 仅返回满窗口平均值 movmean函数的功能是对数据进行移动求平均值。 语法 M movmean(A,k) M movmean(A,[kb kf]) M mov…

四川玖璨电子商务有限公司:短视频有什么运营

根据短视频有什么运营,短视频的拍摄工具多种多样。无论是在手机上拍摄还是使用专业摄影设备,拍摄短视频的目的都是为了吸引观众的注意力和提升内容的质量。从小花费到高投入,在不断发展的短视频行业中,拍摄方法也得到了不断创新和…

Hadoop YARN HA 集群安装部署详细图文教程

目录 一、YARN 集群角色、部署规划 1.1 集群角色--概述 1.2 集群角色--ResourceManager(RM) 1.3 集群角色--NodeManager(NM) 1.4 HA 集群部署规划 二、YARN RM 重启机制 2.1 概述 2.2 演示 2.2.1 不开启 RM 重启机制…

RHCA之路---EX280(7)

RHCA之路—EX280(7) 1. 题目 Configure quotas and limits for project shrimp so that: The ResourceQuota resource is named ex280-quota The amount of memory consumed across all containers may not exceed 1Gi The total amount of CPU usage consumed across all con…

Qt包含文件不存在问题解决 QNetworkAccessManager

这里用到了Qt的网络模块&#xff0c;在.pro中添加了 QT network 但是添加 #include <QNetworkAccessManager> 会报错说找不到&#xff0c;可以通过在项目上右键执行qmake后&#xff0c;直接#include <QNetworkAccessManager>就不会报错了&#xff1a;

固定资产管理怎么改革

固定资产管理改革需要考虑以下几个方面&#xff1a; 建立完善的管理制度和流程&#xff1a;制定固定资产管理的规章制度&#xff0c;明确各部门的职责和任务&#xff0c;规范资产采购、登记、领用、保管、维修、报废等流程。 采用先进的资产管理软件&#xff1a;通过采用先进的…

【python基础知识】5.for循环和while循环

文章目录 前言for...in...循环语句for循环&#xff1a;空房间for循环&#xff1a;一群排队办业务的人range()函数for循环&#xff1a;办事流程 while循环while循环&#xff1a;放行条件while循环&#xff1a;办事流程 两种循环对比 前言 上一关&#xff0c;我们学习了两种新的…

新23转债上市价格预测

新23转债 基本信息 转债名称&#xff1a;新23转债&#xff0c;评级&#xff1a;AA-&#xff0c;发行规模&#xff1a;11.6亿元。 正股名称&#xff1a;新泉股份&#xff0c;今日收盘价&#xff1a;53.17元&#xff0c;转股价格&#xff1a;51.35元。 当前转股价值 转债面值 / …

新手学习导航设计的10个技巧

如果一个网站有良好的可用性&#xff0c;基本的需求是良好的导航设计。 本文结合社区优秀的网页导航设计案例&#xff0c;总结了网页导航设计的10项技能。 网页导航设计案例即时设计是一款支持在线协作的专业级 UI 设计工具&#xff0c;支持 Sketch、Figma、XD 格式导入&#…

uniapp微信小程序隐私保护引导新规

1.components中新建组件PrivacyPop.vue <template><view class"privacy" v-if"showPrivacy"><view class"content"><view class"title">隐私保护指引</view><view class"des">在使用当…

微信小程序添加用户授权《隐私保护协议》

官方文档&#xff1a;wx.onNeedPrivacyAuthorization(function listener) | 微信开放文档 隐私协议配置 微信小程序平台上需要进行隐私配置&#xff0c;审核成功后大概半小时左右才会生效。 小程序公众平台 --- 设置 --- 服务内容声明 --- 用户隐私保护指引&#xff08;提交…

接口自动化框架Pytest —— 配置文件pytest.ini的详细使用

前言 我们在执行用例的时候&#xff0c;每次都在命令行中输入-v&#xff0c;-s等一些命令行参数的时&#xff0c;比较麻烦。其中pytest.ini这个配置文件可以快速的帮助我们解决这个问题。 配置文件 我们在执行用例的时候&#xff0c;每次都在命令行中输入-v&#xff0c;-s等一…

期权交易手续费哪家券商平台费率最低?怎么收费的?

随着场内ETF期权市场的发展&#xff0c;越来越多的新的品种上市。我们知道&#xff0c;想要交易5期权必须先在券商开通50ETF期权账户&#xff0c;不同券商手续费收取多少不一样&#xff0c;那么就来为大家介绍一下期权交易手续费哪家券商平台费率最低&#xff1f;怎么收费的&am…

设计模式 - 责任链

一、前言 ​ 相信大家平时或多或少都间接接触过责任链设计模式&#xff0c;只是可能有些同学自己不知道此处用的是该设计模式&#xff0c;比如说 Java Web 中的 Filter 过滤器&#xff0c;就是非常经典的责任链设计模式的例子。 那么什么是责任链设计模式呢&#xff1f; ​ …