使用 Electron 和 WebHID API 访问 HID 设备

本教程介绍如何使用 Electron 框架结合 WebHID API 来访问和控制 HID（Human Interface Device）设备，如键盘、鼠标、游戏控制器等。学会如何初始化 Electron 应用程序，设置设备权限，以及如何响应设备连接和断开的事件。

main.js

在该文件中配置应用程序的基本设置，并添加对 HID 设备的支持。

const { app, BrowserWindow } = require('electron');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  // 设置设备权限处理器
  mainWindow.webContents.session.setDevicePermissionHandler((details) => {
    return details.deviceType === 'hid';
  });

  // 监听设备选择事件
  mainWindow.webContents.session.on('select-hid-device', (event, details, callback) => {
    if (details.deviceList.length > 0) {
      event.preventDefault();
      callback(details.deviceList[0].deviceId);
    }
  });

  // 加载应用的 HTML 文件
  mainWindow.loadFile('index.html');
}

// 当 Electron 初始化完成时创建窗口
app.whenReady().then(createWindow);

// 处理 macOS 中的重新激活
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow();
});

// 所有窗口关闭时退出应用
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

renderer.js

document.getElementById('test-webhid').addEventListener('click', async () => {
  try {
    const devices = await navigator.hid.requestDevice({ filters: [] });
    if (devices.length > 0) {
      console.log('Selected HID device:', devices[0]);
    }
  } catch (error) {
    console.error('Error selecting HID device:', error);
  }
});

HTML 文件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebHID API Example</title>
</head>
<body>
<h1>Welcome to the WebHID API Example!</h1>
<button id="test-webhid">Test WebHID</button>
<script src="renderer.js"></script>
</body>
</html>

运行应用后，可以看到一个带有“Test WebHID”按钮的窗口。点击该按钮，将弹出一个对话框，让你选择一个 HID 设备。选择一个设备后，控制台将显示所选设备的信息。

相关文章：

本文标签: