Remotion视频编辑MCP服务器
基于Remotion的网络视频编辑平台，通过模型上下文协议（MCP）服务器提供直接编辑功能。
🎯 主要功能
1.介质文件管理
- 上载文件：支持视频、音频和图像文件
- 提取元数据：自动提取分辨率、持续时间、文件大小等
- 创建缩略图：自动生成视频和图像文件的缩略图
- 文件格式支持：MP4、MOV、AVI、MP3、WAV、JPG、PNG등
2.编辑时间轴
- 多轨支持：独立于视频、音频和字幕轨道管理
- 精确的时间调整：可编辑帧单位
- 拖放：直观的介质放置
- 实时预览：编辑过程中立即查看结果
3.编辑工作
- 修剪：通过调整起点/终点编辑剪辑长度
- 分割：在特定位置将剪辑一分为二
- 移动：在时间轴上移动剪辑位置
- 重叠解决：自动清理冲突剪辑
- 撤消/重做：可以还原所有编辑操作
4.布局和布局
- 2D转换：调整位置、大小、旋转和透明度
- 管理层：分层放置多个介质
- 关键帧动画：属性随时间变化
- 转换效果：fadeIn，fadeOut，slide등
🏗️ 体系结构
核心组件
1.媒体文件管理器(src/utils/mediaUtils.ts)
// 미디어 파일 업로드 및 관리
const mediaManager = new MediaFileManager();
const mediaFile = await mediaManager.uploadFile(file);2.时间线经理(src/utils/timelineUtils.ts)
// 타임라인 및 편집 작업 관리
const timeline = new TimelineManager(30); // 30fps
const track = timeline.createTrack('Video Track', 'video');
timeline.addItemToTrack(trackId, mediaItem);3.MCP视频编辑服务器(src/api/mcpInterface.ts)
// MCP 서버 인터페이스
const server = new MCPVideoEditingServer();
const sessionId = server.createSession();
const response = await server.handleRequest(mcpRequest);MCP API端点
会话管理
session.create：创建新的编辑会话session.delete：删除会话session.list：活动会话列表
介质管理
media.upload：上载文件media.list：浏览媒体库media.delete：删除文件media.get_info：查看文件信息
编辑时间轴
timeline.create_track：创建新轨道timeline.add_item：将媒体添加到轨道timeline.move_item：移动剪辑timeline.trim_item：修剪剪辑timeline.split_item：分割剪辑timeline.get_state：当前时间轴状态
编辑操作
edit.undo：撤消edit.redo：重新运行render.export：导出视频
🚀 开始
设置
npm install运行开发服务器
npm run dev构建
npm run build💻 使用示例
默认编辑工作流
// 1. MCP 클라이언트 초기화
const client = new MCPClient('http://localhost:3000/mcp');
await client.startSession();
// 2. 미디어 파일 업로드
const mediaFile = await client.uploadMedia(fileData, 'video.mp4', 'video/mp4');
// 3. 트랙 생성 및 미디어 추가
const track = await client.createTrack('Main Video', 'video');
const mediaItem = await client.addToTimeline(track.id, mediaFile.id, 0);
// 4. 편집 작업
await client.trimItem(track.id, mediaItem.id, 30, 180); // 30-180프레임 구간만 사용
// 5. 내보내기
const exportId = await client.exportVideo('mp4', 'high');高级编辑功能
// 키프레임 애니메이션
const keyframeManager = new KeyframeManager();
keyframeManager.addKeyframe(itemId, {
frame: 0,
property: 'opacity',
value: 0,
easing: 'ease-in'
});
keyframeManager.addKeyframe(itemId, {
frame: 30,
property: 'opacity',
value: 1,
easing: 'ease-in'
});
// 현재 프레임에서 값 계산
const currentOpacity = keyframeManager.getValue(itemId, 15, 'opacity'); // 0.5🎨 元件结构
MyComposition
主视频合成，渲染所有媒体元素。
编辑器演示
编辑界面演示组件。
📁 项目结构
src/
├── Composition.tsx # 메인 비디오 컴포지션
├── Root.tsx # Remotion 루트 컴포넌트
├── utils/
│ ├── mediaUtils.ts # 미디어 파일 관리 유틸리티
│ └── timelineUtils.ts # 타임라인 편집 유틸리티
├── api/
│ └── mcpInterface.ts # MCP 서버 인터페이스
└── demo/
└── EditorDemo.tsx # 편집 데모 컴포넌트