ESP32-CAM Pan and Tilt: веб-сервер с видеопотоком (2 оси)
В этом проекте мы установим ESP32-CAM на поворотно-наклонную платформу (pan and tilt) с двумя сервоприводами SG90. С такой платформой можно перемещать камеру вверх, вниз, влево и вправо — это отлично подходит для видеонаблюдения. ESP32-CAM запускает веб-сервер, который отображает видеопоток и кнопки для управления сервоприводами для перемещения камеры.
Совместимость плат: для этого проекта вам нужна плата ESP32 с камерой, имеющая доступ к двум GPIO для управления двумя сервоприводами. Вы можете использовать: ESP32-CAM AI-Thinker, T-Journal, TTGO T-Camera Plus или платы ESP32-CAM Freenove (Wrover или S3).
Необходимые компоненты
Для этого проекта нам понадобятся следующие компоненты:
ESP32-CAM AI-Thinker с внешней антенной
Поворотно-наклонная платформа (pan and tilt) с сервоприводами SG90
Макетная плата (опционально)
Соединительные провода (перемычки)
Поворотно-наклонная платформа и сервоприводы
Для этого проекта мы используем поворотно-наклонную платформу, которая уже поставляется с двумя сервоприводами SG90. Платформа показана на следующем рисунке.
Вы можете приобрести такую платформу в любом магазине электроники.
Альтернативный вариант — купить два сервопривода SG90 и напечатать платформу на 3D-принтере.
Сервоприводы имеют три провода разных цветов:
Провод |
Цвет |
|---|---|
Питание |
Красный |
GND |
Чёрный или коричневый |
Сигнал |
Жёлтый, оранжевый или белый |
Как управлять сервоприводом?
Вал сервопривода можно устанавливать в различные положения от 0 до 180°. Управление сервоприводами осуществляется с помощью сигнала широтно-импульсной модуляции (ШИМ). Это означает, что ШИМ-сигнал, отправляемый на двигатель, определяет положение вала.
Для управления сервоприводом можно использовать возможности ШИМ ESP32, отправляя сигнал с соответствующей длительностью импульса. Или можно использовать библиотеку, чтобы упростить код. Мы будем использовать библиотеку ESP32Servo.
Установка библиотеки ESP32Servo
Для управления сервоприводами мы будем использовать библиотеку ESP32Servo. Убедитесь, что вы установили эту библиотеку перед продолжением. В Arduino IDE перейдите в Скетч > Подключить библиотеку > Управлять библиотеками. Найдите ESP32Servo и установите библиотеку.
Код
Скопируйте следующий код в вашу Arduino IDE.
/*********
Rui Santos & Sara Santos - Random Nerd Tutorials
Complete instructions at https://RandomNerdTutorials.com/esp32-cam-projects-ebook/
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"
#include <ESP32Servo.h>
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_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 -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
#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 SERVO_1 14
#define SERVO_2 15
#define SERVO_STEP 5
Servo servo1;
Servo servo2;
int servo1Pos = 0;
int servo2Pos = 0;
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 ;
}
</style>
</head>
<body>
<h1>ESP32-CAM Pan and Tilt</h1>
<img src="" id="photo" >
<table>
<tr><td colspan="3" align="center"><button class="button" onmousedown="toggleCheckbox('up');" ontouchstart="toggleCheckbox('up');">Up</button></td></tr>
<tr><td align="center"><button class="button" onmousedown="toggleCheckbox('left');" ontouchstart="toggleCheckbox('left');">Left</button></td><td align="center"></td><td align="center"><button class="button" onmousedown="toggleCheckbox('right');" ontouchstart="toggleCheckbox('right');">Right</button></td></tr>
<tr><td colspan="3" align="center"><button class="button" onmousedown="toggleCheckbox('down');" ontouchstart="toggleCheckbox('down');">Down</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();
//flip the camera vertically
//s->set_vflip(s, 1); // 0 = disable , 1 = enable
// mirror effect
//s->set_hmirror(s, 1); // 0 = disable , 1 = enable
int res = 0;
if(!strcmp(variable, "up")) {
if(servo1Pos <= 170) {
servo1Pos += 10;
servo1.write(servo1Pos);
}
Serial.println(servo1Pos);
Serial.println("Up");
}
else if(!strcmp(variable, "left")) {
if(servo2Pos <= 170) {
servo2Pos += 10;
servo2.write(servo2Pos);
}
Serial.println(servo2Pos);
Serial.println("Left");
}
else if(!strcmp(variable, "right")) {
if(servo2Pos >= 10) {
servo2Pos -= 10;
servo2.write(servo2Pos);
}
Serial.println(servo2Pos);
Serial.println("Right");
}
else if(!strcmp(variable, "down")) {
if(servo1Pos >= 10) {
servo1Pos -= 10;
servo1.write(servo1Pos);
}
Serial.println(servo1Pos);
Serial.println("Down");
}
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
servo1.setPeriodHertz(50); // standard 50 hz servo
servo2.setPeriodHertz(50); // standard 50 hz servo
servo1.attach(SERVO_1, 1000, 2000);
servo2.attach(SERVO_2, 1000, 2000);
servo1.write(servo1Pos);
servo2.write(servo2Pos);
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_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() {
}
Посмотреть исходный код на GitHub
Сетевые учётные данные
Вставьте ваши сетевые учётные данные, и код должен работать сразу.
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
Как работает код
Давайте рассмотрим основные части, связанные с управлением сервоприводами.
Определите пины, к которым подключены сервоприводы. В данном случае они подключены к GPIO 14 и GPIO 15 ESP32-CAM.
#define SERVO_1 14
#define SERVO_2 15
Создайте объекты Servo для управления каждым мотором:
Servo servo1;
Servo servo2;
Определите начальное положение сервоприводов.
int servo1Pos = 0;
int servo2Pos = 0;
Веб-страница
Переменная INDEX_HTML содержит HTML-текст для построения веб-страницы. Следующие строки отображают кнопки.
<table>
<tr><td colspan="3" align="center"><button class="button" onmousedown="toggleCheckbox('up');" ontouchstart="toggleCheckbox('up');">Up</button></td></tr>
<tr><td align="center"><button class="button" onmousedown="toggleCheckbox('left');" ontouchstart="toggleCheckbox('left');">Left</button></td><td align="center"></td><td align="center"><button class="button" onmousedown="toggleCheckbox('right');" ontouchstart="toggleCheckbox('right');">Right</button></td></tr>
<tr><td colspan="3" align="center"><button class="button" onmousedown="toggleCheckbox('down');" ontouchstart="toggleCheckbox('down');">Down</button></td></tr>
</table>
При нажатии на кнопки вызывается JavaScript-функция toggleCheckbox(). Она выполняет запрос к различным URL в зависимости от нажатой кнопки.
function toggleCheckbox(x) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/action?go=" + x, true);
xhr.send();
}
Вот запросы, выполняемые в зависимости от нажатой кнопки:
Вверх:
/action?go=up
Вниз:
/action?go=down
Влево:
/action?go=left
Вправо:
/action?go=right
Обработка запросов
Затем нам нужно обработать, что происходит при получении этих запросов. Это делается в следующих строках.
if(!strcmp(variable, "up")) {
if(servo1Pos <= 170) {
servo1Pos += 10;
servo1.write(servo1Pos);
}
Serial.println(servo1Pos);
Serial.println("Up");
}
else if(!strcmp(variable, "left")) {
if(servo2Pos <= 170) {
servo2Pos += 10;
servo2.write(servo2Pos);
}
Serial.println(servo2Pos);
Serial.println("Left");
}
else if(!strcmp(variable, "right")) {
if(servo2Pos >= 10) {
servo2Pos -= 10;
servo2.write(servo2Pos);
}
Serial.println(servo2Pos);
Serial.println("Right");
}
else if(!strcmp(variable, "down")) {
if(servo1Pos >= 10) {
servo1Pos -= 10;
servo1.write(servo1Pos);
}
Serial.println(servo1Pos);
Serial.println("Down");
}
Чтобы переместить мотор, вызовите функцию write() на объекте servo1 или servo2 и передайте угол (от 0 до 180) в качестве аргумента. Например:
servo1.write(servo1Pos);
setup()
В setup() задайте свойства сервоприводов: определите частоту сигнала.
servo1.setPeriodHertz(50); // standard 50 hz servo
servo2.setPeriodHertz(50); // standard 50 hz servo
Используйте метод attach() для установки GPIO сервопривода и минимальной и максимальной длительности импульса в микросекундах.
servo1.attach(SERVO_1, 1000, 2000);
servo2.attach(SERVO_2, 1000, 2000);
Установите моторы в начальное положение при первой загрузке ESP32.
servo1.write(servo1Pos);
servo2.write(servo2Pos);
Вот как работает код в части управления сервоприводами.
Тестирование кода
После ввода сетевых учётных данных вы можете загрузить код на плату. Вы можете использовать программатор FTDI или программатор ESP32-CAM MB. Прочитайте одну из следующих статей:
После загрузки откройте монитор порта (Serial Monitor), чтобы получить IP-адрес платы.
Примечание
Если вы используете программатор FTDI, не забудьте отключить GPIO 0 от GND перед открытием монитора порта.
Откройте браузер и введите IP-адрес платы, чтобы получить доступ к веб-серверу. Нажмите на кнопки и проверьте в мониторе порта, что всё работает как ожидается.
Если всё работает как ожидается, вы можете подключить сервоприводы к ESP32-CAM и продолжить проект.
Схема подключения
После сборки поворотно-наклонной платформы подключите сервоприводы к ESP32-CAM, как показано на следующей схеме. Мы подключаем контакты данных сервоприводов к GPIO 15 и GPIO 14.
Вы можете использовать мини-макетную плату для сборки схемы или создать мини-плату с штырьковыми разъёмами для подключения питания, ESP32-CAM и моторов, как показано ниже.
На следующем рисунке показано, как выглядит поворотно-наклонная платформа после сборки.
Демонстрация
Подайте питание на плату. Откройте браузер и введите IP-адрес ESP32-CAM. Должна загрузиться веб-страница с видеопотоком в реальном времени. Нажимайте кнопки, чтобы перемещать камеру вверх, вниз, влево или вправо.
Вы можете перемещать камеру удалённо с помощью кнопок на веб-странице. Это позволяет наблюдать за различными зонами в зависимости от положения камеры. Это отличное решение для систем видеонаблюдения.
Заключение
В этом руководстве вы узнали, как создать веб-сервер с видеопотоком и поворотно-наклонной платформой для управления ESP32-CAM.
Управление сервоприводами с ESP32-CAM аналогично управлению ими с «обычного» ESP32. Вы можете прочитать следующее руководство, чтобы узнать больше о сервоприводах с ESP32:
Если вы хотите управлять роботом за пределами вашей локальной сети, вы можете рассмотреть настройку ESP32-CAM в качестве точки доступа. В этом случае ESP32-CAM не нужно подключаться к маршрутизатору. Она создаёт собственную Wi-Fi сеть, и ближайшие Wi-Fi устройства, например ваш смартфон, могут к ней подключиться.