带有 OpenCV.js 的 ESP32-CAM Web 服务器：颜色识别和跟踪

本教程介绍了使用 ESP32 摄像头网络服务器环境的 OpenCV.js 和 OpenCV 工具。例如，我们将构建一个简单的 ESP32 摄像头网络服务器，其中包括对移动物体的颜色检测和跟踪。

​

本教程绝不是对 OpenCV 可以提供给 ESP32 摄像头网络服务器的所有内容的详尽处理。此介绍将激发更多使用 ESP32 相机的 OpenCV 工作。

这个项目/教程是基于国外作者（Andrew R. Sass）的项目创建的。

介绍

ESP32 可以作为浏览器客户端的服务器，某些型号包括一个摄像头（例如，ESP32-CAM），允许客户端在浏览器中查看静态或视频图片。HTML、JavaScript 和其它浏览器语言可以利用 ESP32 及其相机的广泛功能。

对于那些对 ESP32 相机开发板经验很少或没有经验的人，可以从以下教程开始。

​

​

OpenCV.js

如docs.opencv.org 中所述，OpenCV（开源计算机视觉库：http : //opencv.org）是一个包含数百种计算机视觉算法的开源库。OpenCV.js 使用 Emscripten，一个 JavaScript 的编译器，为一个不断增长的 API 库编译 OpenCV 的函数。

​

OpenCV.js 在浏览器中运行，它允许仅具有适度 HTML 和 JavaScript 背景的人快速试用 OpenCV 功能。那些有 Esp32 相机应用背景的人已经有了这个背景。

项目概况

我们将在本教程中构建的项目创建一个允许对移动对象进行颜色跟踪的 Web 服务器。在 Web 服务器界面上，您可以使用多种配置来正确选择要跟踪的颜色。然后，浏览器将移动物体实时 x 和 y 坐标发送到 ESP32 板。

​

这是 Web 服务器的预览。

​

先决条件

在继续此项目之前，请确保正确安装了ESP32的环境组件。

Arduino IDE

我们将使用 Arduino IDE 对 ESP32 板进行编程。因此，您需要安装 Arduino IDE 以及 ESP32 组件：

​

​

一、ESP32开发环境搭建（arduino）

获得 ESP32 相机

该项目与任何具有 OV2640 摄像头的 ESP32 摄像头板兼容。有几种 ESP32 相机型号。

确保您知道您正在使用的相机板的引脚分配。对于最流行的开发板的引脚分配，请查看这篇文章：

​

​

ESP32-CAM AI-Thinker引脚指南：GPIO使用说明

代码 – 带有 OpenCV.js 的 ESP32-CAM

该计划由两部分组成：

• 在 ESP32 相机上运行服务器程序
• 在 Chrome 浏览器上运行客户端程序

该程序分为两个文件： OCV_ColorTrack_P.ino 包含服务器程序和 index_OCV_ColorTrack.h 包含客户端程序的头文件（HTML、CSS 和 JavaScript with OpenCV.js）。

创建一个名为的新 Arduino 程序 OCV_ColorTrack_P 并复制以下代码。

1. /*********
2. The include file, index_OCV_ColorTrack.h, the Client, is an intoduction of OpenCV.js to the ESP32 Camera environment. The Client was
3. developed and written by Andrew R. Sass. Permission to reproduce the index_OCV_ColorTrack.h file is granted free of charge if this
4. entire copyright notice is included in all copies of the index_OCV_ColorTrack.h file.
6. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.
7. The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8. *********/
10. #include
11. #include
12. #include "esp_camera.h"
13. #include "soc/soc.h"
14. #include "soc/rtc_cntl_reg.h"
15. #include "index_OCV_ColorTrack.h"
17. // Replace with your network credentials
18. const char* ssid = "REPLACE_WITH_YOUR_SSID";
19. const char* password = "REPLACE_WITH_YOUR_PASSWORD";
21. String Feedback="";
22. String Command="",cmd="",P1="",P2="",P3="",P4="",P5="",P6="",P7="",P8="",P9="";
23. byte ReceiveState=0,cmdState=1,strState=1,questionstate=0,equalstate=0,semicolonstate=0;
24. //ANN:0
25. // AI-Thinker
26. #define PWDN_GPIO_NUM 32
27. #define RESET_GPIO_NUM -1
28. #define XCLK_GPIO_NUM 0
29. #define SIOD_GPIO_NUM 26
30. #define SIOC_GPIO_NUM 27
31. #define Y9_GPIO_NUM 35
32. #define Y8_GPIO_NUM 34
33. #define Y7_GPIO_NUM 39
34. #define Y6_GPIO_NUM 36
35. #define Y5_GPIO_NUM 21
36. #define Y4_GPIO_NUM 19
37. #define Y3_GPIO_NUM 18
38. #define Y2_GPIO_NUM 5
39. #define VSYNC_GPIO_NUM 25
40. #define HREF_GPIO_NUM 23
41. #define PCLK_GPIO_NUM 22
43. WiFiServer server(80);
44. //ANN:2
45. void ExecuteCommand() {
46. if (cmd!="colorDetect") { //Omit printout
47. //Serial.println("cmd= "+cmd+" ,P1= "+P1+" ,P2= "+P2+" ,P3= "+P3+" ,P4= "+P4+" ,P5= "+P5+" ,P6= "+P6+" ,P7= "+P7+" ,P8= "+P8+" ,P9= "+P9);
48. //Serial.println("");
49. }
51. if (cmd=="resetwifi") {
52. WiFi.begin(P1.c_str(), P2.c_str());
53. Serial.print("Connecting to ");
54. Serial.println(P1);
55. long int StartTime=millis();
56. while (WiFi.status() != WL_CONNECTED)
57. {
58. delay(500);
59. if ((StartTime+5000) < millis()) break;
60. }
61. Serial.println("");
62. Serial.println("STAIP: "+WiFi.localIP().toString());
63. Feedback="STAIP: "+WiFi.localIP().toString();
64. }
65. else if (cmd=="restart") {
66. ESP.restart();
67. }
68. else if (cmd=="cm"){
69. int XcmVal = P1.toInt();
70. int YcmVal = P2.toInt();
71. Serial.println("cmd= "+cmd+" ,VALXCM= "+XcmVal);
72. Serial.println("cmd= "+cmd+" ,VALYCM= "+YcmVal);
73. }
74. else if (cmd=="quality") {
75. sensor_t * s = esp_camera_sensor_get();
76. int val = P1.toInt();
77. s->set_quality(s, val);
78. }
79. else if (cmd=="contrast") {
80. sensor_t * s = esp_camera_sensor_get();
81. int val = P1.toInt();
82. s->set_contrast(s, val);
83. }
84. else if (cmd=="brightness") {
85. sensor_t * s = esp_camera_sensor_get();
86. int val = P1.toInt();
87. s->set_brightness(s, val);
88. }
89. else {
90. Feedback="Command is not defined.";
91. }
92. if (Feedback=="") {
93. Feedback=Command;
94. }
95. }
97. void setup() {
98. WRITE_PERI_REG(RTC_CNTL_BROWN_OUT_REG, 0);
100. Serial.begin(115200);
101. Serial.setDebugOutput(true);
102. Serial.println();
104. camera_config_t config;
105. config.ledc_channel = LEDC_CHANNEL_0;
106. config.ledc_timer = LEDC_TIMER_0;
107. config.pin_d0 = Y2_GPIO_NUM;
108. config.pin_d1 = Y3_GPIO_NUM;
109. config.pin_d2 = Y4_GPIO_NUM;
110. config.pin_d3 = Y5_GPIO_NUM;
111. config.pin_d4 = Y6_GPIO_NUM;
112. config.pin_d5 = Y7_GPIO_NUM;
113. config.pin_d6 = Y8_GPIO_NUM;
114. config.pin_d7 = Y9_GPIO_NUM;
115. config.pin_xclk = XCLK_GPIO_NUM;
116. config.pin_pclk = PCLK_GPIO_NUM;
117. config.pin_vsync = VSYNC_GPIO_NUM;
118. config.pin_href = HREF_GPIO_NUM;
119. config.pin_sscb_sda = SIOD_GPIO_NUM;
120. config.pin_sscb_scl = SIOC_GPIO_NUM;
121. config.pin_pwdn = PWDN_GPIO_NUM;
122. config.pin_reset = RESET_GPIO_NUM;
123. config.xclk_freq_hz = 20000000;
124. config.pixel_format = PIXFORMAT_JPEG;
125. //init with high specs to pre-allocate larger buffers
126. if(psramFound()){
127. config.frame_size = FRAMESIZE_UXGA;
128. config.jpeg_quality = 10; //0-63 lower number means higher quality
129. config.fb_count = 2;
130. } else {
131. config.frame_size = FRAMESIZE_SVGA;
132. config.jpeg_quality = 12; //0-63 lower number means higher quality
133. config.fb_count = 1;
134. }
136. // camera init
137. esp_err_t err = esp_camera_init(&config);
138. if (err != ESP_OK) {
139. Serial.printf("Camera init failed with error 0x%x", err);
140. delay(1000);
141. ESP.restart();
142. }
144. //drop down frame size for higher initial frame rate
145. sensor_t * s = esp_camera_sensor_get();
146. s->set_framesize(s, FRAMESIZE_CIF); //UXGA|SXGA|XGA|SVGA|VGA|CIF|QVGA|HQVGA|QQVGA 設定初始化影像解析度
148. WiFi.mode(WIFI_AP_STA);
149. WiFi.begin(ssid, password);
151. delay(1000);
153. long int StartTime=millis();
154. while (WiFi.status() != WL_CONNECTED) {
155. delay(500);
156. if ((StartTime+10000) < millis())
157. break;
158. }
160. if (WiFi.status() == WL_CONNECTED) {
161. Serial.print("ESP IP Address: http://");
162. Serial.println(WiFi.localIP());
163. }
164. server.begin();
165. }
169. void loop() {
170. Feedback="";Command="";cmd="";P1="";P2="";P3="";P4="";P5="";P6="";P7="";P8="";P9="";
171. ReceiveState=0,cmdState=1,strState=1,questionstate=0,equalstate=0,semicolonstate=0;
173. WiFiClient client = server.available();
175. if (client) {
176. String currentLine = "";
178. while (client.connected()) {
179. if (client.available()) {
180. char c = client.read();
182. getCommand(c);
184. if (c == 'n') {
185. if (currentLine.length() == 0) {
187. if (cmd=="colorDetect") {
188. camera_fb_t * fb = NULL;
189. fb = esp_camera_fb_get();
190. if(!fb) {
191. Serial.println("Camera capture failed");
192. delay(1000);
193. ESP.restart();
194. }
195. //ANN:1
196. client.println("HTTP/1.1 200 OK");
197. client.println("Access-Control-Allow-Origin: *");
198. client.println("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
199. client.println("Access-Control-Allow-Methods: GET,POST,PUT,DELETE,OPTIONS");
200. client.println("Content-Type: image/jpeg");
201. client.println("Content-Disposition: form-data; name="imageFile"; filename="picture.jpg"");
202. client.println("Content-Length: " + String(fb->len));
203. client.println("Connection: close");
204. client.println();
206. uint8_t *fbBuf = fb->buf;
207. size_t fbLen = fb->len;
208. for (size_t n=0;n
209. if (n+1024
210. client.write(fbBuf, 1024);
211. fbBuf += 1024;
212. }
213. else if (fbLen%1024>0) {
214. size_t remainder = fbLen%1024;
215. client.write(fbBuf, remainder);
216. }
217. }
218. esp_camera_fb_return(fb);
219. }
220. else {
221. //ANN:1
222. client.println("HTTP/1.1 200 OK");
223. client.println("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
224. client.println("Access-Control-Allow-Methods: GET,POST,PUT,DELETE,OPTIONS");
225. client.println("Content-Type: text/html; charset=utf-8");
226. client.println("Access-Control-Allow-Origin: *");
227. client.println("Connection: close");
228. client.println();
229. String Data="";
230. if (cmd!="")
231. Data = Feedback;
232. else {
233. Data = String((const char *)INDEX_HTML);
234. }
235. int Index;
236. for (Index = 0; Index < Data.length(); Index = Index+1000) {
237. client.print(Data.substring(Index, Index+1000));
238. }
239. client.println();
240. }
242. Feedback="";
243. break;
244. } else {
245. currentLine = "";
246. }
247. }
248. else if (c != 'r') {
249. currentLine += c;
250. }
251. if ((currentLine.indexOf("/?")!=-1)&&(currentLine.indexOf(" HTTP")!=-1)) {
252. if (Command.indexOf("stop")!=-1) {
253. client.println();
254. client.println();
255. client.stop();
256. }
257. currentLine="";