ESP32-CAM通过WiFi传输视频

[0 前言](#0 前言)
[1 硬件](#1 硬件)
[2 软件](#2 软件)
- [2.1 可直接从"示例"中获取现成的程序](#2.1 可直接从“示例”中获取现成的程序)
- [2.2 改动程序](#2.2 改动程序)
- [2.3 上传程序](#2.3 上传程序)
[3 代码分析](#3 代码分析)
- [3.1 摄像头拍摄视频设置](#3.1 摄像头拍摄视频设置)
- [3.2 如何获取IP地址](#3.2 如何获取IP地址)
- [3.3 网页界面的代码在哪里](#3.3 网页界面的代码在哪里)
- [3.4 ESP32-CAM作为Web服务器，浏览器作为客户端](#3.4 ESP32-CAM作为Web服务器，浏览器作为客户端)
[4 其他](#4 其他)

0 前言

作为一个电子DIY新手，这次记录一个WiFi无线传输视频的例子。用的是ESP32-CAM的板子，代码都是Arduino中现成的。虽然代码是现成的，但是涉及到视频流无线传输的东西倒是不少。

1 硬件

开发板： ESP32-CAM
USB转TTL连接器或烧录底座

2 软件

2.1 可直接从"示例"中获取现成的程序

2.2 改动程序

选择开发板
设置WiFi用户名和密码

c 复制代码

// ===========================
// Enter your WiFi credentials
// ===========================
const char *ssid = "**********";
const char *password = "**********";

注意：电脑与ESP32-CAM在同一个2.4G WiFi网络下（ESP32模块内部集成的WiFi模块仅支持2.4GHz，不支持5GHz）

2.3 上传程序

上传程序到开发板后，按RST按钮
点击下图中"Start Stream"/"Stop Stream"可以接收视频/停止视频
通过选择"Resolution"可以改变视频画面的大小

3 代码分析

3.1 摄像头拍摄视频设置

c 复制代码

// 这些设置只对OV3660传感器生效
if (s->id.PID == OV3660_PID) {
    s->set_vflip(s, 1);        // flip it back
    s->set_brightness(s, 1);   // up the brightness just a bit
    s->set_saturation(s, -2);  // lower the saturation
  }

3.2 如何获取IP地址

IP地址是通过DHCP从路由器自动获取，这个IP地址就是ESP32-CAM在局域网中的IP地址。ESP32重启后，路由器通常会给它相同或不同的IP，这取决于路由器设置。

c 复制代码

// 1. 启动WiFi连接
WiFi.begin(ssid, password);

// 2. 等待连接成功
while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
}

// 3. 获取并打印IP地址
Serial.print("Camera Ready! Use 'http://");
Serial.print(WiFi.localIP());  // ← 关键函数
Serial.println("' to connect");

cpp 复制代码

// 伪代码示意DHCP过程
1. ESP32发送DHCP Discover广播包
2. 路由器回复DHCP Offer（提供可用IP）
3. ESP32发送DHCP Request请求该IP
4. 路由器回复DHCP Ack确认分配
5. ESP32获得IP地址、网关、DNS等信息

3.3 网页界面的代码在哪里

c 复制代码

浏览器用户操作流程：
1. 输入 http://192.168.1.100
2. ESP32返回HTML页面（包含CSS/JS）
3. 页面加载后，自动请求 /stream 获取视频
4. 用户点击按钮 → JavaScript调用 /control?var=xxx&val=xxx
5. ESP32处理控制命令，更新摄像头设置

c 复制代码

void startCameraServer();  // 此函数中包含了网页界面的代码

c 复制代码

#include "camera_index.h"  // ← 这个头文件包含了压缩的HTML页面

网页界面实现机制
网页界面设计代码以gzip压缩的二进制格式存储在 camera_index.h 中。浏览器访问时，ESP32会：
①从Flash读取压缩的HTML数据
②通过HTTP发送（Content-Encoding: gzip）
③浏览器自动解压并显示

3.4 ESP32-CAM作为Web服务器，浏览器作为客户端

服务器（ESP32）的任务：

cpp 复制代码

1. 网络服务：启动HTTP服务器，监听端口
2. 请求处理：解析HTTP请求，调用对应处理函数
3. 资源提供：
   - index_handler()   → 提供网页界面
   - stream_handler()  → 提供视频流
   - capture_handler() → 提供单张照片
4. 设备控制：
   - cmd_handler()     → 处理摄像头设置命令
   - 控制闪光灯、调整参数等
5. 状态管理：
   - status_handler()  → 提供设备状态
   - 管理连接、内存、性能等

客户端（浏览器）的任务：

cpp 复制代码

1. 用户交互：
   - 显示界面，接收用户点击
   - 输入框、按钮、滑块等交互
2. 网络通信：
   - 创建HTTP请求
   - 处理HTTP响应
3. 数据处理：
   - 解析HTML/CSS/JavaScript
   - 解码Base64图片
   - 解压gzip数据
4. 资源渲染：
   - 渲染网页布局
   - 显示视频流
   - 更新状态信息
5. 本地操作：
   - 保存照片到本地
   - 全屏显示
   - 打印等操作

4 其他

学习视频
ESP32-CAM视频流传输教程（网页端+APP）