WebUSB API使浏览器能直接与Arduino通信，用户需授权连接，通过指定vendorId请求设备，打开并配置CDC接口，利用transferOut和transferIn实现数据收发，简化了Web与物理设备交互流程。

WebUSB API提供了一种在浏览器中直接与Arduino等微控制器进行通信的强大方式，它让网页能够发现、连接并交换数据，无需安装额外驱动或桌面应用，极大地简化了设备交互的门槛，为Web应用打开了通往物理世界的大门。

解决方案

要让WebUSB与Arduino对话，这可不是点一下按钮那么简单，它涉及硬件固件和Web应用两端的协作，并且需要一套清晰的步骤。

首先，你的Arduino微控制器得准备好。大多数Arduino板子默认通过USB暴露一个CDC（Communication Device Class）串行接口。你只需要在Arduino草图中像往常一样使用

Serial.begin()

、

Serial.print()

和

Serial.read()

函数即可。如果用的是非标准板或自定义固件，确保它能正确地作为USB串行设备被识别。

Viggle AI Video

Powerful ai-powered animation tool and image-to-video AI generator.

65

查看详情

接着，我们来看Web端的实现，这通常是一个异步操作序列：

1. 请求设备： 出于安全考量，浏览器不会让你随意连接任何USB设备。用户必须通过一个弹窗明确授权。你用

   navigator.usb.requestDevice()

   来发起这个请求，并提供

   filters

   来指定你想要连接的设备类型，比如通过

   vendorId

   （厂商ID）和

   productId

   （产品ID）。Arduino Uno的厂商ID通常是

   0x2341

   。

   async function connectDevice() {     try {         const device = await navigator.usb.requestDevice({             filters: [{ vendorId: 0x2341 }] // 示例：Arduino的VID         });         console.log("已连接设备:", device.productName);         // 接下来就可以打开并配置设备了         return device;     } catch (error) {         console.error("连接失败:", error);     } }

2. 打开并配置设备： 拿到

   device

   对象后，你需要打开它，选择一个配置，然后声明（claim）它提供串行通信的接口。USB设备可能有多个配置和接口，你需要找到那个用于CDC（通常是串行通信）的接口。

   async function setupArduinoConnection(device) {     await device.open(); // 打开设备     if (device.configuration === null) {         await device.selectConfiguration(1); // 选择一个配置，通常是1     }      // 寻找CDC数据接口，interfaceClass 0x0A 通常代表CDC数据     const cdcInterface = device.configuration.interfaces.find(i =>         i.alternates.some(alt => alt.interfaceClass === 0x0A)     );      if (!cdcInterface) {         throw new Error("未找到CDC接口。");     }      await device.claimInterface(cdcInterface.interfaceNumber); // 声明接口      // 找到输入和输出端点     const alternate = cdcInterface.alternates[0]; // 假设使用第一个备用设置     const endpointIn = alternate.endpoints.find(e => e.direction === 'in');     const endpointOut = alternate.endpoints.find(e => e.direction === 'out');      if (!endpointIn || !endpointOut) {         throw new Error("未找到输入或输出端点。");     }      console.log("设备接口已声明，端点已识别。");     return { device, endpointIn, endpointOut, interfaceNumber: cdcInterface.interfaceNumber }; }

3. 数据传输： 现在可以进行数据读写了。发送数据用

   device.transferOut()

   ，接收数据用

   device.transferIn()

   。记住，WebUSB处理的是

   ArrayBuffer

   或

   DataView

   格式的二进制数据，所以你需要进行字符串和二进制数据的转换。

   写入数据：

   async function writeToArduino(device, endpointOut, dataString) {     const encoder = new TextEncoder(); // 默认UTF-8编码     const dataBuffer = encoder.encode(dataString);     await device.transferOut(endpointOut.endpointNumber, dataBuffer);     console.log("数据已发送:", dataString); }

   读取数据： 读取通常需要一个循环来持续监听。

    let isReading = false; async function readFromArduino(device, endpointIn, callback) {     isReading = true;     const decoder = new TextDecoder(); // 默认UTF-8解码     while (device.opened && isReading) {         try {             const result = await device.transferIn(endpointIn.endpointNumber, 64); // 读取最多64字节             if (result.data && result.data.byteLength > 0) {                 const receivedData = decoder.decode(result.data);                 callback(receivedData);             }         } catch (error) {             if (error.message.includes("The device was disconnected")) {                 console.log("设备在读取时断开。");