先说结论这套链路跑通以后从脑电模块的串口输出到 ESP32-CYD 自带屏幕上的实时波形再到手机浏览器里同步刷新的曲线端到端延迟被我压到了几十毫秒量级。屏幕端基本无感网页端大概有一百毫秒左右的可接受延迟作为原型验证完全够用。它解决的问题很直接脑电采集设备通常带不了一根长串口线而常见的 WiFi 透传又不够灵活所以我用 BW16 做无线采集节点用 ESP32-CYD 做带屏显示和网页服务端把“采集 — 无线传输 — 本地显示 — 网页可视化”这条链路全部打通了。这条链路特别适合三类人想快速验证脑电信号无线传输方案的嵌入式开发者、做生物信号采集课设/毕设的学生以及想在板子上低成本实现“传感器 屏幕 网页”可视化原型的人。BW16 本身就是一颗 RTL8720DN 双频 WiFi 芯片跑 Arduino 很顺ESP32-CYD 就是那块几十块钱的 2.8 寸彩色触摸屏开发板性价比离谱。两者加一块成本不到一百块却能拼出一条端到端可演示的无线 EEG 数据链路我觉得非常值得记录一下。1. 方案设计与链路拆解1.1 为什么是“EEG 模块 BW16 ESP32-CYD”这套组合脑电信号本身是微伏级的生理电信号直接拿 MCU 的 ADC 去采基本是找罪受。最省心的做法就是买一个前端模块模块内部完成放大、滤波、ADC 采样和数字化然后通过串口把原始波形数据吐出来。和我用的模块类似的脑电前端一般会以 512Hz 或 256Hz 采样率输出带符号的原始 EEG 值串口波特率常见有 57600 和 115200 两种。模块选好以后剩下一个问题就是怎么把数据无线传出来。串口转 WiFi 的方案很多为什么我选了 BW16因为这一层我希望它尽量低功耗、能独立供电、最好还能带着电池远离主机。BW16 用的 RTL8720DN 支持 2.4G/5G 双频 WiFi待机电流比 ESP32 明显低一截而且 Arduino 生态友好串口收发不纠结。我只需要把脑电模块的 TX/RX 接到 BW16 的串口让 BW16 做“无线串口桥”剩下的显示和网页服务全部丢给 ESP32-CYD。ESP32-CYD 这块板的优势不用多说自带 2.8 寸 320x240 TFT 电阻触摸屏主控 ESP32 本身有 WiFi板子上还留了足够的 GPIO。它非常适合做“接收端 显示端 WebSocket 服务器”三合一角色。整套系统里它相当于一个网关一边收 BW16 打过来的 UDP 数据一边在屏幕画波形一边把数据推到手机和电脑的网页上。1.2 整体数据流与传输协议选型整个链路的数据流是这样的脑电模块以 512Hz 采样串口输出二进制帧BW16 通过 UART 接收帧解析后重新打包成 UDP over WiFiESP32-CYD 作为站点连接 BW16 开启的 AP接收 UDP 包ESP32-CYD 解析出 EEG 原始值在 TFT 上绘制滚动波形同一个 ESP32-CYD 里跑一个 WebSocket 服务端把数据推给浏览器页面。串口到屏幕这一段不复杂真正的关键在协议选型。第一版我用的 TCP结果发现一个问题网络稍有不稳TCP 的丢包重传会让数据“迟到”屏幕上的波形容易出现旧数据和新数据挤在一起的情况而且 ESP32 端要维护连接状态代码明显变重。后来我把 BW16 到 ESP32-CYD 的传输改成了 UDP 广播。为什么是 UDP 广播因为这是一个局域网原型实时性优先于可靠性。脑电波形偶尔丢一两个包人眼在屏幕上根本看不出来就算真的丢了接收端根据包序号做一次线性插值就能补齐毛刺。UDP 广播还有一个好处ESP32-CYD 不需要知道 BW16 的 IP 地址它只要绑定端口听广播就行这套系统里所有设备的 IP 都是动态的省去了配固定 IP 的麻烦。网页端从 ESP32 拿数据我用的 WebSocket 而不是轮询 HTTP。浏览器 Canvas 每帧需要数据HTTP 轮询在 512Hz 频率下就是灾难而且高频率轮询还会拖慢 ESP32 的屏幕绘制。WebSocket 起来以后ESP32 端每 20ms 推一个包含 20~50 个采样点的二进制帧到浏览器前端用 requestAnimationFrame 绘制曲线延迟低且流畅。1.3 为什么不要一步到位用 MQTT 或蓝牙我也考虑过 MQTT 方案后来还是放弃了。MQTT 好处是组件化、可扩展但实际跑原型时就显得笨重你需要一个 broker需要配置 topic又需要 WiFi 里有一个稳定可达的服务器。这套链路里 ESP32-CYD 就是处理器BW16 就是传感器节点两者直连广播最简单。蓝牙则有两个问题一是脑电模块串口数据量按 512Hz x 2字节来算并不大理论上没问题但蓝牙协议栈和串口流控在低成本模组上容易丢数据二是网页端想直接看蓝牙数据还得处理 Web Bluetooth 的兼容性和配对流程对原型来说太折腾。UDP 广播在这个场景里就是最“抠”的选择代码少行为可预期。2. 硬件准备与电气注意事项2.1 器件清单与接线规划我实际用到的器件并不多脑电前端模块支持 512Hz 原始波形串口输出的模块TTL 电平 3.3VBW16 开发板RTL8720DN 核心Arduino 可编程ESP32-CYDESP32-2432S028R 开发板2.8 寸 TFT分辨率 320x240两块 3.7V 锂电池或两路独立 USB 供电若干杜邦线、面包板和 Level Shift 转换模块。这里有个很容易踩的坑脑电模块的 MCU 系统电压不一定是 3.3V有些国产模块为了兼容低功耗芯片是 2.8V 或 1.8V 电平直接接 BW16 的 3.3V UART 可能收不到数据或者烧坏引脚。所以接线前最好看模块手册实在不确定就加一个 I2C 型电平转换模块比如 TXS0108E隔一下。BW16 端接线很简单脑电模块 TX → BW16 RX脑电模块 RX ← BW16 TXGND 必须共地。注意串口交叉不是直连。很多新手第一次接反屏幕上显示的全是乱码。ESP32-CYD 这边因为屏幕占了大量 GPIO我建议不要用默认的硬件串口 0 去做接收否则每次烧录都会冲突。最好用 Serial2对应 ESP32 的 GPIO16 / GPIO17。CYD 板上 HS(16) 和 17 引脚是空闲的可以直接引出。2.2 供电与地环路隔离脑电信号对电源噪声非常敏感这是整个项目里最容易被忽略的地方。如果脑电模块和 BW16 用同一个 USB 口供电开关电源的纹波会直接串进模拟前端原始波形上会出现明显的 50Hz 工频干扰或高频毛刺。我的做法是脑电模块用一节 3.7V 锂电池独立供电BW16 也用另一节电池供电两边只通过数据线共地。这样整个采集节点是浮地的不会和接收端形成地环路。如果你非要用 USB 供电至少要让脑电模块尽量远离 ESP32-CYD 的开关电源区域并且可以在模块电源输入端并联一个 10uF 钽电容和一个 100nF 陶瓷电容。实测下来独立供电加上这两个电容以后波形本底噪声肉眼可见地下降。2.3 关于 5G WiFi 和启动时序BW16 是双频 WiFi 模组但这个项目里我建议大家老老实实开 2.4G AP。原因很简单ESP32-CYD 的 WiFi 天线和接收灵敏度在 5G 频段并不算好而且 5G 信号的穿墙和抗干扰能力在现场演示环境里往往不如 2.4G。BW16 开启 AP 模式后默认 IP 一般是 192.168.1.1但具体到 Arduino 环境可能通过 softAP 配置。在代码里我指定了 SSID 和密码同时把 ESP32-CYD 端的超时重连时间调短因为现场演示时经常有人把开发板的电断了再开自动重连必须可靠。启动时序也值得一提BW16 上电后建立 AP 大约需要 3~5 秒ESP32-CYD 上电后我让它延时 5 秒再去连接 BW16 的 WiFi避免“两个设备同时启动、互相找不到对方”的尴尬。这不是什么高深问题但很多人第一次测试就是被这个时序坑的。3. BW16 端脑电数据采集与 UDP 转发3.1 Arduino 环境配置BW16 在 Arduino IDE 里的支持很成熟。在“开发板管理器 URL”里面添加 Realtek 的索引地址然后搜索 RTL8720DN 安装即可。选择开发板时注意选择“BW16”或“RTL8720DN”具体型号串口波特率设为 115200 用于烧录但板子运行时的硬件波特率和 IDE 烧录器是分开的不影响 UART1 接收脑电模块数据。这里有个坑BW16 的默认 Arduino 引脚编号和芯片丝印不一定一致。开发板定义里可能有Serial1这样的硬件串口但具体的 RX/TX 引脚需要查板级映射表。我用的是默认的 UART0 或者 UART1 映射这个在不同厂商的 BW16 板上并不统一所以第一次接线时最好先写一个“回环测试”把内部 TX 短接 RX用串口助手发送数据看 BW16 能不能自己收到确认引脚映射正确再接脑电模块。3.2 串口帧同步与校验脑电模块出的是二进制流不是简单的文本。以常见的 NeuroSky 系模块为例一帧原始数据包的结构大致是同步头0xAA 0xAA载荷长度例如 0x04载荷数据代号 原始波形高字节 原始波形低字节 校验字节我建议不要直接读一个字节画一个波形而是写一个简单的状态机来解析。代码如下uint8_t state 0; uint8_t payload[64]; uint8_t pLen 0; uint8_t pIndex 0; void parseEEGByte(uint8_t b) { switch (state) { case 0: if (b 0xAA) state 1; break; case 1: if (b 0xAA) state 2; else state 0; break; case 2: pLen b; pIndex 0; state 3; break; case 3: payload[pIndex] b; if (pIndex pLen) state 4; break; case 4: state 0; uint8_t sum 0; for (int i 0; i pLen - 1; i) sum payload[i]; if ((sum 0xFF) (0xFF - payload[pLen - 1])) { // 校验通过提取原始波形 if (payload[0] 0x80) { int16_t raw ((uint16_t)payload[1] 8) | payload[2]; handleEEGSample(raw); } } break; } }这个状态机不复杂但它解决了一个很必须要解决的问题脑电模块上电瞬间会输出一些不确定字节如果没有同步头识别整个解析会崩掉。状态机方案允许中间出现任意垃圾字节只要遇到 0xAA 0xAA 就能重新进入一帧的解析。注意不同脑电模块的校验算法不太一样有的要求0xAA 0xAA 长度 所有载荷求和后低字节为 0有的要求载荷内部校验和等于某一值以你模块的手册为准。3.3 UDP 组包与广播发送BW16 的串口一次只能收到一两个字节但 UDP 如果一字节发一个包WiFi 开销会直接把吞吐撑爆。正确的做法是攒一批数据再发。我的设计是每收到一个合法的 EEG 样本放入一个发送缓冲区同时用一个计数器累加。当缓冲区攒满 50 个样本或者距离上一次发送超过 30ms就组装成一个 UDP 包发出去。包头我自定义为typedef struct { uint8_t head; // 0xEE uint8_t version; // 0x01 uint16_t seq; // 包序号 uint16_t count; // 本包样本数 int16_t samples[50]; uint16_t crc; // 简单累加校验 } EEGPacket;包序号非常重要接收端靠它判断是否丢包。发送端每发一包seq 自增。这样接收端如果发现 seq 跳变就知道中间丢了一部分可以在绘制时做插值避免波形断裂。BW16 端的发送代码核心部分如下WiFiUDP udp; IPAddress broadcast(255, 255, 255, 255); uint16_t seq 0; void sendEEGPacket() { EEGPacket pkt; pkt.head 0xEE; pkt.version 0x01; pkt.seq seq; pkt.count bufferIndex; memcpy(pkt.samples, sampleBuffer, sizeof(int16_t) * bufferIndex); uint16_t crc 0; for (int i 0; i bufferIndex; i) crc pkt.samples[i]; pkt.crc crc; udp.beginPacket(broadcast, 8266); udp.write((uint8_t*)pkt, sizeof(EEGPacket)); udp.endPacket(); bufferIndex 0; }这里有一个我调了很久的细节广播地址如果是 255.255.255.255在某些路由器/AP 模式下不可达因为 RTL8720DN 的 softAP 有时会把广播域限制在自身所在子网。更稳妥的做法是直接发到接收端已知的静态 IP比如192.168.1.2。如果你希望保持广播建议在 BW16 端使用udp.beginPacket(IPAddress(255,255,255,255))之前先确保该 UDP 实例已经beginMulticast或初始化广播选项。实在不行就改成单播反正 ESP32-CYD 的 IP 在同一个 AP 下一般不变化太大。3.4 功耗和串口中断的坑BW16 这颗芯片的功耗确实比 ESP32 低但在 UDP 持续广播模式下WiFi 射频一直要开着整板功耗也要几十毫安。如果你希望它成为移动采集节点一定要把 WiFi 的省电模式调成中等模式不要使用默认的最大省电否则 UDP 发送延迟会突然飙升几百毫秒。实测中我把WiFi.setSleep(WIFI_PS_MODEM)关掉或者设置成WIFI_PS_MIN_MODEM延迟稳定很多代价是功耗上升十来毫安。原型的核心目标是稳定电池容量做大一点就行。另外BW16 的 Arduino 串口读取如果放在主循环里while (Serial.available())在高波特率下可能会被 WiFi 协议栈中断打断导致偶尔漏字节。解决方案很简单用中断方式或者环形缓冲区积累字节然后在主循环里批量解析。我没有用复杂的中断而是每 10ms 读取一次串口全部可读字节再喂给解析状态机实测在 57600 波特率下没有丢帧。4. ESP32-CYD 端屏幕波形与网页可视化4.1 屏幕初始化与绘图框架ESP32-CYD 的屏幕驱动我选的是 Arduino_GFX 库。它是纯软件驱动不依赖 LVGL足够画滚动波形。初始化代码很直接#include Arduino_GFX_Library.h Arduino_DataBus *bus new Arduino_ESP32SPI(2 /* DC */, 15 /* CS */, 14 /* SCK */, 13 /* MOSI */, -1 /* MISO */); Arduino_GFX *gfx new Arduino_ILI9341(bus, 27 /* RST */, 0 /* rotation */);注意不同批次 CYD 板的引脚丝印可能略有差异比如有的 DC 引脚是 GPIO2有的是 GPIO21。如果你的板面有丝印就以丝印为准没有丝印多看几个开源仓库的引脚定义再测。屏幕初始化以后先把背景刷成深色然后在顶部画一个状态栏和几个标明通道名称的标签比如 “RAW EEG”。4.2 UDP 接收与丢包补偿ESP32-CYD 这边开一个 UDP 端口监听WiFiUDP udp; uint8_t packetBuf[256]; void loop() { int len udp.parsePacket(); if (len 0) { int n udp.read(packetBuf, sizeof(packetBuf)); processPacket(packetBuf, n); } // 其他任务 }在processPacket里我先检查头字段 0xEE然后解析seq和count。如果发现当前seq和上一次seq不连续就进入补偿逻辑在两张角度上线性插入若干个点让曲线上不要出现明显的跳崖式断层。具体做法是在两段数组之间生成线性过渡点uint16_t expectedSeq lastSeq 1; if (pkt.seq ! expectedSeq pkt.seq lastSeq) { // 丢包做一次插值 int missing pkt.seq - expectedSeq; for (int i 1; i missing; i) { int16_t fill lastSample (int16_t)((pkt.samples[0] - lastSample) * (float)i / (missing 1)); pushSampleToQueue(fill); } }这个插值不是医学级的还原但对波形显示足够了。注意插值只能用于显示如果后续要算频谱或做特征提取丢包就丢包不要强行补。4.3 波形渲染技巧屏幕只有 320x240但 EEG 采样率 512Hz一屏肯定装不下所有点。我采用的方法是滚动窗口维护一个环形缓冲最多存 512 个采样点屏幕上横向 320 个像素相当于每像素画 1.6 个采样点。绘制时遍历缓冲区把数组索引映射到 x 坐标把采样值映射到 Y 坐标画像素或短线。代码示意for (uint16_t x 0; x 320; x) { int idx bufferHead - 319 x; if (idx 0) continue; int16_t val samples[idx]; int y map(val, -800, 800, 20, 220); gfx-drawPixel(x, y, GREEN); }注意脑电波值范围因模块而异有的是 ±400有的是 ±2000。为了防止波形顶天立地我在菜单里预置了增益缩放系数默认 1.0可以用触摸屏上两个按钮实时放大/缩小。这一点非常实用因为不同人的脑电幅度差别很大固定比例做出来的屏幕要么一条平线要么全是削顶方波。绘制还有一个关键点不要在loop里频繁刷全屏否则 ESP32 会卡死。正确做法是维护一个“脏区”每次只需要把上一次画出的波形用背景色覆盖再画新点。更简单的做法是每 100ms 清一次屏然后重画整条曲线。实测下来 320x240 画 320 个点也就几毫秒全屏重绘并没有想象中那么慢前提是不要用fillScreen每次都刷只更新波形区域即可。4.4 网页端实时可视化ESP32-CYD 同时也是 WebSocket 服务器。我用的是ESPAsyncWebServer它支持异步处理不会阻塞屏幕绘制。核心逻辑是把屏幕侧收到的 EEG 采样点推入一个共享队列然后在 WebSocket 事件回调里把最近的若干点发给浏览器。网页端不需要复杂框架一个 HTML 文件加一段原生 JavaScript 就够。前端用canvas画一条滚动波形数据每 100ms 收到一批二进制帧后直接绘制到 canvas 上。为了避免 canvas 无限堆积我用了一个固定长度的 Float32Array 环形缓冲。页面里还可以显示瞬时值、采样率和丢包率统计。我这里摘一段网页关键逻辑socket.binaryType arraybuffer; socket.onmessage (event) { const data new DataView(event.data); const count data.getUint16(2, true); let raw 0; for (let i 0; i count; i) { raw data.getInt16(4 i * 2, true); ring[next] raw; if (next 1024) next 0; } draw(); };前端不要直接尝试 512Hz 全速重绘因为浏览器的 Canvas 在低端手机上最多也就 60fps 刷新。每帧重绘大概从ring缓冲区里均匀取 200 个点然后画成折线。实际效果已经足够顺滑。4.5 浏览器端 FFT 频谱图既然已经能收到连续 EEG 数据只在网页上画时域波形就有点浪费了。我顺手加了一个简易 FFT 频谱显示。前端用 Web Audio API 的AnalyserNode反而更省事或者直接使用一个简单的 radix-2 FFT 函数对最近 256 个点做变换得到幅度谱在 canvas 上画柱状图。EEG 的主要节律集中在 0.5Hz 到 40Hz 这个频段网页里我只显示 0~50Hz 的频谱横轴标注频率。这个功能虽然只是锦上添花但对演示效果提升巨大——观众一眼就能看到 alpha 波8-13Hz的峰比看一条时域曲线直观得多。这里提醒一句网页端 FFT 用的数据如果做过丢包插值频谱会引入虚假成分。所以 FFT 的输入我直接使用原始 UDP 包中未插值的样本数组不再从显示环形缓冲取数。5. 实测问题与调优记录5.1 波形断裂或乱码现象屏幕波形偶尔出现完全错乱的尖峰或者持续乱码。排查步骤先用串口助手直接连接脑电模块单独验证模块输出的波特率和帧格式确认无误后再接 BW16。确认 BW16 和脑电模块是否共地如果不共地大概率会出现数据错乱。检查 BW16 端是否把 RX 接到了模块 TX而不是接反。BW16 的串口波特率是否和模块一致有些模块虽然标注 57600实际有 ±1% 误差长时间运行后会出现粘包。解决方案是把 BW16 的串口波特率设为 57600并在解析状态机里允许连续若干个 0x00 无效字节跳过。5.2 WiFi 掉线和 UDP 丢包率波动现象ESP32-CYD 经常连不上 BW16 的 AP或者连上后丢包率突然升高。原因很可能是信道干扰。我最初把 AP 信道设成默认的自动选择结果 ESP32-CYD 和路由器挤在同一个信道冲突严重。后来我把 BW16 的 AP 固定到信道 11并关闭了 DHCP 超时时间丢包率立刻从 5% 降到低于 0.5%。另外ESP32-CYD 本身如果不使用 WebSocket 功能时把它的 WiFi 调制设置为 802.11g 模式传输更稳。5.3 屏幕刷新卡顿现象屏幕波形一卡一顿触摸按钮响应也很慢。问题出在我在主循环里同时做了 UDP 解析、屏幕绘制、WebSocket 转发而且 UDP 接收和 WebSocket 发送都写在同一个 task 里。改进方案是使用 ESP32 的 FreeRTOS 双核调度核心 0 跑 UDP 接收和 WebSocket 推送核心 1 跑屏幕绘制。这样一来高频网络中断不会阻塞波形绘制。代码里只要用xTaskCreatePinnedToCore绑定到不同核心即可整个现象立刻改善。5.4 网页端延迟高现象手机浏览器看到的波形比屏幕端慢 200ms 以上。原因有两个。一个是 WebSocket 发送端为了省事每 20ms 才推一次数据造成主动延迟另一个是浏览器端 canvas 可能在绘制时执行了不必要的ctx.clearRect全清操作导致绘制频率只能到 20fps。我的调整是把 WebSocket 推送间隔降到 10ms前端每次重绘只擦除前一次曲线所在的窄条区域重绘频率提升到 50fps 左右。延迟从 200ms 降到了大约 100ms肉眼已经非常接近屏幕端。5.5 实测延迟数据我简单记录了几组实测数据作为参考环节延迟说明EEG 模块串口 → BW16 解析打包约 3~6ms攒包周期影响包越大延迟越高BW16 → ESP32-CYD UDP 传输约 2~10ms局域网内 2.4G APESP32-CYD 屏幕绘制约 5~15ms全屏重绘时更长ESP32-CYD WebSocket → 网页约 10~30ms受推送周期影响浏览器 Canvas 显示约 30~60ms受浏览器绘制帧率影响整套链路端到端大约 50~120ms作为实时 EEG 原型完全够用。如果要更低的延迟可以考虑用 UDP 更高推送频率 更短的攒包周期但代价是 WiFi 吞吐量上升、丢包率也会增加需要做取舍。6. 一些可以继续扩展的内容这套链路目前只是把 EEG 原始波形实时搬到了屏幕和网页上但底子已经打好了。如果后面想继续做脑机接口方向可以在这个基础上加几个比较自然的扩展在 BW16 端把 EEG 数据直接分类比如用简单的阈值检测眼球眨眼然后通过另一个 UDP 包发送“眨眼事件”这样 ESP32-CYD 屏幕上可以点亮一个 LED 或者触发一个音效。在 ESP32-CYD 端加入 SD 卡记录功能把原始数据存为 CSV 格式方便事后离线做频谱分析或机器学习训练。把 BW16 换成更低功耗的传感器节点用电池供电把它粘在一个帽子或者头带上就可以变成一个“可穿戴脑电采集节点”随身戴着走一圈数据也能实时传到网页。网页端目前只有波形和频谱未来可以加一个简单的 Web 界面布局在一屏内展示时域图、频谱图和“专注度/放松度”数值条做成一个轻量级的脑机接口演示面板。就我个人这次实验的体会来说最值得花时间的地方不是把每个代码写得多完美而是把“数据链路稳定”这个地基打好。链路一旦稳定了屏幕和网页只是表达层后面想加什么功能都不难。希望这套用 BW16 和 ESP32-CYD 搭出来的小链路能帮你少走几个我在调中断、调 WiFi、调 Canvas 时踩过的坑。最后再分享一个小技巧如果现场演示时没有可用的路由器千万别急着让 BW16 和 ESP32-CYD 都去连同一台手机热点直接让 BW16 开 APESP32-CYD 连入即可。这样整个系统完全脱离公网不受现场网络环境干扰演示时最稳的就是这种“自组网”方案。