WebHID API演示Demo教程：装备列表，装备毗连，数据读写 - IT评测·应用市场-qidao123.com

├── index.html // 页面结构和样式
└── hid-demo.js // WebHID功能实现

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HID Device Communication</title>
<style>
#output {
width: 100%;
height: 200px;
margin: 10px 0;
padding: 5px;
border: 1px solid #ccc;
overflow-y: auto;
}
/* ... 其他样式 ... */
</style>
</head>
<body>
<h1>WebHID API 演示</h1>
<button id="connectButton">连接新HID设备</button>
<h2>已连接设备列表：</h2>
<ul id="deviceList"></ul>
<div class="input-group">
<input type="text" id="sendData" placeholder="输入要发送的数据（用逗号分隔的数字）">
<button id="sendButton">发送数据</button>
</div>
<h2>输出日志：</h2>
<pre id="output"></pre>
<script src="hid-demo.js"></script>
</body>
</html>

复制代码

let currentDevice = null;
document.addEventListener('DOMContentLoaded', () => {
// 获取已授权的设备
navigator.hid.getDevices()
.then(devices => {
updateDeviceList(devices);
})
.catch(error => {
console.error('Error getting devices:', error);
});
});

复制代码

document.getElementById('connectButton').addEventListener('click', async () => {
try {
const devices = await navigator.hid.requestDevice({
filters: [] // 空过滤器显示所有设备
});
if (devices.length > 0) {
updateDeviceList(devices);
}
} catch (error) {
console.error('Error connecting to device:', error);
}
});

复制代码

async function toggleConnect(device) {
try {
if (device.opened) {
await device.close();
currentDevice = null;
appendToOutput(`设备已断开: ${device.productName}`);
} else {
await device.open();
currentDevice = device;
appendToOutput(`设备已连接: ${device.productName}`);
// 监听设备输入报告
device.addEventListener('inputreport', event => {
const {data, reportId} = event;
const value = new Uint8Array(data.buffer);
appendToOutput(`收到数据 (报告ID ${reportId}): ${Array.from(value)}`);
});
}
// 刷新设备列表显示
const devices = await navigator.hid.getDevices();
updateDeviceList(devices);
} catch (error) {
console.error('Error toggling device connection:', error);
appendToOutput(`操作失败: ${error.message}`);
}
}

复制代码

document.getElementById('sendButton').addEventListener('click', async () => {
if (!currentDevice || !currentDevice.opened) {
alert('请先连接设备！');
return;
}
const data = document.getElementById('sendData').value;
try {
const dataArray = new Uint8Array(data.split(',').map(x => parseInt(x.trim())));
await currentDevice.sendReport(0, dataArray);
appendToOutput('已发送数据: ' + data);
} catch (error) {
console.error('Error sending data:', error);
appendToOutput('发送数据失败: ' + error.message);
}
});

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HID Device Communication</title>
<style>
#output {
width: 100%;
height: 200px;
margin: 10px 0;
padding: 5px;
border: 1px solid #ccc;
overflow-y: auto;
}
#deviceList {
margin: 10px 0;
}
#deviceList li {
margin: 5px 0;
padding: 5px;
border: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
}
.input-group {
margin: 10px 0;
}
</style>
</head>
<body>
<h1>WebHID API 演示</h1>
<button id="connectButton">连接新HID设备</button>
<h2>已连接设备列表：</h2>
<ul id="deviceList"></ul>
<div class="input-group">
<input type="text" id="sendData" placeholder="输入要发送的数据（用逗号分隔的数字）">
<button id="sendButton">发送数据</button>
</div>
<h2>输出日志：</h2>
<pre id="output"></pre>
<script src="hid-demo.js"></script>
</body>
</html>

复制代码

let currentDevice = null;document.addEventListener('DOMContentLoaded', () => { // 获取已授权的装备 navigator.hid.getDevices() .then(devices => { updateDeviceList(devices); }) .catch(error => { console.error('Error getting devices:', error); }); // 毗连新装备按钮变乱 document.getElementById('connectButton').addEventListener('click', async () => { try { // 请求毗连HID装备 const devices = await navigator.hid.requestDevice({ filters: [] // 空过滤器表现所有装备 }); if (devices.length > 0) { updateDeviceList(devices); } } catch (error) { console.error('Error connecting to device:', error); } }); // 发送数据按钮变乱 document.getElementById('sendButton').addEventListener('click', async () => { if (!currentDevice || !currentDevice.opened) { alert('请先毗连装备！'); return; } const data = document.getElementById('sendData').value; console.log('发送数据: ' + data); try { // 将输入数据转换为Uint8Array const dataArray = new Uint8Array(data.split(',').map(x => parseInt(x.trim()))); await currentDevice.sendReport(5, dataArray); appendToOutput('已发送数据: ' + data); console.log('已发送数据: ' + data); } catch (error) { console.error('Error sending data:', error); appendToOutput('发送数据失败: ' + error.message); } });});// 更新装备列表表现function updateDeviceList(devices) { const deviceList = document.getElementById('deviceList'); deviceList.innerHTML = ''; devices.forEach(device => { const li = document.createElement('li'); li.textContent = `${device.productName} (VID: ${device.vendorId}, PID: ${device.productId})`; const connectBtn = document.createElement('button'); connectBtn.textContent = device.opened ? '断开' : '毗连'; connectBtn.addEventListener('click', () => toggleConnect(device)); li.appendChild(connectBtn); deviceList.appendChild(li); });}// 毗连/断开装备async function toggleConnect(device) {
try {
if (device.opened) {
await device.close();
currentDevice = null;
appendToOutput(`设备已断开: ${device.productName}`);
} else {
await device.open();
currentDevice = device;
appendToOutput(`设备已连接: ${device.productName}`);
// 监听设备输入报告
device.addEventListener('inputreport', event => {
const {data, reportId} = event;
const value = new Uint8Array(data.buffer);
appendToOutput(`收到数据 (报告ID ${reportId}): ${Array.from(value)}`);
});
}
// 刷新设备列表显示
const devices = await navigator.hid.getDevices();
updateDeviceList(devices);
} catch (error) {
console.error('Error toggling device connection:', error);
appendToOutput(`操作失败: ${error.message}`);
}
}
// 添加输出信息function appendToOutput(message) { const output = document.getElementById('output'); output.textContent += message + '\n'; output.scrollTop = output.scrollHeight;}

复制代码