目的

最近在搞HID透傳 《STM32 USB使用記錄：HID類設(shè)備（后篇）》 。

市面上的各種測試工具都或多或少存在問題，所以就自己寫一個工具進行測試。目前來說純前端方案編寫這個工具應(yīng)該是最方便的，這里對 Web HID API 相關(guān)內(nèi)容做個記錄。

基礎(chǔ)說明

Web HID API 相關(guān)內(nèi)容參考如下：
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目前還處于實驗性質(zhì)，只有電腦上的Chrome、Edge、Opera等瀏覽器支持：

另外還需要注意的是從網(wǎng)頁操作設(shè)備是比較容易產(chǎn)生安全風險的，所以這個API只支持本地調(diào)用或者是HTTPS方式調(diào)用。

使用下面方法可以偵測電腦上HID設(shè)備插入與拔出：

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

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

使用下面方法可以顯示電腦上的HID設(shè)備選擇授權(quán)，或者顯示已授權(quán)的HID設(shè)備列表：

// requestDevice方法將顯示一個包含已連接設(shè)備列表的對話框，用戶選擇可以并授予其中一個設(shè)備訪問權(quán)限
const devices = await navigator.hid.requestDevice({ filters: [] });
// 注意這里返回的是一個數(shù)組

// const devices = await navigator.hid.requestDevice({
//     filters: [{
//         vendorId: 0xabcd,  // 根據(jù)VID進行過濾
//         productId: 0x1234, // 根據(jù)PID進行過濾
//         usagePage: 0x0c,   // 根據(jù)usagePage進行過濾
//         usage: 0x01,       // 根據(jù)usage進行過濾
//     },],
// });

// getDevices方法可以返回已連接的授權(quán)過的設(shè)備列表
// let devices = await navigator.hid.getDevices(); 

使用下面方法可以打開或關(guān)閉HID設(shè)備等：

if (!device.opened) { // 檢查設(shè)備是否打開
    await device.open(); // 打開設(shè)備
}
// await device.close(); // 關(guān)閉設(shè)備
// await device.forget() // 遺忘設(shè)備

使用下面可以讀寫數(shù)據(jù)：
對于HID設(shè)備而言主要有 feature 、 input 、 output 三項可以用來數(shù)據(jù)讀寫交互的當然前提是設(shè)備自身支持。

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

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

// 向HID設(shè)備發(fā)送數(shù)據(jù)
await device.sendReport(reportId, data); // reportId寫0表示不適用reportId

// 監(jiān)聽來自HID設(shè)備的數(shù)據(jù)（input）
device.oninputreport = (event) => {
    console.log(event); // event中包含device、reportId、data等內(nèi)容
};

示例工程（HID透傳測試工具）

代碼與說明：《基于 Web HID API 的HID透傳測試工具（純前端）》
項目地址：https://github.com/NaisuXu/HID_Passthrough_Tool

總結(jié)

使用 Web HID API 訪問HID設(shè)備非常方便，目前來說唯一的問題是這還是實驗性質(zhì)的功能，可能之后接口還會變動，等根據(jù)實際情況進行調(diào)整。文章來源地址http://www.zghlxwxcb.cn/news/detail-803194.html

到了這里，關(guān)于使用 Web HID API 在瀏覽器中進行HID設(shè)備交互（純前端）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！