跨境派

跨境派

跨境派,专注跨境行业新闻资讯、跨境电商知识分享!

当前位置:首页 > 卖家故事 > 使用 Web HID API 在浏览器中进行HID设备交互(纯前端)

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

时间:2024-03-27 13:45:57 来源:网络cs 作者:峨乐 栏目:卖家故事 阅读:

标签: 设备  交互  浏览  使用 
阅读本书更多章节>>>>

文章目录

目的基础说明示例工程(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目前还处于实验性质,只有电脑上的Chrome、Edge、Opera等浏览器支持:
在这里插入图片描述

另外还需要注意的是从网页操作设备是比较容易产生安全风险的,所以这个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 三项可以用来数据读写交互的当然前提是设备自身支持。

// 读取Featureconst dataView = await device.receiveFeatureReport(reportId);// 写Featureawait 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设备非常方便,目前来说唯一的问题是这还是实验性质的功能,可能之后接口还会变动,等根据实际情况进行调整。

阅读本书更多章节>>>>

本文链接:https://www.kjpai.cn/gushi/2024-03-27/149475.html,文章来源:网络cs,作者:峨乐,版权归作者所有,如需转载请注明来源和作者,否则将追究法律责任!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。

文章评论