Tutorial ESP32 45/55 - Server de streaming personalizat cu control LED CAM-3 l Kitul de învățare ESP32 de la SunFounder
În acest tutorial, vom explora cum să configurați un server de streaming personalizat folosind placa de extensie ESP32 de la SunFounder. Proiectul vă permite să transmiteți video live în browser, controlând în același timp un LED direct din interfață. Această combinație de funcționalități permite o experiență de învățare practică cu tehnologiile IoT și web.
Vom folosi capacitățile Wi-Fi integrate ale ESP32 pentru a crea un server web care transmite video și gestionează comenzile de control al LED-ului. Proiectul implică programare, cablare și înțelegerea modului în care componentele interacționează. Dacă doriți o înțelegere mai clară a configurației, asigurați-vă că vizionați videoclipul (în videoclip la 00:00).
Hardware Explicat
Componentele principale pentru acest proiect includ microcontrolerul ESP32, un modul cameră, un LED și un rezistor. ESP32 este un microcontroler versatil cu Wi-Fi și Bluetooth integrate, fiind perfect pentru aplicații IoT. Modulul cameră ne permite să capturăm video, în timp ce LED-ul oferă un dispozitiv simplu de ieșire pentru control.
LED-ul este conectat printr-un rezistor pentru a limita curentul, prevenind deteriorarea atât a LED-ului, cât și a microcontrolerului. Această configurație ne va permite să pornim și să oprim LED-ul prin interfața web, evidențiind capacitățile ESP32 de a gestiona intrări și ieșiri printr-o rețea.
Detalii din Fișa Tehnică
| Producător | Espressif |
|---|---|
| Număr de piesă | ESP32-WROOM-32 |
| Tensiune logică/IO | 3,3 V |
| Tensiune de alimentare | 3,0–3,6 V |
| Curent de ieșire (pe canal) | 12 mA |
| Curent de vârf (pe canal) | 40 mA |
| Ghid frecvență PWM | 1 kHz |
| Praguri logice de intrare | 0,2 V (jos) / 0,8 V (sus) |
| Cădere de tensiune / RDS(on) / saturație | 0,2 V (tip.) |
| Limite termice | Temperatura maximă a joncțiunii: 125 °C |
| Pachet | QFN48 |
| Note / variante | Disponibil în diverse configurații |
- Asigurați-vă că ESP32 este alimentat cu o sursă reglată de 3,3 V.
- Folosiți un rezistor de limitare a curentului (220 Ohm) cu LED-ul pentru a preveni deteriorarea.
- Mențineți conexiuni corecte pentru a evita intrările flotante.
- Verificați că datele Wi-Fi sunt corecte și sensibile la majuscule.
- Folosiți o sursă de alimentare stabilă pentru performanță constantă.
- Luați în considerare disiparea căldurii în spații închise.
Instrucțiuni de Cablare

Pentru a cabla ESP32 și LED-ul, începeți prin conectarea pinului mai lung al LED-ului la un pin GPIO potrivit, în acest caz, vom folosi pinul 14. Pinul mai scurt trebuie conectat la linia de masă de pe breadboard. Apoi, plasați un rezistor de 220 Ohm în serie cu LED-ul, conectând un capăt la pinul GPIO (pinul 14) și celălalt capăt la masă. Asigurați-vă că ESP32 este alimentat corect, fie prin portul micro USB, fie cu o baterie cu litiu 18650.
Pentru modulul cameră, asigurați-vă că conectați pinii necesari conform modelului de cameră pe care îl utilizați, deoarece cablarea poate varia ușor. ESP32 va gestiona fluxul video prin capacitățile sale integrate, iar controlul LED-ului va fi gestionat prin interfața web pe care o vom configura în cod.
Exemple de Cod și Explicații
Programul începe prin includerea bibliotecilor necesare și definirea datelor de autentificare Wi-Fi. Va trebui să înlocuiți ssid și password cu datele reale ale rețelei Wi-Fi pentru a conecta ESP32 la rețeaua dvs.
const char* ssid = "SSID";
const char* password = "PASSWORD";
Apoi, definim pinul LED-ului și configurăm camerele. Pinul folosit pentru LED este definit ca LED_PIN, care va fi folosit mai târziu în cod pentru a controla starea LED-ului.
#define LED_PIN 14
pinMode(LED_PIN, OUTPUT);
În handler-ul de cereri pentru controlul LED-ului, verificăm comanda primită de la interfața web. În funcție de faptul dacă comanda este "on" sau "off", folosim digitalWrite(LED_PIN, 1); pentru a porni LED-ul și digitalWrite(LED_PIN, 0); pentru a-l opri.
if(!strcmp(variable, "on")) {
Serial.println("ON");
digitalWrite(LED_PIN, 1);
}
else if(!strcmp(variable, "off")) {
Serial.println("OFF");
digitalWrite(LED_PIN, 0);
}
Această logică permite interfeței web să comunice eficient cu ESP32, permițând controlul în timp real al LED-ului pe baza interacțiunilor utilizatorului. Codul complet este afișat mai jos în articol pentru explorare suplimentară.
Demonstrație / Ce să Vă Așteptați
Odată ce totul este configurat și codul este încărcat, ar trebui să puteți accesa adresa IP a ESP32 în browserul web. Video-ul de streaming va apărea, iar dvs. puteți controla LED-ul folosind butoanele din interfață. Apăsarea "ON" va aprinde LED-ul, în timp ce "OFF" îl va stinge. Asigurați-vă că ESP32 și computerul dvs. sunt conectate la aceeași rețea pentru a asigura funcționarea corectă (în videoclip la 12:30).
Marcaje Temporale Video
- 00:00 Început
- 1:51 Introducere în proiect
- 2:31 Pagina de documentație
- 3:33 Cablare explicată
- 5:08 Cod Arduino explicat
- 13:28 Selectarea plăcii ESP32 și a portului COM în Arduino IDE
- 15:10 Demonstrație
/*********
Permission is hereby granted, free of charge,
to any person obtaining a copy of this software and associated documentation files.
The above copyright notice and this permission
notice shall be included in all copies or substantial portions of the Software.
*********/
#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" // disable brownout problems
#include "soc/rtc_cntl_reg.h" // disable brownout problems
#include "esp_http_server.h"
// Replace the next variables with your SSID/Password combination
const char* ssid = "SSID";
const char* password = "PASSWORD";
#define PART_BOUNDARY "123456789000000000000987654321"
#define CAMERA_MODEL_AI_THINKER
//#define CAMERA_MODEL_M5STACK_PSRAM
//#define CAMERA_MODEL_M5STACK_WITHOUT_PSRAM
//#define CAMERA_MODEL_M5STACK_PSRAM_B
//#define CAMERA_MODEL_WROVER_KIT
#if defined(CAMERA_MODEL_WROVER_KIT)
#define PWDN_GPIO_NUM -1
#define RESET_GPIO_NUM -1
#define XCLK_GPIO_NUM 21
#define SIOD_GPIO_NUM 26
#define SIOC_GPIO_NUM 27
#define Y9_GPIO_NUM 35
#define Y8_GPIO_NUM 34
#define Y7_GPIO_NUM 39
#define Y6_GPIO_NUM 36
#define Y5_GPIO_NUM 19
#define Y4_GPIO_NUM 18
#define Y3_GPIO_NUM 5
#define Y2_GPIO_NUM 4
#define VSYNC_GPIO_NUM 25
#define HREF_GPIO_NUM 23
#define PCLK_GPIO_NUM 22
#elif defined(CAMERA_MODEL_M5STACK_PSRAM)
#define PWDN_GPIO_NUM -1
#define RESET_GPIO_NUM 15
#define XCLK_GPIO_NUM 27
#define SIOD_GPIO_NUM 25
#define SIOC_GPIO_NUM 23
#define Y9_GPIO_NUM 19
#define Y8_GPIO_NUM 36
#define Y7_GPIO_NUM 18
#define Y6_GPIO_NUM 39
#define Y5_GPIO_NUM 5
#define Y4_GPIO_NUM 34
#define Y3_GPIO_NUM 35
#define Y2_GPIO_NUM 32
#define VSYNC_GPIO_NUM 22
#define HREF_GPIO_NUM 26
#define PCLK_GPIO_NUM 21
#elif defined(CAMERA_MODEL_M5STACK_WITHOUT_PSRAM)
#define PWDN_GPIO_NUM -1
#define RESET_GPIO_NUM 15
#define XCLK_GPIO_NUM 27
#define SIOD_GPIO_NUM 25
#define SIOC_GPIO_NUM 23
#define Y9_GPIO_NUM 19
#define Y8_GPIO_NUM 36
#define Y7_GPIO_NUM 18
#define Y6_GPIO_NUM 39
#define Y5_GPIO_NUM 5
#define Y4_GPIO_NUM 34
#define Y3_GPIO_NUM 35
#define Y2_GPIO_NUM 17
#define VSYNC_GPIO_NUM 22
#define HREF_GPIO_NUM 26
#define PCLK_GPIO_NUM 21
#elif defined(CAMERA_MODEL_AI_THINKER)
#define PWDN_GPIO_NUM 32
#define RESET_GPIO_NUM 33
#define XCLK_GPIO_NUM 0
#define SIOD_GPIO_NUM 26
#define SIOC_GPIO_NUM 27
#define Y9_GPIO_NUM 35
#define Y8_GPIO_NUM 34
#define Y7_GPIO_NUM 39
#define Y6_GPIO_NUM 36
#define Y5_GPIO_NUM 21
#define Y4_GPIO_NUM 19
#define Y3_GPIO_NUM 18
#define Y2_GPIO_NUM 5
#define VSYNC_GPIO_NUM 25
#define HREF_GPIO_NUM 23
#define PCLK_GPIO_NUM 22
#elif defined(CAMERA_MODEL_M5STACK_PSRAM_B)
#define PWDN_GPIO_NUM -1
#define RESET_GPIO_NUM 15
#define XCLK_GPIO_NUM 27
#define SIOD_GPIO_NUM 22
#define SIOC_GPIO_NUM 23
#define Y9_GPIO_NUM 19
#define Y8_GPIO_NUM 36
#define Y7_GPIO_NUM 18
#define Y6_GPIO_NUM 39
#define Y5_GPIO_NUM 5
#define Y4_GPIO_NUM 34
#define Y3_GPIO_NUM 35
#define Y2_GPIO_NUM 32
#define VSYNC_GPIO_NUM 25
#define HREF_GPIO_NUM 26
#define PCLK_GPIO_NUM 21
#else
#error "Camera model not selected"
#endif
#define LED_PIN 14
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 camera_httpd = NULL;
httpd_handle_t stream_httpd = NULL;
static const char PROGMEM INDEX_HTML[] = R"rawliteral(
<html>
<head>
<title>ESP32-CAM Robot</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { font-family: Arial; text-align: center; margin:0px auto; padding-top: 30px;}
table { margin-left: auto; margin-right: auto; }
td { padding: 8 px; }
.button {
background-color: #2f4468;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
margin: 6px 3px;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
img { width: auto ;
max-width: 100% ;
height: auto ;
transform: rotate(180deg);
}
</style>
</head>
<body>
<h1>ESP32 CAMERA</h1>
<img src="" id="photo" >
<table>
<tr><td align="center"><button class="button" onmousedown="toggleCheckbox('on');" ontouchstart="toggleCheckbox('on');onmouseup="toggleCheckbox('on');" ontouchend="toggleCheckbox('on');">ON</button></td>
<td align="center"><button class="button" onmousedown="toggleCheckbox('off');" ontouchstart="toggleCheckbox('off');onmouseup="toggleCheckbox('off');" ontouchend="toggleCheckbox('off');">OFF</button></td></tr>
</table>
<script>
function toggleCheckbox(x) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/action?go=" + x, true);
xhr.send();
}
window.onload = document.getElementById("photo").src = window.location.href.slice(0, -1) + ":81/stream";
</script>
</body>
</html>
)rawliteral";
static esp_err_t index_handler(httpd_req_t *req){
httpd_resp_set_type(req, "text/html");
return httpd_resp_send(req, (const char *)INDEX_HTML, strlen(INDEX_HTML));
}
static esp_err_t stream_handler(httpd_req_t *req){
camera_fb_t * fb = NULL;
esp_err_t res = ESP_OK;
size_t _jpg_buf_len = 0;
uint8_t * _jpg_buf = NULL;
char * part_buf[64];
res = httpd_resp_set_type(req, _STREAM_CONTENT_TYPE);
if(res != ESP_OK){
return res;
}
while(true){
fb = esp_camera_fb_get();
if (!fb) {
Serial.println("Camera capture failed");
res = ESP_FAIL;
} else {
if(fb->width > 400){
if(fb->format != PIXFORMAT_JPEG){
bool jpeg_converted = frame2jpg(fb, 80, &_jpg_buf, &_jpg_buf_len);
esp_camera_fb_return(fb);
fb = NULL;
if(!jpeg_converted){
Serial.println("JPEG compression failed");
res = ESP_FAIL;
}
} else {
_jpg_buf_len = fb->len;
_jpg_buf = fb->buf;
}
}
}
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(fb){
esp_camera_fb_return(fb);
fb = NULL;
_jpg_buf = NULL;
} else if(_jpg_buf){
free(_jpg_buf);
_jpg_buf = NULL;
}
if(res != ESP_OK){
break;
}
//Serial.printf("MJPG: %uB\n",(uint32_t)(_jpg_buf_len));
}
return res;
}
static esp_err_t cmd_handler(httpd_req_t *req){
char* buf;
size_t buf_len;
char variable[32] = {0,};
buf_len = httpd_req_get_url_query_len(req) + 1;
if (buf_len > 1) {
buf = (char*)malloc(buf_len);
if(!buf){
httpd_resp_send_500(req);
return ESP_FAIL;
}
if (httpd_req_get_url_query_str(req, buf, buf_len) == ESP_OK) {
if (httpd_query_key_value(buf, "go", variable, sizeof(variable)) == ESP_OK) {
} else {
free(buf);
httpd_resp_send_404(req);
return ESP_FAIL;
}
} else {
free(buf);
httpd_resp_send_404(req);
return ESP_FAIL;
}
free(buf);
} else {
httpd_resp_send_404(req);
return ESP_FAIL;
}
sensor_t * s = esp_camera_sensor_get();
int res = 0;
if(!strcmp(variable, "on")) {
Serial.println("ON");
digitalWrite(LED_PIN, 1);
}
else if(!strcmp(variable, "off")) {
Serial.println("OFF");
digitalWrite(LED_PIN, 0);
}
else {
res = -1;
}
if(res){
return httpd_resp_send_500(req);
}
httpd_resp_set_hdr(req, "Access-Control-Allow-Origin", "*");
return httpd_resp_send(req, NULL, 0);
}
void startCameraServer(){
httpd_config_t config = HTTPD_DEFAULT_CONFIG();
config.server_port = 80;
httpd_uri_t index_uri = {
.uri = "/",
.method = HTTP_GET,
.handler = index_handler,
.user_ctx = NULL
};
httpd_uri_t cmd_uri = {
.uri = "/action",
.method = HTTP_GET,
.handler = cmd_handler,
.user_ctx = NULL
};
httpd_uri_t stream_uri = {
.uri = "/stream",
.method = HTTP_GET,
.handler = stream_handler,
.user_ctx = NULL
};
if (httpd_start(&camera_httpd, &config) == ESP_OK) {
httpd_register_uri_handler(camera_httpd, &index_uri);
httpd_register_uri_handler(camera_httpd, &cmd_uri);
}
config.server_port += 1;
config.ctrl_port += 1;
if (httpd_start(&stream_httpd, &config) == ESP_OK) {
httpd_register_uri_handler(stream_httpd, &stream_uri);
}
}
void setup() {
WRITE_PERI_REG(RTC_CNTL_BROWN_OUT_REG, 0); //disable brownout detector
pinMode(LED_PIN, OUTPUT);
Serial.begin(115200);
Serial.setDebugOutput(false);
camera_config_t config;
config.ledc_channel = LEDC_CHANNEL_0;
config.ledc_timer = LEDC_TIMER_0;
config.pin_d0 = Y2_GPIO_NUM;
config.pin_d1 = Y3_GPIO_NUM;
config.pin_d2 = Y4_GPIO_NUM;
config.pin_d3 = Y5_GPIO_NUM;
config.pin_d4 = Y6_GPIO_NUM;
config.pin_d5 = Y7_GPIO_NUM;
config.pin_d6 = Y8_GPIO_NUM;
config.pin_d7 = Y9_GPIO_NUM;
config.pin_xclk = XCLK_GPIO_NUM;
config.pin_pclk = PCLK_GPIO_NUM;
config.pin_vsync = VSYNC_GPIO_NUM;
config.pin_href = HREF_GPIO_NUM;
config.pin_sscb_sda = SIOD_GPIO_NUM;
config.pin_sscb_scl = SIOC_GPIO_NUM;
config.pin_pwdn = PWDN_GPIO_NUM;
config.pin_reset = RESET_GPIO_NUM;
config.xclk_freq_hz = 20000000;
config.pixel_format = PIXFORMAT_JPEG;
if(psramFound()){
config.frame_size = FRAMESIZE_VGA;
config.jpeg_quality = 10;
config.fb_count = 2;
} else {
config.frame_size = FRAMESIZE_SVGA;
config.jpeg_quality = 12;
config.fb_count = 1;
}
// Camera init
esp_err_t err = esp_camera_init(&config);
if (err != ESP_OK) {
Serial.printf("Camera init failed with error 0x%x", err);
return;
}
// 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.println(WiFi.localIP());
// Start streaming web server
startCameraServer();
}
void loop() {
}
Common Course Links
Common Course Files
Resurse și referințe
-
DocumentațieESP32 Tutorial 45/55- SunFounder doc page for Custom Streamign Serverdocs.sunfounder.com
Fișiere📁
Nu sunt disponibile fișiere.