Y

YouTube截图捕手

@tsubouchi/youtube_mcp
0 Stars 371 次浏览 tsubouchi 更新于 2026-08-23

自动从YouTube视频和Shorts中以指定的时间间隔捕获并处理屏幕截图，支持自定义截图时间，并提供用于图像管理的API端点。

浏览器自动化娱乐与多媒体
该服务暂未提供标准配置，请参考 README 手动接入

服务介绍

YouTube MCP

这是一个从YouTube视频中自动截取屏幕截图的工具。支持YouTube Shorts和YouTube视频。

功能

YouTube Shorts

  • 每隔指定的n秒拍摄一次屏幕截图
  • 最多可拍摄60张（如果视频超过60秒）
  • 精确裁剪视频区域并保存到tmp/目录下
  • 实时显示屏幕截图
  • 可以选择下载所有或选定的图片为ZIP文件（Mac和Windows均可打开）

YouTube 视频

  • 每隔指定的n秒拍摄一次屏幕截图
  • 最多可拍摄60张（如果视频超过60秒）
  • 精确裁剪视频区域并保存到tmp/目录下
  • 实时显示屏幕截图
  • 可以选择下载所有或选定的图片为ZIP文件（Mac和Windows均可打开）

TikTok

  • 目前正在准备支持
  • 请使用YouTube或YouTube Shorts的URL

技术栈

  • Node.js 18
  • Express
  • Playwright
  • Firebase Functions (Gen 2)
  • Firebase Hosting
  • Firebase Storage
  • TypeScript
  • Bootstrap CSS

项目结构

Playwrigh-MCP-Server/
├── functions/                 # Cloud Functions
│   ├── src/                  # ソースコード
│   │   ├── index.ts         # メインエントリーポイント
│   │   ├── screenshot.ts    # スクリーンショット機能
│   │   ├── screenshots.ts   # スクリーンショット一覧取得
│   │   ├── download-zip.ts  # ZIPダウンロード機能
│   │   └── types.ts         # 型定義
│   ├── package.json         # 依存関係
│   └── tsconfig.json        # TypeScript設定
├── public/                   # 静的ファイル
│   └── index.html           # メインページ
├── firebase.json            # Firebase設定
└── storage.rules            # Storageセキュリティルール

API列表

获取屏幕截图

  • 端点: /screenshot
  • 方法: POST
  • 参数: 
    {
  "url": "YouTube URL",
  "interval": 1  // 间隔（秒）
}
  • 响应: 
    {
  "success": true,
  "screenshots": [
    {
      "imageUrl": "带签名的URL",
      "time": "时间戳",
      "filename": "文件名"
    }
  ],
  "interval": 1
}

获取屏幕截图列表

  • 端点: /screenshots
  • 方法: GET
  • 响应: 
    [
  {
    "filename": "文件名",
    "imageUrl": "带签名的URL",
    "time": "时间戳"
  }
]

ZIP下载

  • 端点: /download-zip
  • 方法: POST
  • 参数: 
    {
  "filenames": ["文件名1", "文件名2"]
}
  • 响应: ZIP文件

GCP架构

使用的服务

  1. Firebase Functions (Gen 2)

  2. Firebase Storage

    • 存储桶: mcp-5e4b5.firebasestorage.app
    • 安全规则: 仅认证用户可访问

  3. Firebase Hosting

IAM权限设置

用户权限

  • t@bonginkan.ai
    • roles/owner (项目所有者)
    • roles/run.admin (Cloud Run管理员)

服务账户权限

  1. Cloud Functions

    • 33501462786-compute@developer.gserviceaccount.com
      • roles/run.admin
      • roles/run.developer
      • roles/run.invoker
      • roles/cloudfunctions.developer
      • roles/storage.admin

  2. Firebase Admin

    • firebase-adminsdk-fbsvc@mcp-5e4b5.iam.gserviceaccount.com
      • roles/firebase.sdkAdminServiceAgent
      • roles/firebaseauth.admin
      • roles/iam.serviceAccountTokenCreator
      • roles/storage.admin

  3. Cloud Build

    • 33501462786@cloudbuild.gserviceaccount.com
      • roles/run.admin
      • roles/cloudfunctions.developer
      • roles/storage.admin
      • roles/artifactregistry.admin
      • roles/eventarc.admin

实现细节

截图功能

  • 使用Playwright控制无头浏览器
  • 视口大小: 1280x720
  • 使用临时目录暂时保存截图
  • 上传到Firebase Storage后删除临时文件
  • 签名URL有效期为15分钟

错误处理

  • 在每个API端点捕获错误
  • 以JSON格式返回错误信息
  • 处理404端点
  • 适当地处理500错误响应

CORS配置

安全性

  • Firebase Storage的安全规则
  • 签名URL的有效期设置（15分钟）
  • 临时文件的适当删除

最新修订内容（2024-03-28）

Bug修复

  1. CORS设置改进

    • 明确指定允许的源
    • 启用凭据

  2. 错误处理加强

    • 404错误以JSON格式响应
    • 500错误时提供详细的错误消息

  3. Firebase Storage支持

    • 明确指定存储桶名称
    • 设置签名URL有效期为15分钟

  4. Cloud Functions Gen 2优化

    • 优化内存设置（1GiB）
    • 调整超时设置（540秒）
    • 设置并发执行数（80）

功能改进

  1. 截图功能

    • Playwright配置优化
    • 无头浏览器视口设置
    • 改进临时文件管理
    • 改进对YouTube Shorts的支持
    • 实现实时显示功能

  2. API响应改进

    • 错误信息日语化
    • 统一响应格式
    • 标准化时间戳格式
    • 实现流式响应

  3. 安全性增强

    • 更新Firebase Storage安全规则
    • 确保临时文件被彻底删除
    • 适当限制错误信息

  4. 前端改进

    • 优化实时显示
    • 修正图片URL
    • 加强错误处理
    • 改进用户界面

设置

  1. 克隆仓库
git clone https://github.com/tsubouchi/youtube_mcp.git
cd youtube_mcp
  1. 安装依赖包
# プロジェクトルート
npm install

# Cloud Functions
cd functions
npm install
  1. 安装Firebase CLI
npm install -g firebase-tools
  1. 登录Firebase
firebase login
  1. 初始化项目
firebase init
  1. 部署
# Cloud Functions
cd functions
npm run deploy

# Firebase Hosting
cd ..
firebase deploy --only hosting

本地开发环境设置

  1. 安装依赖包
# プロジェクトルート
npm install

# Cloud Functions
cd functions
npm install
  1. 设置服务账号密钥
  • 从Firebase控制台下载服务账号密钥
  • 保存为functions/service-account.json
  1. 设置环境变量
# functions/.env
GOOGLE_APPLICATION_CREDENTIALS=./service-account.json
  1. 启动模拟器
cd functions
npm run serve

模拟器端口设置

模拟器使用以下端口：

  • Functions: http://127.0.0.1:5001
  • Emulator UI: http://127.0.0.1:4001

API测试

  1. 健康检查
curl http://localhost:5001/mcp-5e4b5/us-central1/api
  1. 获取截图
curl -X POST http://localhost:5001/mcp-5e4b5/us-central1/api/screenshot \
  -H "Content-Type: application/json" \
  -H "Accept: application/json" \
  -d '{"url": "YouTube URL", "interval": 5}'
  1. 获取截图列表
curl http://localhost:5001/mcp-5e4b5/us-central1/api/screenshots
  1. ZIP下载
curl -X POST http://localhost:5001/mcp-5e4b5/us-central1/api/download-zip \
  -H "Content-Type: application/json" \
  -d '{"filenames": ["ファイル名1", "ファイル名2"]}'

注意事项

  • 使用模拟器时，实际上会访问真实的Firebase Storage
  • 服务账号密钥包含在.gitignore中，不会提交到仓库
  • 可以通过模拟器UI查看函数执行情况和日志

注意事项

  • Node.js 18将于2025年4月30日不再推荐使用
  • 截图将保存在临时目录中，并在处理后被删除
  • 如果视频长度超过60秒，只保存前60张截图
  • Firebase Storage的安全规则仅允许认证用户访问
  • 签名URL有效期仅为15分钟

重要提示

截图保存与ZIP化的规格

  1. 截图保存

    • 所有截图都将暂时保存在/tmp/screenshots/目录下
    • 文件名格式为screenshot_[时间戳]_[序号].png
    • 临时文件在处理完成后仍然保留，直到拍摄新的截图时会被覆盖

  2. 创建ZIP文件

    • 选定的截图将直接从/tmp/screenshots/读取
    • ZIP文件将暂时创建于/tmp/screenshots/，并在下载后删除
    • ZIP文件名格式为screenshots_[时间戳].zip

  3. 临时文件管理

    • 临时文件需要定期清理
    • 推荐在拍摄新截图之前先删除旧文件

许可证

MIT License

查看源码 项目主页

相关 MCP 服务

Fetch网页内容抓取
@modelcontextprotocol/fetch
该服务器使大型语言模型能够检索和处理网页内容，将HTML转换为markdown格式，以便于更轻松地使用。
微软Playwright
@microsoft/playwright-mcp
一种模型上下文协议服务器，它使大型语言模型能够通过结构化的可访问性快照与网页交互，而无需使用视觉模型或截图。
Tavily智搜
@tavily-ai/tavily-mcp
该服务器使AI系统能够与Tavily的搜索和数据提取工具集成，提供实时的网络信息访问和领域特定的搜索。
Chrome开发者工具MCP
@ChromeDevTools/chrome-devtools-mcp
chrome-devtools-mcp 是一个工具，允许编码代理控制和检查实时的 Chrome 浏览器。它作为一个 MCP 服务器运行，提供对 Chrome DevTools 的完全访问权限，以实现自动化、调试和性能分析。