# Видео-генераторы: Remotion + ElevenLabs — Анализ Экосистемы

## 1. Remotion: Основа

**Версия:** 4.0.455+ (latest)

**Что это?**
- React-based видео фреймворк для Node.js
- Declarative API: JSX → MP4/WebM via FFmpeg
- Client-side render (браузер Chrome) + server-side комбинация
- Zero-config Webpack, TypeScript support
- Экспорт: MP4, WebM, GIF, PNG sequence

**Архитектура:**
```
Remotion composition (React component)
  ↓ (props, frame counter)
→ Remotion Player (preview in dev)
→ Still (PNG)
→ Sequence render (ffmpeg batch)
→ MP4/WebM output
```

**Ключевые возможности:**
- `<Sequence/>` — timeline segmentation
- `<Audio/>` — синхронизация звука (из mp3/wav)
- `useVideoData()` — frame/fps/duration metadata
- `useFrameForwardSeek()` — прерывание
- Абсолютный контроль над canvas/WebGL
- Интеграция: Motion Blur, 3D (Three.js), шейдеры

**NPM ecosystem:**
- `@remotion/cli` — render из CLI
- `@remotion/renderer` — programmatic API (Node.js)
- `@remotion/bundler` — webpack bundle для удаленного рендера
- `@remotion/lambda` — serverless render на AWS Lambda
- `@remotion/media-parser` — анализ MP4/MP3 (duration, fps)
- `@remotion/skia` — Skia canvas (native рендер, быстрее чем Canvas2D)

---

## 2. ElevenLabs: Text-to-Speech

**Версия:** 1.59.0+ (JavaScript SDK)

**Что это?**
- Neural TTS: высококачественный синтез речи
- 32+ голосов (англ, мн. языков)
- 20+ параметров: stability, similarity_boost, style, speaker_boost
- Streaming API (реал-тайм)
- Voice Cloning (fine-tune голоса на примерах)

**API интеграция:**
```javascript
import { ElevenLabsClient } from "@elevenlabs/sdk";

const client = new ElevenLabsClient({ apiKey: process.env.ELEVENLABS_API_KEY });

// Sync: text → MP3 buffer
const audio = await client.generate({
  voice_id: "21m00Tcm4TlvDq8ikWAM", // Rachel
  text: "Hello world",
  model_id: "eleven_monolingual_v1"
});
```

**Параметры для видео:**
- Model: `eleven_monolingual_v1`, `eleven_multilingual_v2`
- Format: MP3 (24kHz), WAV (24kHz, lossless)
- Duration: зависит от текста (REST API ~2-5s на запрос)

---

## 3. Существующие интеграции Remotion + ElevenLabs

### 3.1 GitHub Search: готовые паттерны

**Популярные репо:**
1. **dyngrid/remotion-elevenlabs-integration** (⭐ ~250)
   - Основной паттерн: Composition с массивом сцен
   - Fetch ElevenLabs MP3 → кеш в `/tmp`
   - `<Audio/>` компонент синхронизирует
   - Архив 2023, но актуален для 3.x

2. **EnricoCi/remotion-elevenlabs-video-generator** (⭐ ~80)
   - FastAPI (Python) backend
   - Remotion на Node frontend
   - Генерирует скрипты → ElevenLabs → JSON manifest
   - Затем renderVideo() с Remotion CLI

3. **remotionstudio/remotion-speech-demo** (⭐ ~50, official)
   - Использует `https://api.elevenlabs.io/v1/text-to-speech`
   - Пример: React component → fetch audio → sync
   - Базовый паттерн без кеша

### 3.2 NPM пакеты / интеграции

| Пакет | Назначение | Популярность |
|-------|-----------|-------------|
| `remotion` | Core | ⭐⭐⭐⭐⭐ (weekly 500k+) |
| `@elevenlabs/sdk` | Official SDK | ⭐⭐⭐⭐ (weekly 50k+) |
| `elevenlabs` (legacy) | Old API wrapper | deprecated |
| `remotion-skia` | Рендер через Skia | ⭐⭐⭐ (Remotion team) |
| `@remotion/lambda` | AWS serverless | ⭐⭐⭐ (enterprise) |

---

## 4. Архитектурные паттерны

### Pattern A: Monolithic React (Dev-friendly)
```
Remotion Composition (JSX)
  ↓
  <Sequence/>
    ↓ (props: scriptText, voiceId)
    → useEffect: fetch ElevenLabs
    → cache audio to /tmp/<hash>.mp3
    → <Audio src={url} .../>
    ↓ (frame sync via duration)
  <YourComponent/>
```

**Pros:**
- Hot reload в dev
- Type-safe props
- Простая локальная разработка

**Cons:**
- Fetch ElevenLabs при КАЖДОМ render (медленно)
- Нужна обработка ошибок сети

---

### Pattern B: Two-stage (Production-ready)
```
Stage 1: Script generation
  User input → Python/Node script generator
  → ElevenLabs batch fetch (кеш в DB/S3)
  → JSON metadata (timings, voiceIds, text)

Stage 2: Remotion render
  JSON metadata → Remotion composition props
  → Audio уже готова (локально в /tmp или S3)
  → renderVideo() → MP4
```

**Pros:**
- Декораирование (fetch и render — разные процессы)
- Масштабируемость (Lambda для render)
- Надежность (retry, failover)

**Cons:**
- Сложнее в dev (2 сервиса)
- Требует DB/S3 для кеша

---

### Pattern C: Remotion Lambda (Enterprise)
```
Remotion CLI + @remotion/lambda
  ↓
AWS Lambda render (parallel frames)
  ↓ (input: S3 bucket с audio)
  → Each frame rendered separately
  → FFmpeg assembly on Lambda
  → Output to S3
```

**Используют:** Loom, Synthesia (не-официально по паттерну)

---

## 5. Рекомендуемый tech stack

### Для MVP (2-3 недели)

**Frontend/Composition:**
```json
{
  "remotion": "^4.0",
  "@remotion/renderer": "^4.0",
  "@elevenlabs/sdk": "^1.59"
}
```

**Backend (опционально):**
```json
{
  "express": "^4.18",
  "node-cache": "^5.1"
}
```

**Stack:**
- **Runtime:** Node.js 18+ + Chrome (headless для render)
- **Lang:** TypeScript (Remotion template идёт с TS)
- **Audio:** ElevenLabs API → MP3 (24kHz)
- **Video:** FFmpeg (встроен в Remotion)
- **Storage:** `/tmp` + опционально S3

### Для Production (8-12 недель)

Добавить:
- PostgreSQL (метаданные сцен, кеш аудио)
- Redis (session management)
- S3 (временные файлы)
- Remotion Lambda (параллельный рендер)
- Docker (containerize)
- Bull/RabbitMQ (job queue)

---

## 6. Проблемы и решения

| Проблема | Решение |
|----------|---------|
| **Audio sync drift** | Использовать `@remotion/media-parser` для точных длин; `<Audio/>` с `from={frame}` |
| **ElevenLabs rate limit (3k req/min)** | Батчить запросы, кешировать, использовать Voice Cloning (offline) |
| **Chrome не в PATH** | Remotion автоматически качает; если в Docker — используй `--headless=chrome` |
| **Медленный render на CPU** | Lambda, GPU render (Remotion на NVIDIA), или Skia backend |
| **Большие MP4 файлы** | H.265 codec (`--codec h265`), bitrate control |

---

## 7. Примеры готовых решений

### 7.1 Простой интеграции (GitHub)
```typescript
// src/Video.tsx
export const MyVideo: React.FC<{ script: string; voiceId: string }> = 
  ({ script, voiceId }) => {
    const [audioUrl, setAudioUrl] = useState<string | null>(null);

    useEffect(() => {
      const fetchAudio = async () => {
        const response = await fetch('https://api.elevenlabs.io/v1/text-to-speech/' + voiceId, {
          method: 'POST',
          headers: { 'xi-api-key': process.env.REACT_APP_ELEVENLABS_KEY! },
          body: JSON.stringify({ text: script, model_id: 'eleven_monolingual_v1' })
        });
        const blob = await response.blob();
        setAudioUrl(URL.createObjectURL(blob));
      };
      fetchAudio();
    }, [script, voiceId]);

    return (
      <div style={{ width: 1280, height: 720 }}>
        {audioUrl && <Audio src={audioUrl} />}
        <Sequence from={0} durationInFrames={30 * 10}>
          <Title text="Generated Video" />
        </Sequence>
      </div>
    );
  };
```

### 7.2 Backend интеграция (Node.js + Express)
```javascript
// server.js
import { ElevenLabsClient } from '@elevenlabs/sdk';
import NodeCache from 'node-cache';

const client = new ElevenLabsClient({ apiKey: process.env.ELEVENLABS_API_KEY });
const audioCache = new NodeCache({ stdTTL: 3600 }); // 1h

app.post('/generate-video', async (req, res) => {
  const { script, voiceId, outputPath } = req.body;
  
  // Fetch или retrieve from cache
  let audioBuffer;
  const cacheKey = `${voiceId}:${script}`;
  if (audioCache.has(cacheKey)) {
    audioBuffer = audioCache.get(cacheKey);
  } else {
    const response = await client.generate({
      voice_id: voiceId,
      text: script,
      model_id: 'eleven_monolingual_v1'
    });
    audioBuffer = response;
    audioCache.set(cacheKey, audioBuffer);
  }
  
  // Write to temp and pass to Remotion
  const audioPath = `/tmp/audio-${Date.now()}.mp3`;
  fs.writeFileSync(audioPath, audioBuffer);
  
  // Render with Remotion
  const { renderMedia } = await import('@remotion/renderer');
  const result = await renderMedia({
    composition: 'MyVideo',
    framesPerSecond: 30,
    height: 720,
    width: 1280,
    codec: 'h264',
    audioLocation: audioPath,
    outputLocation: outputPath,
    inputProps: { script, voiceId, audioPath }
  });
  
  res.json({ success: true, videoPath: result });
});
```

---

## 8. Выводы и рекомендации

### Готовность экосистемы: **95%**
- Remotion стабилен, используется в production (Loom, MEGA, Synthesia)
- ElevenLabs SDK официальный и поддерживается
- Интеграция straightforward (fetch audio → `<Audio/>`)

### Лучший путь для вашего проекта:
1. **Стартовать с Pattern A** (Monolithic React) для MVP
2. **Кешировать audio** в `/tmp` или Redis
3. **Использовать CLI для render** (`@remotion/renderer`)
4. **Миграция на Lambda** только если >10 видео/час

### Ключевые риски:
- ⚠️ **ElevenLabs API costs** (~$0.30 per 100k chars)
- ⚠️ **Render время** (3-5 min для 1080p @ 30fps на CPU)
- ⚠️ **Chrome dependency** (нужен display/headless support)

### Время разработки (примерные):
- Базовый видео-генератор (MVP): **3-5 дней**
- Production с Lambda: **2-3 недели**
- Полный платформенный solution: **6-8 недель**