CameraWebServer 示例

CameraWebServer 示例

概述

本节介绍如何使用 ESP32 官方的 CameraWebServer 示例验证摄像头硬件和连接。学习完成后，您将能够：

• 搭建和运行 CameraWebServer 示例
• 通过浏览器访问摄像头实时画面
• 验证摄像头模组工作是否正常
• 排查硬件连接和配置问题

什么是 CameraWebServer？

CameraWebServer 是 ESP32 官方提供的示例程序，通过 Web 界面提供：

• 实时视频流预览
• 拍照和参数调节
• 分辨率/质量/特效控制
• 硬件功能验证

┌──────────────────────────────────────────┐
│           CameraWebServer 流程             │
├──────────────────────────────────────────┤
│                                           │
│  [ESP32-CAM] ──WiFi──→ [Web浏览器]        │
│       │                    │              │
│       │              ┌─────┴──────┐       │
│       │              │ 实时视频流  │       │
│       │              │ 拍照控制    │       │
│       │              │ 参数调节    │       │
│       │              └────────────┘       │
│       ▼                                    │
│  [摄像头传感器]                             │
│                                            │
└──────────────────────────────────────────┘

Project Setup (PlatformIO)

platformio.ini

[env:esp32-cam]
platform = espressif32
board = esp32-cam
framework = arduino
board_build.partitions = default_ffat.csv
board_build.flash_mode = dout

lib_deps =
    ESP32 Camera

build_flags =
    -DCAMERA_MODEL_AI_THINKER
    -DBOARD_HAS_PSRAM
    -mfix-esp32-psram-cache-issue

main.cpp (精简版 CameraWebServer)

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

// Wi-Fi 配置
const char* ssid = "YOUR_SSID";
const char* password = "YOUR_PASSWORD";

// 摄像头引脚配置 (AI-Thinker ESP32-CAM)
#define PWDN_GPIO_NUM     32
#define RESET_GPIO_NUM    -1
#define XCLK_GPIO_NUM      0
#define SIOD_GPIO_NUM     26
#define SIOC_GPIO_NUM     27
#define Y9_GPIO_NUM       35
#define Y8_GPIO_NUM       34
#define Y7_GPIO_NUM       39
#define Y6_GPIO_NUM       36
#define Y5_GPIO_NUM       21
#define Y4_GPIO_NUM       19
#define Y3_GPIO_NUM       18
#define Y2_GPIO_NUM        5
#define VSYNC_GPIO_NUM    25
#define HREF_GPIO_NUM     23
#define PCLK_GPIO_NUM     22

// 摄像头初始化
void setup() {
    Serial.begin(115200);
    Serial.println("ESP32-CAM CameraWebServer Starting...");

    // 配置摄像头
    camera_config_t config;
    config.ledc_channel = LEDC_CHANNEL_0;
    config.ledc_timer = LEDC_TIMER_0;
    config.pin_d0 = Y2_GPIO_NUM;
    config.pin_d1 = Y3_GPIO_NUM;
    config.pin_d2 = Y4_GPIO_NUM;
    config.pin_d3 = Y5_GPIO_NUM;
    config.pin_d4 = Y6_GPIO_NUM;
    config.pin_d5 = Y7_GPIO_NUM;
    config.pin_d6 = Y8_GPIO_NUM;
    config.pin_d7 = Y9_GPIO_NUM;
    config.pin_xclk = XCLK_GPIO_NUM;
    config.pin_pclk = PCLK_GPIO_NUM;
    config.pin_vsync = VSYNC_GPIO_NUM;
    config.pin_href = HREF_GPIO_NUM;
    config.pin_sscb_sda = SIOD_GPIO_NUM;
    config.pin_sscb_scl = SIOC_GPIO_NUM;
    config.pin_pwdn = PWDN_GPIO_NUM;
    config.pin_reset = RESET_GPIO_NUM;
    config.xclk_freq_hz = 20000000;
    config.pixel_format = PIXFORMAT_JPEG;
    config.frame_size = FRAMESIZE_VGA;
    config.jpeg_quality = 12;
    config.fb_count = 1;

    // 初始化摄像头
    esp_err_t err = esp_camera_init(&config);
    if (err != ESP_OK) {
        Serial.printf("Camera init failed: 0x%x\n", err);
        return;
    }

    // 连接 Wi-Fi
    WiFi.begin(ssid, password);
    while (WiFi.status() != WL_CONNECTED) {
        delay(500);
        Serial.print(".");
    }
    Serial.println("\nWiFi connected!");
    Serial.print("Camera Ready! Visit: http://");
    Serial.println(WiFi.localIP());
}

void loop() {
    // 在 CameraWebServer 中，loop 函数处理 HTTP 请求
    delay(10000);
}

Using CameraWebServer

步骤 1: 烧录固件

# 1. GPIO0 接 GND (进入烧录模式)
# 2. 连接 FTDI 编程器
# 3. 上传固件
pio run --target upload --environment esp32-cam

# 4. 断开 GPIO0-GND 连接
# 5. 按 RST 按钮重启

步骤 2: 访问 Web 界面

打开浏览器访问串口输出的 IP 地址：

http://192.168.1.100

页面功能:
┌──────────────────────────────────────────┐
│  ESP32-CAM CameraWebServer                │
├──────────────────────────────────────────┤
│                                          │
│  ┌────────────────────────────────────┐  │
│  │        实时视频流画面               │  │
│  │                                    │  │
│  └────────────────────────────────────┘  │
│                                          │
│  分辨率: [VGA ▼]   质量: [12 ▼]         │
│  亮度: [====●====] 特效: [None ▼]       │
│                                          │
│  [Get Still] [Start Stream] [Stop]       │
│                                          │
└──────────────────────────────────────────┘

验证项目

1. ✅ 视频流正常播放 → 摄像头硬件 OK
2. ✅ 拍照功能可用 → 帧缓冲 OK
3. ✅ 分辨率切换正常 → 传感器工作正常
4. ✅ 闪光灯控制正常 → LED 电路 OK

故障排除

摄像头无画面

# 1. 检查摄像头排线连接
# 2. 检查供电 (FTDI 5V 可能不够)
# 3. 检查串口输出错误信息
# 4. 尝试低分辨率 (QQVGA 160×120)

# 供电不足症状：
# - 摄像头初始化失败 (psram 错误)
# - 视频流卡顿或断开
# - 拍出的图片花屏
# 解决方案：使用外部 5V 电源

烧录失败

# 症状: "Failed to connect to ESP32"
# 原因: 未正确进入烧录模式

# 解决方法:
# 1. GPIO0 确保已接 GND
# 2. 按下 RST 按钮
# 3. 再尝试烧录
# 4. 烧录成功后断开 GPIO0-GND

Common Customer Questions

Q1: CameraWebServer 适合生产环境吗？

CameraWebServer 主要用于硬件验证和开发调试。生产环境建议使用 MQTT 控制拍照和传输图片，更加稳定和可控。

Q2: 视频流帧率能到多少？

VGA (640×480) 分辨率下约 5-15fps，取决于 Wi-Fi 信号质量和 JPEG 质量设置。QVGA (320×240) 可达 15-25fps。

Q3: 如何提高视频流流畅度？

降低分辨率 (VGA → QVGA)、降低 JPEG 质量值 (12 → 20)、确保 Wi-Fi 信号强度 > -65dBm。

最佳实践

✅ 推荐做法:

• 首次使用 CameraWebServer 验证硬件
• 使用外部 5V 供电避免 FTDI 供电不足
• 烧录时连接 GPIO0-GND，运行断开
• 使用串口监视器查看启动日志

❌ 避免做法:

• 跳过 CameraWebServer 验证直接开发应用
• 使用 FTDI 供电长期运行
• 忘记断开 GPIO0-GND 导致无法正常启动
• 在 Wi-Fi 信号弱的位置测试

Summary

1. CameraWebServer 是验证 ESP32-CAM 硬件的官方示例
2. 通过浏览器访问 IP 地址查看实时视频流
3. Web 界面支持分辨率、质量、特效等参数调节
4. PSRAM 配置对大分辨率图片至关重要
5. 开发环境使用后，生产应切换到 MQTT 控制模式

References

• ESP32 CameraWebServer 示例
• ESP32-CAM 故障排查指南