ESP32-Cam Как сделать стоп кадр из видео, сохранить его на SD карту, просмотреть и удалить не нужное.

В этом примере, я покажу как можно вывести на экран видео с камеры для просмотра. Нажатием на кнопку можно сохранить текущий кадр, вывести все файлы в виде названий отсортированных по дате, посмотреть их, а затем удалить ненужные. И всё это не отключая камеру и не доставая SD карту.
ESP32-Cam Как сделать стоп кадр из видео, сохранить его на SD карту, просмотреть и удалить не нужное.
Продолжаем разбор камеры OV2640 на базе платы ESP32. Это уже 5 видео из этой серии, а есть ещё много разных интересных примеров, и если они вам ещё не надоели, то пишите, и скоро вы их увидите.

Приветствую всех моих подписчиков и гостей канала.

Давайте подумаем для чего это может пригодиться. Ну, например.

• Для защиты дома от проникновения злоумышленников.
• Предупреждения краж и хищений сотрудниками.
• Повышения качества обслуживания клиентов.
• Выявления и наказания сотрудников за различные нарушения.
• Установки личности виновных при порче имущества.
• Создания доказательной базы для передачи правоохранительным органам
• и другое.

Посмотрим как это работает.
Сначала загружается вот такой интерфейс. Отсюда можно перезагрузить камеру, Запустить или остановить потоковое вещание. При работе видео оно никуда не записывается, просто показывает что творится по ту сторону. При нажатии кнопки сохранить, на SD карту сохраняется текущий кадр. Все стоп кадры можно вывести на экран в виде списка. И каждый из файлов можно просмотреть и удалить.

Так же можно менять яркость светодиода подсветки, Разрешение и качество картинки, а также яркость, контрастность и насыщенность всей видео и соответственно сохранённых файлов.
Теперь запускаем просмотр видео. Сейчас у меня установлено разрешение SXGA это значит 1280х1024. Сохраним этот кадр. Нажимаем сохранить и видим что у нас в списке файлов появилась новая строка, где указано имя файла состоящее из даты и времени и размера файла в битах. Так же здесь есть кнопки  посмотреть сохранённое изображение и кнопка удаления.
Сохраним ещё один файл. Видите, в списке появилась вторая строка. Самая верхняя строчка - это последний сохранённый файл. А ещё он обведён в красную рамочку. Немного передвинем камеру, что бы никто не подумал, что это не камера снимает, а просто статичное изображение, и сделаем ещё один стоп-кадр.
Ну и ещё несколько, что бы было что посмотреть.

Съёмка производится из окна, через стеклопакет, поэтому качество может показаться не очень, и расстояние до объекта метров 120-150. И не улице пасмурно, поэтому освещения маловато, а это тоже влияет на качество.

Ну вроде сделали достаточно фоток с таким разрешением. Если вам надо изменить разрешения для простора, и соответственно для сохранения, то можете выбрать любое из выпадающего списка. Размер экрана изменится. Ничего делать не надо это произойдёт автоматически. Иногда, при очень большом разрешении и при слабом сигнале WIFI изменения размера будет с небольшой задержкой. Если у вас вдруг изменения не вступили в силу, то можете перегрузить страницу браузера. У меня с этим проблем не было, ну если только небольшое притормаживание при самом высоком разрешении.

Что бы закрыть окно просмотра видео, его надо остановить. Для этого нажимаем Стоп и окно пропадает. Что бы убрать меню настроек камера, надо щёлкнуть по эти полоскам. Окно свернётся и не будет вам мешать. Для продолжения просмотра надо снова нажать на кнопку видео.
В режиме воспроизведения можно также скрыть кнопки управления если они вам мешают. Яркость свечения светодиода подсветки можно регулировать ползунком. Яркость свечения будет меняться так же как и в любом примере про светодиод. Применять его можно когда вы находитесь в небольшой комнате и свет от светодиода добивает до снимаемого объекта. У меня это не так и всё что у меня изменилось, так это появились несколько световых пятен отражения от оконного стекла.

А вот кнопки Яркость, контрастность и насыщенность вполне возможно использовать в любом случае. Я в своих примерах, когда делаю видео в пределах слабоосвещённой комнаты всегда выставляю эти значения на максимум, ну или в крайних случаях на единичку. Эти значения хорошо влияют на качество изображения, особенно яркость и насыщенность.
Для работы с файлами, для просмотра или удаления надо остановить просмотр, так как фото появляется в том же окне что и видео и если вы не остановите то и вас будет постоянно подгружаться видео и вы не увидите сохранённое фото.

Нажимая поочерёдно на кнопки просмотра вы можете посмотреть все сохранённые сто-кадры. Они будут в таком же разрешении в каком были в момент сохранения при просмотре видео. Если изображение будет большое, то оно опустит меню настройки и список файлов ниже по экрану. Если у вас большой список сохранённых фото, то они не уместятся на одном экране, поэтому появится полоса прокрутки и добраться до них будет возможно прокрутив список вниз.

Теперь удалим несколько файлов. Теперь для этого не для останавливать камеру, вытаскивать SD карту из модуля, вставлять в картридер на компьютере. Вы сможете сделать всё это в том же списке. Нажимая кнопку удалить напротив нужного файла вы удалите все не нужные и тем самым почистите флэшку.
Выше списка с файлами, красным цветом будет показано название последнего удалённого файла.
Теперь удалим остаток файлов и пробежимся по скетчу. Скетч будет очень большой, но это в основном из-за HTML страницы. Сам код мало чем отличается от рассмотренных ранее.
Сверху как обычно указываем название своей WIFI сети и пароль к ней.

Библиотеки думаю, что никакие устанавливать не придётся, так как они все стандартные и уже входят кв комплект при установке ARDUINO IDE и ESP32-Cam.
Это переменные для хранения значений которые мы будем отправлять по get запросу на свой сервер для вывода нужной информации.
Первая часть кода не представляет никакого интереса, так как она полностью повторяет код из первых четырёх видео. Если вам что то не понятно, то ищите информацию там. Здесь мы останавливаться не будем. Весь код я постарался прокомментировать и при желании вы сможете в нём разобраться. И тем кто смотрел предыдущие примеры будет всё понятно. Здесь обычное подключение ESP к WIFI сети, получение IP адреса, установка и настройка камеры.

Проверяем get запрос и если он соответствует этому условию, то делаем соответствующие действия.
Если в URL странице после вашего IP адреса стоит переменная со значением cmd и restart, то перезагружаем плату, а если FLASH то изменяем яркость светодиода.
Есть возможность перезагрузить WIFI соединение с последующими проверками и получением ip.

Это проверки, что бы знать какие сейчас параметры разрешения видео, качества, яркости, контрастности и насыщенности, и если они изменились, то выполнить изменения на странице.
То же самое для списка файлов и для работы с кнопками показать сохранённое фото и удалить фотографию с SD карты.
Если вы не знаете что такое GET запрос, то посмотрите видео на моём канале, там я подробно рассказывал что это такое и как ими пользоваться.
Дальше идёт HTML код. Это самый большой кусок кода в этом примере. Он отвечает за создание элементов на web странице, за их размер, цвет и текст и всё остальное.
Сначала идёт CSS. Это таблица стилей, где прописаны всё что я только что рассказал. Я не буду объяснять что и как здесь работает, а опять сошлюсь на то что я уже много раз рассказывал как это работает во многих примерах и тогда когда мы делали локальный WEB сервер.  
Можно остановиться на списке файлов.

Это iframe. Шириной 410 и высотой 200 пикселов. Вы можете изменить размер на свой, и он отступает от левого края на 400 пикселов.
Вы так же можете перенести его в любое место страницы.

Этот блок HTML кода отвечает за настройки камеры. Это кнопки, ползунки и выпадающий список с разрешением экрана видео. Здесь указаны максимальные и минимальные значения, а так же значения указанные по умолчанию. Это те значения которые будут постоянно загружаться при перезагрузке страницы.

Дальше идёт JAVASCRIPT. Он очень сложен для понимания, и те кто его знают, сами поймут что он делает, а остальным мне будет трудно объяснить. Так что извиняйте.
Это некоторые функции проверок на ошибки. При получении ошибок снизу под настройками будет выведен текст ошибки красным цветом.
А здесь формируется путь и название файла. По умолчанию название файла будет текущие дата и время.

Это ещё один набор проверок на ошибки. Первый это сбой при захвате камеры, а  остальные это ошибки в работе с модулем SD карт.
Эта таблица выводит список сохранённый файлов-фотографий. Здесь формируются столбцы, Удалить, Имя файла, Размер в байтах, и кнопка отвечающая за просмотр. Каждая строка – это новый файл. Они располагаются в порядке убывания. Новый всегда сверху. Ну и на самом верху выводится информация о последнем удалённом файле.
Вот вроде всё что хотел рассказал.

Мне показалось, что это интересный пример. У меня есть ещё много таких. Если интересно, то пишите, ставьте лайк, делитесь этим видео с друзьями. Мне это очень поможет.
 

Примеры использование модуля ESP32-CAM
esp 32 cam. Плата ESP с камерой ov2640 Установка ESP32, подключение.
esp32 камера примеры Фотографии сохранение на SD карту
ESP32-CAM датчик движения HC-SR501 Телеграм
отправить фотографию в Телеграм
ESP32-Cam Как сделать стоп кадр из видео, сохранить его на SD карту, просмотреть и удалить не нужное.
Используем ESP32-CAM. 5 Проектов и неограниченные возможности