WebHID API演示Demo教程：装备列表，装备毗连，数据读写
1. 简介WebHID API允许网页应用直接与HID（人机接口装备）举行通讯。本教程将演示怎样创建一个底子的WebHID应用，实现以下功能：
[*]表现和获取HID装备列表
[*]毗连/断开HID装备
[*]读取装备数据
[*]向装备发送数据
https://i-blog.csdnimg.cn/direct/e97b1365af7c465b99fc6406cdda833a.png
2. 兼容性和条件条件
2.1 欣赏器支持
[*]重要支持Chrome欣赏器
[*]必要在安全上下文中运行（HTTPS或localhost）
2.2 权限要求
[*]必要用户明确授权才气访问HID装备
[*]某些操作系统大概必要额外的权限设置
3. 项目布局
项目包含两个重要文件：
├── index.html // 页面结构和样式
└── hid-demo.js // WebHID功能实现
https://i-blog.csdnimg.cn/direct/013dab6ee1ed49e5956c503689da742f.png
4. 实现步骤
4.1 创建底子HTML布局
<!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>
4.2 实现WebHID核心功能
4.2.1 初始化和获取装备列表
let currentDevice = null;
document.addEventListener('DOMContentLoaded', () => {
// 获取已授权的设备
navigator.hid.getDevices()
.then(devices => {
updateDeviceList(devices);
})
.catch(error => {
console.error('Error getting devices:', error);
});
});
4.2.2 毗连新装备
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);
}
});
4.2.3 装备毗连/断开处理
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}`);
}
}
4.2.4 数据发送功能
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);
}
});
5. 利用阐明
5.1 毗连装备
[*]点击"毗连新HID装备"按钮
[*]在弹出的系统对话框中选择要毗连的装备
[*]装备将表如今已毗连装备列表中
5.2 数据收发
[*]毗连装备后，装备发送的数据会自动表如今输出日志中
[*]在输入框中输入要发送的数据（格式：逗号分隔的数字，如 1,2,3,4）
[*]点击"发送数据"按钮发送数据
6. 注意事项
[*] 数据格式：
[*]发送数据必要利用逗号分隔的数字格式
[*]不同装备大概必要特定的数据格式，请参考装备文档
[*] 报告ID：
[*]当前示例利用默认报告ID (0)
[*]某些装备大概必要特定的报告ID，必要相应修改代码
[*] 错误处理：
[*]所有操作都包含错误处理
[*]错误信息会表如今输出日志中
[*] 安全性：
[*]必须在HTTPS或localhost环境下运行
[*]必要用户明确授权才气访问装备
7. 调试发起
[*]利用Chrome开发者工具监控控制台输出
[*]查抄装备毗连状态和错误信息
[*]验证数据格式是否符合装备要求
[*]确保装备驱动正确安装
8. 扩展发起
[*]添加装备过滤器，只表现特定范例的装备
[*]实现自定义数据格式转换
[*]添加数据可视化功能
[*]实现装备自动重连机制
9. 参考资源
[*]WebHID API MDN文档
[*]HID接口规范
[*]HIDDevice接口
完整Demo
<!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;}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]