Search Code

Tutorial ESP32 45/55 - Server-ka Streaming-ga Caadiga ah ee leh Xakamaynta LED CAM-3 l SunFounder's ESP32 Learning kit

Tutorial ESP32 45/55 - Server-ka Streaming-ga Caadiga ah ee leh Xakamaynta LED CAM-3 l SunFounder's ESP32 Learning kit

Cashigarkani, waxaan sahamin doonaa sida loo sameeyo server streaming gaar ah iyadoo la isticmaalayo guddiga kordhinta ESP32 ee SunFounder. Mashruucani wuxuu kuu ogolaanayaa inaad si toos ah u daawato fiidiyowga kumbuyutarkaaga iyadoo sidoo kale aad xakamaynayso LED-ka si toos ah interface-ka. Isku darka astaamahan wuxuu u oggolaanayaa khibrad waxbarasho oo gacan-ku-taab ah oo ku saabsan IoT iyo teknoolojiyadda webka.

Waxaan isticmaali doonaa awoodaha Wi-Fi ee ku dhex jira ESP32 si aan u abuurno server web oo streaming ka sameeya fiidiyowga oo maamula amarrada xakamaynta LED-ka. Mashruucani wuxuu ku lug leeyahay codeyn, fiilooyin, iyo fahamka sida qaybaha isu dhexgalaan. Haddii aad rabto faham cad oo ku saabsan qaabaynta, hubi inaad daawato fiidiyowga (fiidiyowga 00:00).

Qaybaha Qalabka La Sharaxay

Qaybaha ugu muhiimsan ee mashruucan waxaa ka mid ah microcontroller-ka ESP32, module kamarad, LED, iyo resistor. ESP32 waa microcontroller badan oo leh Wi-Fi iyo Bluetooth ku dhex jira, taasoo ka dhigaysa mid ku habboon codsiyada IoT. Module-ka kamaraddu wuxuu noo ogolaanayaa inaan qabanno fiidiyow, halka LED-ku uu bixiyo qalab soo-saar fudud oo xakamayn ah.

LED-ka waxaa lagu xiraa resistor si loo xaddido hadda, taasoo ka ilaalinaysa dhaawaca LED-ka iyo microcontroller-ka labadaba. Qaabayntani waxay noo ogolaan doontaa inaan LED-ka shido oo damiyo iyada oo loo marayo interface-ka web-ka, taasoo muujinaysa awoodaha ESP32 ee xakamaynta wax-soo-saarka iyo wax-soo-saarka shabakadda.

Faahfaahinta Xogta

Soo-saareEspressif
Nambarka qaybtaESP32-WROOM-32
Danabka Logic/IO3.3 V
Danabka sahayda3.0–3.6 V
Hadda soo-saarka (kanaal kasta)12 mA
Hadda ugu sarreysa (kanaal kasta)40 mA
Hagaha soo noqnoqda PWM1 kHz
Heerarka caqabadaha gelinta0.2 V (hoose) / 0.8 V (sare)
Hoos u dhaca danabka / RDS(on) / saturation0.2 V (typ.)
Xaddidaadda kulaylkaHeerkulka isku-xirnaanta ugu sarreeya: 125 °C
BaakadQFN48
Xusuusin / noocyoWaxaa laga heli karaa qaabab kala duwan

  • Hubi in ESP32 lagu shideeyo sahay 3.3 V oo nidaamsan.
  • Isticmaal resistor xaddidaya hadda (220 Ohm) oo leh LED-ka si looga hortago dhaawaca.
  • Ilaali xiriirada saxda ah si looga fogaado gelinta sabeynaysa.
  • Hubi in aqoonsiga Wi-Fi uu sax yahay oo uu xasaasi u yahay xarfaha.
  • Isticmaal ilo koronto oo deggan si waxqabad joogto ah loo helo.
  • Tixgeli kala-baxa kulaylka meelaha xiran.

Tilmaamaha Fiilooyinka

esp32-45-streaming-sever-wriing

Si aad u xirto ESP32 iyo LED-ka, ku bilow adoo ku xira dhejiska dheer ee LED-ka pin GPIO ku habboon, kiiskan waxaan isticmaali doonaa pin 14. Dhejiska gaaban waa inuu ku xirmaa khadka dhulka ee breadboard-kaaga. Marka xigta, dhig resistor 220 Ohm oo taxane ah oo leh LED-ka, isagoo ku xira dhammaadka pin GPIO (pin 14) iyo dhammaadka kale ee dhulka. Hubi in ESP32 si sax ah loo shideeyo, ama iyada oo loo marayo dekedda micro USB ama iyada oo la isticmaalayo baytari lithium 18650.

Module-ka kamaradda, hubi inaad ku xirto biinanka lagama maarmaanka ah sida ku cad nooca kamaradda aad isticmaalayso, maadaama fiilooyinku ay yara kala duwanaan karaan. ESP32 wuxuu maamuli doonaa streaming-ka fiidiyowga iyada oo loo marayo awoodihiisa ku dhex jira, xakamaynta LED-ka waxaa lagu maamuli doonaa interface-ka web-ka ee aan ku samayn doonno code-ka.

Tusaalooyinka Code & Sharaxaad

Barnaamijku wuxuu ku bilaabmaa inuu ku daro maktabado lagama maarmaan ah oo uu qeexo aqoonsiga Wi-Fi. Waxaad u baahan doontaa inaad ku beddesho ssid iyo password aqoonsigaaga Wi-Fi ee dhabta ah si aad ESP32 ugu xirto shabakaddaada.

const char* ssid = "SSID";
const char* password = "PASSWORD";

Marka xigta, waxaan qeexaynaa pin-ka LED-ka oo aan dejineynaa qaabaynta kamaradda. Pin-ka loo isticmaalo LED-ka waxaa lagu qeexay LED_PIN, kaas oo loo isticmaali doono markii dambe code-ka si loo xakameeyo xaaladda LED-ka.

#define LED_PIN    14
pinMode(LED_PIN, OUTPUT);

Qaybta xakamaynta LED-ka ee codsiga, waxaan hubinaynaa amarka laga helo interface-ka web-ka. Iyada oo ku xiran haddii amarku yahay "on" ama "off", waxaan isticmaalaynaa digitalWrite(LED_PIN, 1); si aan u shidno LED-ka iyo digitalWrite(LED_PIN, 0); si aan u damino.

if(!strcmp(variable, "on")) {
  Serial.println("ON");
  digitalWrite(LED_PIN, 1);
}
else if(!strcmp(variable, "off")) {
  Serial.println("OFF");
  digitalWrite(LED_PIN, 0);
}

Mantiggani wuxuu u oggolaanayaa interface-ka web-ka inuu si wax ku ool ah ula xiriiro ESP32, isagoo u oggolaanaya xakamaynta LED-ka waqtiga dhabta ah iyada oo ku saleysan isdhexgalka isticmaalaha. Code-ka buuxa ayaa hoos ku soo dega maqaalka si dheeri ah loo baaro.

Muuujin / Waxa Laga Filanayo

Marka wax walba la dejiyo oo code-ka la soo geliyo, waxaad awoodi doontaa inaad ku gasho cinwaanka IP-ga ee ESP32 browser-kaaga web-ka. Fiidiyowga streaming-ka ayaa soo bixi doona, waxaadna xakamayn kartaa LED-ka adoo isticmaalaya badhamada interface-ka. Gujista "ON" waxay shidi doontaa LED-ka, halka "OFF" ay damin doonto. Hubi in ESP32 iyo kumbuyutarkaagu ay ku xiran yihiin isla shabakadda si loo hubiyo shaqeynta saxda ah (fiidiyowga 12:30).

Waqtiyada Fiidiyowga

  • 00:00 Bilow
  • 1:51 Hordhaca mashruuca
  • 2:31 Bogga dukumeentiga
  • 3:33 Fiilooyinka La Sharaxay
  • 5:08 Code-ka Arduino la sharaxay
  • 13:28 Doorashada Guddiga ESP32 iyo COM port ee Arduino IDE
  • 15:10 Muujin

Sawirro

ESP32-40-micro-sd-card-2
ESP32-40-micro-sd-card-2
esp32-45-streaming-sever-wriing
esp32-45-streaming-sever-wriing
846-ESP32 Tutorial 45/55- Arduino code for Custom Streamign Server
Luqadda: C++
/*********
  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() {
  
}

Kheyraadka & Tixraacyada

Faylasha📁

Fayl la'aan.