【亲测免费】 WebUSB 项目开源教程

2026-01-30 04:48:45作者：劳婵绚Shirley

1. 项目介绍

WebUSB 是一个 Web 标准，由 Web 平台社区小组（WICG）维护，旨在使网页能够安全地与 USB 设备通信。通过 WebUSB，开发者可以在网页中访问和控制 USB 设备，从而为用户提供更加丰富和直接与硬件交互的体验。

2. 项目快速启动

环境准备

确保您的浏览器支持 WebUSB 标准。目前，WebUSB 已在基于 Chromium 的浏览器中实现，如最新版本的 Chrome。

创建项目

在您的项目中，首先需要引入 WebUSB 的相关 JavaScript 库。以下是一个简单的 HTML 例子，展示了如何引入 WebUSB：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>WebUSB 快速启动示例</title>
</head>
<body>
    <h1>WebUSB 快速启动示例</h1>
    <script src="webusb.min.js"></script>
    <script>
        // WebUSB 初始化和设备访问代码将放在这里
    </script>
</body>
</html>

连接设备

在 JavaScript 中，您可以使用 navigator.usb 来请求和访问 USB 设备：

// 请求 USB 设备
async function connectToDevice() {
    try {
        const device = await navigator.usb.requestDevice({ filters: [...] });
        // 使用 device 对象进行后续操作
    } catch (error) {
        console.error('无法连接到 USB 设备:', error);
    }
}

在这里，filters 是一个数组，用于指定您想要连接的 USB 设备的标准。您需要根据设备的厂商 ID 和产品 ID 来设置过滤器。

通信

一旦设备被选中，就可以使用 usb.device 对象的 transferIn 和 transferOut 方法来发送和接收数据。

// 读取 USB 设备数据
async function readData(device) {
    try {
        const result = await device.transferIn(endpoint, 64);
        // 处理接收到的数据
    } catch (error) {
        console.error('读取数据失败:', error);
    }
}

// 发送数据到 USB 设备
async function writeData(device) {
    try {
        const data = new Uint8Array([/* 数据 */]);
        const result = await device.transferOut(endpoint, data);
        // 确认数据发送成功
    } catch (error) {
        console.error('发送数据失败:', error);
    }
}