目的
获取usb设备列表
electron支持
我想获取所有的hid设备列表，从electron的官网中找到了这一段代码， webhid api
第一步，编写插件
然后把main.js中的部分拷贝出来，自己写了个插件，插件代码如下： 路径：electron/addon/webHid/index.js
/**
* webHid
*/
const { Tray, Menu } = require('electron');
const path = require('path');
const Ps = require('ee-core/ps');
const Log = require('ee-core/log');
const Electron = require('ee-core/electron');
const CoreWindow = require('ee-core/electron/window');
const Conf = require('ee-core/config');
const EE = require('ee-core/ee');
/**
* webhid插件
* @class
*/
class WebHidAddon {
constructor() {
//this.webhid = null;
}
/**
* 创建,主线程获取usb列表
*/
create (win=null) {
Log.info('[addon:webHid] load');
//主线程获取usb列表
const mainWindow = win || CoreWindow.getMainWindow();
Log.info('[addon:webHid] mainWindow.webContents.session', mainWindow.webContents.session);
mainWindow.webContents.session.on('select-hid-device', (event, details, callback) => {
Log.info('[addon:webHid] select-hid-device event', event);
Log.info('[addon:webHid] select-hid-device details', details);
// Add events to handle devices being added or removed before the callback on
// `select-hid-device` is called.
mainWindow.webContents.session.on('hid-device-added', (event, device) => {
Log.info('[addon:webHid] hid-device-added FIRED WITH', device);
// Optionally update details.deviceList
})
mainWindow.webContents.session.on('hid-device-removed', (event, device) => {
Log.info('[addon:webHid] hid-device-removed FIRED WITH', device);
// Optionally update details.deviceList
})
event.preventDefault()
if (details.deviceList && details.deviceList.length > 0) {
callback(details.deviceList[0].deviceId)
}
})
mainWindow.webContents.session.setPermissionCheckHandler(
(webContents, permission, requestingOrigin, details) => {
if (permission === 'hid' && details.securityOrigin === 'file:///') {
return true
}
}
)
mainWindow.webContents.session.setDevicePermissionHandler((details) => {
if (details.deviceType === 'hid' && details.origin === 'file://') {
return true
}
})
}
}
WebHidAddon.toString = () => '[class WebHidAddon]';
module.exports = WebHidAddon;
第二步，增加配置
路径： electron/config/config.default.js
/**
* 插件功能
*/
config.addons = {
//新增配置
webHid: {
enable: true,
},
};
第三步，插件调用
路径： electron/preload/index.js
module.exports = async () => {
// 新增
Addon.get('webHid').create();
}
第四步，在vue页面中使用
路径:frontend/src/views/hardware/usbhid/indexSample.vue
<template>
<div id="app-hw-webhid">
<div>
<button @click="testIt">Test WebHID</button>
<h3>HID devices automatically granted access via <i>setDevicePermissionHandler</i></h3>
<div id="granted-devices"></div>
<h3>HID devices automatically granted access via <i>select-hid-device</i></h3>
<div id="granted-devices2"></div>
</div>
</div>
</template>
<script setup>
import { toRaw,onMounted,ref,reactive } from 'vue';
const iptLog = ref('');
onMounted (()=>{
init();
})
const init = ()=> {
if ("hid" in navigator) {
// 浏览器支持hid
console.log("Your browser is support Web HID API.");
} else {
console.log("Your browser is not support Web HID API.");
}
// 全局HID设备插入事件
navigator.hid.onconnect = (event) => {
console.log("HID connected: ", event.device); // device 的 collections 可以看到设备报告描述符相关信息
iptLog.value += `HID connected:\n${event.device.productName}\nPID ${event.device.productId} VID ${event.device.vendorId}\n\n`;
iptLog.scrollTop = iptLog.scrollHeight; // 滚动到底部
};
// 全局HID设备拔出事件
navigator.hid.ondisconnect = (event) => {
device = null; // 释放当前设备
iptLog.value += `HID disconnected:\n${event.device.productName}\nPID ${event.device.productId} VID ${event.device.vendorId}\n\n`;
iptLog.scrollTop = iptLog.scrollHeight; // 滚动到底部
};
}
function formatDevices (devices) {
return devices.map(device => device.productName).join('<hr>')
}
async function testIt () {
console.log('testIt hid loads...')
document.getElementById('granted-devices').innerHTML = formatDevices(await navigator.hid.getDevices())
document.getElementById('granted-devices2').innerHTML = formatDevices(await navigator.hid.requestDevice({ filters: [] }))
}
</script>
<style lang="less" scoped>
#app-hw-webhid {
padding: 0px 10px;
text-align: left;
width: 100%;
.one-block-1 {
font-size: 16px;
padding-top: 10px;
}
.one-block-2 {
padding-top: 10px;
}
}
</style>
第五步，打包配置
调测环境下 获取不到usb列表，原因我还没找到。 必须打包后才能访问。
// 构建 并 移动
npm run build-frontend
# 清除加密的代码
npm run clean
// 代码加密
npm run encrypt
// 预发布模式，测试一下功能是否正常（当前环境变量为：prod）
npm run start
第六步，效果
打印usb设备列表的名称
