youtube mcp

Local 2025-09-01 00:47:21 0
Browser Automation @tsubouchi/youtube_mcp

Automatically captures and processes screenshots from YouTube videos and Shorts at specified intervals, supporting customizable screenshot timing and providing API endpoints for image management.


YouTubeの動画から自動的にスクリーンショットを取得するツールです。YouTube ShortsとYouTube動画に対応しています。

機能

YouTube Shorts

  • 指定したn秒ごとにスクリーンショットを撮影
  • 最大60枚まで撮影(動画が60秒以上の場合)
  • 動画エリアのみを正確に切り出してtmp/に保存
  • リアルタイムでスクリーンショットを表示
  • 全部もしくは選択した画像をZIPでローカルにDL(Mac、Windowsの双方で開ける)

YouTube動画

  • 指定したn秒ごとにスクリーンショットを撮影
  • 最大60枚まで撮影(動画が60秒以上の場合)
  • 動画エリアのみを正確に切り出してtmp/に保存
  • リアルタイムでスクリーンショットを表示
  • 全部もしくは選択した画像をZIPでローカルにDL(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. ランタイム: Node.js 18
  3. リージョン: us-central1
  4. メモリ: 1GiB
  5. CPU: 1
  6. タイムアウト: 540秒
  7. 最大インスタンス数: 100
  8. 同時実行数: 80
  9. エンドポイント: https://api-ub7zp5pjra-uc.a.run.app

  10. Firebase Storage

  11. バケット: mcp-5e4b5.firebasestorage.app
  12. セキュリティルール: 認証済みユーザーのみアクセス可能

  13. Firebase Hosting

  14. ドメイン: https://mcp-5e4b5.web.app

IAM権限設定

ユーザー権限

  • [email protected]
  • roles/owner (プロジェクト所有者)
  • roles/run.admin (Cloud Run管理者)

サービスアカウント権限

  1. Cloud Functions
  2. [email protected]

    • roles/run.admin
    • roles/run.developer
    • roles/run.invoker
    • roles/cloudfunctions.developer
    • roles/storage.admin
  3. Firebase Admin

  4. [email protected]

    • roles/firebase.sdkAdminServiceAgent
    • roles/firebaseauth.admin
    • roles/iam.serviceAccountTokenCreator
    • roles/storage.admin
  5. Cloud Build

  6. [email protected]
    • 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設定

  • 許可オリジン:
  • https://mcp-5e4b5.web.app
  • http://localhost:3001
  • 許可メソッド: GET, POST
  • クレデンシャル: 有効

セキュリティ

  • Firebase Storageのセキュリティルール
  • 署名付きURLの有効期限設定(15分)
  • 一時ファイルの適切な削除

最新の修正内容(2024-03-28)

バグ修正

  1. CORS設定の改善
  2. 許可オリジンの明示的な指定
  3. クレデンシャルの有効化

  4. エラーハンドリングの強化

  5. 404エラーのJSON形式レスポンス
  6. 500エラー時の詳細なエラーメッセージ

  7. Firebase Storage対応

  8. バケット名の明示的な指定
  9. 署名付きURLの有効期限を15分に設定

  10. Cloud Functions Gen 2の最適化

  11. メモリ設定の最適化(1GiB)
  12. タイムアウト設定の調整(540秒)
  13. 同時実行数の設定(80)

機能改善

  1. スクリーンショット機能
  2. Playwrightの設定最適化
  3. ヘッドレスブラウザのビューポート設定
  4. 一時ファイル管理の改善
  5. YouTube Shorts対応の改善
  6. リアルタイム表示機能の実装

  7. API応答の改善

  8. エラーメッセージの日本語化
  9. レスポンス形式の統一
  10. タイムスタンプ形式の標準化
  11. ストリーミングレスポンスの実装

  12. セキュリティ強化

  13. Firebase Storageのセキュリティルール更新
  14. 一時ファイルの確実な削除
  15. エラー情報の適切な制限

  16. フロントエンド改善

  17. リアルタイム表示の最適化
  18. 画像URLの修正
  19. エラーハンドリングの強化
  20. ユーザーインターフェースの改善

セットアップ

  1. リポジトリのクローン

    git clone https://github.com/tsubouchi/youtube_mcp.git
    cd youtube_mcp

  2. 依存パッケージのインストール

    # プロジェクトルート
    npm install
    
    # Cloud Functions
    cd functions
    npm install

  3. Firebase CLIのインストール

    npm install -g firebase-tools

  4. Firebaseへのログイン

    firebase login

  5. プロジェクトの初期化

    firebase init

  6. デプロイ

    # Cloud Functions
    cd functions
    npm run deploy
    
    # Firebase Hosting
    cd ..
    firebase deploy --only hosting

ローカル開発環境のセットアップ

  1. 依存パッケージのインストール

    # プロジェクトルート
    npm install
    
    # Cloud Functions
    cd functions
    npm install

  2. サービスアカウントキーの設定

  3. Firebase Consoleからサービスアカウントキーをダウンロード
  4. functions/service-account.jsonとして保存

  5. 環境変数の設定

    # functions/.env
    GOOGLE_APPLICATION_CREDENTIALS=./service-account.json

  6. エミュレータの起動

    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

  2. スクリーンショット取得

    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}'

  3. スクリーンショット一覧取得

    curl http://localhost:5001/mcp-5e4b5/us-central1/api/screenshots

  4. 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分間のみ有効です

IMPORTANT

スクリーンショットの保存とZIP化の仕様

  1. スクリーンショットの保存
  2. すべてのスクリーンショットは/tmp/screenshots/ディレクトリに一時保存されます
  3. ファイル名はscreenshot_[タイムスタンプ]_[連番].pngの形式です
  4. 一時ファイルは処理完了後も保持され、新しいスクリーンショットを撮影する際に上書きされます

  5. ZIPファイルの作成

  6. 選択したスクリーンショットは/tmp/screenshots/から直接読み込まれます
  7. ZIPファイルは一時的に/tmp/screenshots/に作成され、ダウンロード後に削除されます
  8. ZIPファイル名はscreenshots_[タイムスタンプ].zipの形式です

  9. 一時ファイルの管理

  10. 一時ファイルは定期的にクリーンアップする必要があります
  11. 新しいスクリーンショットを撮影する前に、古いファイルを削除することを推奨します

ライセンス

MIT License