Samouczek ESP32 45/55 - Niestandardowy serwer strumieniowy ze sterowaniem LED CAM-3 l Zestaw edukacyjny SunFounder ESP32
W tym samouczku omówimy, jak skonfigurować niestandardowy serwer strumieniowy przy użyciu płytki rozszerzającej ESP32 od SunFounder. Projekt umożliwia strumieniowanie wideo na żywo do przeglądarki, a także sterowanie diodą LED bezpośrednio z interfejsu. To połączenie funkcji zapewnia praktyczne doświadczenie w nauce technologii IoT i internetowych.
Wykorzystamy wbudowane możliwości Wi-Fi modułu ESP32 do stworzenia serwera internetowego, który strumieniuje wideo i obsługuje polecenia sterowania diodą LED. Projekt obejmuje kodowanie, podłączanie przewodów oraz zrozumienie, jak komponenty współdziałają. Jeśli chcesz lepiej zrozumieć konfigurację, koniecznie obejrzyj wideo (na wideo w 00:00).
Omówienie sprzętu
Główne komponenty tego projektu to mikrokontroler ESP32, moduł kamery, dioda LED i rezystor. ESP32 to wszechstronny mikrokontroler z wbudowanym Wi-Fi i Bluetooth, idealny do zastosowań IoT. Moduł kamery umożliwia przechwytywanie wideo, a dioda LED stanowi proste urządzenie wyjściowe do sterowania.
Dioda LED jest podłączona przez rezystor ograniczający prąd, co zapobiega uszkodzeniu zarówno diody, jak i mikrokontrolera. Taka konfiguracja pozwoli nam włączać i wyłączać diodę LED za pomocą interfejsu internetowego, pokazując możliwości ESP32 w obsłudze wejść i wyjść przez sieć.
Szczegóły z karty katalogowej
| Producent | Espressif |
|---|---|
| Numer części | ESP32-WROOM-32 |
| Napięcie logiczne/IO | 3,3 V |
| Napięcie zasilania | 3,0–3,6 V |
| Prąd wyjściowy (na kanał) | 12 mA |
| Prąd szczytowy (na kanał) | 40 mA |
| Zalecana częstotliwość PWM | 1 kHz |
| Progi logiczne wejścia | 0,2 V (niski) / 0,8 V (wysoki) |
| Spadek napięcia / RDS(on) / nasycenie | 0,2 V (typ.) |
| Limity termiczne | Maksymalna temperatura złącza: 125 °C |
| Obudowa | QFN48 |
| Uwagi / warianty | Dostępny w różnych konfiguracjach |
- Upewnij się, że ESP32 jest zasilany regulowanym napięciem 3,3 V.
- Użyj rezystora ograniczającego prąd (220 omów) z diodą LED, aby zapobiec uszkodzeniom.
- Zachowaj prawidłowe połączenia, aby uniknąć pływających wejść.
- Sprawdź, czy dane logowania do Wi-Fi są poprawne i uwzględniają wielkość liter.
- Użyj stabilnego źródła zasilania dla stałej wydajności.
- Rozważ odprowadzanie ciepła w zamkniętych przestrzeniach.
Instrukcje podłączania przewodów

Aby podłączyć ESP32 i diodę LED, zacznij od połączenia dłuższej nóżki diody LED z odpowiednim pinem GPIO, w tym przypadku użyjemy pinu 14. Krótsza nóżka powinna być podłączona do linii masy na płytce stykowej. Następnie umieść rezystor 220 omów szeregowo z diodą LED, łącząc jeden koniec z pinem GPIO (pin 14), a drugi z masą. Upewnij się, że ESP32 jest prawidłowo zasilany, przez port micro USB lub baterią litową 18650.
W przypadku modułu kamery podłącz niezbędne piny zgodnie z modelem kamery, którego używasz, ponieważ okablowanie może się nieznacznie różnić. ESP32 obsłuży strumień wideo dzięki swoim wbudowanym możliwościom, a sterowanie diodą LED będzie zarządzane przez interfejs internetowy, który skonfigurujemy w kodzie.
Przykłady kodu i omówienie
Program zaczyna się od dołączenia niezbędnych bibliotek i zdefiniowania danych logowania do Wi-Fi. Musisz zastąpić ssid i password swoimi rzeczywistymi danymi logowania do Wi-Fi, aby połączyć ESP32 z siecią.
const char* ssid = "SSID";
const char* password = "HASŁO";
Następnie definiujemy pin diody LED i konfigurujemy ustawienia kamery. Pin używany dla diody LED jest zdefiniowany jako LED_PIN, który będzie używany później w kodzie do sterowania stanem diody.
#define LED_PIN 14
pinMode(LED_PIN, OUTPUT);
W procedurze obsługi żądań sterowania diodą LED sprawdzamy polecenie otrzymane z interfejsu internetowego. W zależności od tego, czy polecenie to „on" czy „off", używamy digitalWrite(LED_PIN, 1); do włączenia diody i digitalWrite(LED_PIN, 0); do jej wyłączenia.
if(!strcmp(variable, "on")) {
Serial.println("ON");
digitalWrite(LED_PIN, 1);
}
else if(!strcmp(variable, "off")) {
Serial.println("OFF");
digitalWrite(LED_PIN, 0);
}
Ta logika umożliwia interfejsowi internetowemu skuteczną komunikację z ESP32, zapewniając sterowanie diodą LED w czasie rzeczywistym na podstawie działań użytkownika. Pełny kod znajduje się poniżej artykułu do dalszego zapoznania się.
Demonstracja / Czego się spodziewać
Po skonfigurowaniu wszystkiego i wgraniu kodu powinieneś mieć możliwość uzyskania dostępu do adresu IP ESP32 w przeglądarce internetowej. Pojawi się strumieniowane wideo, a diodą LED będziesz mógł sterować za pomocą przycisków w interfejsie. Kliknięcie „ON" włączy diodę, a „OFF" ją wyłączy. Upewnij się, że ESP32 i komputer są podłączone do tej samej sieci, aby zapewnić prawidłowe działanie (na wideo w 12:30).
Znaczniki czasu wideo
- 00:00 Start
- 1:51 Wprowadzenie do projektu
- 2:31 Strona dokumentacji
- 3:33 Omówienie okablowania
- 5:08 Omówienie kodu Arduino
- 13:28 Wybór płytki ESP32 i portu COM w Arduino IDE
- 15:10 Demonstracja
/*********
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
Zasoby i odniesienia
-
DokumentacjaESP32 Tutorial 45/55 - SunFounder doc page for Custom Streaming Serverdocs.sunfounder.com
Pliki📁
Brak dostępnych plików.