内容
# MCP 屏幕捕捉
MCP 服务器，用于从网页捕捉屏幕截图、录制视频和生成动画 GIF，基于 Playwright 和 ffmpeg。
## 前置条件
- Node.js 18+
- ffmpeg（在 macOS 上通过 `brew install ffmpeg` 安装）
## 安装
```bash
cd mcp-screen-capture
npm install
```
这将通过 postinstall 脚本自动安装 Playwright 的 Chromium 浏览器。
## MCP 配置
将以下内容添加到您的 Claude Code MCP 设置（`~/.claude/settings.json`）：
```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）
**示例：**
```json
{
"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）
**示例：**
```json
{
"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`：质量预设 - "low", "medium", "high"（默认："medium"）
**示例：**
```json
{
"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`：质量预设（默认："medium"）
**示例：**
```json
{
"url": "http://localhost:5173",
"outputPath": "/path/to/demo.gif",
"duration": 8000,
"scrollToBottom": true,
"fps": 12,
"gifWidth": 800,
"quality": "high"
}
```
## 质量预设
| 预设 | 抖动 | 适合 |
|--------|-----------|----------|
| `low` | 无 | 小文件大小，简单图形 |
| `medium` | Bayer | 平衡质量和大小 |
| `high` | Sierra | 最佳质量，大文件 |
## 用例
- 为 README 文件生成演示 GIF
- 为文档捕捉屏幕截图
- 录制 UI 交互以进行错误报告
- 创建视觉回归测试基准
## 许可证
MIT
