ESP32 创建图片 WebServer-Arduino中文社区

Zoologist 发表于 2022-7-16 18:32

ESP32 创建图片 WebServer

这次介绍一个比较好玩的：通过 ESP32 创建一个 WebServer ，通过浏览器访问的时候自动播放预先定义好的图片序列。制作方法：1. 创建一个 640x480的图片，放上彩色文字，便于观察，保存为 JPG 格式
2. 旋转文字，再保存成另外一个文件3. 重复上述动作我们能获得4个文件
4. 使用 bin2c 工具将四个文件转化为4个C语言h文件5. 文件头定义中做一点调整，图片大小命名为picN_size, 内容命名为 picN 这种
6. 接下来就可以编写我们的代码了#include "esp_camera.h"
#include <WiFi.h>
#include "esp_timer.h"
#include "img_converters.h"
#include "Arduino.h"
#include "fb_gfx.h"
#include "soc/soc.h"
#include "soc/rtc_cntl_reg.h"
#include "esp_http_server.h"
#include "pic\ph0.h"
#include "pic\ph1.h"
#include "pic\ph2.h"
#include "pic\ph3.h"

// 这里改成你自己的 WIFI 名称和密码
const char* ssid = "YOUWIFI";
const char* password = "PASSWORD";

#define PART_BOUNDARY "123456789000000000000987654321"

static const char* _STREAM_CONTENT_TYPE = "multipart/x-mixed-replace;boundary=" PART_BOUNDARY;
static const char* _STREAM_BOUNDARY = "\r\n--" PART_BOUNDARY "\r\n";
static const char* _STREAM_PART = "Content-Type: image/jpeg\r\nContent-Length: %u\r\n\r\n";

httpd_handle_t stream_httpd = NULL;

static esp_err_t stream_handler(httpd_req_t *req) {
esp_err_t res = ESP_OK;
size_t _jpg_buf_len = 0;
uint8_t * _jpg_buf = NULL;
char * part_buf;

static int index=0;

res = httpd_resp_set_type(req, _STREAM_CONTENT_TYPE);
if (res != ESP_OK) {
return res;
}

while (true) {
// 这里设定一个循环，轮流发送PIC0-4
if (index==0) {
   _jpg_buf_len = pic0_size;
   _jpg_buf = (uint8_t *)pic0;
} else if (index==1) {
   _jpg_buf_len = pic1_size;
   _jpg_buf = (uint8_t *)pic1;
} else if (index==2) {
   _jpg_buf_len = pic2_size;
   _jpg_buf = (uint8_t *)pic2;
} else if (index==3) {
   _jpg_buf_len = pic3_size;
   _jpg_buf = (uint8_t *)pic3;
}
// 如果发送完PIC3 接来发送PIC0
index=(index+1)%4;

if (res == ESP_OK) {
   size_t hlen = snprintf((char *)part_buf, 64, _STREAM_PART, _jpg_buf_len);
   res = httpd_resp_send_chunk(req, (const char *)part_buf, hlen);
}
if (res == ESP_OK) {
   res = httpd_resp_send_chunk(req, (const char *)_jpg_buf, _jpg_buf_len);
}
if (res == ESP_OK) {
   res = httpd_resp_send_chunk(req, _STREAM_BOUNDARY, strlen(_STREAM_BOUNDARY));
}
if (res != ESP_OK) {
   break;
}
Serial.printf("MJPG: %uB\n",(uint32_t)(_jpg_buf_len));
}
return res;
}

void startPicServer() {
httpd_config_t config = HTTPD_DEFAULT_CONFIG();
config.server_port = 80;

httpd_uri_t index_uri = {
.uri    = "/",
.method = HTTP_GET,
.handler = stream_handler,
.user_ctx= NULL
};

if (httpd_start(&stream_httpd, &config) == ESP_OK) {
httpd_register_uri_handler(stream_httpd, &index_uri);
}
}

void setup() {
WRITE_PERI_REG(RTC_CNTL_BROWN_OUT_REG, 0); //disable brownout detector

Serial.begin(115200);
Serial.setDebugOutput(false);

// Wi-Fi connection
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");

Serial.print("Camera Stream Ready! Go to: http://");
Serial.print(WiFi.localIP());

//启动
startPicServer();
}

void loop() {
delay(1);
}

7.运行之后串口监视器会输出当前 WebServer 的 IP ，将地址在浏览器中打开即可看到结果：

Zoologist 发表于 2022-7-16 18:57

完整代码

页: [1]

Arduino中文社区's Archiver

ESP32 创建图片 WebServer