网页截图与录屏工具

MCP屏幕截图

一个MCP服务器，用于使用Playwright和ffmpeg从网页捕获屏幕截图、录制视频和生成动画GIF。

先决条件

• Node.js 18+
• ffmpeg（通过安装 brew install ffmpeg 在macOS上）

安装

cd mcp-screen-capture
npm install

这将通过安装后脚本自动安装Playwright的Chromium浏览器。

MCP配置

添加到您的Claude Code MCP设置中(~/.claude/settings.json):

{
  "mcpServers": {
    "screen-capture": {
      "command": "node",
      "args": ["/path/to/mcp-screen-capture/src/index.js"]
    }
  }
}

可用工具

screenshot

截取URL的屏幕截图。

参数：

• url （必填）：要捕获的URL
• outputPath （必填）：保存截图的路径（.png）
• width：视口宽度（默认值：1280）
• height：视口高度（默认值：720）
• fullPage：捕获完整的可滚动页面（默认值：false）
• waitForSelector：在捕获之前等待CSS选择器
• delay：捕获前的延迟（毫秒）（默认值：0）

例子：

{
  "url": "http://localhost:5173",
  "outputPath": "/path/to/screenshot.png",
  "fullPage": true
}

record_video

使用可选的自动滚动功能录制网页视频。

参数：

• url （必填）：记录的URL
• outputPath （必填）：保存视频的路径（.webm）
• width：视口宽度（默认值：1280）
• height：视口高度（默认值：720）
• duration：录制持续时间（毫秒）（默认值：5000）
• scrollToBottom：录制时自动滚动（默认值：false）
• scrollSpeed：每滚动一步的像素数（默认值：100）

例子：

{
  "url": "http://localhost:5173",
  "outputPath": "/path/to/recording.webm",
  "duration": 8000,
  "scrollToBottom": true
}

video_to_gif

将视频文件转换为动态GIF。

参数：

• inputPath （必填）：输入视频的路径
• outputPath （必填）：保存GIF的路径
• fps：每秒帧数（默认值：10）
• width：GIF宽度（像素）（默认值：800）
• quality：质量预设-“低”、“中”、“高”（默认值：“中”）

例子：

{
  "inputPath": "/path/to/video.webm",
  "outputPath": "/path/to/output.gif",
  "fps": 12,
  "quality": "high"
}

capture_gif

一体式：录制网页并直接保存为GIF。

参数：

• url （必填）：记录的URL
• outputPath （必填）：保存GIF的路径
• width：视口宽度（默认值：1280）
• height：视口高度（默认值：720）
• duration：录制持续时间（毫秒）（默认值：5000）
• scrollToBottom：录制时自动滚动（默认值：false）
• fps：GIF每秒帧数（默认值：10）
• gifWidth：输出GIF宽度（默认值：800）
• quality：质量预设（默认：“中等”）

例子：

{
  "url": "http://localhost:5173",
  "outputPath": "/path/to/demo.gif",
  "duration": 8000,
  "scrollToBottom": true,
  "fps": 12,
  "gifWidth": 800,
  "quality": "high"
}

质量预设

用例

• 为README文件生成演示GIF
• 捕获屏幕截图以供记录
• 记录bug报告的UI交互
• 创建可视化回归测试基线

许可证

麻省理工学院