搜索代码

ESP32教程45/55 - 带LED控制的定制流媒体服务器 CAM-3 l SunFounder的ESP32学习套件

本课是……的一部分: 基于 SunFounder ESP32 IoT 学习套件的 ESP32 Arduino 课程（55 个教程/视频）
所有课程
在 YouTube 上观看

ESP32教程45/55 - 带LED控制的定制流媒体服务器 CAM-3 l SunFounder的ESP32学习套件

在本教程中，我们将探讨如何使用SunFounder的ESP32扩展板设置自定义流媒体服务器。该项目允许您将实时视频流传输到浏览器，同时直接从界面控制LED。这种功能组合使您能够通过物联网和Web技术获得动手学习体验。

我们将利用ESP32内置的Wi-Fi功能创建一个Web服务器，用于流式传输视频并处理LED控制命令。该项目涉及编码、接线以及理解组件之间的交互方式。如果您想更清楚地了解设置过程，请务必观看视频（视频中00:00处）。

硬件说明

该项目的主要组件包括ESP32微控制器、摄像头模块、LED和电阻。ESP32是一款功能多样的微控制器，内置Wi-Fi和蓝牙，非常适合物联网应用。摄像头模块使我们能够捕获视频，而LED则提供了一个简单的输出设备用于控制。

LED通过电阻连接以限制电流，防止损坏LED和微控制器。这种设置将使我们能够通过Web界面打开和关闭LED，展示ESP32通过网络处理输入和输出的能力。

数据手册详情

制造商乐鑫
零件编号ESP32-WROOM-32
逻辑/IO电压3.3 V
电源电压3.0–3.6 V
输出电流（每通道）12 mA
峰值电流（每通道）40 mA
PWM频率指南1 kHz
输入逻辑阈值0.2 V（低）/ 0.8 V（高）
压降 / RDS(on) / 饱和0.2 V（典型值）
热限制最高结温：125 °C
封装QFN48
备注 / 变体有多种配置可选

  • 确保ESP32使用稳压3.3 V电源供电。
  • 使用限流电阻（220欧姆）与LED串联，以防止损坏。
  • 保持正确连接，避免悬空输入。
  • 检查Wi-Fi凭据是否正确且区分大小写。
  • 使用稳定的电源以确保性能一致。
  • 在封闭空间中考虑散热问题。

接线说明

esp32-45-streaming-sever-wriing

要连接ESP32和LED，首先将LED较长的引脚连接到合适的GPIO引脚，本例中我们将使用引脚14。较短的引脚应连接到面包板上的地线。接下来，将一个220欧姆电阻与LED串联，一端连接到GPIO引脚（引脚14），另一端连接到地线。确保ESP32正确供电，可以通过micro USB端口或使用18650锂电池。

对于摄像头模块，请根据您使用的摄像头型号连接必要的引脚，因为接线可能略有不同。ESP32将通过其内置功能处理视频流，而LED控制将通过我们将在代码中设置的Web界面进行管理。

代码示例与讲解

程序首先包含必要的库并定义Wi-Fi凭据。您需要将ssid和password替换为您实际的Wi-Fi凭据，以便将ESP32连接到您的网络。

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

接下来，我们定义LED引脚并设置摄像头配置。用于LED的引脚定义为LED_PIN，稍后将在代码中用于控制LED的状态。

#define LED_PIN    14
pinMode(LED_PIN, OUTPUT);

在LED控制的请求处理程序中，我们检查从Web界面接收到的命令。根据命令是“on”还是“off”，我们使用digitalWrite(LED_PIN, 1);打开LED，使用digitalWrite(LED_PIN, 0);关闭LED。

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

该逻辑使Web界面能够有效地与ESP32通信，根据用户交互实现LED的实时控制。完整代码加载在文章下方，供进一步探索。

演示 / 预期效果

一切设置完成并上传代码后，您应该能够在Web浏览器中访问ESP32的IP地址。流媒体视频将显示出来，您可以使用界面上的按钮控制LED。点击“ON”将点亮LED，而“OFF”将关闭它。请确保ESP32和您的计算机连接到同一网络，以确保功能正常（视频中12:30处）。

视频时间戳

  • 00:00 开始
  • 1:51 项目介绍
  • 2:31 文档页面
  • 3:33 接线说明
  • 5:08 Arduino代码讲解
  • 13:28 在Arduino IDE中选择ESP32开发板和COM端口
  • 15:10 演示

图像

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
语言: C++
/*
 * 特此免费授予任何获得本软件及相关文档文件副本的人士使用权限。上述版权声明和此许可声明应包含在软件的所有副本或重要部分中。
 */
#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" // 禁用电压减少问题
#include "soc/rtc_cntl_reg.h" // 禁用电压减少问题
#include "esp_http_server.h"

 // 用您的SSID/密码组合替换下列变量
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); // 禁用电压下降检测器

  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;
  }

 // 相机初始化
  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连接
  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());

 // 开始流媒体网络服务器
  startCameraServer();
}

void loop() {

}

Common Course Links

Common Course Files

资源与参考

文件📁

没有可用的文件。

← 上一课

相关的eBay列表

相关的AliExpress产品

搜索代码

最新教程

YouTube 缩略图
YouTube 缩略图
YouTube 缩略图
YouTube 缩略图
YouTube 缩略图
YouTube 缩略图
YouTube 缩略图
YouTube 缩略图
YouTube 缩略图
YouTube 缩略图
查看更多