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