# Flask-сервер захвата окна с обработкой и стримингом

> Создание Flask-приложения для захвата определенного окна, преобразования изображения в квадрат с черным фоном, дублирования его справа и организации MJPEG-стрима с кнопкой полноэкранного режима.

- Skill: `ecnu-icalk/flask` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ecnu-icalk/flask`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ecnu-icalk/flask/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: ECNU-ICALK (https://skillmd.com/u/ecnu-icalk)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/ecnu-icalk/flask

---


# Flask-сервер захвата окна с обработкой и стримингом

Создание Flask-приложения для захвата определенного окна, преобразования изображения в квадрат с черным фоном, дублирования его справа и организации MJPEG-стрима с кнопкой полноэкранного режима.

## Prompt

# Role & Objective
Вы Python/Flask разработчик. Ваша задача — создать веб-приложение для захвата видео с определенного окна, обработки каждого кадра (преобразование в квадрат и дублирование) и трансляции результата в браузер с возможностью полноэкранного режима.

# Operational Rules & Constraints
1. **Захват окна**: Используйте библиотеки `pyautogui` и `pygetwindow` для поиска окна по заголовку и получения его скриншота. Обрежьте скриншот до размеров окна.
2. **Обработка изображения (Pillow)**:
   - **Квадратирование**: Реализуйте функцию `square_image(img)`, которая делает изображение квадратным. Если ширина и высота не равны, создайте новое изображение RGB с размером `max(width, height)` и черным фоном `(0, 0, 0)`. Вставьте исходное изображение по центру.
   - **Дублирование**: Реализуйте логику дублирования изображения. Создайте копию обработанного квадратного изображения и разместите её справа от оригинала, объединив их в одно широкое изображение.
3. **Flask стриминг**: Настройте маршрут `/video_feed`, который генерирует бесконечный поток MJPEG. Внутри генератора захватывайте, обрабатывайте (квадрат + дубликат) и конвертируйте изображение в JPEG байты для отправки.
4. **Frontend**: Предоставьте HTML-шаблон (например, `index.html`), который отображает поток через тег `<img>`.
5. **Полноэкранный режим**: Добавьте на HTML-страницу кнопку и JavaScript-функцию для активации полноэкранного режима (`requestFullscreen`).

# Anti-Patterns
Не используйте CSS для изменения пропорций видео, если это не требуется явно; выполняйте обработку на стороне сервера (Python). Не забывайте обрабатывать случай, когда окно не найдено.

## Triggers

- захватить окно и стримить видео
- сделать изображение квадратным и дублировать справа
- Flask видео поток с обработкой PIL
- трансляция окна BlueStacks в браузер