YouTube MCP

A tool to automatically take screenshots from YouTube videos. Supports YouTube Shorts and YouTube videos.

function

YouTube Shorts

• Take a screenshot every n seconds
• Up to 60 shots (if the video is 60 seconds or longer)
• Accurately cut out only the video area and save it to tmp/
• View screenshots in real time
• Download all or selected images locally as a ZIP file (opens on both Mac and Windows)

YouTube videos

• Take a screenshot every n seconds
• Up to 60 shots (if the video is 60 seconds or longer)
• Accurately cut out only the video area and save it to tmp/
• View screenshots in real time
• Download all or selected images locally as a ZIP file (opens on both Mac and Windows)

TikTok

• Currently in preparation
• Please use a YouTube or YouTube Shorts URL

Technology stack

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

Project Configuration

API List

Take screenshot

• Endpoint : /screenshot
• Method : POST
• Parameters :
  { "url": "YouTube URL", "interval": 1 // 間隔（秒） }
• response :
  { "success": true, "screenshots": [ { "imageUrl": "署名付きURL", "time": "タイムスタンプ", "filename": "ファイル名" } ], "interval": 1 }

Get screenshot list

• Endpoint : /screenshots
• Method : GET
• response :
  [ { "filename": "ファイル名", "imageUrl": "署名付きURL", "time": "タイムスタンプ" } ]

ZIP Download

• Endpoint : /download-zip
• Method : POST
• Parameters :
  { "filenames": ["ファイル名1", "ファイル名2"] }
• Response : ZIP file

GCP Architecture

Services Used

1. Firebase Functions (Gen 2)
   • Runtime: Node.js 18
   • Region: us-central1
   • Memory: 1GiB
   • CPU: 1
   • Timeout: 540 seconds
   • Maximum number of instances: 100
   • Concurrency: 80
   • Endpoint: https://api-ub7zp5pjra-uc.a.run.app
2. Firebase Storage
   • Bucket: mcp-5e4b5.firebasestorage.app
   • Security rules: Access only to authenticated users
3. Firebase Hosting
   • Domain: https://mcp-5e4b5.web.app

IAM permission settings

User permissions

• t@bonginkan.ai
  • roles/owner (project owner)
  • roles/run.admin (Cloud Run administrator)

Service Account Permissions

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

Implementation details

Screenshot feature

• Controlling headless browsers with Playwright
• Viewport size: 1280x720
• Use a temporary directory to store screenshots
• After uploading to Firebase Storage, delete the temporary file.
• Signed URLs are valid for 15 minutes

Error Handling

• Catch errors at each API endpoint
• Returns an error message in JSON format.
• Handling 404 Endpoints
• Appropriate error response for 500 errors

CORS Settings

• Allowed Origins:
  • https://mcp-5e4b5.web.app
  • http://localhost:3001
• Allowed methods: GET, POST
• Credentials: Valid

Safety features

• Firebase Storage Security Rules
• Set expiration time for signed URLs (15 minutes)
• Properly delete temporary files

Latest revisions (2024-03-28)

Bug fixes

1. Improved CORS configuration
   • Explicitly specifying allowed origins
   • Enabling Credentials
2. Improved error handling
   • JSON response for 404 errors
   • Detailed error message for 500 errors
3. Firebase Storage Support
   • Specifying a bucket name explicitly
   • Set the expiration time for signed URLs to 15 minutes
4. Cloud Functions Gen 2 Optimizations
   • Optimize memory settings (1GiB)
   • Adjust the timeout setting (540 seconds)
   • Setting the number of concurrent executions (80)

Improved functions

1. Screenshot feature
   • Optimizing Playwright settings
   • Headless browser viewport settings
   • Improved temporary file management
   • Improved support for YouTube Shorts
   • Real-time display function implementation
2. Improved API response
   • Error messages in Japanese
   • Standardized response format
   • Standardization of timestamp formats
   • Implementing a streaming response
3. Enhanced security
   • Firebase Storage security rules update
   • Ensure temporary files are deleted
   • Appropriate restriction of error information
4. Front-end improvements
   • Optimizing real-time display
   • Image URL correction
   • Improved error handling
   • User interface improvements

set up

1. Clone the repository

2. Installing Dependencies

3. Install Firebase CLI

4. Logging in to Firebase

5. Initializing the project

6. Deploy

Setting up a local development environment

1. Installing Dependencies

2. Setting the service account key

• Download your service account key from the Firebase Console
• Save as functions/service-account.json

3. Setting environment variables

4. Starting the emulator

Emulator port settings

The emulator uses the following ports:

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

API Testing

1. Health Check

2. Take screenshot

3. Get screenshot list

4. ZIP Download

Notes

• When using the emulator, you will access the actual Firebase Storage.
• The service account key is included in .gitignore and is not committed to the repository
• You can check the execution status and logs of functions in the emulator UI.

Notes

• Node.js 18 will be deprecated on April 30, 2025
• The screenshots are saved to a temporary directory and deleted after processing.
• If the video is longer than 60 seconds, only the first 60 images will be saved.
• The security rules for Firebase Storage are set to allow access only to authenticated users.
• Signed URLs are only valid for 15 minutes

IMPORTANT

Specifications for saving screenshots and zipping

1. Saving a screenshot
   • All screenshots are temporarily saved in /tmp/screenshots/ directory.
   • The file name is in the format screenshot_[タイムスタンプ]_[連番].png
   • The temporary file will be kept after processing is complete and will be overwritten when you take a new screenshot.
2. Creating a ZIP file
   • The selected screenshot will be loaded directly from /tmp/screenshots/
   • A temporary ZIP file will be created in /tmp/screenshots/ and then deleted after download.
   • The ZIP file name is in the format screenshots_[タイムスタンプ].zip
3. Managing temporary files
   • Temporary files should be cleaned up regularly
   • We recommend deleting old screenshots before taking new ones.

license

MIT License