ESP32-CAM: Видеостриминг веб-сервер (IP-камера) с интеграцией Home Assistant

В этом проекте мы создадим IP-камеру видеонаблюдения на базе платы ESP32-CAM. Камера ESP32 будет размещать веб-сервер видеостриминга, к которому вы можете получить доступ с любого устройства в вашей сети.

Вы можете интегрировать этот веб-сервер видеостриминга с популярными платформами домашней автоматизации, такими как Home Assistant или Node-RED. В этом уроке мы покажем, как интегрировать его с Home Assistant и Node-RED.

Смотрите видео

Вы можете посмотреть видеоурок или продолжить чтение этой страницы для получения письменных инструкций.

Необходимые компоненты

Для выполнения этого урока вам понадобятся следующие компоненты:

• ESP32-CAM с OV2640 — читайте Best ESP32-CAM Dev Boards

• FTDI программатор

• Перемычки «мама-мама»

• Муляж купольной камеры видеонаблюдения

• Блок питания 5V для ESP32-CAM

• Опционально — Home Assistant на Raspberry Pi:

  • Плата Raspberry Pi — читайте Best Raspberry Pi Starter Kits

  • MicroSD карта — 32GB Class10

  • Блок питания Raspberry Pi (5V 2.5A)

Знакомство с ESP32-CAM

ESP32-CAM — это очень маленький модуль камеры с чипом ESP32-S, стоимость которого составляет менее $10. Вы можете прочитать наше руководство по началу работы с ESP32-CAM и узнать, как использовать пример видеостриминга и распознавания лиц.

Веб-сервер видеостриминга

Выполните следующие шаги для создания веб-сервера видеостриминга с ESP32-CAM, к которому вы сможете получить доступ в вашей локальной сети.

1. Установите дополнение ESP32

В этом примере мы используем Arduino IDE для программирования платы ESP32-CAM. Поэтому у вас должна быть установлена Arduino IDE, а также дополнение ESP32. Следуйте одному из следующих руководств для установки дополнения ESP32, если вы этого ещё не сделали:

• Установка платы ESP32 в Arduino IDE (инструкции для Windows)

• Установка платы ESP32 в Arduino IDE (инструкции для Mac и Linux)

2. Код веб-сервера видеостриминга

После этого скопируйте приведённый ниже код в вашу Arduino IDE.

/*********
  Rui Santos
  Complete project details at https://RandomNerdTutorials.com/esp32-cam-video-streaming-web-server-camera-home-assistant/

  IMPORTANT!!!
   - Select Board "AI Thinker ESP32-CAM"
   - GPIO 0 must be connected to GND to upload a sketch
   - After connecting GPIO 0 to GND, press the ESP32-CAM on-board RESET button to put your board in flashing mode

  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 with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

#define PART_BOUNDARY "123456789000000000000987654321"

// This project was tested with the AI Thinker Model, M5STACK PSRAM Model and M5STACK WITHOUT PSRAM
#define CAMERA_MODEL_AI_THINKER
//#define CAMERA_MODEL_M5STACK_PSRAM
//#define CAMERA_MODEL_M5STACK_WITHOUT_PSRAM

// Not tested with this model
//#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    -1
  #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
#else
  #error "Camera model not selected"
#endif

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 stream_httpd = NULL;

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

void startCameraServer(){
  httpd_config_t config = HTTPD_DEFAULT_CONFIG();
  config.server_port = 80;

  httpd_uri_t index_uri = {
    .uri       = "/",
    .method    = HTTP_GET,
    .handler   = stream_handler,
    .user_ctx  = NULL
  };

  //Serial.printf("Starting web server on port: '%d'\n", config.server_port);
  if (httpd_start(&stream_httpd, &config) == ESP_OK) {
    httpd_register_uri_handler(stream_httpd, &index_uri);
  }
}

void setup() {
  WRITE_PERI_REG(RTC_CNTL_BROWN_OUT_REG, 0); //disable brownout detector

  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_sccb_sda = SIOD_GPIO_NUM;
  config.pin_sccb_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_UXGA;
    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.print(WiFi.localIP());

  // Start streaming web server
  startCameraServer();
}

void loop() {
  delay(1);
}

Посмотреть исходный код

Перед загрузкой кода необходимо вставить данные вашей сети в следующие переменные:

const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

Затем убедитесь, что выбран правильный модуль камеры. В данном случае мы используем модель AI-THINKER.

Если вы используете тот же модуль камеры, вам не нужно ничего менять в коде.

#define CAMERA_MODEL_AI_THINKER

Теперь вы можете загрузить код на вашу плату ESP32-CAM.

3. Загрузка кода

Подключите плату ESP32-CAM к компьютеру с помощью FTDI программатора. Следуйте приведённой ниже схеме подключения:

Многие FTDI программаторы имеют перемычку, позволяющую выбрать напряжение 3.3V или 5V. Убедитесь, что перемычка установлена в правильное положение для выбора 5V.

Важно: GPIO 0 необходимо подключить к GND, чтобы иметь возможность загружать код.

ESP32-CAM	FTDI программатор
GND	GND
5V	VCC (5V)
U0R	TX
U0T	RX
GPIO 0	GND

Для загрузки кода выполните следующие шаги:

1. Перейдите в Tools > Board и выберите AI-Thinker ESP32-CAM.

2. Перейдите в Tools > Port и выберите COM-порт, к которому подключён ESP32.

3. Затем нажмите кнопку загрузки, чтобы загрузить код.

4. Когда в окне отладки начнут появляться точки, как показано ниже, нажмите кнопку RST на плате ESP32-CAM.

Через несколько секунд код должен быть успешно загружен на вашу плату.

Получение IP-адреса

После загрузки кода отключите GPIO 0 от GND. Откройте монитор последовательного порта на скорости 115200 бод. Нажмите кнопку Reset на плате ESP32-CAM.

IP-адрес ESP32 должен появиться в мониторе последовательного порта.

Доступ к серверу видеостриминга

Теперь вы можете получить доступ к серверу потокового видео вашей камеры в локальной сети. Откройте браузер и введите IP-адрес ESP32-CAM. Должна загрузиться страница с текущим видеопотоком.

Интеграция с Home Assistant

Простое использование ESP32-CAM по IP-адресу может быть достаточным для большинства людей, но вы также можете интегрировать этот проект с Home Assistant (или с другими платформами домашней автоматизации). Продолжайте читать, чтобы узнать, как выполнить интеграцию с Home Assistant.

Предварительные требования

• Вы должны быть знакомы с Raspberry Pi — читайте Getting Started with Raspberry Pi.

• Getting Started with Home Assistant on Raspberry Pi

Добавление ESP32-CAM в Home Assistant

Откройте панель управления Home Assistant и перейдите в меню Settings.

Откройте Configure UI:

Добавьте новую карточку на вашу панель управления:

Выберите карточку типа Picture.

В поле Image URL введите IP-адрес вашей ESP32-CAM. Затем нажмите кнопку «SAVE» и вернитесь на главную панель управления.

Если вы используете конфигурационный файл, вот что нужно добавить:

После этого Home Assistant сможет отображать видеопоток ESP32-CAM.

Развитие проекта

Чтобы развить этот проект дальше, вы можете использовать муляж купольной камеры и разместить ESP32-CAM внутри него.

Плата ESP32-CAM идеально помещается в корпус муляжа камеры.

Вы можете запитать камеру с помощью блока питания 5V через пины GND и 5V на ESP32-CAM.

Разместите камеру видеонаблюдения в подходящем месте.

После этого перейдите по IP-адресу камеры или откройте панель управления Home Assistant и наблюдайте в реальном времени за происходящим. На следующем изображении показано, как мы тестируем камеру видеостриминга. Сара делает скриншот, пока я снимаю камеру.

Впечатляет, на что способен этот маленький модуль камеры ESP32 стоимостью $9, и он работает надёжно. Теперь мы можем использовать камеру видеонаблюдения, чтобы видеть в реальном времени, что происходит у входной двери.

Совет: Интеграция с Node-RED

Веб-сервер видеостриминга также интегрируется с Node-RED и Node-RED Dashboard. Вам просто нужно создать узел Template и добавить следующее:

<div style="margin-bottom: 10px;">
<img src="https://YOUR-ESP32-CAM-IP-ADDRESS" width="650px">
</div>

В атрибуте src необходимо указать IP-адрес вашей ESP32-CAM:

<div style="margin-bottom: 10px;">
<img src="https://192.168.1.91" width="650px">
</div>

Устранение неполадок

Если вы получаете какую-либо из следующих ошибок, прочитайте наше Руководство по устранению неполадок ESP32-CAM: исправление самых распространённых проблем:

• Failed to connect to ESP32: Timed out waiting for packet header

• Camera init failed with error 0x20001 или подобная ошибка

• Brownout detector или ошибка Guru meditation

• Sketch too big error — неправильная схема разделов

• Board at COMX is not available — COM-порт не выбран

• Psram error: GPIO isr service is not installed

• Слабый сигнал Wi-Fi

• Нет IP-адреса в мониторе последовательного порта Arduino IDE

• Не удаётся открыть веб-сервер

• Изображение тормозит / большая задержка

Заключение

В этом уроке мы показали, как создать простой веб-сервер видеостриминга с платой ESP32-CAM для построения IP-камеры. Созданный нами веб-сервер можно легко интегрировать с вашей платформой домашней автоматизации, такой как Node-RED или Home Assistant.

Надеемся, что этот урок был полезен. Если у вас ещё нет ESP32-CAM, вы можете приобрести его здесь.

Если вам понравился этот проект, вас также могут заинтересовать другие проекты с ESP32-CAM:

• ESP32-CAM Video Streaming and Face Recognition with Arduino IDE

• ESP32-CAM Take Photo and Save to MicroSD Card

• ESP32-CAM PIR Motion Detector with Photo Capture

• ESP32-CAM Take Photo and Display in Web Server