Пишите сценарий на компьютере — читайте его с телесуфлёра на телефоне и записывайте видео. Живая синхронизация по локальной сети (Wi-Fi), без облака.
| Компонент | Что делает |
|---|---|
| Веб-редактор (компьютер) | Сценарии → секции, счётчик слов и хронометраж, автосохранение, QR-подключение телефона, мониторинг записи, карта дублей |
| Мобильный суфлёр (Android) | Камера + текст поверх превью, прокрутка в словах/мин, «кусок заново», запись видео, метки дублей, настройки (шрифт/позиция/зеркалирование/прозрачность) |
| Синхронизация | WebSocket по LAN: правки текста прилетают в суфлёр прямо во время записи |
- Bun ≥ 1.1
- Компьютер и телефон в одной Wi-Fi сети
- Android 8+ (телефон)
git clone https://github.com/danku13/prompter-studio.git
cd prompter-studio
bun install
cp .env.example .env # при необходимости поправьте
bun run db:push # создать SQLite-базу
bun run dev # веб-редактор: http://localhost:3000и во втором терминале — сервис синхронизации:
cd mini-services/prompter-sync
bun install
bun run dev # WS-сервис на порту 3030Порты: веб 3000, синхронизация 3030. Если брандмауэр спросит — разрешите доступ в частных сетях для обоих.
Вариант A — облачная сборка (рекомендуется):
- Запушьте этот репозиторий в свой GitHub.
- Откройте вкладку Actions → workflow Build Android APK → запустите (или дождитесь автоматического запуска после пуша).
- По завершении скачайте артефакт
prompter-studio-debug-apk. - Перекиньте
.apkна телефон и установите (разрешите «установку из неизвестных источников»).
Подробности — в apk/README.md.
Вариант B — браузер на телефоне (без установки):
⚠️ В браузере поhttp://<lan-ip>:3000камера заблокирована политикой secure context — суфлёр и синк работают, но записи нет. Для записи нужен APK (или HTTPS — см. «Камера в браузере»).
- На компьютере откройте
http://localhost:3000, создайте сценарий, напишите секции. - Нажмите «Подключить телефон» — появится QR-код и код подключения.
- На телефоне: откройте приложение → отсканируйте QR системной камерой
(deep link
prompter://connect?...) или введите код вручную. - Сценарий подтянулся → откройте его → 3-2-1 → запись.
- Сбились — жмите «Кусок заново» (⟲): текст вернётся к началу секции, запись продолжится, дубль отметится на компьютере с таймкодами.
- Стоп → «Сохранить видео» (системный шэринг → Галерея/Drive/куда угодно).
- На компьютере в панели «Дубли» отметьте лучшие дубли (👍/👌/👎) — на монтаже сразу видно, какие куски перечитаны.
┌─────────────── компьютер (LAN IP, например 192.168.1.20) ───────────────┐
│ │
│ Next.js :3000 WS-мини-сервис :3030 │
│ ┌────────────────────┐ notify ┌────────────────────┐ │
│ │ редактор сценария │──(HTTP)──▶ │ комнаты script:<id>│ │
│ │ REST /api/* │ │ presence/телеметрия │ │
│ │ Prisma + SQLite │◀── takes ──│ push сценария │ │
└───────┬───────────────────────────────▲──────────────────┴────────────────┘
│ браузер │ WebSocket
▼ ▼
http://192.168.1.20:3000 ws://192.168.1.20:3030
┌──────────────────────┐
│ телефон (APK/браузер)│
│ камера + суфлёр │
│ MediaRecorder │
└──────────────────────┘
- Источник истины — SQLite на компьютере. Телефон — только читает сценарий и пишет телеметрию/дубли.
- Pairing: QR/токен действует 15 минут, привязан к конкретному сценарию.
- Ревизии: каждое сохранение инкрементирует
revision; конфликт (правки с двух мест) разрешается перезагрузкой свежей версии (HTTP 409). - Скорость прокрутки задана в словах в минуту:
px/сек = (высота текста / всего слов) × (wpm/60)— скорость не зависит от размера шрифта и ширины экрана. - Сеть — только LAN: никаких внешних сервисов, всё остаётся в вашей Wi-Fi.
├─ src/app/ Next.js: страница / (десктоп+мобайл по UA) и REST /api/*
├─ src/components/desktop/ редактор сценария (11 компонентов)
├─ src/components/mobile/ суфлёр (13 компонентов)
├─ src/lib/ контракты (types.ts), клиент API/WS, хуки (камера, запись, прокрутка)
├─ prisma/schema.prisma Script / Section / Take / PairToken
├─ mini-services/prompter-sync/ socket.io-сервис синхронизации (порт 3030)
├─ apk/ Capacitor-оболочка + Vite-сборка мобайла + CI
│ └─ prompter-studio-debug.apk готовый debug-APK (собран для пробы)
└─ .github/workflows/ GitHub Actions: облачная сборка APK
| Действие | Как |
|---|---|
| Перезапустить WS-сервис | cd mini-services/prompter-sync && pkill -f 'node --watch'; bash supervise.sh (или просто bun run dev) |
| Сбросить базу | bun run db:push (схема пересоздаётся, данные теряются) |
| Где база | db/custom.db (SQLite) |
| Логи WS-сервиса | mini-services/prompter-sync/service.log |
Телефон не подключается по QR
- Убедитесь, что оба устройства в одной сети (не гостевой, не мобильный интернет).
- Проверьте брандмауэр: порты 3000 и 3030 должны быть открыты в частной сети.
- В QR лежит LAN-IP компьютера — если у вас несколько сетевых интерфейсов (VPN, виртуалки), IP может определиться неверно. В приложении можно ввести адрес и код вручную.
«Код недействителен или истёк» — QR действует 15 минут. На компьютере нажмите «Обновить код» в окне подключения.
Правки не появляются на телефоне — убедитесь, что WS-сервис запущен
(http://<ip>:3030/ отвечает {"ok":true}).
Камера в браузере (HTTPS) — если хотите
записывать видео без APK из браузера телефона: поставьте mkcert, выпустите
сертификат, запустите Next.js на HTTPS и откройте https://<lan-ip>:3000.
Проще всё же поставить APK.
Видео не сохраняется — в APK видео предлагается через системный шаринг («Сохранить в Галерею», Drive, Telegram и т.д.). Это стандартный путь Android.
- Сеть — только LAN (интернет-режим не реализован — заложен в архитектуру).
- Управление суфлёром с веба (режим оператора) — отключено по согласованию, протокол готов к расширению.
- Версии сценария — автосохранение + ревизии, без дерева истории.
- Тестовая запись проверена только на debug-APK: если что-то ведёт себя странно на вашей модели телефона — заведите issue.
Next.js 16 (App Router) · TypeScript · Tailwind CSS 4 · shadcn/ui · Prisma + SQLite · socket.io · Capacitor 7 (APK) · Vite · GitHub Actions