Video Recorder MCP

🎬 视频录像机MCP

MCP（模型上下文协议）服务器，用于记录HTML内容和视频文件的URL，并具有精确的时间控制。

✨ 特性

• 🎯 精确的定时控制 -为每个幻灯片/部分定义确切的持续时间
• 📹 HTML到视频 -将任何HTML内容转换为MP4视频
• 🌐 URL录制 -记录任何网站或web应用程序
• 🎵 音频支持 -为录音添加背景音乐或旁白
• 🎞️ 高质量 -可配置的分辨率和帧率（高达1080p，60fps）
• 🎨 动画支持 -保留CSS动画和过渡
• 📁 有组织的产出 -具有唯一作业ID的自动文件管理

📋 先决条件

所需软件

• Node.js >= 18.0.0
• npm >= 8.0.0
• 转码 -必须在PATH中安装并可访问

安装FFmpeg

视窗

# Using Chocolatey
choco install ffmpeg

# Or download from: https://ffmpeg.org/download.html

macOS

# Using Homebrew
brew install ffmpeg

Linux

# Ubuntu/Debian
sudo apt update
sudo apt install ffmpeg

# Fedora
sudo dnf install ffmpeg

# Arch
sudo pacman -S ffmpeg

🚀 安装

1. 克隆存储库

git clone https://github.com/aihenryai/video-recorder-mcp.git
cd video-recorder-mcp

1. 安装依赖项

npm install

1. 配置Claude桌面

添加到您的Claude Desktop配置文件中：

视窗: %APPDATA%\Claude\claude_desktop_config.json macOS: ~/Library/Application Support/Claude/claude_desktop_config.json Linux: ~/.config/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "video-recorder": {
      "command": "node",
      "args": ["C:/path/to/video-recorder-mcp/src/index.js"],
      "env": {}
    }
  }
}

1. 启动服务器

npm start

对于自动重启的开发：

npm run dev

📖 用法

带有多张幻灯片的基本录制

// Record a presentation with different timing for each slide
record_html_to_video({
  input: `
    
    
    
      
        .slide {
          display: none;
          width: 100vw;
          height: 100vh;
          font-family: Arial;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 3em;
        }
        .slide:first-child { display: flex; background: #FF6B6B; }
        .slide:nth-child(2) { background: #4ECDC4; }
        .slide:nth-child(3) { background: #45B7D1; }
      
    
    
      
Welcome - 3 seconds

      
Main Content - 5 seconds

      
Thank You - 2 seconds

    
    
  `,
  slideTimings: [3, 5, 2],  // Duration for each slide in seconds
  fps: 30,
  width: 1920,
  height: 1080
})

用音频录制网站

record_html_to_video({
  input: "https://example.com",
  slideTimings: [5, 10, 5],  // Different sections of the page
  audioPath: "C:/path/to/narration.mp3",
  fps: 30,
  width: 1920,
  height: 1080
})

单页录制

// For a single static page, use one timing value
record_html_to_video({
  input: "
Hello World
",
  slideTimings: [10],  // Record for 10 seconds
  fps: 24,
  width: 1280,
  height: 720
})

🔧 api参考

工具

record_html_to_video

通过精确的时间控制将HTML内容或URL记录到视频文件中。

参数：

退货：

{
  jobId: "unique-job-id",
  outputPath: "/path/to/output.mp4",
  duration: 15,  // Total duration in seconds
  slideTimings: [3, 5, 7],
  resolution: "1920x1080",
  fps: 30
}

list_recordings

列出所有可用的记录及其元数据。

退货：

[
  {
    jobId: "job-id",
    path: "/path/to/video.mp4",
    size: "12.5 MB",
    created: "2025-01-16T10:30:00Z"
  }
]

get_recording_status

获取特定录制作业的状态。

参数：

🎯 运作原理

1. 内容加载：服务器加载您的HTML或导航到URL
2. 滑动检测：自动检测内容中的幻灯片/部分
3. 帧生成：以指定的FPS为每张幻灯片捕获屏幕截图
4. 定时控制：服务器端控制确保每个部分的精确计时
5. 视频编码：FFmpeg将帧组合成高质量的MP4视频
6. 混音：可选音轨与视频同步

📁 项目结构

video-recorder-mcp/
├── src/
│   └── index.js           # Main MCP server implementation
├── recordings/            # Output directory for videos
│   └── [job-id]/         # Each recording in its own folder
│       ├── frames/       # Temporary frame storage
│       └── output.mp4    # Final video file
├── package.json          # Dependencies and scripts
├── LICENSE              # MIT License
├── .gitignore          # Git ignore rules
└── README.md           # This file

⚙️ 配置

局限性

• 最长视频时长：5分钟（300秒）
• 最大分辨率：4K（3840x2160）
• 支持的音频格式：MP3、WAV、AAC

性能提示

• 演示文稿的帧率较低（24-30）
• 动画帧率更高（60）
• 优化HTML/CSS以获得更好的性能
• 预压缩音频文件

🐛 故障排除

常见问题

未找到FFmpeg

Error: FFmpeg not found in PATH

解决方案：安装FFmpeg并确保它在您的系统PATH中。

浏览器启动失败

Error: Failed to launch browser

解决方案：安装所需的依赖项：

# Ubuntu/Debian
sudo apt-get install -y libx11-xcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6

# Windows - Usually works out of the box
# macOS - Usually works out of the box

长录音的内存问题

解决方案：降低FPS或分辨率，或分割成更短的片段。

🤝 贡献

欢迎投稿！请随时提交拉取请求。

1. 分叉存储库
2. 创建功能分支(git checkout -b feature/AmazingFeature)
3. 提交您的更改(git commit -m 'Add some AmazingFeature')
4. 推到分支(git push origin feature/AmazingFeature)
5. 打开拉取请求

📄 许可证

此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。

🙏 致谢

• 操纵者 -无头Chrome自动化
• 转码 -视频处理
• MCP-SDK -模型上下文协议

📧 支持

如有疑问，请 打开一个问题 在GitHub上。

______________________________________________________________________

由以下材料制成❤️ 亨利