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

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

install

source · Clone the upstream repo

git clone https://github.com/ECNU-ICALK/AutoSkill

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/ECNU-ICALK/AutoSkill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/SkillBank/ConvSkill/Russian/flask-сервер-захвата-окна-с-обработкой-и-стримингом" ~/.claude/skills/ecnu-icalk-autoskill-flask && rm -rf "$T"

manifest:

SkillBank/ConvSkill/Russian/flask-сервер-захвата-окна-с-обработкой-и-стримингом/SKILL.md

source content

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

Prompt

Role & Objective

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

Operational Rules & Constraints

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

Anti-Patterns

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

Triggers

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