如何用ESP32 CAM与Laravel搭建实时监控系统？从零开始的完整教程

引言：为什么选择ESP32 CAM与Laravel？

ESP32 CAM是一款集成摄像头和Wi-Fi功能的低成本开发板，非常适合DIY监控项目。然而，许多初学者在尝试将ESP32 CAM与Web后端（如Laravel）集成时，常遇到图像传输不稳定、数据存储混乱、实时性差等问题。本文将针对这些具体痛点，提供一套完整的解决方案。

硬件准备与接线

首先，你需要准备以下硬件：ESP32 CAM模块（带OV2640摄像头）、USB转TTL下载器、杜邦线若干。接线方式如下：
1. 将下载器的VCC连接到ESP32 CAM的5V引脚（注意：部分版本需3.3V，请根据模块说明调整）。
2. GND连接GND。
3. TXD连接ESP32的U0R（GPIO3）。
4. RXD连接ESP32的U0T（GPIO1）。
5. 此外，将GPIO0与GND短接，以便进入下载模式。

Arduino IDE环境配置

打开Arduino IDE，在“文件”->“首选项”中添加ESP32开发板管理器URL：https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json。然后通过“工具”->“开发板”->“开发板管理器”搜索并安装“esp32”包。选择开发板为“AI Thinker ESP32-CAM”。

ESP32 CAM代码编写

以下代码实现ESP32 CAM连接Wi-Fi，定时拍照并通过HTTP POST发送到Laravel服务器：

#include <WiFi.h>
#include "esp_camera.h"

const char* ssid = "你的WiFi名称";
const char* password = "你的WiFi密码";
const char* serverUrl = "http://你的Laravel服务器地址/api/upload";

void setup() {
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("WiFi connected");
  // 摄像头初始化代码（省略，请参考官方示例）
}

void loop() {
  camera_fb_t *fb = esp_camera_fb_get();
  if (!fb) {
    Serial.println("Camera capture failed");
    return;
  }
  // 发送图片到服务器
  sendPhoto(fb);
  esp_camera_fb_return(fb);
  delay(5000); // 每5秒拍一张
}

void sendPhoto(camera_fb_t *fb) {
  HTTPClient http;
  http.begin(serverUrl);
  http.addHeader("Content-Type", "image/jpeg");
  int httpResponseCode = http.POST(fb->buf, fb->len);
  if (httpResponseCode > 0) {
    Serial.printf("HTTP Response code: %d
", httpResponseCode);
  } else {
    Serial.printf("Error sending photo: %s
", http.errorToString(httpResponseCode).c_str());
  }
  http.end();
}

Laravel后端搭建

在Laravel项目中，首先创建路由和控制器。运行以下Artisan命令：
php artisan make:controller CameraController
然后编辑routes/api.php添加：

Route::post('/upload', [CameraController::class, 'upload']);

public function upload(Request $request) {
    $imageData = $request->getContent();
    $imageName = 'camera_' . time() . '.jpg';
    Storage::disk('public')->put('images/' . $imageName, $imageData);
    return response()->json(['status' => 'success', 'filename' => $imageName]);
}

前端实时展示

在Laravel Blade视图中，使用JavaScript定时请求最新图片：

<img id="liveImage" src="" alt="实时监控" style="width:100%;max-width:640px;">
<script>
setInterval(function() {
    fetch('/api/latest-image')
        .then(response => response.json())
        .then(data => {
            document.getElementById('liveImage').src = '/storage/images/' + data.filename + '?t=' + Date.now();
        });
}, 3000); // 每3秒刷新
</script>

常见问题与优化

• 图像传输失败：检查Wi-Fi信号强度，ESP32 CAM的Wi-Fi模块较弱，建议靠近路由器。
• 内存不足：ESP32 CAM的PSRAM需在代码中启用，否则高分辨率图像会导致崩溃。
• Laravel接收超时：调整php.ini中的max_execution_time和upload_max_filesize。
• 安全性：建议在生产环境中使用HTTPS和API密钥验证。

结语

通过本教程，你已经成功搭建了一个基于ESP32 CAM和Laravel的实时监控系统。整个过程无需昂贵设备，只需基础的编程知识。你可以进一步扩展功能，如运动检测、云存储、多摄像头支持等。希望本文能激发你的创作灵感，动手打造属于自己的智能监控方案！