Рилсы из markdown: AI пишет сценарий, ты только читаешь

Карусели из markdown уже работали. Следующий шаг — видео. Рилсы отнимают больше всего времени: написать текст, настроить камеру, записать, переписать, обработать звук, добавить субтитры, экспортировать.

Захотелось сделать так: AI пишет сценарий, закидывает на сервер, ты открываешь ссылку на телефоне и записываешь. Минимум действий.

Как это работает

1. AI пишет сценарий

Сценарий рилса — обычный markdown-файл. Секции ### — это слайды телепромптера. Слово в [скобках] получает акцент в субтитрах.

---
layout: trip2g/instareel
---

### МЫ [ДОРАБОТАЛИ] РИЛСЫ

### ЧТО НОВОГО

Помнишь инструмент для записи рилсов?
Мы его серьёзно прокачали.

### ТЕКСТ [СВЕРХУ]

Телепромптер переехал наверх.
Теперь читаешь и смотришь прямо в камеру.

AI генерирует файл, синхронизация закидывает его на сервер. На телефоне появляется ссылка.

Удобно готовить сценарий дома за компьютером, а снимать на ходу — на прогулке, в кафе, на фоне города. Открыл ссылку на телефоне, телепромптер уже загружен. Селфи-камера, живой фон, естественный свет. Рилс выглядит живее чем запись за столом.

2. Открываешь и записываешь

Открываешь страницу — включается камера. Вверху экрана текст текущего слайда. Нажимаешь REC, читаешь, переключаешь слайды пробелом. Всё.

Телепромптер расположен сверху с градиентным затемнением. Читаешь текст и смотришь прямо в объектив — не нужно опускать глаза вниз.

3. Обрезаешь

После записи — режим рендера. Видео уже с субтитрами. Два ползунка: зелёный ставит начало, красный — конец. Кнопка LOOP зацикливает фрагмент, чтобы оценить результат перед экспортом.

4. Улучшаешь звук

Одна кнопка — аудио уходит на обработку через Cleanvoice AI. Шумоподавление, нормализация, студийное звучание. Кнопки "Оригинал" и "Улучшенный" позволяют сравнить до и после. При экспорте используется улучшенная версия.

5. Экспортируешь

Кнопка "Экспорт видео" — и готовый файл скачивается. Субтитры вшиты в видео, звук обработан, формат MP4 если браузер поддерживает.

Архитектура

Субтитры через Canvas

Субтитры не накладываются отдельным инструментом. Видео рисуется на Canvas покадрово, поверх — текст текущего слайда с анимацией появления.

function drawSubtitles(ctx, timeSec) {
  const { slide, localTime } = getSlideAtTime(timeSec);
  const fadeT = easeOutCubic(localTime / 0.5);
  // ... рисуем заголовок и текст с fade-in
}

Привязка субтитров к слайдам — по моментам переключения во время записи. Нажал "следующий слайд" на 5-й секунде — с этого момента новый текст.

Параллельная аудио-запись

Cleanvoice принимает аудио-файлы. Видео весит 50-70 МБ, аудио — 200-300 КБ. Записываем два потока параллельно:

// Видео — полное качество
recorder = new MediaRecorder(cameraStream, {
  mimeType: 'video/mp4', videoBitsPerSecond: 8_000_000
});

// Аудио — минимальный размер для обработки
const audioStream = new MediaStream(cameraStream.getAudioTracks());
audioRecorder = new MediaRecorder(audioStream, {
  audioBitsPerSecond: 64000
});

На обработку отправляется только лёгкий аудио-трек. Результат подменяет звуковую дорожку при экспорте.

CF Worker как прокси

Cleanvoice API не поддерживает CORS — нельзя вызвать напрямую из браузера. Cloudflare Worker решает это:

  • POST /upload — временное хранение аудио в KV (TTL 1 час)
  • POST /cleanvoice/start — запуск обработки
  • GET /cleanvoice/status/:id — polling статуса
  • GET /proxy?url= — проксирование скачивания результата

150 строк кода, бесплатный тариф CF Workers.

MP4 без ffmpeg

Первые версии записывали в WebM — для Instagram нужно было конвертировать через ffmpeg. Теперь браузер сам пишет MP4 если поддерживает codec avc1. Safari и свежий Chrome делают это нативно. Маркер в углу показывает текущий формат.

Синхронизация на два устройства

Типичный сценарий: записываешь на телефон, а текст хочешь видеть на планшете или ноутбуке рядом.

Кнопка "Создать комнату" генерирует 4-значный код. На втором устройстве вводишь код — открывается полноэкранный телепромптер. Переключаешь слайд на телефоне — текст обновляется на планшете.

Синхронизация через polling KV-хранилища с интервалом 300мс. Без WebSocket, без сторонних сервисов.

Workflow целиком

AI генерирует markdown
    ↓
Синхронизация на сервер
    ↓
Открываешь ссылку на телефоне
    ↓
Читаешь телепромптер, записываешь
    ↓
Обрезаешь, улучшаешь звук
    ↓
Экспорт MP4 с субтитрами
    ↓
Загружаешь в Instagram

Между "AI написал сценарий" и "рилс готов" — одна запись на камеру. Остальное делает браузер.

Итого

  • Markdown = сценарий — секции ### становятся слайдами телепромптера
  • Телепромптер сверху — смотришь в камеру, не опуская глаза
  • Субтитры вшиты — Canvas рендерит поверх видео покадрово
  • Звук улучшен — Cleanvoice через CF Worker прокси
  • MP4 нативно — без ffmpeg, без конвертации
  • Обрезка в браузере — trim + loop перед экспортом
  • Второй экран — синхронизированный телепромптер по коду комнаты

Весь стек: один HTML-шаблон (~1000 строк), один CF Worker (~150 строк), markdown-файл с текстом.

Попробовать: Reel — обновление

Как работает