ESP32 创建图片 WebServer

Zoologist

这次介绍一个比较好玩的：通过 ESP32 创建一个 WebServer ，通过浏览器访问的时候自动播放预先定义好的图片序列。

制作方法：

1.     创建一个 640x480的图片，放上彩色文字，便于观察，保存为 JPG 格式

2.     旋转文字，再保存成另外一个文件

3.     重复上述动作我们能获得4个文件

4.     使用 bin2c 工具将四个文件转化为4个C语言h文件

5.     文件头定义中做一点调整，图片大小命名为  picN_size, 内容命名为 picN 这种

6.     接下来就可以编写我们的代码了

1. #include "esp_camera.h"
   
2. #include <WiFi.h>
   
3. #include "esp_timer.h"
   
4. #include "img_converters.h"
   
5. #include "Arduino.h"
   
6. #include "fb_gfx.h"
   
7. #include "soc/soc.h"
   
8. #include "soc/rtc_cntl_reg.h"
   
9. #include "esp_http_server.h"
   
10. #include "pic\ph0.h"
    
11. #include "pic\ph1.h"
    
12. #include "pic\ph2.h"
    
13. #include "pic\ph3.h"
    
14. 
    
15. // 这里改成你自己的 WIFI 名称和密码
    
16. const char* ssid = "YOUWIFI";
    
17. const char* password = "PASSWORD";
    
18. 
    
19. #define PART_BOUNDARY "123456789000000000000987654321"
    
20. 
    
21. static const char* _STREAM_CONTENT_TYPE = "multipart/x-mixed-replace;boundary=" PART_BOUNDARY;
    
22. static const char* _STREAM_BOUNDARY = "\r\n--" PART_BOUNDARY "\r\n";
    
23. static const char* _STREAM_PART = "Content-Type: image/jpeg\r\nContent-Length: %u\r\n\r\n";
    
24. 
    
25. httpd_handle_t stream_httpd = NULL;
    
26. 
    
27. static esp_err_t stream_handler(httpd_req_t *req) {
    
28.   esp_err_t res = ESP_OK;
    
29.   size_t _jpg_buf_len = 0;
    
30.   uint8_t * _jpg_buf = NULL;
    
31.   char * part_buf[64];
    
32.   
    
33.   static int index=0;
    
34.   
    
35.   res = httpd_resp_set_type(req, _STREAM_CONTENT_TYPE);
    
36.   if (res != ESP_OK) {
    
37.     return res;
    
38.   }
    
39. 
    
40.   while (true) {
    
41.     // 这里设定一个循环，轮流发送PIC0-4
    
42.     if (index==0) {
    
43.       _jpg_buf_len = pic0_size;
    
44.       _jpg_buf = (uint8_t *)pic0;
    
45.     } else if (index==1) {
    
46.       _jpg_buf_len = pic1_size;
    
47.       _jpg_buf = (uint8_t *)pic1;
    
48.     } else if (index==2) {
    
49.       _jpg_buf_len = pic2_size;
    
50.       _jpg_buf = (uint8_t *)pic2;
    
51.     } else if (index==3) {
    
52.       _jpg_buf_len = pic3_size;
    
53.       _jpg_buf = (uint8_t *)pic3;
    
54.     }
    
55.     // 如果发送完PIC3 接来发送PIC0
    
56.     index=(index+1)%4;
    
57. 
    
58.     if (res == ESP_OK) {
    
59.       size_t hlen = snprintf((char *)part_buf, 64, _STREAM_PART, _jpg_buf_len);
    
60.       res = httpd_resp_send_chunk(req, (const char *)part_buf, hlen);
    
61.     }
    
62.     if (res == ESP_OK) {
    
63.       res = httpd_resp_send_chunk(req, (const char *)_jpg_buf, _jpg_buf_len);
    
64.     }
    
65.     if (res == ESP_OK) {
    
66.       res = httpd_resp_send_chunk(req, _STREAM_BOUNDARY, strlen(_STREAM_BOUNDARY));
    
67.     }
    
68.     if (res != ESP_OK) {
    
69.       break;
    
70.     }
    
71.     Serial.printf("MJPG: %uB\n",(uint32_t)(_jpg_buf_len));
    
72.   }
    
73.   return res;
    
74. }
    
75. 
    
76. void startPicServer() {
    
77.   httpd_config_t config = HTTPD_DEFAULT_CONFIG();
    
78.   config.server_port = 80;
    
79. 
    
80.   httpd_uri_t index_uri = {
    
81.     .uri       = "/",
    
82.     .method    = HTTP_GET,
    
83.     .handler   = stream_handler,
    
84.     .user_ctx  = NULL
    
85.   };
    
86. 
    
87.   if (httpd_start(&stream_httpd, &config) == ESP_OK) {
    
88.     httpd_register_uri_handler(stream_httpd, &index_uri);
    
89.   }
    
90. }
    
91. 
    
92. void setup() {
    
93.   WRITE_PERI_REG(RTC_CNTL_BROWN_OUT_REG, 0); //disable brownout detector
    
94. 
    
95.   Serial.begin(115200);
    
96.   Serial.setDebugOutput(false);
    
97. 
    
98.   // Wi-Fi connection
    
99.   WiFi.begin(ssid, password);
    
100.   while (WiFi.status() != WL_CONNECTED) {
     
101.     delay(500);
     
102.     Serial.print(".");
     
103.   }
     
104.   Serial.println("");
     
105.   Serial.println("WiFi connected");
     
106. 
     
107.   Serial.print("Camera Stream Ready! Go to: http://");
     
108.   Serial.print(WiFi.localIP());
     
109. 
     
110.   //启动
     
111.   startPicServer();
     
112. }
     
113. 
     
114. void loop() {
     
115.   delay(1);
     
116. }
     

复制代码

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

Zoologist

完整代码 ESP32PICWebServer.zip (68.48 KB, 下载次数: 2)

2022-7-16 18:57 上传

点击文件名下载附件