如何用WebUSB API与Arduino等微控制器通信？

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()

知料万语

知料万语—AI论文写作，AI论文助手

下载

接着，我们来看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("设备在读取时断开。");