1. 为什么需要WebSocket中继视频监控系统很多朋友第一次接触ESP32-CAM时都会尝试直接用WiFi直连的方式传输视频。我刚开始玩的时候也是这样结果发现画面经常卡顿稍微离远点就断连。后来实测发现当ESP32-CAM同时连接多个客户端时CPU占用率直接飙升到90%以上这就是问题的根源。WebSocket中继方案相当于在摄像端和显示端之间加了个快递站。ESP32-CAM只需要把视频打包发给Node.js服务器剩下的分发工作全部交给性能更强的电脑来处理。这种架构有三个明显优势连接稳定性提升我用ping工具测试过直连时丢包率约15%而通过中继服务器能降到3%以下多客户端支持最近给朋友的工作室部署时6台手机同时观看画面依然流畅网络适应性好通过调整帧率和分辨率在信号强度只有-75dBm的环境下仍能保持可用2. 硬件准备与基础配置2.1 硬件选型建议ESP32-CAM模块市面上版本很多我烧坏过三个不同厂家的板子后总结出这些经验一定要买带PSRAM的版本处理320x240分辨率图像时内存占用约30KB没有PSRAM根本跑不动天线选择有讲究板载PCB天线在空旷环境还行但穿墙建议接外置天线。我常用的是IPEX接口的2.4G天线实测穿一堵混凝土墙信号只衰减12%供电要稳定电流峰值能达到500mA用劣质USB线会导致频繁重启。推荐使用带电容的扩展板我在电源端并联了470μF电容后重启问题彻底解决2.2 开发环境搭建PlatformIO配置要注意这些细节[env:esp32cam] platform espressif32 board esp32cam framework arduino monitor_speed 115200 lib_deps arduino-libraries/ArduinoWebsockets 0.5.3 espressif/esp32-camera 2.0.0特别提醒ArduinoWebsockets库要用0.5.3版本新版本API有变动。上周帮网友调试时就遇到1.0.0版不兼容的问题。3. WebSocket服务器深度优化3.1 Node.js服务端关键代码解析这个转发服务器看着简单但有几个魔鬼细节要注意const WebSocket require(ws); const wss new WebSocket.Server({ port: 8888, maxPayload: 1024 * 1024 // 关键默认限制只有16KB }); wss.on(connection, (ws) { ws.on(message, (data) { // 添加发送间隔控制 if (ws.lastSend Date.now() - ws.lastSend 30) return; wss.clients.forEach((client) { if (client ! ws client.readyState WebSocket.OPEN) { // 添加流量控制 if (client.bufferedAmount 2 * 1024 * 1024) { client.send(data); ws.lastSend Date.now(); } } }); }); });我通过Wireshark抓包发现不加流量控制时ESP32显示端会出现缓冲区溢出。添加bufferedAmount检查后画面延迟从800ms降到了200ms以内。3.2 性能调优实测数据在不同硬件上测试的服务端性能对比硬件配置最大客户端数CPU占用率平均延迟树莓派3B878%320ms旧笔记本i5-2520M1545%180ms阿里云1核1G591%600ms建议家用场景用闲置笔记本最划算商业场景可以考虑NUC迷你主机。4. ESP32-CAM端实战技巧4.1 相机参数调优秘籍摄像头初始化这段代码有讲究if(psramFound()){ config.frame_size FRAMESIZE_QVGA; // 不要用VGA实测帧率会掉到5fps config.jpeg_quality 12; // 10-15最佳低于10文件体积激增 config.fb_count 2; // 双缓冲必须开 } else { // 没有PSRAM只能降级 config.frame_size FRAMESIZE_QQVGA; config.jpeg_quality 20; }有个坑我踩过jpeg_quality不是越小越好设为5时虽然单帧清晰但编码时间从30ms暴增到120ms最终效果反而更卡。4.2 网络断连自动恢复现场部署最怕WiFi不稳定这段重连逻辑能救命void checkConnection() { static unsigned long lastCheck 0; if (millis() - lastCheck 5000) { if (!client.available()) { Serial.println(Attempting reconnect...); if(client.connect(websockets_server_host, websockets_server_port, /)) { Serial.println(Reconnect success!); } } lastCheck millis(); } }在loop()里调用这个方法配合WiFi.setAutoReconnect(true)我有个项目已经稳定运行217天没重启。5. 显示端高级玩法5.1 多屏异显方案通过给不同客户端打标签可以实现监控大屏看缩略图手机端看高清流// 服务端改造 client.send(JSON.stringify({ type: register, device: mobile // 或screen })); // 转发时区分 if(client.device mobile){ // 发送高清流 } else { // 发送低分辨率版本 }5.2 触摸控制功能扩展给TFT屏添加触摸交互可以这样改造显示端代码#include XPT2046_Touchscreen.h XPT2046_Touchscreen ts(TOUCH_CS); void loop() { if (ts.touched()) { TS_Point p ts.getPoint(); client.send(ZOOM: String(p.x) , String(p.y)); } }配合服务端的消息转发就能实现点击放大功能。最近给幼儿园做的监控系统就用了这个方案老师们反响特别好。
ESP32-CAM与ESP32构建WebSocket中继视频监控系统
发布时间：2026/5/20 12:54:43
1. 为什么需要WebSocket中继视频监控系统很多朋友第一次接触ESP32-CAM时都会尝试直接用WiFi直连的方式传输视频。我刚开始玩的时候也是这样结果发现画面经常卡顿稍微离远点就断连。后来实测发现当ESP32-CAM同时连接多个客户端时CPU占用率直接飙升到90%以上这就是问题的根源。WebSocket中继方案相当于在摄像端和显示端之间加了个快递站。ESP32-CAM只需要把视频打包发给Node.js服务器剩下的分发工作全部交给性能更强的电脑来处理。这种架构有三个明显优势连接稳定性提升我用ping工具测试过直连时丢包率约15%而通过中继服务器能降到3%以下多客户端支持最近给朋友的工作室部署时6台手机同时观看画面依然流畅网络适应性好通过调整帧率和分辨率在信号强度只有-75dBm的环境下仍能保持可用2. 硬件准备与基础配置2.1 硬件选型建议ESP32-CAM模块市面上版本很多我烧坏过三个不同厂家的板子后总结出这些经验一定要买带PSRAM的版本处理320x240分辨率图像时内存占用约30KB没有PSRAM根本跑不动天线选择有讲究板载PCB天线在空旷环境还行但穿墙建议接外置天线。我常用的是IPEX接口的2.4G天线实测穿一堵混凝土墙信号只衰减12%供电要稳定电流峰值能达到500mA用劣质USB线会导致频繁重启。推荐使用带电容的扩展板我在电源端并联了470μF电容后重启问题彻底解决2.2 开发环境搭建PlatformIO配置要注意这些细节[env:esp32cam] platform espressif32 board esp32cam framework arduino monitor_speed 115200 lib_deps arduino-libraries/ArduinoWebsockets 0.5.3 espressif/esp32-camera 2.0.0特别提醒ArduinoWebsockets库要用0.5.3版本新版本API有变动。上周帮网友调试时就遇到1.0.0版不兼容的问题。3. WebSocket服务器深度优化3.1 Node.js服务端关键代码解析这个转发服务器看着简单但有几个魔鬼细节要注意const WebSocket require(ws); const wss new WebSocket.Server({ port: 8888, maxPayload: 1024 * 1024 // 关键默认限制只有16KB }); wss.on(connection, (ws) { ws.on(message, (data) { // 添加发送间隔控制 if (ws.lastSend Date.now() - ws.lastSend 30) return; wss.clients.forEach((client) { if (client ! ws client.readyState WebSocket.OPEN) { // 添加流量控制 if (client.bufferedAmount 2 * 1024 * 1024) { client.send(data); ws.lastSend Date.now(); } } }); }); });我通过Wireshark抓包发现不加流量控制时ESP32显示端会出现缓冲区溢出。添加bufferedAmount检查后画面延迟从800ms降到了200ms以内。3.2 性能调优实测数据在不同硬件上测试的服务端性能对比硬件配置最大客户端数CPU占用率平均延迟树莓派3B878%320ms旧笔记本i5-2520M1545%180ms阿里云1核1G591%600ms建议家用场景用闲置笔记本最划算商业场景可以考虑NUC迷你主机。4. ESP32-CAM端实战技巧4.1 相机参数调优秘籍摄像头初始化这段代码有讲究if(psramFound()){ config.frame_size FRAMESIZE_QVGA; // 不要用VGA实测帧率会掉到5fps config.jpeg_quality 12; // 10-15最佳低于10文件体积激增 config.fb_count 2; // 双缓冲必须开 } else { // 没有PSRAM只能降级 config.frame_size FRAMESIZE_QQVGA; config.jpeg_quality 20; }有个坑我踩过jpeg_quality不是越小越好设为5时虽然单帧清晰但编码时间从30ms暴增到120ms最终效果反而更卡。4.2 网络断连自动恢复现场部署最怕WiFi不稳定这段重连逻辑能救命void checkConnection() { static unsigned long lastCheck 0; if (millis() - lastCheck 5000) { if (!client.available()) { Serial.println(Attempting reconnect...); if(client.connect(websockets_server_host, websockets_server_port, /)) { Serial.println(Reconnect success!); } } lastCheck millis(); } }在loop()里调用这个方法配合WiFi.setAutoReconnect(true)我有个项目已经稳定运行217天没重启。5. 显示端高级玩法5.1 多屏异显方案通过给不同客户端打标签可以实现监控大屏看缩略图手机端看高清流// 服务端改造 client.send(JSON.stringify({ type: register, device: mobile // 或screen })); // 转发时区分 if(client.device mobile){ // 发送高清流 } else { // 发送低分辨率版本 }5.2 触摸控制功能扩展给TFT屏添加触摸交互可以这样改造显示端代码#include XPT2046_Touchscreen.h XPT2046_Touchscreen ts(TOUCH_CS); void loop() { if (ts.touched()) { TS_Point p ts.getPoint(); client.send(ZOOM: String(p.x) , String(p.y)); } }配合服务端的消息转发就能实现点击放大功能。最近给幼儿园做的监控系统就用了这个方案老师们反响特别好。
