Flask

https://habr.com/ru/articles/783352/ - Оригинал

Камеры видеонаблюдения стали для многих стран обыденностью, например в Китае, они могут свисать гроздьями, через каждые 5 метров, по улице. Но в провинции России это все еще может быть в новинку. Я отношусь к видеонаблюдению по большей мере положительно. Ведь вид камеры, даже превентивно может предотвратить хулиганство (однажды я использовал муляжи камер в офисе:)), а главное это возможность контролировать объект наблюдения.

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

Монтаж

Внутри помещения, я уже успешно использовал камеры фирмы vstarcam, по этому, лояльное отношение, подтолкнуло сделать заказ на али vstarcam CS64. Забегая вперед скажу, что это не лучший выбор - мыльная картинка, как будто нет даже заявленных 3 МегаПикселей.
План таков: повесить на внешнюю стену электрическую распределительную коробку, внутрь нее поместить блок питания, на крышку прикрепить камеру. Сигнал передается по wi-fi, питание - провести кабель через раму окна.

Примерный бюджет: ip-камера 3500р., коробка 600р., винтики-гаечки (продаются в леруа на развес) 5р., кабель/вилка/клеммы 200р.

Порядок работ:

1. Блок питания закинут в коробку(не стал его там крепить), отрезан кабель питания. На клеммы прикрутил новый кусок кабеля(брал его с запасом, но в итоге понадобилась только половина), кабель вывел из коробки;

2. В крышке коробки(она съемная), просверлил 4 отверстия и закрепил на ней камеру болтами с гайками;

3. Вылез из окна во внешний мир и под окном просверлил отверстия в стене, вбил дюпеля. Прикрутил открытую коробку, из которой, пока что, болтается моток кабеля.

4. Взял крышку с камерой, продел и подключил внутрь коробки кабеля(питание и не нужный lan), закрыл крышку, таким образом смонтировав камеру.

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

Мотивом для дальнейшей части повествование было желание поделится с соседями видом со стены, ну и желание разобраться как захватывать видеопоток. Не было желания объяснять старшему поколению, как работает стандартное приложение eye4, по этому я решил реализовать веб страничку. Деплой будет на, уже обитавшую для домашних проектов, raspberry pi 4 4Gb.

В спецификации камеры было указано что она умеет в rtsp, его и выбрал. ip адрес камеры было просто вычислить в настройках маршрутизатора и задать его статичным. Предварительно надо было получить ссылку на видеопоток - а его нет! Я аж вспомнил nmap, а то мало ли с портом промахнулся. В документации нет ни слова, оказывается, в отличии от предыдущих моделей, в программе eye4, зайдя в настройки камеры надо включить опцию "незащищенный пароль". И как то напахнуло старыми китайскими девайсами, с непонятными настройками.

Итоговая ссылка rtsp://admin:password@192.168.0.119:10554/tcp/av0_0
Можно проверить ее подключившись например vlc
Пароль задавался в фирменной утилите.

Код

Программная часть будет использовать python (не судите строго, только год приручаю питона:)). Веб фреймворк Flask был выбран из-за простоты (для одностраничника больше и не надо); Для оптимизации, захват и генерацию кадров было решено разделить на разные процессы, с помощью multiprocessing (в надежде, что это поможет хилому rpi); Для захвата кадров видеопотока и их кодирования, оказалось лучшим вариантом будет использование библиотеки OpenCV.

Непосредственно код:

1. Файл скрипта на питоне webstreaming.py: (См. Оригинал)

2. Файл шаблона templates/index.html: (См. Оригинал)

Шаблон, состоит из нескольких тегов хтмл и думаю в объяснении не нуждается, по скрипту пройдемся более детально.

Здесь фласк приложение, при открытие страницы клиентом, обращается к генератору кадров, который выбирает изображение, постоянно создаваемое в отдельном процессе, захватывая видеопоток камеры.

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

Сначала запускается процесс p, это позволит параллельно создавать кадры, не нагружая основной процесс.

Далее запускается фласк приложение app.run. Блок try, я добавил для того что бы нормально обработать ctrl-c в терминале. По его завершению, происходят методы завершения созданного процесса.

Функция создания кадра cache_frames. Именно в ней происходит основная нагрузка, которую надо оптимизировать, для маломощного одноплатника. Будем резать качество! Если у Вас будет довольно мощный сервер, вероятно не стоит повторять все советы(оставив хотя бы нормальное разрешение). Для начала я пробовал снижать частоту кадров, это приводило к появлению старых кадров и очевидному замедлению воспроизведения. Обнулить буфер камеры в VideoCapture можно только вытащив из него все кадры. Запускать cap.grab() в цикле это действенный механизм, но это приводит к недопустимой для меня нагрузке. В моей камере есть второй поток с более низким разрешением, это позволило снизить разрешение без cv2.resize, что существенно уменьшило нагрузку, позволив оставить штатную частоту кадров камеры. Все эти моменты могут различаться в разных моделях камер. Давайте пройдемся по строкам главной функции. Сначала мы открываем видеопоток(cap) и узнаем какой у него fps. Далее идет цикл в котором мы читаем кадр(cap.read). Закомментирована строка с изменением размера, так как удалось это сделать на стороне камеры. Далее происходит кодирование в jpeg, с уменьшением качества(imencode). По итогу мы преобразуем массив в необработанную строку байтов, так как именно такой результирующий вид требуется, и размещаем в наш кеш last_frame. Цикл каждый раз засыпает, что бы снизить нагрузку, интервал чуть выше фпс, что бы вычитывать все кадры из буфера камеры. По выходу из цикла ресурсы видеопотока будут освобождены(release).

Функция generate, при подключении клиента, генерирует хттп mjpeg ответ изображения с кадрами из кеша, который будет отображаться в браузере.

Вы можете заметить, что здесь нет работы над стабильностью. Например если соединение с камерой пропадет на время, скрипт просто сломается и такие ситуации надо обрабатывать.

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

Перекинув файлы на распберри пай и запустив их, нагрузка составила:

Я посчитал, что чуть более 20% использования cpu(BCM2711), хороший результат, не стеснит остальные проекты.

Осталось только пробросить порт на маршрутизаторе и можно делиться видео наблюдениями. Соседи рады, я рад :-)

Этот текст я написал, так как увидел скудность ру доков по rtsp+python. Возможно кого то это мотивирует на эксперименты с наблюдением и обработкой видеозахвата:) Всем удачи!

Концептуально, начинать стоит с мануала по выбранной технологии. Для flask это документация.

После изучения мануала есть два подхода:

1. Брать идею конкретного сайта и реализовывать её. Берём и делаем "свой вконтакте". Лучше замахиваться на что-то относительно небольшое, типа "сделать поиск песен как вот тут". Годится для разработчиков с опытом, которые самостоятельно могут выбрать решения.

2. Брать идею с открытой реализацией, чтобы было куда подсмотреть. Пытаемся реализовать самостоятельно, в случае проблем - смотрим код исходного приложения. Куда лучше подходит для начинающего, так как всегда есть источник подсказок. Частым проектом является список задач (туду-лист) ввиду простоты с одной стороны и потенциальной бесконечной расширяемости с другой.

Потом ищем свежие решения. Смотрим в поиск в гугле, хабре и на пикабу, в последнем сразу получаем Как я свой первый учебный Fullstack-проект писал. Можно запустить решение товарища, а потом пойти в сторону самостоятельной реализации backend-части, взяв его готовый фронт. Это возможно благодаря разделению приложения на две части — фронт отдельно, бэк отдельно.

Можно поискать на github и найти проекты вроде DailyNotes. При отборе проекта обращайте внимание на его размер — чем меньше, тем лучше для первого проекта.

Для оценки размера проекта могу порекомендовать cloc. Запускается через докер. Клонируете целевой проект <project> и выполняете

docker run --rm -v $PWD:/tmp aldanial/cloc <project>

В результате получаете такую картину (ссылка на ТГ-источник)

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

В процессе обязательно использовать git и github/gitlab. Для понимания git рекомендую читать книгу Pro Git. В части gitlab могу порекомендовать своё видео на этот счёт, где за час показывается процесс создания небольшого проекта.

Кстати, не flask-ом единым. Можно посмотреть обзор веб-фреймворков 2021 года на tproger (django, flask, aiohttp, FastAPI, falcon, bottle), или свежее сравнение Django vs FastAPI на meduim. Если смотреть текущее состояние рынка на hh.ru, то вакансий с упоминанием django 720, flask 360 и FastAPI 323. Конкретно FastAPI модный, стильный, молодёжный. Правда, по этой причине сообщество пока не большое и материалов немного. С другой стороны, официальная дока FastAPI хороша и переведена на русский.

В телеграмм-канале DevFM разбираем разные нюансы из жизни разработчика на Python и не только. Все посты за сентябрь можно посмотреть тут.

Я вас категорически приветствую. Сегодня я вам расскажу о том, как мне удалось написать наиуникальнейший домашний проект без пап, мам, кредитов, а также без различного рода курсов (юзал только официальные доки, Stackoverflow, Quora, Reddit и мёртвые форумы 2007 года) - Список Дел (он же ToDo List). Казалось бы, что может быть более банальным? С одной стороны, читатель, ты абсолютно прав, но с другой - не всё так однозначно. Но обо всём по порядку...


О себе
Мальчик, 34 годика. В 2010 году окончил ДВАГС по специальности менеджмент, после ВУЗа относительно непродолжительное время работал торговым представителем, чуть позже, в 2011 я решил попробовать себя в веб-разработке, и меня позвали на работу в маленькую, но очень гордую дальневосточную IT-контору, которая как раз и специализировалась на Web (jQuery, Backbone, ExtJS, C#, MSSQL). Для меня на тот момент доступна была лишь базовая вёрстка, ибо знаний и опыта в этой области в те времена у меня особо не было, однако за пару лет я кое-чего поднабрался, хоть в программировании и не преуспел, - отсутствие технического бэкграунда и жизненного опыта мне тогда недоставало, но писать "лапшу" на jQuery, приправленную небольшим количеством логики, мне-таки удавалось (с переменным успехом). Дальшейшее отсутствие, прежде всего, денежных перспектив, а также карьерного роста с учётом моей врождённой тупизны вкупе породили мысль покинуть несостоявшегося IT-гиганта (который, как мне позже стало известно, в скором времени распался) и привели меня на госслужбу - в министерство информационных технологий и связи Х. края в отдел развития систем электронного документооборота, где я работал следующие пару лет, устанавливая ЭЦП и помогая тётенькам исправить то, что "само" ломалось. В то же время со мной случилась секта, йога, ретриты, путешествия... Короче, я уволилися с госслужбы и переехал вместе с родителями на юг нашей необъятной. Потом опять были путешествия, автостоп по забугорью, попутно попадались мелкие проекты по вёрстке на удалёнке. Менялись города, страны, а мозгов так и не прибавилось. Затем по до сих пор мне самому непонятной причине я захотел пойти в море матросом. Сказано - сделано. Учёба на морских курсах, практика и первая жуткая работа на местном флоте за 500 долларов, где вокруг вода, чайки и беспробудные алкаши - влажные мечты весьма значительно расходились с отягощающей реальностью. Чуть позже я переквалифицировался в буфетчики (помощник повара), о чём я уже писал на Пикабу, и пошёл в "большие моря" и на "большие пароходы", денег стало тоже чуть больше. Кстати говоря, работа в море мне нравится до сих пор, но в ней есть одно "НО": если ты стал моряком, то другой жизни у тебя больше не будет, как ни старайся, ну, кроме разве что, если ты капитан (да и то, не всё там так радужно), но это не мой случай, и, как выяснилось, это мне не совсем подходит. Последний контракт я пробыл в море 8 месяцев, совершил, практически кругосветное путешествие (Владивосток, Китай, Корея, Новая Зеландия, Австралия, Таити, Новая Каледония, Ямайка, Панама, США, Англия, Франция, Нидерланды), но выйти на берег мне так ни разу и не удалось из-за запрета портовых властей в связи с пандемией, т.е., я побывал везде и одновременно нигде - какая ирония... Зато я видел все оттенки воды. Ха-ха.
На сегодняшний день на берегу я нахожусь уже год, живу в Калиниграде с девушкой, занимаюсь всякими мелочами и одновременно постигаю ремесло web-разработчика, и для себя я твёрдо решил, что море обойдётся без меня (хотя мне до сих пор звонят с предложениями о работе время от времени), и что я-таки хочу жить и работать на берегу и найти удалённую работу, очень желательно в IT в связи с тем, что айтишка - это хорошо, интересно, при основательном подходе вполне денежно, да и какое-никакое представление об этом у меня уже имеется, хоть актуальных знаний мне сейчас явно недостаёт, но это не проблема - терпение и труд, как говорится... А путешествий и относительно острых ощущений мне уже хватило, и пора бы уже подумать о семье, карьере и других "земных" вещах. Лирики, пожалуй, достаточно, перейдём к делу.


Суть проекта
Проект - список дел, имеющий различный функционал для гостя и зарегистрированного пользователя.

Гостю доступен только один список, который хранится локально в браузере (в Local Storage) и, соотвественно, недоступен на других устройствах. Возможности в этом случае ограничены добавлением, редактированием, ранжированием (перемещением) и удалением пунктов списка.

Зарегистрированному пользователю доступно создание неограниченного количества списков, включая сохранение списка гостя, если таковой имелся, а также сохранение всех иных данных в БД. Для каждого списка в данном случае доступен всё тот же функционал (создание, редактирование, ранжирование и удаление пунктов списка), однако есть супер-пупер-друпер-мега-киллер-фича - это шаринг списков между пользователями и возможность одновременного их редактирования в режиме реального времени (посредством WebSocket). "Зачем это нужно?" - спросите вы. А я вам отвечу словами бессмертного лидера культовой группы Bredor Эскобара: "Ну да хер его знает." Хотел поработать с веб-сокетами в рамках учебного проекта и всего делов. Также добавлен стандартный административный раздел, чтобы не править данные напрямую ручками в базе.


Код и демо
Frontend: todo-client
Backend: todo-server
За код сильно прошу не пинать - я не профи. И да, я знаю, что есть кое-какой технический долг, но до этого руки пока не дошли (и никогда не дойдут, естественно).

Demo: https://infseeker-todo.(tk) - надобно скобки убрать. Т.к., к сожалению, Пикабу запрещает публикацию адресов с доменом tk (Tokelau), но я взял этот домен, т.к. он бесплатный и для публикации домашнего проекта вполне подходит.

Тестовые пользователи для тех, кто не хочется регистрироваться:
Пользователь 1:
Имя: TestUserOne
Пароль: TestUserOne123

Пользователь 2:
Имя: TestUserTwo
Пароль: TestUserTwo123


Технологический стек
Backend:
Web-Фреймворк (API): Flask (Python)
База данных: PostgreSQL
Веб-сервер: Gunicort + Nginx
ORM: Flask SQLAlchemy + Flask Marshmallow
Аутентификация: Flask Login
Авторизация: Flask Principal
SMTP-интерфейс: Flask Mail
Планировщик заданий: Flask APScheduler
Защита от ботов: Google reCaptcha v3
Админка: Flask Admin
WebSocket: Flask SocketIO

Frontend:
JS-Фреймворк: Vue 3
Сборщик проекта: Vite
Роутинг: Vue Router
Защита от ботов: Google reCaptcha v3
Валидация форм: Vuelidate
Локализация интерфейса: Vue i18n
Всплывающие уведомления: Vue Toastification
Drag'n'Drop: Vue Draggable Next
Редактор изображений: Vue Advanced Cropper
CSS-фреймворк: Bootstrap 5
CSS-тема: Sneat
WebSocket: SocketIO

Demo VDS:
Дата-центр: Россия, Королёв (Rucloud)
ОС: Ubuntu 18.04
Процессор: 1x2.2ГГц
Память: 0.5Гб
HDD: 10Gb


Процесс разработки
Постараюсь кратенько обозначить основные моменты в процессе планирования, разработки и тестирования проекта.
Общий срок, начиная от идеи составил 3,5 календарных месяца (с середины мая 2022 до начала сентября 2022), однако реальный срок непосредственной разработки составил чуть больше 2-х месяцев.

Общий процесс разработки проекта строился примерно следующим образом:
- Первичное планирование - наброски идеи проекта (Confluence)
- Прототипирование (основные экраны и элементы интерфейса) (Figma)
- Разработка пользовательских сценариев (User Stories) (Confluence)
- Текстовое описание базового функционала (Confluence)
- Постановка и выполнение задач по разработке, тестирование (Jira)

Методологией разработки был выбран недо-Scrum (1-недельные спринты, в спринт задачи в основном попадали напрямую из головы, а не из беклога, оценка сроков выполнения задач была номинальной, а тестирование происходило обычно сразу в продакшене), т.е., по сути, это был обыкновенный Waterfall, приправленный самообманом.
Однако, несмотря на все недочёты, разработка была спланирована, начата, закончена, и проект запущен в условный продакшн на демо-сервере. В планах было уложиться в 2 месяца, но, как это обычно бывает, согласно первому закону Паркинсона, сроки были чуть расширены.

Стоит отметить, что планированием тестовых мероприятий, ведением тестовой документации (Jira Xray) и непосредственным тестированием (полуавтоматизированное тестирование API в Postman, ручное тестирование интерфейса) занималась моя девушка, которая в относительно ближайшее время планирует также внедриться в IT, но, насколько мы адекватно можем оценивать сегодняшний рынок и её возможности, то вкатиться ручным тестировщиком вариантов практически нет ввиду пресыщенности рынка и отстуствия у неё опыта работы в реальных командах на реальных проектах. Поэтому, скорее всего, первоначально она пойдёт в техподдержку или что-то похожее, а там, быть может, и до разработки доберёмся, благо, девочка она умная и относительно быстро схватывает основы веб-разработки. Но время, как говорится, покажет.

Хотелось было отметить ещё множество различных интересных аспектов разработки проекта, однако, дабы не превращать пост в нечитаемую портянку, делать я этого не буду (на самом деле, мне просто лень). Кому интересно, то зайдёт на Демо-сервер и заглянет ко мне на уютненький Github.


Что я вспомнил и чему научился
Frontend:
- HTML 5 (структура, семантика)
- CSS 3 (Flex, Grid, Animation и пр.) + Bootstrap 5
- Основы JS, включая фичи ES6+
- Основы Vue 3, построения SPA-приложений, компонентный подход
- Работа с роутами (Vue Router)
- Работа с Local Storage
- Работа с асинхронными запросами и данными
- Реализация взаимодействия клиентов в реальном времени посредством WebSocket (SocketIO)

Backend:
- Основы Python 3
- Flask (REST API + Admin)
- Регистрация пользователей и работа с правами доступа (Flask Login)
- Работа с данными и ORM (Flask SQLAlchemy + Flask Marshmallow)
- Основы SQL, PostgreSQL
- Работа с WebSocket (Flask SocketIO)

Другое:
- Работа с Git, Github, Github Actions (автоматический деплой в продакшн по SSH на пуш)
- Конфигурирование Nginx и Gunicorn (настройка служб, воркеров, редиректа, HTTPS и пр.)
- Работа с Linux, командной строкой
- Работа с инструментами разработки (VSCode + плагины, pgAdmin, Postman, Chrome DevTools)


Что дальше?
Если вопрос касается данного проекта, то его разработка завершена окончательно и бесповоротно, т.е., всё, что я планировал сделать, я сделал. Теперь остаётся подтянуть и собрать воедино все накопленные знания и усиленно искать работу. Понятно, что в наше время это непросто, плюс возраст, плюс отсутствие соответствующего образования делают из меня не самого желанного кандидата даже на позицию джуниора, но, я думаю, как-нибудь прорвёмся, да и проект мой, я считаю, вполне себе годная демка моих знаний и скиллов, пускай это слишком сильно сказано, но, тем не менее. Будем верить в лучшее и двигаться вперёд. Мир!

Благодарю за внимание.

И так, почитав комментариев под предыдущим постом мне понравилась идея убрать регистрацию вообще, закомментировать, создать специальную учетную запись и выполнять действия через неё.

Я создал учетную запись, и закомментировал функцию получения логина и пароля через GET запрос и указал уже свои. Далее внес несколько правок по интерфейсу, убрал данные, которые будут лишние. Так же внёс трай/кэтч в функцию логина, так вот, если пользователь укажет некорректный id, то ничего не произойдет.

В целом сервис полностью функционирует, критику жду уже от вас.

Все исходники есть в репозитории GitHub, ссылка на GIT есть в прошлых постах и на сайте.
Если у вас возникают ошибки и вы знаете, как её можно исправить жду отзывы :)

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

В данный момент ищу действительно нужный и интересный проект для реализации. Если есть идеи делитесь.