如何用TTGO ESP32 Camera和Node.js搭建实时监控系统？

PHP 2026-05-07 04:09 69 0 0 0

引言

在物联网和智能家居的浪潮中，实时视频监控已成为热门需求。TTGO ESP32 Camera凭借其集成的摄像头、Wi-Fi和蓝牙功能，成为低成本DIY监控方案的理想选择。然而，许多开发者面临一个问题：如何将TTGO ESP32 Camera的视频流高效传输到后端，并通过Node.js构建稳定的监控系统？本文将提供从硬件配置到软件实现的完整指南，帮助你快速搭建属于自己的实时监控系统。

硬件准备与配置

首先，你需要以下硬件：

TTGO ESP32 Camera模块（建议带OV2640摄像头）
USB转TTL下载器（用于烧录固件）
5V电源适配器（或通过USB供电）

连接硬件时，注意将TTGO的TX、RX、GND、VCC对应连接到下载器。下载器选择3.3V模式，避免烧坏模块。

烧录固件

TTGO ESP32 Camera默认不包含摄像头驱动，需要烧录支持Camera的固件。推荐使用Arduino IDE或PlatformIO。以下以Arduino IDE为例：

安装ESP32开发板支持（在Arduino IDE中通过“开发板管理器”搜索ESP32并安装）。
安装摄像头库：在库管理器中搜索“ESP32 Camera”并安装。
打开示例代码：文件 → 示例 → ESP32 → Camera → CameraWebServer。
修改代码中的Wi-Fi名称和密码，以及摄像头型号（选择CAMERA_MODEL_AI_THINKER）。
选择开发板为“AI Thinker ESP32-CAM”，烧录速度设为115200。
点击上传，等待完成。

烧录成功后，TTGO ESP32 Camera会通过串口输出IP地址，在浏览器中访问该IP即可看到摄像头画面。

Node.js后端搭建

为了让监控系统更灵活，我们使用Node.js作为后端服务器，接收并处理视频流。首先，安装Node.js环境，然后创建项目：

mkdir esp32-monitor
cd esp32-monitor
npm init -y
npm install express http socket.io

创建server.js文件，实现以下功能：

提供静态页面服务
接收ESP32的HTTP请求，获取视频帧
通过WebSocket将帧推送到前端

示例代码片段：

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  console.log('Client connected');
  socket.on('frame', (data) => {
    socket.broadcast.emit('frame', data);
  });
});

server.listen(3000, () => {
  console.log('Server running on port 3000');
});

ESP32端代码修改

默认的CameraWebServer示例代码提供的是HTTP流，我们需要修改ESP32代码，使其每隔一定时间发送JPEG帧到Node.js服务器。在app_httpd.cpp中找到发送帧的循环，添加HTTP POST请求：

if (client == NULL) {
  // 发送帧到Node.js服务器
  http.begin("http://192.168.1.100:3000/frame");
  http.addHeader("Content-Type", "image/jpeg");
  http.sendPost(&fb->buf[0], fb->len);
  http.end();
}

注意替换IP地址为你的Node.js服务器地址。

前端实时显示

创建index.html文件，使用Canvas或Image标签显示视频帧：

<!DOCTYPE html>
<html>
<head>
  <title>ESP32监控</title>
</head>
<body>
  <img id="video" src="" />
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();
    const img = document.getElementById('video');
    socket.on('frame', (data) => {
      img.src = 'data:image/jpeg;base64,' + data;
    });
  </script>
</body>
</html>

优化与扩展

以上系统已可工作，但仍有优化空间：

使用MJPEG流替代逐帧传输，降低延迟。
添加运动检测功能，在Node.js端处理帧。
集成数据库存储关键帧。
支持多摄像头同时接入。

例如，使用MJPEG流时，ESP32直接提供HTTP视频流，Node.js作为代理转发：

// Node.js端使用request模块获取流并pipe到WebSocket

总结

通过本文的步骤，你已成功将TTGO ESP32 Camera与Node.js结合，搭建了一个实时监控系统。这个方案成本低廉、扩展性强，适合应用于家庭安防、宠物监控、办公室环境监测等场景。希望你能在此基础上继续探索，开发出更强大的物联网应用。