|
|
|
- 🎨 自定义表单: 基于 JSON Schema 的可视化参数配置，无需记忆 FFmpeg 命令
- 📝 智能日志: 实时日志流、搜索过滤、自动滚动、一键清空
- 🎯 文件名标准化: 自动处理中文、空格、特殊字符，避免 FFmpeg 错误
- 🌓 深色模式: 优雅的亮色/暗色主题切换，支持系统偏好自动适配
- 📱 移动优化: 完整的移动端支持，触控友好的 UI 设计
- 💡 新手引导: Driver.js 交互式教程，快速上手所有功能
- 🌐 CDN 智能选择: 自动检测最快 CDN，支持自定义源
- 📦 零配置部署: 支持 10+ 部署平台，开箱即用
| 场景 | 说明 | 推荐命令 |
|---|---|---|
| 📱 社交媒体 | 快速转换视频格式 | 转换为 WebM, 压缩视频 |
| 🎬 视频剪辑 | 提取片段和音频 | 提取视频片段, 提取音频为 MP3 |
| 🖼️ 动图制作 | 视频转 GIF | 转换为 GIF |
| 🔄 格式转换 | 批量转换格式 | 复制流（快速无损） |
| 📐 尺寸调整 | 调整分辨率 | 视频缩放（自定义） |
| 🎥 视频合并 | 拼接多个视频 | 合并视频 |
# 克隆仓库
git clone https://github.com/KiritoKing/yet-another-ffmpeg-webui.git
cd yet-another-ffmpeg-webui
# 安装依赖（推荐使用 pnpm）
pnpm install
# 启动开发服务器
pnpm dev访问 http://localhost:5173 即可开始使用 🎉
# 使用 Docker Compose（推荐）
docker-compose up -d
# 或者构建并运行
docker build -t ffmpeg-easy .
docker run -p 3000:3000 ffmpeg-easy
graph LR
A[选择预设命令] --> B[上传文件]
B --> C[配置参数]
C --> D{单个/批量?}
D -->|单个| E[执行命令]
D -->|批量| F[添加到队列]
F --> G[批量处理]
E --> H[查看结果]
G --> H
| 面板 | 功能 | 适用场景 |
|---|---|---|
| ⚡ 执行面板 | 快速处理单个文件 | 测试命令、快速转换 |
| 📋 队列面板 | 批量处理多个任务 | 批量转换、并发执行 |
| 📜 历史面板 | 查看和管理历史 | 重新执行、结果管理 |
🔰 新手入门
- 首次访问: 选择运行模式（推荐多线程）
- 选择命令: 从左侧列表选择"复制流"
- 上传文件: 点击上传区域，选择视频文件
- 执行: 点击"执行命令"按钮
- 下载: 等待完成后下载结果
💡 提示：首次使用会自动显示交互式新手引导！
⚡ 批量处理
- 选择要批量处理的命令
- 点击"批量上传"，选择多个文件
- 所有文件自动添加到队列
- 切换到"队列"标签页
- 设置并发数（1-4），点击"开始处理"
- 实时查看每个任务的进度
- 完成后可预览或下载所有结果
💡 提示：文件名会自动标准化，避免特殊字符问题！
🎨 自定义命令
- 点击"+ 新建命令"
- 填写基本信息（名称、描述、分类）
- 配置 FFmpeg 参数
- 可选：添加自定义表单字段
- 保存后即可在列表中使用
💡 提示：查看"旋转视频"和"视频缩放"示例学习表单配置！
|
React 19 |
TypeScript |
Vite 7 |
Tailwind v4 |
Docker |
- 🎯 框架: React 19 + React Router v7
- 💾 状态管理: Zustand v5 (persist 中间件)
- 🎨 UI: shadcn/ui + Radix UI + Lucide Icons
- ⚡ 核心: FFmpeg.wasm v0.12.15 (单/多线程)
- 🔧 工具: ahooks, dexie (IndexedDB), driver.js (引导)
ffmpeg-easy/
├── app/
│ ├── components/ # 🎨 UI 组件
│ │ ├── ui/ # shadcn/ui 基础组件
│ │ ├── CommandPanel.tsx # 命令列表面板
│ │ ├── ExecutionPanel.tsx # 执行控制面板
│ │ ├── QueueControlPanel.tsx # 队列管理面板
│ │ └── TaskHistoryViewer.tsx # 历史记录查看器
│ ├── hooks/ # 🎣 自定义 Hooks
│ │ ├── useFFmpegWeb.ts # FFmpeg 业务逻辑
│ │ ├── useTaskManager.ts # 任务队列管理
│ │ └── useOnboarding.ts # 新手引导
│ ├── services/ # ⚙️ 业务服务
│ │ ├── ffmpegService.ts # FFmpeg 核心封装
│ │ ├── queueProcessor.ts # 队列处理器
│ │ ├── taskDatabase.ts # IndexedDB 持久化
│ │ └── cdnService.ts # CDN 健康检查
│ ├── store/ # 💾 状态管理 (Zustand)
│ │ ├── command/ # 命令预设状态
│ │ ├── task/ # 任务队列状态
│ │ ├── cdn/ # CDN 配置状态
│ │ └── log/ # 日志状态
│ └── utils/ # 🔧 工具函数
│ ├── parsers.ts # CLI 解析
│ ├── validators.ts # 参数验证
│ ├── templates.ts # 模板处理
│ └── errorHandling.ts # 错误处理
├── docs/ # 📚 完整文档
│ ├── user-guide/ # 用户指南
│ ├── dev-guide/ # 开发者指南
│ └── changelog/ # 变更日志
└── public/ # 📦 静态资源
| 文档 | 说明 |
|---|---|
| 📘 用户指南 | 功能介绍、使用教程、FAQ |
| 🌓 主题定制 | 亮色/暗色模式使用指南 |
| 📱 移动端使用 | 移动设备完整指南 |
| 🔧 开发指南 | 架构设计、API 文档、部署指南 |
| 📝 变更日志 | 版本历史、功能更新 |
| 🤖 AI 协作指南 | AI 开发辅助文档 |
| 基础操作 | 格式转换 | 高级功能 |
|---|---|---|
|
|
|
⭐ 标记的命令支持可视化表单配置，详见 自定义表单文档
|
⚡ Vercel |
🌐 Netlify |
☁️ Cloudflare |
🐳 Docker |
所有平台均已预配置：
- ✅ SharedArrayBuffer 支持（COOP/COEP 头）
- ✅ SPA 路由 重定向
- ✅ pnpm 支持
- ✅ Node 20 环境
详细部署说明：DEPLOYMENT.md
详细部署说明：DEPLOYMENT.md
| 浏览器 | 单线程 | 多线程 | 移动端 | 最低版本 |
|---|---|---|---|---|
| Chrome/Edge | ✅ | ✅ | ✅ | 90+ |
| Firefox | ✅ | ✅ | ✅ | 90+ |
| Safari | ✅ | ✅ | ✅ | 15.2+ |
| iOS Safari | ✅ | ✅ | ✅ | 15.2+ |
| Android Chrome | ✅ | ✅ | ✅ | 90+ |
| IE | ❌ | ❌ | ❌ | 不支持 |
- ✅ 响应式设计 - 完美适配手机和平板（320px+）
- ✅ 触控优化 - 所有按钮符合 44x44px 触控标准
- ✅ 移动导航 - 专为移动端设计的侧边栏菜单
- ✅ 移动设置页 - 独立的移动端设置页面，平铺布局
- ✅ 性能优化 - 单线程模式推荐，电池友好
详细移动端使用指南：MOBILE_USAGE.md
- 文件大小: 建议 < 500MB（浏览器内存限制）
- 并发任务: 支持 1-4 个同时执行
- 文件格式: 支持所有 FFmpeg 支持的格式
- 性能优化: 使用
-c copy模式可大幅提升速度
- ✅ 100% 本地处理 - 文件永不上传
- ✅ 无服务器依赖 - 静态部署即可
- ✅ 浏览器端加密 - 敏感内容完全安全
- ✅ 开源透明 - 代码完全可审计
欢迎各种形式的贡献！
- 🍴 Fork 本仓库
- 🔧 创建特性分支 (
git checkout -b feature/AmazingFeature) - 💾 提交更改 (
git commit -m 'Add some AmazingFeature') - 📤 推送到分支 (
git push origin feature/AmazingFeature) - 🎉 开启 Pull Request
- ✅ TypeScript 严格模式
- ✅ 遵循现有代码风格
- ✅ 编写清晰的提交信息
- ✅ 更新相关文档
本项目采用 MIT 协议 开源。
|
FFmpeg.wasm |
React Router |
shadcn/ui |
Zustand |
TailwindCSS |
特别感谢所有贡献者和支持者！⭐
Built with ❤️ using React Router and FFmpeg.wasm