@studiomeyer/mcp-video 1.0.0

package/src/tools/engine/capture.ts

@@ -0,0 +1,360 @@
+/**
+ * Frame-by-Frame Capture Engine
+ * The core of cinema-grade website video recording
+ *
+ * Pipeline: Playwright → Frame Screenshots → ffmpeg → MP4
+ * Result: Perfect 60fps video with zero frame drops
+ */
+
+import { chromium } from 'playwright';
+import type { Page, Browser, BrowserContext } from 'playwright';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as os from 'os';
+import { logger } from '../../lib/logger.js';
+import type { RecordingConfig, RecordingResult, ViewportConfig, Scene } from './types.js';
+import { VIEWPORTS } from './types.js';
+import { injectCursor, hideCursor } from './cursor.js';
+import { executeScenes, createDefaultScenes } from './scenes.js';
+import { encodeFrames, cleanupFrames } from './encoder.js';
+
+const OUTPUT_DIR = process.env.VIDEO_OUTPUT_DIR || './output';
+
+/**
+ * Record a website with cinema-quality frame-by-frame capture
+ */
+export async function recordWebsite(config: RecordingConfig): Promise<RecordingResult> {
+  const {
+    url,
+    outputPath = path.join(OUTPUT_DIR, `website-video-${Date.now()}`),
+    fps = 60,
+    scenes: userScenes,
+    cursor = { enabled: true },
+    encoding = {},
+    dismissOverlays = true,
+    preloadContent = true,
+    deviceScaleFactor = 1,
+    darkMode = false,
+    disableSmoothScroll = true,
+  } = config;
+
+  // Resolve viewport
+  const viewport: ViewportConfig = typeof config.viewport === 'string'
+    ? VIEWPORTS[config.viewport] ?? VIEWPORTS.desktop
+    : config.viewport ?? VIEWPORTS.desktop;
+
+  // Create temp directory for frames
+  const framesDir = fs.mkdtempSync(path.join(os.tmpdir(), 'cinema-frames-'));
+  const framePattern = 'frame_%06d.png';
+
+  let browser: Browser | undefined;
+  let totalFrames = 0;
+  const startTime = Date.now();
+
+  try {
+    logger.info(`Starting cinema capture: ${url} (${viewport.width}x${viewport.height}, ${fps}fps)`);
+
+    // ─── 1. Launch Browser ────────────────────────────────────────
+    browser = await chromium.launch({
+      headless: true,
+      args: [
+        '--no-sandbox',
+        '--disable-setuid-sandbox',
+        '--disable-dev-shm-usage',
+        '--disable-gpu',
+        '--disable-web-security',
+        '--hide-scrollbars',
+      ],
+    });
+
+    const contextOptions: Record<string, unknown> = {
+      viewport: { width: viewport.width, height: viewport.height },
+      deviceScaleFactor,
+      colorScheme: darkMode ? 'dark' as const : 'light' as const,
+    };
+
+    // Mobile user agent
+    if (config.viewport === 'mobile' || config.viewport === 'mobile-landscape') {
+      contextOptions.userAgent = config.userAgent ??
+        'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1';
+      contextOptions.isMobile = true;
+      contextOptions.hasTouch = true;
+    } else if (config.userAgent) {
+      contextOptions.userAgent = config.userAgent;
+    }
+
+    const context: BrowserContext = await browser.newContext(contextOptions);
+    const page: Page = await context.newPage();
+
+    // ─── 2. Navigate to URL ───────────────────────────────────────
+    logger.info(`Navigating to ${url}...`);
+    await page.goto(url, { waitUntil: 'networkidle', timeout: 30000 }).catch(async () => {
+      // Fallback: try with just domcontentloaded
+      await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 30000 });
+    });
+
+    // Wait for content to render
+    await page.waitForTimeout(2000);
+
+    // ─── 3. Prepare Page ──────────────────────────────────────────
+
+    // Disable CSS smooth scroll to prevent double-easing
+    if (disableSmoothScroll) {
+      await page.addStyleTag({
+        content: `*, html { scroll-behavior: auto !important; }`,
+      });
+    }
+
+    // Hide scrollbar
+    await page.addStyleTag({
+      content: `::-webkit-scrollbar { display: none !important; } * { scrollbar-width: none !important; }`,
+    });
+
+    // Dismiss overlays and cookie banners
+    if (dismissOverlays) {
+      await dismissPageOverlays(page);
+      // Wait for animations to complete (e.g. Framer Motion exit)
+      await page.waitForTimeout(1000);
+    }
+
+    // ─── 4. Pre-scroll to trigger lazy loading ────────────────────
+    if (preloadContent) {
+      await preloadAllContent(page, viewport.height);
+    }
+
+    // ─── 5. Inject cursor overlay ─────────────────────────────────
+    if (cursor.enabled) {
+      await injectCursor(page, cursor);
+    }
+
+    // Scroll back to top
+    await page.evaluate(() => window.scrollTo(0, 0));
+    await page.waitForTimeout(500);
+
+    // ─── 6. Execute scenes & capture frames ───────────────────────
+    const scenes: Scene[] = userScenes && userScenes.length > 0
+      ? userScenes
+      : createDefaultScenes();
+
+    logger.info(`Executing ${scenes.length} scene(s)...`);
+
+    let frameIndex = 0;
+    totalFrames = await executeScenes(
+      page,
+      scenes,
+      fps,
+      async (_fi: number) => {
+        const framePath = path.join(framesDir, `frame_${String(frameIndex).padStart(6, '0')}.png`);
+        await page.screenshot({ path: framePath, type: 'png' });
+        frameIndex++;
+
+        // Progress logging every 60 frames (= 1 second at 60fps)
+        if (frameIndex % fps === 0) {
+          logger.info(`Captured ${frameIndex} frames (${(frameIndex / fps).toFixed(1)}s)`);
+        }
+      },
+      cursor.enabled
+    );
+
+    // Hide cursor for final frame
+    if (cursor.enabled) {
+      await hideCursor(page);
+    }
+
+    // Take thumbnail from first frame position
+    await page.evaluate(() => window.scrollTo(0, 0));
+    await page.waitForTimeout(300);
+    const thumbnailBuffer = await page.screenshot({ type: 'png' });
+    const thumbnailPath = `${outputPath}-thumbnail.png`;
+    const thumbnailDir = path.dirname(thumbnailPath);
+    if (!fs.existsSync(thumbnailDir)) {
+      fs.mkdirSync(thumbnailDir, { recursive: true });
+    }
+    fs.writeFileSync(thumbnailPath, thumbnailBuffer);
+
+    // ─── 7. Close browser ─────────────────────────────────────────
+    await context.close();
+    await browser.close();
+    browser = undefined;
+
+    logger.info(`Capture complete: ${totalFrames} frames in ${((Date.now() - startTime) / 1000).toFixed(1)}s`);
+
+    // ─── 8. Encode video ──────────────────────────────────────────
+    logger.info('Encoding video with ffmpeg...');
+    const encodeResult = await encodeFrames(
+      framesDir,
+      framePattern,
+      outputPath,
+      totalFrames,
+      { ...encoding, fps }
+    );
+
+    // ─── 9. Cleanup frames ────────────────────────────────────────
+    cleanupFrames(framesDir);
+
+    const captureTimeSec = ((Date.now() - startTime) / 1000).toFixed(1);
+    logger.info(`Video ready: ${encodeResult.outputPath} (${encodeResult.sizeMB} MB, ${captureTimeSec}s total)`);
+
+    return {
+      success: true,
+      video: {
+        path: encodeResult.outputPath,
+        format: encodeResult.format,
+        codec: encodeResult.codec,
+        fps: encodeResult.fps,
+        duration: encodeResult.duration,
+        totalFrames: encodeResult.totalFrames,
+        resolution: { width: viewport.width, height: viewport.height },
+        sizeBytes: encodeResult.sizeBytes,
+        sizeMB: encodeResult.sizeMB,
+      },
+      thumbnail: {
+        path: thumbnailPath,
+        width: viewport.width,
+        height: viewport.height,
+      },
+      scenes: scenes.length,
+      url,
+      captureTime: `${captureTimeSec}s`,
+    };
+  } catch (error) {
+    // Cleanup on error
+    cleanupFrames(framesDir);
+    if (browser) {
+      try { await browser.close(); } catch { /* ignore */ }
+    }
+
+    const message = error instanceof Error ? error.message : String(error);
+    logger.error(`Recording failed: ${message}`);
+    throw new Error(`Recording failed: ${message}`);
+  }
+}
+
+/**
+ * Dismiss cookie banners, fixed overlays, and popups
+ * Uses multiple strategies: localStorage pre-set, button clicks, CSS hiding
+ */
+async function dismissPageOverlays(page: Page): Promise<void> {
+  logger.info('Dismissing overlays and cookie banners...');
+
+  // Strategy 1: Pre-set common cookie consent localStorage/cookie values
+  // This prevents banners from appearing in the first place
+  await page.evaluate(() => {
+    // Common cookie consent localStorage key
+    localStorage.setItem('cookie-consent', 'accepted');
+    // Common cookie consent libraries
+    localStorage.setItem('cookieConsent', 'accepted');
+    localStorage.setItem('cookie_consent', 'true');
+    localStorage.setItem('cookies-accepted', 'true');
+    localStorage.setItem('gdpr-consent', 'true');
+    localStorage.setItem('CookieConsent', 'true');
+    // CookieBot
+    localStorage.setItem('CookieConsentV2', '{"stamp":"","necessary":true,"preferences":true,"statistics":true,"marketing":true}');
+    // OneTrust
+    localStorage.setItem('OptanonAlertBoxClosed', new Date().toISOString());
+
+    // Set cookies too
+    document.cookie = 'cookie-consent=accepted; path=/; max-age=31536000';
+    document.cookie = 'cookieconsent_status=dismiss; path=/; max-age=31536000';
+
+    // Dispatch custom consent event
+    window.dispatchEvent(new Event('cookie-consent-accepted'));
+  });
+
+  await page.waitForTimeout(300);
+
+  // Strategy 2: Try clicking accept buttons (multilingual)
+  const acceptButtonSelectors = [
+    // By text content (most reliable)
+    'button:has-text("Akzeptieren")',
+    'button:has-text("Accept")',
+    'button:has-text("Aceptar")',
+    'button:has-text("Accept all")',
+    'button:has-text("Alle akzeptieren")',
+    'button:has-text("Got it")',
+    'button:has-text("OK")',
+    'button:has-text("Verstanden")',
+  ];
+
+  for (const selector of acceptButtonSelectors) {
+    try {
+      const btn = page.locator(selector).first();
+      if (await btn.isVisible({ timeout: 500 }).catch(() => false)) {
+        await btn.click({ timeout: 1000 });
+        logger.info(`Clicked consent button: ${selector}`);
+        break;
+      }
+    } catch {
+      // Button not found, try next
+    }
+  }
+
+  // Strategy 3: Click by CSS selectors (fallback)
+  await page.evaluate(() => {
+    const cssSelectors = [
+      '[class*="cookie"] button',
+      '[class*="consent"] button',
+      '[id*="cookie"] button',
+      '[id*="consent"] button',
+      'button[class*="accept"]',
+      'button[class*="Accept"]',
+      '[data-testid*="cookie"] button',
+    ];
+
+    for (const sel of cssSelectors) {
+      const btn = document.querySelector<HTMLElement>(sel);
+      if (btn) {
+        btn.click();
+        break;
+      }
+    }
+  });
+
+  await page.waitForTimeout(500);
+
+  // Strategy 4: Force hide any remaining overlays via CSS
+  await page.addStyleTag({
+    content: `
+      [class*="cookie"], [class*="Cookie"],
+      [class*="consent"], [class*="Consent"],
+      [class*="popup"]:not([class*="menu"]),
+      [class*="Popup"]:not([class*="menu"]),
+      [id*="cookie"], [id*="consent"],
+      [role="dialog"],
+      [class*="banner"]:not(header):not(nav):not([class*="hero"]),
+      .fixed.bottom-0.left-0.right-0.z-50 {
+        display: none !important;
+        visibility: hidden !important;
+        opacity: 0 !important;
+        pointer-events: none !important;
+      }
+    `,
+  });
+
+  logger.info('Overlays dismissed');
+}
+
+/**
+ * Pre-scroll entire page to trigger all lazy-loaded content
+ */
+async function preloadAllContent(page: Page, viewportHeight: number): Promise<void> {
+  logger.info('Pre-scrolling to trigger lazy content...');
+
+  const scrollHeight = await page.evaluate(() => document.documentElement.scrollHeight);
+  const steps = Math.ceil(scrollHeight / (viewportHeight * 0.7));
+
+  for (let i = 0; i <= steps; i++) {
+    const y = Math.min(i * viewportHeight * 0.7, scrollHeight);
+    await page.evaluate((scrollY) => window.scrollTo(0, scrollY), y);
+    await page.waitForTimeout(200);
+
+    // Wait for any network requests to settle
+    await page.waitForLoadState('networkidle').catch(() => {});
+  }
+
+  // Scroll back to top
+  await page.evaluate(() => window.scrollTo(0, 0));
+  await page.waitForTimeout(500);
+
+  logger.info('Lazy content preloaded');
+}

package/src/tools/engine/chroma-key.ts

@@ -0,0 +1,202 @@
+/**
+ * Chroma Key Engine — Green screen removal and background replacement.
+ *
+ * Supports:
+ * - chromakey (YUV space, best for green/blue screens)
+ * - colorkey (RGB space, best for arbitrary key colors)
+ * - despill (removes green/blue color spill on edges)
+ * - Composite onto replacement background (video, image, or solid color)
+ */
+
+import { execFile } from 'child_process';
+import * as fs from 'fs';
+import * as path from 'path';
+import { logger } from '../../lib/logger.js';
+
+// ─── Types ──────────────────────────────────────────────────────────
+
+export interface ChromaKeyConfig {
+  /** Input video with green/blue screen */
+  inputPath: string;
+  outputPath: string;
+  /** Key color in hex (e.g., '00FF00' for green, '0000FF' for blue). Default: 00FF00 */
+  keyColor?: string;
+  /** How close a color must be to the key: 0.01-1.0. Higher = more removal. Default: 0.15 */
+  similarity?: number;
+  /** Edge softness: 0.0-1.0. Keep low (0.0-0.08) or entire frame becomes transparent. Default: 0.02 */
+  blend?: number;
+  /** Enable despill to remove green/blue color contamination on edges. Default: true */
+  despill?: boolean;
+  /** Background replacement — video file, image file, or hex color (e.g., '000000' for black). Required. */
+  background: string;
+  /** Use colorkey (RGB) instead of chromakey (YUV). Default: false (chromakey) */
+  useColorkey?: boolean;
+}
+
+// ─── Helpers ────────────────────────────────────────────────────────
+
+function runFfmpeg(args: string[], timeoutMs = 300_000): Promise<string> {
+  return new Promise((resolve, reject) => {
+    execFile('ffmpeg', args, { maxBuffer: 100 * 1024 * 1024, timeout: timeoutMs }, (error, stdout, stderr) => {
+      if (error) {
+        logger.error(`ffmpeg failed: ${stderr}`);
+        reject(new Error(`ffmpeg failed: ${stderr || error.message}`));
+        return;
+      }
+      resolve(stdout);
+    });
+  });
+}
+
+function ensureDir(filePath: string): void {
+  const dir = path.dirname(filePath);
+  if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+}
+
+function assertExists(filePath: string, label = 'File'): void {
+  if (!fs.existsSync(filePath)) throw new Error(`${label} not found: ${filePath}`);
+}
+
+function fileInfo(filePath: string): string {
+  const stats = fs.statSync(filePath);
+  return `${(stats.size / 1024 / 1024).toFixed(2)} MB`;
+}
+
+function isHexColor(s: string): boolean {
+  return /^[0-9a-fA-F]{6}$/.test(s);
+}
+
+function isImageFile(filePath: string): boolean {
+  const ext = path.extname(filePath).toLowerCase();
+  return ['.png', '.jpg', '.jpeg', '.webp', '.bmp', '.tiff'].includes(ext);
+}
+
+// ─── Main Function ──────────────────────────────────────────────────
+
+export async function applyChromaKey(config: ChromaKeyConfig): Promise<string> {
+  const {
+    inputPath,
+    outputPath,
+    keyColor = '00FF00',
+    similarity = 0.15,
+    blend = 0.02,
+    despill: enableDespill = true,
+    background,
+    useColorkey = false,
+  } = config;
+
+  assertExists(inputPath, 'Input video');
+  ensureDir(outputPath);
+
+  // Validate key color
+  const cleanColor = keyColor.replace(/^#|^0x/, '');
+  if (!isHexColor(cleanColor)) {
+    throw new Error(`Invalid key color: ${keyColor}. Use 6-digit hex (e.g., 00FF00 for green)`);
+  }
+
+  const sim = Math.max(0.01, Math.min(1, similarity));
+  const bld = Math.max(0, Math.min(0.1, blend)); // Cap at 0.1 to prevent full-frame transparency
+
+  logger.info(`Chroma key: color=0x${cleanColor}, sim=${sim}, blend=${bld}, despill=${enableDespill}, mode=${useColorkey ? 'colorkey' : 'chromakey'}`);
+
+  // Build the keying filter
+  const keyFilter = useColorkey
+    ? `colorkey=0x${cleanColor}:${sim}:${bld}`
+    : `chromakey=0x${cleanColor}:${sim}:${bld}`;
+
+  // Optional despill
+  const despillFilter = enableDespill
+    ? getDespillFilter(cleanColor)
+    : '';
+
+  const fgFilter = despillFilter
+    ? `${keyFilter},${despillFilter}`
+    : keyFilter;
+
+  // Determine background type
+  const isSolidColor = isHexColor(background.replace(/^#|^0x/, ''));
+  const isImage = !isSolidColor && isImageFile(background);
+  const isVideo = !isSolidColor && !isImage;
+
+  if (isVideo) assertExists(background, 'Background video');
+  if (isImage) assertExists(background, 'Background image');
+
+  let args: string[];
+
+  if (isSolidColor) {
+    // Solid color background — use color source
+    const bgColor = background.replace(/^#|^0x/, '');
+    const filterComplex = [
+      `color=c=0x${bgColor}:s=1920x1080:r=30[bg]`,
+      `[0:v]${fgFilter}[fg]`,
+      `[bg][fg]overlay=shortest=1[out]`,
+    ].join(';');
+
+    args = [
+      '-y', '-i', inputPath,
+      '-filter_complex', filterComplex,
+      '-map', '[out]', '-map', '0:a?',
+      '-c:v', 'libx264', '-crf', '18', '-preset', 'medium',
+      '-pix_fmt', 'yuv420p', '-movflags', '+faststart',
+      outputPath,
+    ];
+  } else if (isImage) {
+    // Image background — use loop to make it a stream
+    const filterComplex = [
+      `[1:v]${fgFilter}[fg]`,
+      `[0:v][fg]overlay=shortest=1[out]`,
+    ].join(';');
+
+    args = [
+      '-y',
+      '-loop', '1', '-i', background,
+      '-i', inputPath,
+      '-filter_complex', filterComplex,
+      '-map', '[out]', '-map', '1:a?',
+      '-c:v', 'libx264', '-crf', '18', '-preset', 'medium',
+      '-pix_fmt', 'yuv420p', '-movflags', '+faststart',
+      '-shortest',
+      outputPath,
+    ];
+  } else {
+    // Video background
+    const filterComplex = [
+      `[1:v]${fgFilter}[fg]`,
+      `[0:v][fg]overlay=shortest=1[out]`,
+    ].join(';');
+
+    args = [
+      '-y',
+      '-i', background,
+      '-i', inputPath,
+      '-filter_complex', filterComplex,
+      '-map', '[out]', '-map', '1:a?',
+      '-c:v', 'libx264', '-crf', '18', '-preset', 'medium',
+      '-pix_fmt', 'yuv420p', '-movflags', '+faststart',
+      '-shortest',
+      outputPath,
+    ];
+  }
+
+  await runFfmpeg(args, 600_000); // Longer timeout for compositing
+  logger.info(`Chroma key applied: ${outputPath} (${fileInfo(outputPath)})`);
+  return outputPath;
+}
+
+/** Get despill filter based on key color */
+function getDespillFilter(hexColor: string): string {
+  const r = parseInt(hexColor.substring(0, 2), 16);
+  const g = parseInt(hexColor.substring(2, 4), 16);
+  const b = parseInt(hexColor.substring(4, 6), 16);
+
+  // Determine dominant channel for despill
+  if (g > r && g > b) {
+    // Green screen — despill green
+    return 'despill=type=0:mix=0.5:green=-1';
+  } else if (b > r && b > g) {
+    // Blue screen — despill blue
+    return 'despill=type=0:mix=0.5:blue=-1';
+  }
+  // For other colors, skip despill
+  return '';
+}