开始前适用开发板：ESP32-P4 + ESP32-C5 · 开发框架：ESP-IDF
适用开发板：P4C5 · 工程
04.advanced.camera_webserver· targetesp32p4
前置：Wi-Fi Station
学习时长：约 25 分钟 · 难度：★★★☆☆
学习目标
完成本节后，你将能够：
- 理解 MIPI CSI / USB UVC 摄像头 + HTTP MJPEG 推流的完整链路
- 掌握 P4 硬件 JPEG 编码在图传场景的优势
- 对比 P4C5 与 Korvo 在图传能力上的差异
1. 这个例子在干嘛
功能与 Korvo camera_webserver 相同——连接 Wi-Fi 后，摄像头采集画面通过 HTTP MJPEG 流推送到浏览器实时查看。
关键区别：P4C5 使用 MIPI CSI 或 USB UVC 摄像头，且有 P4 硬件 JPEG 编码器，性能远超 Korvo 的 DVP 方案。
┌─────────────┐ MIPI CSI ┌──────────┐ 硬件 JPEG ┌──────────┐ Wi-Fi ┌──────────┐
│ SC2336 │───────────→│ ESP32-P4 │───────────→│ HTTP 推流 │──────────→│ 浏览器 │
│ 2MP 摄像头 │ RAW 图像 │ JPEG 硬编 │ JPEG 帧 │ MJPEG │ 多帧 │ 实时画面 │
└─────────────┘ └──────────┘ └──────────┘ └──────────┘
与 Korvo 版的对比
| 对比项 | Korvo | P4C5 |
|---|---|---|
| 摄像头 | DVP OV2640 | MIPI CSI SC2336 / USB UVC |
| JPEG 编码 | 摄像头自带 JPEG 输出 | P4 硬件 JPEG 编码器 |
| 最大分辨率 | VGA(640×480) | 1080p（2MP） |
| 编码速度 | 受摄像头限制 | 极快（硬件加速） |
| Wi-Fi | S3 内置 | C5 外置（Wi-Fi 6） |
| 帧率 | 15~20 fps@QVGA | 更高 |
2. 编译烧录
cd P4_C5_4.3_Firmware\04.advanced.camera_webserver
idf.py set-target esp32p4
idf.py menuconfig # Wi-Fi SSID/密码；摄像头类型
idf.py build flash monitor
3. 使用步骤
- 烧录后等 C5 就绪（10~20 秒）→ Wi-Fi 连接 → 串口显示
GOT IP - 记住 IP 地址
- 手机/PC 连接同一 Wi-Fi
- 浏览器打开
http://<IP>/或http://<IP>/stream - 应看到实时画面
4. MJPEG 推流原理
HTTP Server 持续推送 JPEG 帧，每帧作为 multipart 的一个 part：
HTTP/1.1 200 OK
Content-Type: multipart/x-mixed-replace; boundary=frame
--frame
Content-Type: image/jpeg
Content-Length: 15000
<JPEG 帧 1>
--frame
Content-Type: image/jpeg
Content-Length: 14500
<JPEG 帧 2>
... (持续不断)
详细原理参见 Korvo camera_webserver 第 5 节。
5. 常见问题与排查
| 现象 | 可能原因 | 解决方案 |
|---|---|---|
| 打不开页面 | IP 不对或不同子网 | 核对串口 IP |
| 有页无图 | 摄像头初始化失败 | 检查 CSI FPC 排线 |
| 画面卡 | 分辨率太高 | 降低分辨率 |
| C5 未就绪 | SDIO 通信延迟 | 等 10~20 秒 |
| UVC 无图 | GPIO20 升压/USB 供电 | 检查 USB 摄像头供电 |
6. 动手改造建议
- HTTP 认证：加 Basic Auth 防止局域网被蹭看
- 快照接口：新增
/capture.jpg返回单帧 - MQTT 联动：收到命令才开启推流，省电省带宽
- 录像：MJPEG 帧同时写入 TF 卡 AVI 文件
7. 下一步
| 方向 | 推荐例程 | 说明 |
|---|---|---|
| 本地预览 | Camera LVGL | 不需 Wi-Fi |
| AVI 录制 | AVI Recorder | 录到 TF 卡 |
| 人脸识别 | Face Recognition | 摄像头 + AI |
| 详细原理 | Korvo camera_webserver | MJPEG 详解 |
酷世DIY · Kevincoooool