Модуль ESP32-CAM - это доступное и компактное решение, которое сочетает в себе микроконтроллер ESP32 и камеру OV2640. Благодаря своей низкой цене и широким возможностям он стал популярным выбором среди разработчиков проектов в области IoT, компьютерного зрения и робототехники.

В данной статье я собрал серию из 15 практических уроков, каждый из которых сопровождается видео и исходным кодом. Вместе мы пройдём путь от базового примера захвата изображения до реализации алгоритмов компьютерного зрения и даже интеграции TensorFlow Lite для классификации объектов прямо на ESP32-CAM.

Материалы организованы по нарастающей сложности: начиная с простого веб-интерфейса и работы с памятью устройства, и заканчивая фильтрацией изображений, преобразованием Хафа и нейронными сетями. Для каждого урока вы найдёте:

  • 📹 видео с разбором темы

  • 📂 GitHub-репозиторий с исходным кодом

  • 📝 текстовое summary с описанием ключевых моментов.

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

👉 Плейлист из 15 видеоуроков:
VK: https://vkvideo.ru/playlist/63898488_2
YouTube: https://youtube.com/playlist?list=PLU_7Rgz8DWYtQO9BM9VGHVi-471koGOc7&si=UuY-HkdgC4KrlJIk
👉 Репозиторий с кодом всех уроков:
https://github.com/DenissStepanjuk/ESP32-CAM_TUTORIALS

ESP32-CAM 01: Захват кадра

VK: https://vkvideo.ru/playlist/63898488_2/video63898488_456239450?linked=1?t=4s
GitHub: https://github.com/DenissStepanjuk/ESP32-CAM_TUTORIALS/tree/main/001_ESP32-CAM_capture

В этом видео начинается серия уроков по работе с модулем ESP32-CAM — микроконтроллером ESP32 со встроенной камерой. Показан базовый пример захвата изображения и его отображения на компьютере через веб-интерфейс.

Основные моменты ролика:

  • Обзор модуля ESP32-CAM и его возможностей для проектов компьютерного зрения.

  • Подключение платы к ПК через программатор с microUSB.

  • Подготовка Arduino IDE: установка плат ESP32 и необходимых библиотек (WiFi, ESP WebServer, WebSockets, ArduinoJson, ESP32 Camera).

  • Настройка камеры через файл camera_config.h (пины, разрешение кадра, формат JPEG, качество изображения).

  • Подключение ESP32-CAM к локальной Wi-Fi сети и получение IP-адреса.

  • Создание простого веб-сервера с HTML-страницей и кнопкой Capture для захвата кадра.

  • Использование WebSockets для обмена данными между микроконтроллером и браузером.

  • Реализация логики: при нажатии кнопки кадр фиксируется и отображается в браузере.

  • Демонстрация работы: однократный захват кадра и модификация кода для стриминга видео.

ESP32-CAM 02: microSD и SPIFFS

VK: https://vkvideo.ru/playlist/63898488_2/video63898488_456239451?linked=1?t=3s
GitHub: https://github.com/DenissStepanjuk/ESP32-CAM_TUTORIALS/tree/main/002_ESP32-CAM_memory

Во втором видео серии рассматриваются способы работы с памятью модуля ESP32-CAM. Показано, как сохранять и считывать изображения с камеры на карту microSD и во внутреннюю файловую систему SPIFFS.

Основные моменты ролика:

  • Обзор вариантов памяти в ESP32-CAM:

    • microSD карта (внешняя память, подходит для хранения большого количества изображений).

    • SPIFFS (встроенная файловая система во флеше ESP32).

  • Подключение и инициализация microSD:

    • Использование библиотеки SD_MMC.h.

    • Проверка корректности монтирования карты памяти.

    • Создание и запись файлов (JPEG-кадров) на microSD.

  • Работа со SPIFFS:

    • Подключение библиотеки SPIFFS.h.

    • Форматирование, монтирование и работа с файловой системой.

    • Запись и чтение файлов внутри флеш-памяти микроконтроллера.

  • Сравнение microSD и SPIFFS:

    • microSD удобна для хранения больших объёмов данных,

    • SPIFFS — быстрый и простой вариант для небольших файлов и настроек.

  • Демонстрация работы: сохранение изображений с камеры на microSD и в SPIFFS, чтение и проверка содержимого.

ESP32-CAM 03: элементы управления

VK: https://vkvideo.ru/playlist/63898488_2/video63898488_456239452?linked=1?t=19s
GitHub: https://github.com/DenissStepanjuk/ESP32-CAM_TUTORIALS/tree/main/003_ESP32-CAM_sensor_control

В третьем видео серии рассматривается, как создать веб-интерфейс для управления параметрами камеры ESP32-CAM. Показано, как реализовать разные элементы управления (радиокнопки, ползунки и переключатели On/Off), которые позволяют изменять настройки изображения в реальном времени.

Основные моменты ролика:

  • Использование встроенного веб-сервера ESP32-CAM для отображения HTML-страницы управления.

  • Подключение к структуре данных сенсора через esp_camera_sensor_get() для изменения параметров камеры.

  • Реализация трёх типов элементов управления:

    • Радиокнопки — выбор фильтров для изображения (например, негатив, красный оттенок и др.).

    • Ползунки — настройка параметров с диапазоном значений (например, яркость и контраст).

    • Переключатели On/Off — включение и отключение функций (например, баланс белого или отражение).

  • Передача данных между веб-страницей и микроконтроллером с помощью WebSockets и JSON-сообщений.

  • Логика синхронизации: изменения с веб-интерфейса применяются к камере, а камера отправляет обновлённое состояние обратно в браузер.

  • Демонстрация работы: выбор фильтров, регулировка яркости и включение/выключение параметров отображаются сразу в итоговом кадре.

ESP32-CAM 04: рисунок поверх изображения

VK: https://vkvideo.ru/playlist/63898488_2/video63898488_456239453?linked=1?t=8s
GitHub: https://github.com/DenissStepanjuk/ESP32-CAM_TUTORIALS/tree/main/004_ESP32-CAM_draw

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

Основные моменты ролика:

  • Получение кадра с камеры в формате JPEG и отправка его в браузер.

  • Конвертация изображения в формат RGB888, позволяющий работать напрямую с пикселями.

  • Структура RGB888: каждый пиксель описывается тремя байтами (R, G, B), что позволяет изменять цвет отдельных точек.

  • Демонстрация низкоуровневого доступа к пикселям (закрашивание отдельных областей напрямую).

  • Использование библиотеки FB_GFX для рисования:

    • прямоугольники, линии, буквы и текст;

    • работа с цветами через битовые комбинации.

  • Создание собственных функций:

    • рисование окружности (через расчёт координат по синусу и косинусу),

    • затемнение участка изображения (понижение яркости в выбранном прямоугольнике).

  • Конвертация изменённого кадра обратно в JPEG и передача на веб-страницу через WebSockets.

  • Итог: возможность накладывать графику и текст на изображения с камеры ESP32-CAM в реальном времени.

ESP32-CAM 05: объединение изображений

VK: https://vkvideo.ru/playlist/63898488_2/video63898488_456239454?linked=1?t=11s
GitHub: https://github.com/DenissStepanjuk/ESP32-CAM_TUTORIALS/tree/main/005_ESP32-CAM_combination

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

Основные моменты ролика:

  • Инициализация microSD-карты для хранения логотипа.

  • Захват изображения с матрицы камеры в формате JPEG.

  • Чтение логотипа с карты памяти и загрузка его в буфер.

  • Конвертация обоих изображений (фотографии и логотипа) из формата JPEG в RGB888 для работы с пикселями.

  • Реализация функции insertLogo(), которая принимает:

    • исходное изображение,

    • логотип,

    • их размеры,

    • координаты вставки.

  • Итерация по пикселям и замена соответствующих участков исходного изображения пикселями из логотипа.

  • Конвертация итогового изображения обратно в JPEG и отправка в браузер через WebSockets.

  • Демонстрация результата: фото с камеры с наложенным логотипом.

ESP32-CAM 06: обрезка изображения

VK: https://vkvideo.ru/playlist/63898488_2/video63898488_456239455?linked=1?t=8s
GitHub: https://github.com/DenissStepanjuk/ESP32-CAM_TUTORIALS/tree/main/006_ESP32-CAM_crop

В этом видео показывается, как реализовать обрезку (crop) изображения на ESP32-CAM. Демонстрируется процесс выделения части кадра, её сохранения и последующей отправки в браузер.

Основные моменты ролика:

  • Захват изображения с матрицы камеры в формате JPEG.

  • Инициализация буфера под обрезанное изображение.

  • Реализация функции crop(), которая принимает:

    • исходное изображение и его размеры,

    • координаты верхнего левого угла области обрезки,

    • ширину и высоту новой области.

  • Конвертация исходного кадра из JPEG в RGB888 для доступа к пикселям.

  • Проверка границ: чтобы область обрезки не выходила за пределы исходного изображения.

  • Итерация по пикселям выбранного участка и запись их в новый буфер.

  • Конвертация результата обратно в JPEG и передача изображения на веб-страницу через WebSockets.

  • Де��онстрация работы: после захвата кадра автоматически отображается обрезанная часть изображения.

ESP32-CAM 07: масштабирование изображения

VK: https://vkvideo.ru/playlist/63898488_2/video63898488_456239456?linked=1?t=3m50s
GitHub: https://github.com/DenissStepanjuk/ESP32-CAM_TUTORIALS/tree/main/007_ESP32-CAM_resize

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

Основные моменты ролика:

  • Захват изображения с камеры в формате JPEG и передача его в браузер.

  • Конвертация изображения из JPEG в RGB888 для работы с пикселями.

  • Реализация функции resizeRGBMatrix(), которая принимает:

    • буфер с исходным изображением,

    • его размеры,

    • буфер для нового изображения,

    • целевую ширину и высоту.

  • Расчёт коэффициентов масштабирования по осям X и Y.

  • Итерация по пикселям нового изображения и сопоставление им соответствующих пикселей исходного кадра.

  • Запись преобразованных данных в новый буфер.

  • Конвертация результата обратно в JPEG и отправка изображения в браузер через WebSockets.

  • Демонстрация работы: увеличение исходного кадра с 640×480 до 1000×1000 пикселей и уменьшение до 199×102.

ESP32-CAM 08: сравнение изображений

VK: https://vkvideo.ru/playlist/63898488_2/video63898488_456239457?linked=1?t=14m36s
GitHub: https://github.com/DenissStepanjuk/ESP32-CAM_TUTORIALS/tree/main/008_ESP32-CAM_difference_detection

В этом видео рассматривается, как сравнить два изображения на ESP32-CAM и использовать это для детекции движения или изменений в кадре.

Основные моменты ролика:

  • Интерфейс содержит две кнопки:

    • Set Main — захват основного изображения для сравнения,

    • Get Current — получение текущего изображения для анализа.

  • Оба изображения переводятся из JPEG в формат RGB888 для работы с пиксельными данными.

  • Алгоритм сравнения:

    • для каждого пикселя вычисляется разница по красной, зелёной и синей компонентам,

    • значения суммируются по всем пикселям,

    • дополнительно рассчитывается среднее значение.

  • Полученные показатели выводятся в веб-интерфейсе и в последовательный порт.

  • Демонстрация работы:

    • при статичной сцене разница минимальна,

    • при изменении (например, движении руки в кадре) значения резко возрастают, фиксируя факт движения.

ESP32-CAM 09: детекция линии

VK: https://vkvideo.ru/playlist/63898488_2/video63898488_456239458?linked=1?t=6s
GitHub: https://github.com/DenissStepanjuk/ESP32-CAM_TUTORIALS/tree/main/009_ESP32-CAM_line_borders_detection

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

Основные моменты ролика:

  • Захват изображения с камеры в формате JPEG и передача его в браузер.

  • Конвертация кадра из JPEG в RGB888, а затем в градации серого (чёрно-белое изображение).

  • Реализация функции jpegToGray(), которая переводит каждый пиксель по формуле:
    Gray = 0.114*Blue + 0.587*Green + 0.299*Red.

  • Анализ чёрно-белого изображения по заданным горизонтальным линиям (Y-координатам):

    • поиск резких перепадов значений пикселей (белый → чёрный и чёрный → белый),

    • определение левой и правой границ линии,

    • вычисление координаты центра.

  • Реализация функции findBorders(), которая возвращает координаты X для найденных границ.

  • Визуализация результата: рисование найденных линий и границ поверх изображения с помощью библиотеки FB_GFX.

  • Демонстрация работы: камера успешно находит и отмечает границы линии на листе с наклеенной полосой.

ESP32-CAM 10: определение цвета

VK: https://vkvideo.ru/playlist/63898488_2/video63898488_456239459?linked=1?t=13m23s
GitHub: https://github.com/DenissStepanjuk/ESP32-CAM_TUTORIALS/tree/main/010_ESP32-CAM_color_detector

В этом видео рассматривается алгоритм распознавания цвета на выделенном участке изображения с камеры ESP32-CAM.

Основные моменты ролика:

  • Захват изображения с камеры и отображение его в браузере.

  • Определение области (окошка) в центре кадра, в которой вычисляется цвет.

  • Представление каждого пикселя как трёхмерного вектора (R, G, B), где значения варьируются от 0 до 255.

  • Расчёт среднего значения компонент (R, G, B) на выделенной области для уменьшения ошибки (учёт освещённости, шумов и битых пикселей).

  • Сравнение полученного «неизвестного» цвета с набором заранее измеренных эталонных цветов (красный, оранжевый, жёлтый, зелёный, голубой, фиолетовый, белый, чёрный и др.).

  • Использование евклидова расстояния для поиска ближайшего цвета: чем меньше расстояние до эталона, тем выше вероятность совпадения.

  • Реализация функций:

    • colorDifference() — вычисление расстояния между цветами,

    • getColorName() — выбор ближайшего цвета из базы,

    • detectColor() — усреднение по области и определение итогового цвета.

  • Передача результата на веб-страницу через WebSockets и отображение названия цвета в реальном времени.

  • Демонстрация работы: корректное определение разных цветов бумаги (красный, оранжевый, жёлтый, зелёный, голубой, фиолетовый, белый, чёрный).

ESP32-CAM 11: HSV цветовой фильтр

VK: https://vkvideo.ru/playlist/63898488_2/video63898488_456239460?linked=1?t=24m29s
GitHub: https://github.com/DenissStepanjuk/ESP32-CAM_TUTORIALS/tree/main/011_ESP32-CAM_color_mask

В этом видео мы изучаем, как выделять определённые цвета на изображении, получаемом с модуля камеры ESP32-CAM, используя HSV цветовой формат.

Основные моменты ролика:

  • Выбор диапазона цвета

    • Задание диапазонов оттенка, насыщенности и яркости для выделения красного цвета.

    • Изменение диапазона оттенка для выделения зелёного цвета.

    • Примечание: точные значения зависят от освещённости и сцены.

  • Преобразование изображения из RGB в HSV

    • Кадр сначала переводится из JPEG в формат RGB888.

    • Каждый пиксель преобразуется в HSV:

      • Hue (оттенок) – определяет цвет.

      • Saturation (насыщенность) – интенсивность цвета.

      • Value (яркость) – светлота цвета.

    • Все компоненты нормализованы в диапазон 0–255 для удобства обработки.

  • Алгоритм RGB → HSV

    • Определение минимального и максимального значения RGB-компонент.

    • Вычисление дельты (разницы между максимумом и минимумом).

    • Расчёт яркости, оттенка и насыщенности.

    • Сохранение результата в HSV-буфер.

  • Применение маски цвета

    • Использование функции applyMask для фильтрации цветов.

    • Пиксели в пределах заданного диапазона HSV остаются цветными, остальные становятся белыми.

    • После обработки результат конвертируется обратно в JPEG и отправляется на веб-страницу.

  • Демонстрация работы

    • Успешное выделение объектов заданного цвета (например, красной отвёртки или зелёной полосы).

    • Обсуждение влияния диапазонов и шумов на результат.

Итог: с помощью ESP32-CAM и HSV-фильтра можно выделять определённые цвета на изображении, управлять параметрами через веб-интерфейс и визуализировать выбранные области.

ESP32-CAM 12: операция свёртки

VK: https://vkvideo.ru/playlist/63898488_2/video63898488_456239461?linked=1?t=24m49s
GitHub: https://github.com/DenissStepanjuk/ESP32-CAM_TUTORIALS/tree/main/012_ESP32-CAM_convolution

В этом видео рассматривается, как применять операцию свёртки (convolution) для обработки изображений с камеры ESP32-CAM.

Основные моменты ролика:

  • Преобразование изображения в чёрно-белое

    • Конвертация кадра из JPEG в RGB888, затем в grayscale.

    • Для вычисления серого пикселя используется формула:

      • Красный × 0.299

      • Зелёный × 0.587

      • Синий × 0.114

    • Чёрно-белое изображение используется как одноканальное для упрощения свёртки.

  • Применение свёртки

    • Функция convolution принимает изображение, ядро оператора и размеры.

    • Примеры используемых операторов:

      • Идентичное преобразование – без изменений.

      • Размытие, резкость, выделение границ.

      • Лаплас, Робертс, Собель, Превит.

    • Алгоритм: проход по каждому пикселю, умножение значений на элементы ядра и суммирование.

    • Для операторов типа Робертс/Собель результат вычисляется как √(X² + Y²).

  • Работа с результатами

    • Результат сохраняется в отдельный буфер.

    • Конвертация обратно в JPEG и отправка на веб-страницу.

    • Учёт уменьшения размера изображения в зависимости от ядра.

  • Демонстрация работы

    • Применение разных операторов и визуализация их эффектов.

    • Объяснение влияния ядра на выделение границ и улучшение резкости.

Итог: с помощью ESP32-CAM и операции свёртки можно реализовать разные фильтры обработки изображений: размытие, повышение резкости и выделение контуров.

ESP32-CAM 13: преобразование Хафа для окружностей

VK: https://vkvideo.ru/playlist/63898488_2/video63898488_456239462?linked=1?t=23m15s
GitHub: https://github.com/DenissStepanjuk/ESP32-CAM_TUTORIALS/tree/main/013_ESP32-CAM_Hough_transform_circle

В этом видео показано, как детектировать окружности на изображении с камеры ESP32-CAM с помощью алгоритма преобразования Хафа. Захват изображения с объектами разного диаметра (например, монеты).

Основные моменты ролика:

  • Преобразование изображения

    • Конвертация исходного кадра в grayscale.

    • Выделение контуров оператором Лапласа.

    • Удаление шумов функцией DeleteNoise, зануляющей одиночные пиксели.

  • Алгоритм Хафа для окружностей

    • Для каждого белого пикселя изображения строится окружность с заданным радиусом в «пространстве Хафа».

    • При совпадении с окружностью на исходном изображении в центре накапливается максимум яркости.

    • Определяются координаты центров окружностей.

    • Используются порог яркости и проверка расстояния между точками для исключения дублей.

  • Работа с результатами

    • Сохранение координат центров в массивы и вывод их количества в порт.

    • Визуализация найденных окружностей на исходном RGB888 изображении.

  • Демонстрация работы

    • Корректная детекция окружностей одинакового радиуса, игнорирование других объектов.

    • Устойчивость алгоритма при перемещении объектов в кадре.

Итог: алгоритм преобразования Хафа позволяет ESP32-CAM эффективно находить окружности на изображении, отфильтровывать шумы и отображать результат на веб-странице.

ESP32-CAM 14: преобразование Хафа для прямых линий

VK: https://vkvideo.ru/playlist/63898488_2/video63898488_456239463?linked=1?t=1s
GitHub: https://github.com/DenissStepanjuk/ESP32-CAM_TUTORIALS/tree/main/014_ESP32-CAM_Hough_transform_line

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

Основные моменты ролика:

  • Выделение контуров и шумоподавление

    • Использование операции свёртки и оператора Лапласа для выделения границ объектов.

    • Фильтрация шумов: удаление одиночных и изолированных пикселей.

  • Алгоритм Хафа для линий

    • Для каждого белого пикселя с контурами строятся линии под углами от -90° до 90°.

    • Параметры (угол θ и расстояние R) откладываются в «пространстве Хафа».

    • В ярких точках пространства накапливаются линии, соответствующие реальным контурам.

  • Фильтрация и объединение линий

    • Линии, лежащие почти на одной траектории, объединяются.

    • Проверяется евклидово расстояние между линиями для исключения дублей.

  • Визуализация результата

    • Координаты найденных линий преобразуются обратно на исходное изображение.

    • Построение линий поверх объектов (например, зубочисток) для отображения результата.

Итог: алгоритм преобразования Хафа позволяет ESP32-CAM корректно выделять прямые линии, фильтровать шумы и визуализировать контуры объектов на изображениях.

ESP32-CAM 15: TensorFlow Lite — классификация изображений

VK: https://vkvideo.ru/playlist/63898488_2/video63898488_456239464?linked=1?t=1s
GitHub: https://github.com/DenissStepanjuk/ESP32-CAM_TUTORIALS/tree/main/015_ESP32-CAM_Classification

В этом видео показывается, как реализовать классификацию изображений на микроконтроллере ESP32-CAM с использованием TensorFlow Lite.

Основные моменты ролика:

  • Подготовка датасета

    • Захват изображений объектов с помощью ESP32-CAM.

    • Сохранение кадров на microSD-карте.

    • Организация данных по категориям (например, матрёшка, мышь, гаечный ключ).

  • Создание и обучение сверточной нейронной сети (CNN)

    • Использование Python и Jupyter Notebook для подготовки модели.

    • Разделение данных на тренировочные и проверочные (10% для проверки).

    • Применение аугментации изображений для повышения устойчивости модели.

    • Построение CNN с несколькими свёрточными слоями и функцией softmax для классификации.

    • Обучение модели на 150 эпох с контролем точности и ошибки.

  • Конвертация модели в TensorFlow Lite (TFLite)

    • Исходная модель формата H5 (~12 МБ) слишком велика для ESP32-CAM.

    • Преобразование в формат TFLite с 8-битной квантовкой для работы на микроконтроллере.

    • Подготовка representative dataset для конвертации.

    • Проверка точности облегчённой модели (~83%).

  • Загрузка модели на ESP32-CAM и интеграция

    • Использование Arduino IDE и библиотеки TensorFlow Lite для ESP32.

    • Инициализация интерпретатора и выделение памяти под вычисления.

    • Настройка веб-интерфейса для захвата снимков и вывода результатов.

    • Предобработка изображений: изменение размера, нормализация пикселей в диапазон [-128, 127].

    • Вывод вероятностей классов в реальном времени на веб-странице.

  • Демонстрация работы модели

    • Классификация объектов: матрёшка, мышь, гаечный ключ.

    • Отображение распределения вероятностей для каждого класса.

    • Проверка работы модели на реальных изображениях.

Итог: ESP32-CAM успешно классифицирует объекты в реальном времени с помощью оптимизированной CNN в формате TensorFlow Lite. Веб-интерфейс позволяет получать снимки и визуализировать результаты классификации.