![\"ESP32-CAM](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/12\/ESP32-CAM-Web-Server-with-OpenCVjs-Color-Detection-Tracking.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\"){kind=tracking}
<\/figure><\/div>\n\n\nThis tutorial is by no means an exhaustive treatment of all that OpenCV can offer to ESP32 camera web servers. It is expected that this introduction will inspire additional OpenCV work with the ESP32 cameras.<\/p>\n\n\n\n
This project\/tutorial was created based on Andrew R. Sass<\/a> project and edited by Sara Santos.<\/p>\n\n\n\n The ESP32 can act as a server for a browser client and some models include a camera (for example, ESP32-CAM<\/a>) which allows the client to view still or video pictures in the browser. HTML, JavaScript, and other browser languages can take advantage of the extensive capabilities of ESP32 and its camera.<\/p>\n\n\n\n For those who have little or no experience with the ESP32 camera development boards can start with the following tutorial.<\/p>\n\n\n\n As described in docs.opencv.org<\/a>, \u201cOpenCV.js is a JavaScript binding for a selected subset of OpenCV functions for the web platform<\/em>\u201d. OpenCV.js uses Emscripten, a LLVM-to-JavaScript compiler, to compile OpenCV functions for an API library which continues to grow.<\/p>\n\n\n OpenCV.js runs in a browser which allows rapid trial of OpenCV functions by someone with only a modest background in HTML and JavaScript. Those with a background in Esp32 Camera applications have this background already.<\/p>\n\n\n\n The project we’ll build throughout this tutorial creates a web server that allows color tracking of a moving object. On the web server interface, you play with several configurations to properly select the color you want to track. Then, the browser sends the real time x and y coordinates of the center of mass of the moving object to the ESP32 board.<\/p>\n\n\n Here’s a preview of the web server.<\/p>\n\n\n Before proceeding with this project, make sure you follow the next pre-requisites.<\/p>\n\n\n\n We\u2019ll program the ESP32 board using Arduino IDE. So, you need the Arduino IDE installed as well as the ESP32 add-on:<\/p>\n\n\n\n If you prefer to use VS Code + PlatformIO to program your board, you can follow the next tutorial to learn how to set up VS Code to work with the ESP32 boards.<\/p>\n\n\n\n This project is compatible with any ESP32 camera board that features an OV2640 camera. There are several ESP32 camera models out there. For a comparison of the most popular cameras, you can refer to the next article:<\/p>\n\n\n\n Make sure you know the pin assignment for the camera board you’re using. For the pin assignment of the most popular boards, check this article:<\/p>\n\n\n\n The program consists of two parts:<\/p>\n\n\n\n The program is split into two files: the OCV_ColorTrack_P.ino<\/span> file containing the server program and the index_OCV_ColorTrack.h<\/span> header file containing the client program (HTML, CSS and JavaScript with OpenCV.js).<\/p>\n\n\n\n Create a new Arduino sketch called OCV_ColorTrack_P<\/span> and copy the following code.<\/p>\n\n\n View raw code<\/a><\/p>\n\n\n\n Save that file.<\/p>\n\n\n\n Then, open a new tab in the Arduino IDE as shown in the following image.<\/p>\n\n\n Name it index_OCV_ColorTrack.h<\/span>.<\/p>\n\n\n Copy the following into that file. <\/p>\n\n\n View raw code<\/a><\/p>\n\n\n\n Save the file.<\/p>\n\n\n\n For the program to work properly, you need to insert your network credentials in the following variables in the OCV_ColorTrack_P.ino<\/span> file:<\/p>\n\n\n\n By default, the code uses the pin assignment for the ESP32-CAM AI-Thinker module.<\/p>\n\n\n\n If you’re using a different camera board, don’t forget to insert the right pin assignment, you can go to the following article to find the pinout for your board:<\/p>\n\n\n\n Continue reading to learn how the code works, or skip to the next section.<\/p>\n\n\n\n In order to facilitate reading and understanding the program, ANNOTATIONS<\/em><\/strong> have been added as comments in the program.<\/p>\n\n\n\n For example, wiring for ESP32-CAM is listed below the ANN<\/em>:0<\/strong> annotation, located in the .ino<\/span> file. ANN<\/em>:0<\/strong> is found with the Edit\/Find command of the Arduino IDE.<\/p>\n\n\n\n The server program, OCV_ColorTrack.ino<\/span>, is taken from ESP32-CAM Projects<\/a>, Module 5 by Rui Santos and Sara Santos. It has a standard ESP32 Camera setup()<\/span> which configures the Camera and server IP address and password.<\/p>\n\n\n\n However, what is not standard, in this server program are instructions of vital importance, which allow Access-Control. See code at ANN<\/em>:1<\/strong>. <\/p>\n\n\n\n This instructs the browser to allow the Camera image and OpenCV.js, which have different origins to work together in the program. Without these instructions, the Chrome browser throws errors.<\/p>\n\n\n\n The server loop()<\/span> monitors client messages and decodes them via an ExecuteCommand()<\/span> found at ANN<\/em><\/strong>:2<\/strong>. <\/p>\n\n\n\n The original program uses this function to receive and execute sliders in the client which controls image characteristics and which are transmitted by the client via a \u201cfetch\u201d instruction. <\/p>\n\n\n\n In our current program, this feature, to be described, is used to communicate the \u201ccenter-of-mass\u201d of a color target detected by the client to the ESP32 server; a feature vital to a robotics application.<\/p>\n\n\n\n Other than the change of extracting the x and y center-of-mass and printing it, there are no other changes to the server program. <\/p>\n\n\n\n Other that the image-characteristics-sliders-routines and their data transmission to the server via \u201cfetch\u201d and the error routine in the original client program eBook refenced above, the client program here is new and contains code devoted to the application of OpenCV.js to the ESP32 Camera image transmitted to the browser (as mentioned previously, a \u201cfetch\u201d is used to transmit color target data to the server).<\/p>\n\n\n\nIntroduction<\/h2>\n\n\n\n
\n
OpenCV.js<\/h3>\n\n\n\n
![\"OpenCV.js\"](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/12\/OpenCV-logo.png?resize=500%2C616&quality=100&strip=all&ssl=1\"){kind=logo}
<\/figure><\/div>\n\n\nProject Overview<\/h2>\n\n\n\n
![\"ESP32-CAm](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/12\/ESP32-CAM-Color-Tracking-Project-Overview.jpg?resize=1200%2C691&quality=100&strip=all&ssl=1\"){kind=tracking}
<\/figure><\/div>\n\n\n![\"ESP32-CAM](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/12\/ESP32-CAM-Color-Tracking-Web-Server-Preview.jpg?resize=1117%2C1012&quality=100&strip=all&ssl=1\"){kind=tracking}
<\/figure><\/div>\n\n\nPrerequisites<\/h2>\n\n\n\n
Arduino IDE<\/h3>\n\n\n\n
\n
VS Code (optional)<\/h3>\n\n\n\n
\n
Getting an ESP32 Camera<\/h3>\n\n\n\n
\n
\n
Code – ESP32-CAM with OpenCV.js<\/h2>\n\n\n\n
\n
\/*********\n The include file, index_OCV_ColorTrack.h, the Client, is an intoduction of OpenCV.js to the ESP32 Camera environment. The Client was\n developed and written by Andrew R. Sass. Permission to reproduce the index_OCV_ColorTrack.h file is granted free of charge if this\n entire copyright notice is included in all copies of the index_OCV_ColorTrack.h file.\n \n Complete instructions at https:\/\/RandomNerdTutorials.com\/esp32-cam-opencv-js-color-detection-tracking\/\n \n Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.\n The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n*********\/\n\n#include <WiFi.h>\n#include <WiFiClientSecure.h>\n#include "esp_camera.h"\n#include "soc\/soc.h"\n#include "soc\/rtc_cntl_reg.h"\n#include "index_OCV_ColorTrack.h"\n\n\/\/ Replace with your network credentials\nconst char* ssid = "REPLACE_WITH_YOUR_SSID";\nconst char* password = "REPLACE_WITH_YOUR_PASSWORD";\n \nString Feedback="";\nString Command="",cmd="",P1="",P2="",P3="",P4="",P5="",P6="",P7="",P8="",P9="";\nbyte ReceiveState=0,cmdState=1,strState=1,questionstate=0,equalstate=0,semicolonstate=0;\n\/\/ANN:0\n\/\/ AI-Thinker \n#define PWDN_GPIO_NUM 32\n#define RESET_GPIO_NUM -1\n#define XCLK_GPIO_NUM 0\n#define SIOD_GPIO_NUM 26\n#define SIOC_GPIO_NUM 27\n#define Y9_GPIO_NUM 35\n#define Y8_GPIO_NUM 34\n#define Y7_GPIO_NUM 39\n#define Y6_GPIO_NUM 36\n#define Y5_GPIO_NUM 21\n#define Y4_GPIO_NUM 19\n#define Y3_GPIO_NUM 18\n#define Y2_GPIO_NUM 5\n#define VSYNC_GPIO_NUM 25\n#define HREF_GPIO_NUM 23\n#define PCLK_GPIO_NUM 22\n\nWiFiServer server(80);\n\/\/ANN:2\nvoid ExecuteCommand() {\n if (cmd!="colorDetect") { \/\/Omit printout\n \/\/Serial.println("cmd= "+cmd+" ,P1= "+P1+" ,P2= "+P2+" ,P3= "+P3+" ,P4= "+P4+" ,P5= "+P5+" ,P6= "+P6+" ,P7= "+P7+" ,P8= "+P8+" ,P9= "+P9);\n \/\/Serial.println("");\n }\n \n if (cmd=="resetwifi") {\n WiFi.begin(P1.c_str(), P2.c_str());\n Serial.print("Connecting to ");\n Serial.println(P1);\n long int StartTime=millis();\n while (WiFi.status() != WL_CONNECTED) \n {\n delay(500);\n if ((StartTime+5000) < millis()) break;\n } \n Serial.println("");\n Serial.println("STAIP: "+WiFi.localIP().toString());\n Feedback="STAIP: "+WiFi.localIP().toString();\n } \n else if (cmd=="restart") {\n ESP.restart();\n }\n else if (cmd=="cm"){\n int XcmVal = P1.toInt();\n int YcmVal = P2.toInt();\n Serial.println("cmd= "+cmd+" ,VALXCM= "+XcmVal);\n Serial.println("cmd= "+cmd+" ,VALYCM= "+YcmVal); \n }\n else if (cmd=="quality") { \n sensor_t * s = esp_camera_sensor_get();\n int val = P1.toInt(); \n s->set_quality(s, val);\n }\n else if (cmd=="contrast") {\n sensor_t * s = esp_camera_sensor_get();\n int val = P1.toInt(); \n s->set_contrast(s, val);\n }\n else if (cmd=="brightness") {\n sensor_t * s = esp_camera_sensor_get();\n int val = P1.toInt(); \n s->set_brightness(s, val); \n } \n else {\n Feedback="Command is not defined.";\n }\n if (Feedback=="") {\n Feedback=Command;\n }\n}\n\nvoid setup() {\n WRITE_PERI_REG(RTC_CNTL_BROWN_OUT_REG, 0);\n \n Serial.begin(115200);\n Serial.setDebugOutput(true);\n Serial.println();\n\n camera_config_t config;\n config.ledc_channel = LEDC_CHANNEL_0;\n config.ledc_timer = LEDC_TIMER_0;\n config.pin_d0 = Y2_GPIO_NUM;\n config.pin_d1 = Y3_GPIO_NUM;\n config.pin_d2 = Y4_GPIO_NUM;\n config.pin_d3 = Y5_GPIO_NUM;\n config.pin_d4 = Y6_GPIO_NUM;\n config.pin_d5 = Y7_GPIO_NUM;\n config.pin_d6 = Y8_GPIO_NUM;\n config.pin_d7 = Y9_GPIO_NUM;\n config.pin_xclk = XCLK_GPIO_NUM;\n config.pin_pclk = PCLK_GPIO_NUM;\n config.pin_vsync = VSYNC_GPIO_NUM;\n config.pin_href = HREF_GPIO_NUM;\n config.pin_sccb_sda = SIOD_GPIO_NUM;\n config.pin_sccb_scl = SIOC_GPIO_NUM;\n config.pin_pwdn = PWDN_GPIO_NUM;\n config.pin_reset = RESET_GPIO_NUM;\n config.xclk_freq_hz = 20000000;\n config.pixel_format = PIXFORMAT_JPEG;\n \/\/init with high specs to pre-allocate larger buffers\n if(psramFound()){\n config.frame_size = FRAMESIZE_UXGA;\n config.jpeg_quality = 10; \/\/0-63 lower number means higher quality\n config.fb_count = 2;\n } else {\n config.frame_size = FRAMESIZE_SVGA;\n config.jpeg_quality = 12; \/\/0-63 lower number means higher quality\n config.fb_count = 1;\n }\n \n \/\/ camera init\n esp_err_t err = esp_camera_init(&config);\n if (err != ESP_OK) {\n Serial.printf("Camera init failed with error 0x%x", err);\n delay(1000);\n ESP.restart();\n }\n\n \/\/drop down frame size for higher initial frame rate\n sensor_t * s = esp_camera_sensor_get();\n s->set_framesize(s, FRAMESIZE_CIF); \/\/UXGA|SXGA|XGA|SVGA|VGA|CIF|QVGA|HQVGA|QQVGA \u8a2d\u5b9a\u521d\u59cb\u5316\u5f71\u50cf\u89e3\u6790\u5ea6\n \n WiFi.mode(WIFI_AP_STA);\n WiFi.begin(ssid, password); \n\n delay(1000);\n\n long int StartTime=millis();\n while (WiFi.status() != WL_CONNECTED) {\n delay(500);\n if ((StartTime+10000) < millis()) \n break; \n } \n\n if (WiFi.status() == WL_CONNECTED) { \n Serial.print("ESP IP Address: http:\/\/");\n Serial.println(WiFi.localIP()); \n }\n server.begin(); \n}\n\n\n\nvoid loop() {\n Feedback="";Command="";cmd="";P1="";P2="";P3="";P4="";P5="";P6="";P7="";P8="";P9="";\n ReceiveState=0,cmdState=1,strState=1,questionstate=0,equalstate=0,semicolonstate=0;\n \n WiFiClient client = server.available();\n\n if (client) { \n String currentLine = "";\n\n while (client.connected()) {\n if (client.available()) {\n char c = client.read(); \n \n getCommand(c);\n \n if (c == '\\n') {\n if (currentLine.length() == 0) { \n \n if (cmd=="colorDetect") {\n camera_fb_t * fb = NULL;\n fb = esp_camera_fb_get(); \n if(!fb) {\n Serial.println("Camera capture failed");\n delay(1000);\n ESP.restart();\n }\n \/\/ANN:1\n client.println("HTTP\/1.1 200 OK");\n client.println("Access-Control-Allow-Origin: *"); \n client.println("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");\n client.println("Access-Control-Allow-Methods: GET,POST,PUT,DELETE,OPTIONS");\n client.println("Content-Type: image\/jpeg");\n client.println("Content-Disposition: form-data; name=\\"imageFile\\"; filename=\\"picture.jpg\\""); \n client.println("Content-Length: " + String(fb->len)); \n client.println("Connection: close");\n client.println();\n \n uint8_t *fbBuf = fb->buf;\n size_t fbLen = fb->len;\n for (size_t n=0;n<fbLen;n=n+1024) {\n if (n+1024<fbLen) {\n client.write(fbBuf, 1024);\n fbBuf += 1024;\n }\n else if (fbLen%1024>0) {\n size_t remainder = fbLen%1024;\n client.write(fbBuf, remainder);\n }\n } \n esp_camera_fb_return(fb); \n }\n else {\n \/\/ANN:1\n client.println("HTTP\/1.1 200 OK");\n client.println("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");\n client.println("Access-Control-Allow-Methods: GET,POST,PUT,DELETE,OPTIONS");\n client.println("Content-Type: text\/html; charset=utf-8");\n client.println("Access-Control-Allow-Origin: *");\n client.println("Connection: close");\n client.println(); \n String Data="";\n if (cmd!="")\n Data = Feedback;\n else {\n Data = String((const char *)INDEX_HTML);\n }\n int Index;\n for (Index = 0; Index < Data.length(); Index = Index+1000) {\n client.print(Data.substring(Index, Index+1000));\n } \n client.println();\n }\n \n Feedback="";\n break;\n } else {\n currentLine = "";\n }\n } \n else if (c != '\\r') {\n currentLine += c;\n }\n if ((currentLine.indexOf("\/?")!=-1)&&(currentLine.indexOf(" HTTP")!=-1)) {\n if (Command.indexOf("stop")!=-1) { \n client.println();\n client.println();\n client.stop();\n }\n currentLine="";\n Feedback="";\n ExecuteCommand();\n }\n }\n }\n delay(1);\n client.stop();\n }\n}\n\nvoid getCommand(char c){\n if (c=='?') ReceiveState=1;\n if ((c==' ')||(c=='\\r')||(c=='\\n')) ReceiveState=0;\n \n if (ReceiveState==1) {\n Command=Command+String(c); \n if (c=='=') cmdState=0;\n if (c==';') strState++;\n if ((cmdState==1)&&((c!='?')||(questionstate==1))) cmd=cmd+String(c);\n if ((cmdState==0)&&(strState==1)&&((c!='=')||(equalstate==1))) P1=P1+String(c);\n if ((cmdState==0)&&(strState==2)&&(c!=';')) P2=P2+String(c);\n if ((cmdState==0)&&(strState==3)&&(c!=';')) P3=P3+String(c);\n if ((cmdState==0)&&(strState==4)&&(c!=';')) P4=P4+String(c);\n if ((cmdState==0)&&(strState==5)&&(c!=';')) P5=P5+String(c);\n if ((cmdState==0)&&(strState==6)&&(c!=';')) P6=P6+String(c);\n if ((cmdState==0)&&(strState==7)&&(c!=';')) P7=P7+String(c);\n if ((cmdState==0)&&(strState==8)&&(c!=';')) P8=P8+String(c);\n if ((cmdState==0)&&(strState>=9)&&((c!=';')||(semicolonstate==1))) P9=P9+String(c); \n if (c=='?') questionstate=1;\n if (c=='=') equalstate=1;\n if ((strState>=9)&&(c==';')) semicolonstate=1;\n }\n}\n<\/code><\/pre>\n\tindex_OCV_ColorTrack.h<\/h3>\n\n\n\n
![\"Arduino](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/12\/Arduino-IDE-Create-New-Tab.png?resize=904%2C299&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Arduino](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/12\/Arduino-IDE-name-new-file-tab.png?resize=705%2C171&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\/****************************\n This include file, index_OCV_ColorTrack.h, the Client, is an intoduction of OpenCV.js to the ESP32 Camera environment. The Client was\n developed and written by Andrew R. Sass. Permission to reproduce the index_OCV_ColorTrack.h file is granted free of charge if this\n entire copyright notice is included in all copies of the index_OCV_ColorTrack.h file. \n \n Complete instructions at https:\/\/RandomNerdTutorials.com\/esp32-cam-opencv-js-color-detection-tracking\/\n*******************************\/\nstatic const char PROGMEM INDEX_HTML[] = R"rawliteral(\n<!DOCTYPE html>\n<html>\n<head>\n <title>ESP32-CAMERA COLOR DETECTION<\/title>\n <meta charset="utf-8">\n <meta name="viewport" content="width=device-width,initial-scale=1">\n <!----ANN:3--->\n <script async src=" https:\/\/docs.opencv.org\/master\/opencv.js" type="text\/javascript"><\/script>\n<\/head>\n<style>\nhtml {\n font-family: Arial, Helvetica, sans-serif;\n }\nbody { \n background-color: #F7F7F2;\n margin: 0px;\n}\nh1 {\n font-size: 1.6rem;\n color:white;\n text-align: center;\n}\n.topnav {\n overflow: hidden;\n background-color: #0A1128;\n}\n.main-controls{\n padding-top: 5px;\n}\nh2 {\n color: #0A1128;\n font-size: 1rem;\n} \n.section {\n margin: 2px;\n padding: 10px;\n}\n.column{\n float: left;\n width: 50%\n}\ntable {\n margin: 0;\n width: 90%;\n border-collapse: collapse;\n}\nth{\n text-align: center;\n}\n.row{\n margin-right:50px;\n margin-left:50px;\n}\n\n#colorDetect{ \n border: none;\n color: #FEFCFB;\n background-color: #0A1128;\n padding: 15px;\n text-align: center;\n display: inline-block;\n font-size: 16px;\n border-radius: 4px;\n}\n#restart{\n border: none;\n color: #FEFCFB;\n background-color: #7B0828;\n padding: 15px;\n text-align: center;\n display: inline-block;\n font-size: 16px;\n border-radius: 4px; \n}\nbutton{\n border: none;\n color: #FEFCFB;\n background-color: #0A1128;\n padding: 10px;\n text-align: center;\n display: inline-block;\n border-radius: 4px; \n}\n\n<\/style>\n<body>\n <div class="topnav">\n <h1>ESP32-CAM Color Detection and Tracking<\/h1>\n <\/div>\n <div class="main-controls">\n <table>\n <tr>\n <td><center><input type="button" id="colorDetect" value="COLOR DETECTION"><\/center><\/td> \n <td><center><input type="button" id="restart" value="RESET BOARD"><\/center><\/td> \n <\/tr> \n <\/table>\n <\/div>\n<div class="container">\n <div class = "row"> \n <div class = "column"> \n <div class="section">\n <div class ="video-container">\n <h2>Video Streaming<\/h2> \n <center><img id="ShowImage" src="" style="display:none"><\/center>\n <center><canvas id="canvas" style="display:none"><\/canvas><\/center>\n <\/div>\n <\/div>\n <div class="section">\n <table>\n <tr>\n <td>Quality<\/td>\n <td><input type="range" id="quality" min="10" max="63" value="10"><\/td>\n <\/tr>\n <tr>\n <td>Brightness<\/td>\n <td><input type="range" id="brightness" min="-2" max="2" value="0"><\/td>\n <\/tr>\n <tr>\n <td>Contrast<\/td>\n <td><input type="range" id="contrast" min="-2" max="2" value="0"><\/td>\n <\/tr>\n <\/table>\n <\/div>\n \n <!-----ANN:5---->\n <div class="section">\n <h2>RGB Color Trackbars<\/h2>\n <table>\n <tr>\n <td>R min:   <span id="RMINdemo"><\/span><\/td>\n <td><input type="range" id="rmin" min="0" max="255" value="0" class = "slider"><\/td>\n <td>R max:   <span id="RMAXdemo"><\/span><\/td>\n <td><input type="range" id="rmax" min="0" max="255" value="50" class = "slider"><\/td>\n <\/tr>\n <tr>\n <td>G min:   <span id="GMINdemo"><\/span><\/td>\n <td><input type="range" id="gmin" min="0" max="255" value="0" class = "slider"><\/td>\n <td>G max:   <span id="GMAXdemo"><\/span><\/td>\n <td><input type="range" id="gmax" min="0" max="255" value="50" class = "slider"><\/td>\n <\/tr>\n <tr>\n <td>B min:   <span id ="BMINdemo"><\/span><\/td>\n <td><input type="range" id="bmin" min="0" max="255" value="0" class = "slider"> <\/td>\n <td>B max:   <span id="BMAXdemo"><\/span><\/td>\n <td> <input type="range" id="bmax" min="0" max="255" value="50" class = "slider"> <\/td>\n <\/tr>\n <\/table>\n <\/div>\n\n <div class="section">\n <h2>Threshold Minimum-Binary Image<\/h2>\n <table>\n <tr>\n <td>Minimum Threshold:   <span id="THRESH_MINdemo"><\/span><\/td>\n <td><input type="range" id="thresh_min" min="0" max="255" value="120" class = "slider"> <\/td>\n <\/tr>\n <\/table>\n <\/div>\n <!----ANN:9---> \n <div class="section">\n <h2>Color Probe<\/h2>\n <table>\n <tr>\n <td>X probe:   <span id="X_PROBEdemo"><\/span><\/td>\n <td><input type="range" id="x_probe" min="0" max="400" value="200" class = "slider"><\/td>\n <td>Y probe:   <span id="Y_PROBEdemo"><\/span><\/td>\n <td> <input type="range" id="y_probe" min="0" max="296" value="148" class = "slider"><\/td>\n <\/tr>\n <\/table>\n <\/div>\n \n <\/div> <!------endfirstcolumn----------------> \n \n <div class = "column"> \n <div class="section">\n <h2>Image Mask<\/h2>\n <canvas id="imageMask"><\/canvas>\n <\/div>\n <div class="section">\n <h2>Image Canvas<\/h2>\n <canvas id="imageCanvas"><\/canvas>\n <\/div>\n <div class="section">\n <table>\n <tr>\n <td><button type="button" id="invertButton" class="btn btn-primary">INVERT<\/button><\/td>\n <td><button type="button" id="contourButton" class="btn btn-primary">SHOW CONTOUR<\/button><\/td>\n <td><button type="button" id="trackButton" class="btn btn-primary">TRACKING<\/button><\/td>\n <\/tr>\n <tr>\n <td>Invert: <span id="INVERTdemo"><\/span><\/td>\n <td>Contour: <span id="CONTOURdemo"><\/span><\/td>\n <td>Track: <span id="TRACKdemo"><\/span>\n <\/td>\n <\/tr>\n <\/table>\n <\/div>\n <div class="section">\n <table>\n <tr>\n <td><strong>XCM:<\/strong> <span id="XCMdemo"><\/span><\/td>\n <td><strong>YCM:<\/strong> <span id="YCMdemo"><\/span><\/td>\n <\/tr>\n <\/table>\n <\/div>\n \n <div class="section">\n <canvas id="textCanvas" width="480" height="180" style= "border: 1px solid #black;"><\/canvas>\n <iframe id="ifr" style="display:none"><\/iframe>\n <div id="message"><\/div> \n <\/div> \n <\/div> <!------end2ndcolumn------------------------>\n <\/div> <!-----endrow----------------------> \n<\/div> <!------endcontainer-------------->\n <!--------------- <\/body>----------------->\n <!----------------<\/html>----------------->\n<div class="modal"><\/div>\n<script>\nvar colorDetect = document.getElementById('colorDetect');\nvar ShowImage = document.getElementById('ShowImage');\nvar canvas = document.getElementById("canvas");\nvar context = canvas.getContext("2d");\nvar imageMask = document.getElementById("imageMask");\nvar imageMaskContext = imageMask.getContext("2d"); \nvar imageCanvas = document.getElementById("imageCanvas");\nvar imageContext = imageCanvas.getContext("2d"); \nvar txtcanvas = document.getElementById("textCanvas");\nvar ctx = txtcanvas.getContext("2d"); \nvar message = document.getElementById('message');\nvar ifr = document.getElementById('ifr');\nvar myTimer;\nvar restartCount=0;\nconst modelPath = 'https:\/\/ruisantosdotme.github.io\/face-api.js\/weights\/';\nlet currentStream;\nlet displaySize = { width:400, height: 296 }\nlet faceDetection;\n\nlet b_tracker = false;\nlet x_cm = 0;\nlet y_cm = 0;\n\nlet b_invert = false;\n\nlet b_contour = false;\n\nvar RMAX=50;\nvar RMIN=0;\nvar GMAX=50;\nvar GMIN=0;\nvar BMAX=50;\nvar BMIN=0;\nvar THRESH_MIN=120;\nvar X_PROBE=200;\nvar Y_PROBE=196;\nvar R=0;\nvar G=0;\nvar B=0;\nvar A=0;\n\n\ncolorDetect.onclick = function (event) {\n clearInterval(myTimer); \n myTimer = setInterval(function(){error_handle();},5000);\n ShowImage.src=location.origin+'\/?colorDetect='+Math.random();\n}\n\n\/\/ANN:READY\nvar Module = {\n onRuntimeInitialized(){onOpenCvReady();}\n}\n\nfunction onOpenCvReady(){\n \/\/alert("onOpenCvReady");\n console.log("OpenCV IS READY!!!");\n drawReadyText(); \n document.body.classList.remove("loading");\n}\n\n \nfunction error_handle() {\n restartCount++;\n clearInterval(myTimer);\n if (restartCount<=2) {\n message.innerHTML = "Get still error. <br>Restart ESP32-CAM "+restartCount+" times.";\n myTimer = setInterval(function(){colorDetect.click();},10000);\n ifr.src = document.location.origin+'?restart';\n }\n else\n message.innerHTML = "Get still error. <br>Please close the page and check ESP32-CAM.";\n} \ncolorDetect.style.display = "block";\nShowImage.onload = function (event) {\n \/\/alert("SHOW IMAGE");\n console.log("SHOW iMAGE");\n clearInterval(myTimer);\n restartCount=0; \n canvas.setAttribute("width", ShowImage.width);\n canvas.setAttribute("height", ShowImage.height);\n canvas.style.display = "block";\n imageCanvas.setAttribute("width", ShowImage.width);\n imageCanvas.setAttribute("height", ShowImage.height);\n imageCanvas.style.display = "block";\n\n imageMask.setAttribute("width", ShowImage.width);\n imageMask.setAttribute("height", ShowImage.height);\n imageMask.style.display = "block"; \n \n context.drawImage(ShowImage,0,0,ShowImage.width,ShowImage.height);\n \n DetectImage(); \n}\nrestart.onclick = function (event) {\n fetch(location.origin+'\/?restart=stop');\n}\nquality.onclick = function (event) {\n fetch(document.location.origin+'\/?quality='+this.value+';stop');\n} \nbrightness.onclick = function (event) {\n fetch(document.location.origin+'\/?brightness='+this.value+';stop');\n} \ncontrast.onclick = function (event) {\n fetch(document.location.origin+'\/?contrast='+this.value+';stop');\n} \nasync function DetectImage() {\n \/\/alert("DETECT IMAGE");\n console.log("DETECT IMAGE");\n\n \/***************opencv********************************\/\n \/\/ANN:4\n let src = cv.imread(ShowImage);\n arows = src.rows;\n acols = src.cols;\n aarea = arows*acols;\n adepth = src.depth();\n atype = src.type();\n achannels = src.channels();\n console.log("rows = " + arows);\n console.log("cols = " + acols);\n console.log("pic area = " + aarea);\n console.log("depth = " + adepth); \n console.log("type = " + atype); \n console.log("channels = " + achannels);\n \n \/******************COLOR DETECT******************************\/\n\n \/\/ANN:6\n var RMAXslider = document.getElementById("rmax");\n var RMAXoutput = document.getElementById("RMAXdemo");\n RMAXoutput.innerHTML = RMAXslider.value;\n RMAXslider.oninput = function(){\n RMAXoutput.innerHTML = this.value;\n RMAX = parseInt(RMAXoutput.innerHTML,10);\n console.log("RMAX=" + RMAX);\n }\n\n console.log("RMAX=" + RMAX);\n\n var RMINslider = document.getElementById("rmin");\n var RMINoutput = document.getElementById("RMINdemo");\n RMINoutput.innerHTML = RMINslider.value;\n RMINslider.oninput = function(){\n RMINoutput.innerHTML = this.value;\n RMIN = parseInt(RMINoutput.innerHTML,10);\n console.log("RMIN=" + RMIN);\n }\n console.log("RMIN=" + RMIN);\n\n var GMAXslider = document.getElementById("gmax");\n var GMAXoutput = document.getElementById("GMAXdemo");\n GMAXoutput.innerHTML = GMAXslider.value;\n GMAXslider.oninput = function(){\n GMAXoutput.innerHTML = this.value;\n GMAX = parseInt(GMAXoutput.innerHTML,10);\n }\n console.log("GMAX=" + GMAX);\n\n var GMINslider = document.getElementById("gmin");\n var GMINoutput = document.getElementById("GMINdemo");\n GMINoutput.innerHTML = GMINslider.value;\n GMINslider.oninput = function(){\n GMINoutput.innerHTML = this.value;\n GMIN = parseInt(GMINoutput.innerHTML,10);\n }\n console.log("GMIN=" + GMIN);\n\n var BMAXslider = document.getElementById("bmax");\n var BMAXoutput = document.getElementById("BMAXdemo");\n BMAXoutput.innerHTML = BMAXslider.value;\n BMAXslider.oninput = function(){\n BMAXoutput.innerHTML = this.value;\n BMAX = parseInt(BMAXoutput.innerHTML,10);\n }\n console.log("BMAX=" + BMAX);\n\n var BMINslider = document.getElementById("bmin");\n var BMINoutput = document.getElementById("BMINdemo");\n BMINoutput.innerHTML = BMINslider.value;\n BMINslider.oninput = function(){\n BMINoutput.innerHTML = this.value;\n BMIN = parseInt(BMINoutput.innerHTML,10);\n }\n console.log("BMIN=" + BMIN);\n\n\n\n var THRESH_MINslider = document.getElementById("thresh_min");\n var THRESH_MINoutput = document.getElementById("THRESH_MINdemo");\n THRESH_MINoutput.innerHTML = THRESH_MINslider.value;\n THRESH_MINslider.oninput = function(){\n THRESH_MINoutput.innerHTML = this.value;\n THRESH_MIN = parseInt(THRESH_MINoutput.innerHTML,10);\n }\n console.log("THRESHOLD MIN=" + THRESH_MIN);\n\n \/\/ANN:9A\n var X_PROBEslider = document.getElementById("x_probe");\n var X_PROBEoutput = document.getElementById("X_PROBEdemo");\n X_PROBEoutput.innerHTML = X_PROBEslider.value;\n X_PROBEslider.oninput = function(){\n X_PROBEoutput.innerHTML = this.value;\n X_PROBE = parseInt(X_PROBEoutput.innerHTML,10);\n }\n console.log("X_PROBE=" + X_PROBE); \n\n var Y_PROBEslider = document.getElementById("y_probe");\n var Y_PROBEoutput = document.getElementById("Y_PROBEdemo");\n Y_PROBEoutput.innerHTML = Y_PROBEslider.value;\n Y_PROBEslider.oninput = function(){\n Y_PROBEoutput.innerHTML = this.value;\n Y_PROBE = parseInt(Y_PROBEoutput.innerHTML,10);\n }\n console.log("Y_PROBE=" + Y_PROBE); \n\n\n document.getElementById('trackButton').onclick = function(){\n b_tracker = (true && !b_tracker) \n console.log("TRACKER = " + b_tracker );\n var TRACKoutput = document.getElementById("TRACKdemo");\n TRACKoutput.innerHTML = b_tracker;\n \/\/var XCMoutput = document.getElementById("XCMdemo");\n \/\/XCMoutput.innerHTML = x_cm;\n \n } \n\n document.getElementById('invertButton').onclick = function(){\n b_invert = (true && !b_invert) \n console.log("TRACKER = " + b_invert );\n var INVERToutput = document.getElementById("INVERTdemo");\n INVERToutput.innerHTML = b_invert;\n } \n\/**\/\n document.getElementById('contourButton').onclick = function(){\n b_contour = (true && !b_contour) \n console.log("TRACKER = " + b_contour );\n var CONTOURoutput = document.getElementById("CONTOURdemo");\n CONTOURoutput.innerHTML = b_contour;\n } \n\/**\/ \n\n let tracker = 0;\n \n var TRACKoutput = document.getElementById("TRACKdemo");\n TRACKoutput.innerHTML = b_tracker;\n var XCMoutput = document.getElementById("XCMdemo");\n var YCMoutput = document.getElementById("YCMdemo");\n\n XCMoutput.innerHTML = 0;\n YCMoutput.innerHTML = 0; \n\n var INVERToutput = document.getElementById("INVERTdemo");\n INVERToutput.innerHTML = b_invert; \n\n var CONTOURoutput = document.getElementById("CONTOURdemo");\n CONTOURoutput.innerHTML = b_contour; \n\n \/\/ANN:8\n let M00Array = [0,];\n let orig = new cv.Mat();\n let mask = new cv.Mat();\n let mask1 = new cv.Mat();\n let mask2 = new cv.Mat();\n let contours = new cv.MatVector();\n let hierarchy = new cv.Mat();\n let rgbaPlanes = new cv.MatVector();\n \n let color = new cv.Scalar(0,0,0);\n\n clear_canvas();\n\n\n \n orig = cv.imread(ShowImage);\n cv.split(orig,rgbaPlanes); \/\/SPLIT\n let BP = rgbaPlanes.get(2); \/\/ SELECTED COLOR PLANE\n let GP = rgbaPlanes.get(1);\n let RP = rgbaPlanes.get(0);\n cv.merge(rgbaPlanes,orig);\n \n \n \/\/ BLK BLU GRN RED\n let row = Y_PROBE \/\/180\/\/275 \/\/225 \/\/150 \/\/130 \n let col = X_PROBE \/\/100\/\/10 \/\/100 \/\/200 \/\/300\n drawColRowText(acols,arows);\n\n\n console.log("ISCONTINUOUS = " + orig.isContinuous());\n\n \/\/ANN:9C\n R = src.data[row * src.cols * src.channels() + col * src.channels()];\n G = src.data[row * src.cols * src.channels() + col * src.channels() + 1];\n B = src.data[row * src.cols * src.channels() + col * src.channels() + 2];\n A = src.data[row * src.cols * src.channels() + col * src.channels() + 3];\n console.log("RDATA = " + R);\n console.log("GDATA = " + G);\n console.log("BDATA = " + B);\n console.log("ADATA = " + A);\n\n drawRGB_PROBE_Text();\n \n \n \n \/\/ANN:9b\n \/\/*************draw probe point*********************\n let point4 = new cv.Point(col,row);\n cv.circle(src,point4,5,[255,255,255,255],2,cv.LINE_AA,0);\n \/\/***********end draw probe point*********************\n\n \/\/ANN:7\n let high = new cv.Mat(src.rows,src.cols,src.type(),[RMAX,GMAX,BMAX,255]);\n let low = new cv.Mat(src.rows,src.cols,src.type(),[RMIN,GMIN,BMIN,0]);\n\n cv.inRange(src,low,high,mask1);\n \/\/inRange(source image, lower limit, higher limit, destination image)\n \n cv.threshold(mask1,mask,THRESH_MIN,255,cv.THRESH_BINARY);\n \/\/threshold(source image,destination image,threshold,255,threshold method);\n\n \/\/ANN:9\n if(b_invert==true){\n cv.bitwise_not(mask,mask2);\n }\n\/********************start contours******************************************\/\n \/\/ANN:10\n if(b_tracker == true){\n try{\n if(b_invert==false){\n \/\/ANN:11 \n cv.findContours(mask,contours,hierarchy,cv.RETR_CCOMP,cv.CHAIN_APPROX_SIMPLE);\n \/\/findContours(source image, array of contours found, hierarchy of contours\n \/\/ if contours are inside other contours, method of contour data retrieval,\n \/\/algorithm method)\n }\n else{\n cv.findContours(mask2,contours,hierarchy,cv.RETR_CCOMP,cv.CHAIN_APPROX_SIMPLE);\n }\n console.log("CONTOUR_SIZE = " + contours.size());\n\n \/\/draw contours\n if(b_contour==true){\n for(let i = 0; i < contours.size(); i++){\n cv.drawContours(src,contours,i,[0,0,0,255],2,cv.LINE_8,hierarchy,100)\n }\n }\n\n \/\/ANN:12\n let cnt;\n let Moments;\n let M00;\n let M10;\n \/\/let x_cm;\n \/\/let y_cm;\n \n \/\/ANN:13\n for(let k = 0; k < contours.size(); k++){\n cnt = contours.get(k); \n Moments = cv.moments(cnt,false);\n M00Array[k] = Moments.m00;\n \/\/ cnt.delete();\n }\n\n \/\/ANN13A\n let max_area_arg = MaxAreaArg(M00Array);\n console.log("MAXAREAARG = "+max_area_arg);\n\n \/\/let TestArray = [0,0,0,15,4,15,2];\n \/\/let TestArray0 = [];\n \/\/let max_test_area_arg = MaxAreaArg(TestArray0);\n \/\/console.log("MAXTESTAREAARG = "+max_test_area_arg);\n\n\n\n let ArgMaxArea = MaxAreaArg(M00Array);\n if(ArgMaxArea >= 0){\n cnt = contours.get(MaxAreaArg(M00Array)); \/\/use the contour with biggest MOO\n \/\/cnt = contours.get(54);\n Moments = cv.moments(cnt,false);\n M00 = Moments.m00;\n M10 = Moments.m10;\n M01 = Moments.m01;\n x_cm = M10\/M00; \/\/ 75 for circle_9.jpg\n y_cm = M01\/M00; \/\/ 41 for circle_9.jpg\n\n XCMoutput.innerHTML = Math.round(x_cm);\n YCMoutput.innerHTML = Math.round(y_cm);\n\n console.log("M00 = "+M00); \n console.log("XCM = "+Math.round(x_cm));\n console.log("YCM = "+Math.round(y_cm)); \n\n \/\/fetch(document.location.origin+'\/?xcm='+Math.round(x_cm)+';stop');\n fetch(document.location.origin+'\/?cm='+Math.round(x_cm)+';'+Math.round(y_cm)+';stop');\n\n console.log("M00ARRAY = " + M00Array);\n\n \/\/ANN:14 \n \n \/\/**************min area bounding rect********************\n \/\/let rotatedRect=cv.minAreaRect(cnt);\n \/\/let vertices = cv.RotatedRect.points(rotatedRect);\n\n \/\/for(let j=0;j<4;j++){\n \/\/ cv.line(src,vertices[j],\n \/\/ vertices[(j+1)%4],[0,0,255,255],2,cv.LINE_AA,0);\n \/\/}\n \/\/***************end min area bounding rect*************************************\n\n\n \/\/***************bounding rect***************************\n let rect = cv.boundingRect(cnt);\n let point1 = new cv.Point(rect.x,rect.y);\n let point2 = new cv.Point(rect.x+rect.width,rect.y+rect.height);\n\n cv.rectangle(src,point1,point2,[0,0,255,255],2,cv.LINE_AA,0);\n \/\/*************end bounding rect***************************\n\n\n \/\/*************draw center point*********************\n let point3 = new cv.Point(x_cm,y_cm);\n cv.circle(src,point3,2,[0,0,255,255],2,cv.LINE_AA,0);\n \/\/***********end draw center point*********************\n\n }\/\/end if(ArgMaxArea >= 0)\n else{\n if(ArgMaxArea==-1){ \n console.log("ZERO ARRAY LENGTH");\n }\n else{ \/\/ArgMaxArea=-2\n console.log("DUPLICATE MAX ARRAY-ELEMENT");\n }\n }\n\n\n\n\n cnt.delete();\n\/******************end contours note cnt line one up*******************************************\/\n drawXCM_YCM_Text();\n\n }\/\/end try\n catch{\n console.log("ERROR TRACKER NO CONTOUR");\n clear_canvas();\n drawErrorTracking_Text();\n }\n \n }\/\/end b_tracking if statement\n else{\n XCMoutput.innerHTML = 0;\n YCMoutput.innerHTML = 0;\n } \n\n if(b_invert==false){\n cv.imshow('imageMask', mask);\n }\n else{\n cv.imshow('imageMask', mask2);\n }\n \/\/cv.imshow('imageMask', R);\n cv.imshow('imageCanvas', src);\n\n \/\/ANN:8A\n src.delete();\n high.delete();\n low.delete();\n orig.delete();\n mask1.delete();\n mask2.delete();\n mask.delete();\n contours.delete();\n hierarchy.delete();\n \/\/cnt.delete();\n RP.delete();\n \n \n\n\n \/********************END COLOR DETECT****************************\/\n \n\/***************end opencv******************************\/\n \n\n setTimeout(function(){colorDetect.click();},500);\n \n}\/\/end detectimage \n\n\nfunction MaxAreaArg(arr){\n if (arr.length == 0) {\n return -1;\n }\n\n var max = arr[0];\n var maxIndex = 0;\n var dupIndexCount = 0; \/\/duplicate max elements?\n\n if(arr[0] >= .90*aarea){\n max = 0;\n }\n\n for (var i = 1; i < arr.length; i++) {\n if (arr[i] > max && arr[i] < .99*aarea) {\n maxIndex = i;\n max = arr[i];\n dupIndexCount = 0;\n }\n else if(arr[i]==max && arr[i]!=0){\n dupIndexCount++;\n }\n }\n\n if(dupIndexCount==0){\n return maxIndex;\n }\n\n else{\n return -2;\n } \n}\/\/end MaxAreaArg \n\n\n\nfunction clear_canvas(){\n ctx.clearRect(0,0,txtcanvas.width,txtcanvas.height);\n ctx.rect(0,0,txtcanvas.width,txtcanvas.height);\n ctx.fillStyle="red";\n ctx.fill();\n}\n\nfunction drawReadyText(){\n ctx.fillStyle = 'black';\n ctx.font = '20px serif';\n ctx.fillText('OpenCV.JS READY',txtcanvas.width\/4,txtcanvas.height\/10);\n} \n\nfunction drawColRowText(x,y){\n ctx.fillStyle = 'black';\n ctx.font = '20px serif';\n ctx.fillText('ImageCols='+x,0,txtcanvas.height\/10);\n ctx.fillText('ImageRows='+y,txtcanvas.width\/2,txtcanvas.height\/10);\n} \n\nfunction drawRGB_PROBE_Text(){\n ctx.fillStyle = 'black';\n ctx.font = '20px serif';\n ctx.fillText('Rp='+R,0,2*txtcanvas.height\/10);\n ctx.fillText('Gp='+G,txtcanvas.width\/4,2*txtcanvas.height\/10);\n ctx.fillText('Bp='+B,txtcanvas.width\/2,2*txtcanvas.height\/10);\n ctx.fillText('Ap='+A,3*txtcanvas.width\/4,2*txtcanvas.height\/10);\n}\n\nfunction drawXCM_YCM_Text(){\n ctx.fillStyle = 'black';\n ctx.font = '20px serif';\n ctx.fillText('XCM='+Math.round(x_cm),0,3*txtcanvas.height\/10); \n ctx.fillText('YCM='+Math.round(y_cm),txtcanvas.width\/4,3*txtcanvas.height\/10); \n}\n\nfunction drawErrorTracking_Text(){\n ctx.fillStyle = 'black';\n ctx.font = '20px serif';\n ctx.fillText('ERROR TRACKING-NO CONTOUR',0,3*txtcanvas.height\/10);\n} \n \n <\/script> \n<\/body>\n<\/html> \n)rawliteral";\n<\/code><\/pre>\n\tNetwork Credentials<\/h3>\n\n\n\n
const char* ssid = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_PASSWORD\";<\/code><\/pre>\n\n\n\nCamera Pin Assignment<\/h3>\n\n\n\n
#define PWDN_GPIO_NUM 32\n#define RESET_GPIO_NUM -1\n#define XCLK_GPIO_NUM 0\n#define SIOD_GPIO_NUM 26\n#define SIOC_GPIO_NUM 27\n#define Y9_GPIO_NUM 35\n#define Y8_GPIO_NUM 34\n#define Y7_GPIO_NUM 39\n#define Y6_GPIO_NUM 36\n#define Y5_GPIO_NUM 21\n#define Y4_GPIO_NUM 19\n#define Y3_GPIO_NUM 18\n#define Y2_GPIO_NUM 5\n#define VSYNC_GPIO_NUM 25\n#define HREF_GPIO_NUM 23\n#define PCLK_GPIO_NUM 22<\/code><\/pre>\n\n\n\n\n
How the Code Works<\/h2>\n\n\n\n
#define PWDN_GPIO_NUM 32\n#define RESET_GPIO_NUM -1\n#define XCLK_GPIO_NUM 0\n#define SIOD_GPIO_NUM 26\n#define SIOC_GPIO_NUM 27\n#define Y9_GPIO_NUM 35\n#define Y8_GPIO_NUM 34\n#define Y7_GPIO_NUM 39\n#define Y6_GPIO_NUM 36\n#define Y5_GPIO_NUM 21\n#define Y4_GPIO_NUM 19\n#define Y3_GPIO_NUM 18\n#define Y2_GPIO_NUM 5\n#define VSYNC_GPIO_NUM 25\n#define HREF_GPIO_NUM 23\n#define PCLK_GPIO_NUM 22<\/code><\/pre>\n\n\n\nServer Sketch<\/h3>\n\n\n\n
Annotation 1 (ANN:1)<\/h4>\n\n\n\n
\/\/ANN:1\nclient.println(\"HTTP\/1.1 200 OK\");\nclient.println(\"Access-Control-Allow-Origin: *\"); \nclient.println(\"Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept\");\nclient.println(\"Access-Control-Allow-Methods: GET,POST,PUT,DELETE,OPTIONS\");\nclient.println(\"Content-Type: image\/jpeg\");\nclient.println(\"Content-Disposition: form-data; name=\\\"imageFile\\\"; filename=\\\"picture.jpg\\\"\"); \nclient.println(\"Content-Length: \" + String(fb->len)); \nclient.println(\"Connection: close\");\nclient.println();<\/code><\/pre>\n\n\n\nAnnotation 2 (ANN:2)<\/h4>\n\n\n\n
\/\/ANN:2\nvoid ExecuteCommand() {\n if (cmd!=\"colorDetect\") { \/\/Omit printout\n \/\/Serial.println(\"cmd= \"+cmd+\" ,P1= \"+P1+\" ,P2= \"+P2+\" ,P3= \"+P3+\" ,P4= \"+P4+\" ,P5= \"+P5+\" ,P6= \"+P6+\" ,P7= \"+P7+\" ,P8= \"+P8+\" ,P9= \"+P9);\n \/\/Serial.println(\"\");\n }\n \n if (cmd==\"resetwifi\") {\n WiFi.begin(P1.c_str(), P2.c_str());\n Serial.print(\"Connecting to \");\n Serial.println(P1);\n long int StartTime=millis();\n while (WiFi.status() != WL_CONNECTED) \n {\n delay(500);\n if ((StartTime+5000) < millis()) break;\n } \n Serial.println(\"\");\n Serial.println(\"STAIP: \"+WiFi.localIP().toString());\n Feedback=\"STAIP: \"+WiFi.localIP().toString();\n } \n else if (cmd==\"restart\") {\n ESP.restart();\n }\n else if (cmd==\"cm\"){\n int XcmVal = P1.toInt();\n int YcmVal = P2.toInt();\n Serial.println(\"cmd= \"+cmd+\" ,VALXCM= \"+XcmVal);\n Serial.println(\"cmd= \"+cmd+\" ,VALYCM= \"+YcmVal); \n }\n else if (cmd==\"quality\") { \n sensor_t * s = esp_camera_sensor_get();\n int val = P1.toInt(); \n s->set_quality(s, val);\n }\n else if (cmd==\"contrast\") {\n sensor_t * s = esp_camera_sensor_get();\n int val = P1.toInt(); \n s->set_contrast(s, val);\n }\n else if (cmd==\"brightness\") {\n sensor_t * s = esp_camera_sensor_get();\n int val = P1.toInt(); \n s->set_brightness(s, val); \n } \n else {\n Feedback=\"Command is not defined.\";\n }\n if (Feedback==\"\") {\n Feedback=Command;\n }\n}<\/code><\/pre>\n\n\n\nClient Sketch (OpenCV.js)<\/h3>\n\n\n\n
![\"OpenCVJS](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/12\/ESP32-CAM-Web-Server-OpenCVJS-Ready.jpg?resize=702%2C249&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP32-CAM](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/12\/ESP32-CAM-Color-Tracking-RGB-Trackbars.jpg?resize=538%2C730&quality=100&strip=all&ssl=1\"){kind=tracking}
<\/figure><\/div>\n\n\n![\"ESP32-CAM](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/12\/ESP32-CAM-Color-Tracking-Color-Probe.jpg?resize=977%2C387&quality=100&strip=all&ssl=1\"){kind=tracking}
<\/figure><\/div>\n\n\n![\"ESP32-CAM](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/12\/ESP32-CAM-Web-Server-Color-Tracking-Example-2.png?resize=941%2C265&quality=100&strip=all&ssl=1\"){kind=tracking}
![\"ESP32-CAM](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/12\/ESP32-CAM-Web-Server-Color-Tracking-Example.png?resize=942%2C272&quality=100&strip=all&ssl=1\"){kind=tracking}
<\/figure><\/div>\n\n\n![\"ESP32-CAM](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/12\/ESP32-CAM-Color-Tracking-X-Y-Coordinates-messages.jpg?resize=1025%2C535&quality=100&strip=all&ssl=1\"){kind=tracking}
<\/figure><\/div>\n\n\n![\"ESP32-CAM](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/12\/ESP32-CAM-Wrover-Upload-Options.png?resize=672%2C538&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP32-CAM](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/12\/ESP32-CAM-IP-Address-Serial-Monitor.jpg?resize=739%2C445&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP32-CAM](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/12\/ESP32-CAM-Color-Detection-Tracking-Web-Server-Preview.jpg?resize=800%2C542&quality=100&strip=all&ssl=1\"){kind=tracking}
<\/figure><\/div>\n\n\n![\"ESP32-CAM](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/12\/Serial-Monitor-Color-Tracking-Results-ESP32-CAM-OpenCV-JS.jpg?resize=739%2C445&quality=100&strip=all&ssl=1\"){kind=tracking}
<\/figure><\/div>\n\n\n