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串行设备被识别。
接着，我们来看Web端的实现，这通常是一个异步操作序列：
请求设备：出于安全考量，浏览器不会让你随意连接任何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); }}
打开并配置设备：拿到
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 };}
数据传输：现在可以进行数据读写了。发送数据用
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("设备在读取时断开。");
以上就是如何用WebUSB API与Arduino等微控制器通信？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1521330.html
微信扫一扫 
支付宝扫一扫 
