YouTube Transcript & Screenshot Scraper

A browser-based JavaScript snippet to extract the full transcript and capture screenshots at each transcript timestamp from a YouTube video.

Features

• Full Transcript Extraction: Downloads the complete video transcript as a .txt file.
• Timestamped Screenshots: Captures a screenshot of the video frame for each segment in the transcript.
• Timestamp Overlay: Draws the corresponding timestamp onto each screenshot in a YouTube CC-like style (bottom-middle, white text on a semi-transparent black background).
• Customizable: Configuration options at the top of the script allow for adjustments to delays and selectors (if YouTube's structure changes).

How to Use

1. Navigate to a YouTube Video: Open the YouTube video page you want to process in your web browser (e.g., Chrome, Firefox, Edge).
2. Open Transcript Panel:
   • Click the "..." (three dots) button below the video.
   • Select "Show transcript".
   • Ensure the transcript panel is open and fully loaded with all segments visible.
3. Open Developer Console:
   • Press F12 (or Cmd+Opt+J on Mac, Ctrl+Shift+J on Windows/Linux) to open your browser's Developer Tools.
   • Go to the Console tab.
4. Run the Script:
   • Copy the entire content of the captureYouTubeTranscriptAndScreenshots.js (or whatever you name the file) script.
   • Paste it into the browser's developer console.
   • Press Enter.
5. Downloads:
   • The script will first attempt to download the full_transcript.txt file.
   • Then, it will iterate through the transcript, seek the video, and download a .png screenshot for each timestamp. Screenshots will be prefixed with transcript_screenshots/ (e.g., transcript_screenshots/yt_screenshot_01-23.png). Your browser will handle these downloads.

Configuration

The script has several configuration constants at the top:

• VIDEO_SELECTOR, TRANSCRIPT_SEGMENT_SELECTOR, etc.: CSS selectors for targeting YouTube elements. These might need updating if YouTube changes its page structure.
• SCREENSHOT_FOLDER_PREFIX: Prefix for screenshot filenames.
• TRANSCRIPT_FILENAME: Name of the downloaded transcript file.
• DELAY_AFTER_SEEK_MS, DELAY_BETWEEN_SCREENSHOTS_MS: Delays to ensure proper frame capture and avoid overwhelming the browser. Adjust these if screenshots are blank or downloads fail.

Important Notes

• Browser Environment Only: This script is designed to be run directly in a web browser's developer console on a YouTube video page.
• YouTube UI Changes: YouTube frequently updates its website. If the script stops working, the CSS selectors (VIDEO_SELECTOR, TRANSCRIPT_SEGMENT_SELECTOR, etc.) likely need to be updated.
• Subfolder Creation: The script itself cannot create subfolders on your system. The SCREENSHOT_FOLDER_PREFIX is a naming convention. Some browsers/OS combinations might automatically create the subfolder in your Downloads directory, but this is not guaranteed.
• Pop-up Blockers: Ensure your pop-up blocker is not interfering with the multiple file downloads.
• Ads: The script might capture ads if they play during a timestamped segment.
• Video Must Be Loaded: The video player needs to be active and the video content loaded for seeking and screenshotting to work correctly.
• Copyright & Terms of Service: Be mindful of YouTube's Terms of Service and copyright of the content you are processing. This tool is for personal or fair use.

License

MIT License (or choose another if you liike!)