165 lines
5.7 KiB
Markdown
165 lines
5.7 KiB
Markdown
# Video Flow Editor - 视频编辑器
|
|
|
|
## 概述
|
|
|
|
Video Flow Editor 是一个基于浏览器的视频编辑器，支持多轨道时间轴编辑，与现有的 AI 视频生成工作流无缝集成。
|
|
|
|
## 架构
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ React Frontend (:3000) │
|
|
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────────────┐ │
|
|
│ │ Remotion │ │ Timeline │ │ Track Panel │ │
|
|
│ │ 预览播放器 │ │ 时间轴 │ │ 轨道属性面板 │ │
|
|
│ └─────────────┘ └─────────────┘ └─────────────────────┘ │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
│
|
|
▼
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ FastAPI Backend (:8000) │
|
|
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────────────┐ │
|
|
│ │ 项目管理 │ │ 编辑器 API │ │ 合成 API │ │
|
|
│ └─────────────┘ └─────────────┘ └─────────────────────┘ │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
│
|
|
▼
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ Celery + Redis │
|
|
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────────────┐ │
|
|
│ │ 任务队列 │ │ Worker 1 │ │ Worker N... │ │
|
|
│ └─────────────┘ └─────────────┘ └─────────────────────┘ │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
## 功能特性
|
|
|
|
### 编辑功能
|
|
- ✅ 视频裁剪 - 在时间轴上拖拽调整视频起止点
|
|
- ✅ 旁白编辑 - 修改文本后重新生成 TTS
|
|
- ✅ 花字编辑 - 修改花字内容和样式
|
|
- ✅ BGM 管理 - 选择和替换背景音乐
|
|
- ✅ 字幕编辑 - 修改字幕文本和时间
|
|
|
|
### 预览功能
|
|
- ✅ Remotion 实时预览 - 浏览器端实时渲染
|
|
- ✅ 多轨道显示 - 视频/音频/字幕/花字/BGM
|
|
- ✅ 播放头控制 - 拖拽快速定位
|
|
|
|
### 导出功能
|
|
- ✅ 异步合成 - 任务队列处理，不阻塞界面
|
|
- ✅ 进度查询 - 实时查看合成进度
|
|
- ✅ 下载成片 - 合成完成后直接下载
|
|
|
|
## 快速开始
|
|
|
|
### 开发环境
|
|
|
|
```bash
|
|
# 1. 安装依赖
|
|
pip install -r requirements.txt
|
|
cd web && npm install && cd ..
|
|
|
|
# 2. 启动 Redis (需要 Docker)
|
|
docker run -d --name redis -p 6379:6379 redis:7-alpine
|
|
|
|
# 3. 启动后端
|
|
uvicorn api.main:app --reload --port 8000
|
|
|
|
# 4. 启动 Worker
|
|
celery -A api.celery_app worker --loglevel=info
|
|
|
|
# 5. 启动前端
|
|
cd web && npm run dev
|
|
```
|
|
|
|
### Docker 环境
|
|
|
|
```bash
|
|
# 一键启动所有服务
|
|
docker-compose up -d
|
|
|
|
# 扩展 Worker 数量
|
|
docker-compose scale worker=3
|
|
|
|
# 查看日志
|
|
docker-compose logs -f worker
|
|
```
|
|
|
|
## 端口规划
|
|
|
|
| 服务 | 端口 | 说明 |
|
|
|------|------|------|
|
|
| React Editor | 3000 | 视频编辑器前端 |
|
|
| FastAPI | 8000 | REST API |
|
|
| Streamlit | 8502 | 原有工作流调试界面 |
|
|
| Redis | 6379 | 任务队列 |
|
|
|
|
## API 接口
|
|
|
|
### 编辑器状态
|
|
|
|
```
|
|
GET /api/editor/{project_id}/state - 获取编辑器状态
|
|
POST /api/editor/{project_id}/state - 保存编辑器状态
|
|
```
|
|
|
|
### TTS 生成
|
|
|
|
```
|
|
POST /api/editor/generate-voiceover
|
|
{
|
|
"text": "要转换的文本",
|
|
"voice_type": "zh_female_santongyongns_saturn_bigtts",
|
|
"target_duration": 3.0 // 可选
|
|
}
|
|
```
|
|
|
|
### 视频合成
|
|
|
|
```
|
|
POST /api/compose/render
|
|
{
|
|
"project_id": "PROJ-xxx",
|
|
"video_clips": [...],
|
|
"voiceover_clips": [...],
|
|
"subtitle_clips": [...],
|
|
"fancy_text_clips": [...],
|
|
"bgm_clip": {...}
|
|
}
|
|
|
|
GET /api/compose/status/{task_id} - 查询合成进度
|
|
```
|
|
|
|
## 扩展性
|
|
|
|
### 水平扩展
|
|
|
|
```bash
|
|
# 增加 Worker 数量
|
|
docker-compose scale worker=5
|
|
```
|
|
|
|
### 性能监控
|
|
|
|
- Celery Flower: `celery -A api.celery_app flower`
|
|
- Redis 监控: `redis-cli monitor`
|
|
|
|
## 与工作流的集成
|
|
|
|
编辑器自动读取工作流生成的素材：
|
|
|
|
1. 用户在 Streamlit 完成视频生成工作流
|
|
2. 点击"编辑"按钮跳转到编辑器
|
|
3. 编辑器自动加载项目的所有素材到时间轴
|
|
4. 用户进行精细编辑
|
|
5. 导出最终成品
|
|
|
|
## 技术栈
|
|
|
|
- **前端**: React 18 + TypeScript + Vite + Remotion
|
|
- **后端**: FastAPI + Celery + Redis
|
|
- **视频处理**: FFmpeg (Worker 中运行)
|
|
- **数据库**: SQLite / PostgreSQL
|
|
|