@dynamicu/chromedebug-mcp 2.7.1 → 2.7.4

package/chrome-extension/pro/video-exporter.js

@@ -0,0 +1,917 @@
+/**
+ * VideoExporter - Export frame recordings as MP4 videos
+ * Uses WebCodecs API with mp4-muxer for browser-side encoding
+ *
+ * Enhanced features:
+ * - Intro/outro frames with custom text
+ * - Branding watermarks
+ * - Style presets (minimal, detailed, debug)
+ * - Custom background colors
+ */
+class VideoExporter {
+  constructor(options = {}) {
+    this.quality = options.quality || 'medium'; // low, medium, high
+    this.fps = options.fps || 10;
+    this.includeLogs = options.includeLogs !== false;
+    this.includeClicks = options.includeClicks !== false;
+    this.includeCursor = options.includeCursor !== false;
+    this.logPosition = options.logPosition || 'bottom';
+    this.logFilter = options.logFilter || 'all'; // all, errors, warnings, info
+
+    // Enhanced options - Intro/Outro
+    this.introText = options.introText || '';
+    this.outroText = options.outroText || '';
+    this.introDuration = options.introDuration || 2; // seconds
+    this.outroDuration = options.outroDuration || 2; // seconds
+
+    // Watermark options
+    this.watermarkText = options.watermarkText || '';
+    this.watermarkPosition = options.watermarkPosition || 'bottom-right'; // top-left, top-right, bottom-left, bottom-right
+    this.watermarkOpacity = options.watermarkOpacity || 0.5;
+
+    // Style preset
+    this.stylePreset = options.stylePreset || 'detailed'; // minimal, detailed, debug
+
+    // Background color for overlays
+    this.backgroundColor = options.backgroundColor || 'rgba(0, 0, 0, 0.75)';
+
+    this.onProgress = options.onProgress || (() => {});
+    this.onComplete = options.onComplete || (() => {});
+    this.onError = options.onError || (() => {});
+
+    this.isExporting = false;
+    this.cancelled = false;
+
+    // Style preset configurations
+    this.styleConfigs = {
+      minimal: {
+        showTimestamp: false,
+        showFrameNumber: false,
+        maxLogs: 3,
+        logFontSize: 11,
+        logPanelOpacity: 0.6,
+        cursorStyle: 'simple'
+      },
+      detailed: {
+        showTimestamp: true,
+        showFrameNumber: true,
+        maxLogs: 5,
+        logFontSize: 12,
+        logPanelOpacity: 0.75,
+        cursorStyle: 'detailed'
+      },
+      debug: {
+        showTimestamp: true,
+        showFrameNumber: true,
+        maxLogs: 8,
+        logFontSize: 11,
+        logPanelOpacity: 0.85,
+        cursorStyle: 'debug',
+        showCoordinates: true
+      }
+    };
+  }
+
+  // Get current style config
+  getStyleConfig() {
+    return this.styleConfigs[this.stylePreset] || this.styleConfigs.detailed;
+  }
+
+  // Get bitrate based on quality setting
+  getBitrate() {
+    const bitrates = {
+      low: 1_000_000,    // 1 Mbps
+      medium: 3_000_000, // 3 Mbps
+      high: 5_000_000    // 5 Mbps
+    };
+    return bitrates[this.quality] || bitrates.medium;
+  }
+
+  // Check WebCodecs support
+  static isSupported() {
+    return typeof VideoEncoder !== 'undefined' &&
+           typeof VideoFrame !== 'undefined';
+  }
+
+  // Main export function
+  async exportVideo(frames, interactions, sessionId) {
+    // DEBUG: Log export entry point
+    console.log('[VideoExporter] exportVideo called:', {
+      framesCount: frames?.length || 0,
+      hasInteractions: !!interactions,
+      interactionsCount: interactions?.length || 0,
+      sessionId
+    });
+
+    if (!VideoExporter.isSupported()) {
+      this.onError(new Error('WebCodecs API not supported in this browser'));
+      return null;
+    }
+
+    if (this.isExporting) {
+      this.onError(new Error('Export already in progress'));
+      return null;
+    }
+
+    this.isExporting = true;
+    this.cancelled = false;
+
+    try {
+      // Dynamically import mp4-muxer (loaded via script tag)
+      if (typeof Mp4Muxer === 'undefined') {
+        throw new Error('Mp4Muxer not loaded. Please include mp4-muxer library.');
+      }
+
+      // Filter out synthetic frames (1x1 placeholders used for early log capture)
+      // These frames have isSynthetic: true and contain placeholder images that can't be exported
+      const exportableFrames = frames.filter(f => !f.isSynthetic && f.imageData && f.imageData.length > 200);
+
+      console.log('[VideoExporter] Frame filtering:', {
+        originalCount: frames.length,
+        exportableCount: exportableFrames.length,
+        filteredOut: frames.length - exportableFrames.length
+      });
+
+      if (exportableFrames.length === 0) {
+        throw new Error('No exportable frames found. All frames are either synthetic placeholders or missing image data.');
+      }
+
+      const firstFrame = exportableFrames[0];
+
+      // DEBUG: Log first frame structure
+      console.log('[VideoExporter] First exportable frame analysis:', {
+        hasFirstFrame: !!firstFrame,
+        firstFrameKeys: firstFrame ? Object.keys(firstFrame) : [],
+        hasImageData: !!firstFrame?.imageData,
+        imageDataType: typeof firstFrame?.imageData,
+        imageDataLength: firstFrame?.imageData?.length || 0,
+        imageDataPrefix: firstFrame?.imageData?.substring?.(0, 50) || 'N/A',
+        timestamp: firstFrame?.timestamp,
+        isSynthetic: firstFrame?.isSynthetic
+      });
+
+      if (!firstFrame || !firstFrame.imageData) {
+        throw new Error('No valid frames to export');
+      }
+
+      // Pre-validate image data
+      if (typeof firstFrame.imageData !== 'string' || firstFrame.imageData.length < 200) {
+        throw new Error(`Invalid image data for first frame. Data length: ${firstFrame.imageData?.length || 0}. Frame may be a placeholder.`);
+      }
+
+      // Get dimensions from first frame
+      const img = await this.loadImage(firstFrame.imageData);
+
+      // Validate that dimensions are available using naturalWidth/naturalHeight
+      // These represent the true intrinsic image dimensions
+      if (!img.naturalWidth || !img.naturalHeight) {
+        console.error('[VideoExporter] Image dimensions invalid:', {
+          naturalWidth: img.naturalWidth,
+          naturalHeight: img.naturalHeight,
+          width: img.width,
+          height: img.height,
+          complete: img.complete,
+          imageDataLength: firstFrame.imageData.length,
+          imageDataStart: firstFrame.imageData.substring(0, 50)
+        });
+        throw new Error(`Invalid image dimensions: ${img.naturalWidth}x${img.naturalHeight}. The screenshot data may be corrupted.`);
+      }
+
+      const width = Math.floor(img.naturalWidth / 2) * 2; // Ensure even dimensions
+      const height = Math.floor(img.naturalHeight / 2) * 2;
+
+      // Final validation after rounding
+      if (width === 0 || height === 0) {
+        throw new Error(`Invalid video width: ${width}. Must be a positive integer.`);
+      }
+
+      // Create export canvas
+      const canvas = document.createElement('canvas');
+      canvas.width = width;
+      canvas.height = height;
+      const ctx = canvas.getContext('2d');
+
+      // Create muxer
+      const muxer = new Mp4Muxer.Muxer({
+        target: new Mp4Muxer.ArrayBufferTarget(),
+        video: {
+          codec: 'avc',
+          width: width,
+          height: height
+        },
+        fastStart: 'in-memory'
+      });
+
+      // Create video encoder
+      const encoder = new VideoEncoder({
+        output: (chunk, meta) => {
+          muxer.addVideoChunk(chunk, meta);
+        },
+        error: (e) => {
+          console.error('VideoEncoder error:', e);
+          this.onError(e);
+        }
+      });
+
+      await encoder.configure({
+        codec: 'avc1.42001f', // H.264 baseline
+        width: width,
+        height: height,
+        bitrate: this.getBitrate(),
+        framerate: this.fps
+      });
+
+      const frameDuration = 1_000_000 / this.fps; // microseconds per frame
+      let currentTimestamp = 0;
+      let frameCounter = 0;
+
+      // Calculate intro/outro frames
+      const introFrameCount = this.introText ? Math.ceil(this.introDuration * this.fps) : 0;
+      const outroFrameCount = this.outroText ? Math.ceil(this.outroDuration * this.fps) : 0;
+      const totalFrameCount = introFrameCount + exportableFrames.length + outroFrameCount;
+
+      // Render intro frames
+      if (introFrameCount > 0) {
+        for (let i = 0; i < introFrameCount; i++) {
+          if (this.cancelled) {
+            encoder.close();
+            throw new Error('Export cancelled');
+          }
+
+          this.renderIntroFrame(ctx, width, height, this.introText, sessionId, exportableFrames.length);
+
+          const videoFrame = new VideoFrame(canvas, {
+            timestamp: currentTimestamp,
+            duration: frameDuration
+          });
+
+          encoder.encode(videoFrame, { keyFrame: frameCounter % 30 === 0 });
+          videoFrame.close();
+
+          currentTimestamp += frameDuration;
+          frameCounter++;
+
+          this.onProgress((frameCounter / totalFrameCount) * 100, frameCounter, totalFrameCount);
+        }
+      }
+
+      // Process main content frames (using filtered exportableFrames)
+      for (let i = 0; i < exportableFrames.length; i++) {
+        if (this.cancelled) {
+          encoder.close();
+          throw new Error('Export cancelled');
+        }
+
+        const frame = exportableFrames[i];
+
+        // Render frame to canvas with overlays
+        await this.renderFrameToCanvas(ctx, frame, interactions, width, height, i, exportableFrames.length);
+
+        // Create VideoFrame from canvas
+        const videoFrame = new VideoFrame(canvas, {
+          timestamp: currentTimestamp,
+          duration: frameDuration
+        });
+
+        // Encode frame
+        encoder.encode(videoFrame, { keyFrame: frameCounter % 30 === 0 });
+        videoFrame.close();
+
+        currentTimestamp += frameDuration;
+        frameCounter++;
+
+        // Report progress
+        this.onProgress((frameCounter / totalFrameCount) * 100, frameCounter, totalFrameCount);
+      }
+
+      // Render outro frames
+      if (outroFrameCount > 0) {
+        for (let i = 0; i < outroFrameCount; i++) {
+          if (this.cancelled) {
+            encoder.close();
+            throw new Error('Export cancelled');
+          }
+
+          this.renderOutroFrame(ctx, width, height, this.outroText);
+
+          const videoFrame = new VideoFrame(canvas, {
+            timestamp: currentTimestamp,
+            duration: frameDuration
+          });
+
+          encoder.encode(videoFrame, { keyFrame: frameCounter % 30 === 0 });
+          videoFrame.close();
+
+          currentTimestamp += frameDuration;
+          frameCounter++;
+
+          this.onProgress((frameCounter / totalFrameCount) * 100, frameCounter, totalFrameCount);
+        }
+      }
+
+      // Finalize encoding
+      await encoder.flush();
+      encoder.close();
+      muxer.finalize();
+
+      // Get the video data
+      const videoBuffer = muxer.target.buffer;
+      const blob = new Blob([videoBuffer], { type: 'video/mp4' });
+
+      // Generate filename
+      const filename = `recording_${sessionId}_${Date.now()}.mp4`;
+
+      this.isExporting = false;
+      this.onComplete(blob, filename);
+
+      return { blob, filename };
+
+    } catch (error) {
+      this.isExporting = false;
+      this.onError(error);
+      return null;
+    }
+  }
+
+  // Render intro frame with title and metadata
+  renderIntroFrame(ctx, width, height, text, sessionId, frameCount) {
+    // Background gradient
+    const gradient = ctx.createLinearGradient(0, 0, 0, height);
+    gradient.addColorStop(0, '#1a1a2e');
+    gradient.addColorStop(1, '#16213e');
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, width, height);
+
+    // Draw decorative border
+    ctx.strokeStyle = '#4A90E2';
+    ctx.lineWidth = 4;
+    ctx.strokeRect(20, 20, width - 40, height - 40);
+
+    // Title text
+    ctx.fillStyle = '#ffffff';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+
+    // Main title
+    ctx.font = 'bold 36px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif';
+    const lines = this.wrapText(ctx, text, width - 80);
+    const lineHeight = 44;
+    const titleY = height / 2 - (lines.length * lineHeight) / 2;
+
+    lines.forEach((line, i) => {
+      ctx.fillText(line, width / 2, titleY + i * lineHeight);
+    });
+
+    // Session info subtitle
+    ctx.fillStyle = '#888888';
+    ctx.font = '16px monospace';
+    ctx.fillText(`Session: ${sessionId}`, width / 2, height - 80);
+    ctx.fillText(`${frameCount} frames`, width / 2, height - 55);
+
+    // Chrome Debug branding
+    ctx.fillStyle = '#4A90E2';
+    ctx.font = 'bold 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif';
+    ctx.fillText('Chrome Debug', width / 2, height - 30);
+  }
+
+  // Render outro frame
+  renderOutroFrame(ctx, width, height, text) {
+    // Background gradient
+    const gradient = ctx.createLinearGradient(0, 0, 0, height);
+    gradient.addColorStop(0, '#16213e');
+    gradient.addColorStop(1, '#1a1a2e');
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, width, height);
+
+    // Draw decorative border
+    ctx.strokeStyle = '#4A90E2';
+    ctx.lineWidth = 4;
+    ctx.strokeRect(20, 20, width - 40, height - 40);
+
+    // Outro text
+    ctx.fillStyle = '#ffffff';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+
+    ctx.font = 'bold 28px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif';
+    const lines = this.wrapText(ctx, text, width - 80);
+    const lineHeight = 36;
+    const textY = height / 2 - (lines.length * lineHeight) / 2;
+
+    lines.forEach((line, i) => {
+      ctx.fillText(line, width / 2, textY + i * lineHeight);
+    });
+
+    // Chrome Debug branding
+    ctx.fillStyle = '#4A90E2';
+    ctx.font = 'bold 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif';
+    ctx.fillText('Chrome Debug', width / 2, height - 30);
+  }
+
+  // Helper to wrap text into lines
+  wrapText(ctx, text, maxWidth) {
+    const words = text.split(' ');
+    const lines = [];
+    let currentLine = '';
+
+    for (const word of words) {
+      const testLine = currentLine ? currentLine + ' ' + word : word;
+      const metrics = ctx.measureText(testLine);
+
+      if (metrics.width > maxWidth && currentLine) {
+        lines.push(currentLine);
+        currentLine = word;
+      } else {
+        currentLine = testLine;
+      }
+    }
+
+    if (currentLine) {
+      lines.push(currentLine);
+    }
+
+    return lines;
+  }
+
+  // Render a single frame to the export canvas with overlays
+  async renderFrameToCanvas(ctx, frame, interactions, width, height, frameIndex = 0, totalFrames = 1) {
+    const styleConfig = this.getStyleConfig();
+
+    // Apply watermark for FREE version at EXPORT time (not storage time)
+    let imageDataToUse = frame.imageData;
+    const imageProcessor = window.ChromeDebugImageProcessor;
+    if (imageProcessor && imageProcessor.shouldWatermark()) {
+      try {
+        imageDataToUse = await imageProcessor.processImageForExport(frame.imageData);
+      } catch (err) {
+        console.warn('[VideoExporter] Failed to apply watermark:', err);
+        // Continue with original image if watermarking fails
+      }
+    }
+
+    // Load and draw frame image
+    const img = await this.loadImage(imageDataToUse);
+    ctx.clearRect(0, 0, width, height);
+    ctx.drawImage(img, 0, 0, width, height);
+
+    const timestamp = frame.timestamp;
+
+    // Use viewport dimensions from interactions for accurate coordinate scaling
+    // This is crucial because clicks/mouse moves are recorded in viewport coordinates
+    const interactionWithViewport = interactions.find(i =>
+      (i.type === 'mousemove' || i.type === 'click') && i.viewportWidth && i.viewportHeight
+    );
+    // Default reference dimensions (used for mouse cursor which interpolates between positions)
+    const defaultRefWidth = interactionWithViewport ? interactionWithViewport.viewportWidth : img.naturalWidth;
+    const defaultRefHeight = interactionWithViewport ? interactionWithViewport.viewportHeight : img.naturalHeight;
+
+    const defaultScaleX = width / defaultRefWidth;
+    const defaultScaleY = height / defaultRefHeight;
+
+    // Draw click indicators using per-click viewport dimensions for accurate scaling
+    if (this.includeClicks) {
+      const clicks = interactions.filter(i =>
+        i.type === 'click' && i.x && i.y &&
+        Math.abs(i.timestamp - timestamp) <= 500
+      );
+      clicks.forEach(click => {
+        const age = Math.abs(timestamp - click.timestamp);
+        // Use per-click viewport dimensions if available, fall back to defaults
+        const clickRefWidth = click.viewportWidth || defaultRefWidth;
+        const clickRefHeight = click.viewportHeight || defaultRefHeight;
+        const clickScaleX = width / clickRefWidth;
+        const clickScaleY = height / clickRefHeight;
+        this.drawClickRipple(ctx, click.x * clickScaleX, click.y * clickScaleY, age);
+      });
+    }
+
+    // Draw mouse cursor (uses default scale since cursor interpolates between positions)
+    if (this.includeCursor) {
+      const mousePos = this.getMousePositionAtTimestamp(interactions, timestamp);
+      if (mousePos) {
+        this.drawMouseCursor(ctx, mousePos.x * defaultScaleX, mousePos.y * defaultScaleY, styleConfig);
+      }
+    }
+
+    // Draw console logs
+    if (this.includeLogs && frame.logs && frame.logs.length > 0) {
+      this.drawLogsOnCanvas(ctx, frame.logs, width, height, styleConfig);
+    }
+
+    // Draw timestamp/frame overlay based on style preset
+    if (styleConfig.showTimestamp || styleConfig.showFrameNumber) {
+      this.drawFrameInfo(ctx, frame, frameIndex, totalFrames, width, height, styleConfig);
+    }
+
+    // Draw watermark if set
+    if (this.watermarkText) {
+      this.drawWatermark(ctx, width, height);
+    }
+  }
+
+  // Draw frame information overlay (timestamp, frame number)
+  drawFrameInfo(ctx, frame, frameIndex, totalFrames, canvasWidth, canvasHeight, styleConfig) {
+    ctx.save();
+
+    const padding = 8;
+    const fontSize = 12;
+    ctx.font = `${fontSize}px monospace`;
+
+    let infoText = '';
+    if (styleConfig.showFrameNumber) {
+      infoText = `Frame ${frameIndex + 1}/${totalFrames}`;
+    }
+    if (styleConfig.showTimestamp) {
+      const timeStr = (frame.timestamp / 1000).toFixed(2) + 's';
+      infoText = infoText ? `${infoText} | ${timeStr}` : timeStr;
+    }
+
+    const textMetrics = ctx.measureText(infoText);
+    const boxWidth = textMetrics.width + padding * 2;
+    const boxHeight = fontSize + padding * 2;
+
+    // Position in top-left corner
+    const x = 10;
+    const y = 10;
+
+    // Background
+    ctx.fillStyle = this.backgroundColor;
+    ctx.fillRect(x, y, boxWidth, boxHeight);
+
+    // Text
+    ctx.fillStyle = '#ffffff';
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(infoText, x + padding, y + boxHeight / 2);
+
+    ctx.restore();
+  }
+
+  // Draw watermark
+  drawWatermark(ctx, canvasWidth, canvasHeight) {
+    ctx.save();
+
+    const padding = 15;
+    ctx.font = '14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif';
+    ctx.globalAlpha = this.watermarkOpacity;
+    ctx.fillStyle = '#ffffff';
+
+    const textMetrics = ctx.measureText(this.watermarkText);
+    let x, y;
+
+    switch (this.watermarkPosition) {
+      case 'top-left':
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'top';
+        x = padding;
+        y = padding;
+        break;
+      case 'top-right':
+        ctx.textAlign = 'right';
+        ctx.textBaseline = 'top';
+        x = canvasWidth - padding;
+        y = padding;
+        break;
+      case 'bottom-left':
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'bottom';
+        x = padding;
+        y = canvasHeight - padding;
+        break;
+      case 'bottom-right':
+      default:
+        ctx.textAlign = 'right';
+        ctx.textBaseline = 'bottom';
+        x = canvasWidth - padding;
+        y = canvasHeight - padding;
+        break;
+    }
+
+    // Optional: draw semi-transparent background behind watermark
+    const bgPadding = 4;
+    ctx.globalAlpha = this.watermarkOpacity * 0.3;
+    ctx.fillStyle = '#000000';
+
+    let bgX = x - bgPadding;
+    let bgWidth = textMetrics.width + bgPadding * 2;
+    if (this.watermarkPosition.includes('right')) {
+      bgX = x - textMetrics.width - bgPadding;
+    }
+
+    let bgY = y - bgPadding;
+    if (this.watermarkPosition.includes('bottom')) {
+      bgY = y - 18;
+    }
+
+    ctx.fillRect(bgX, bgY, bgWidth, 22);
+
+    // Draw text
+    ctx.globalAlpha = this.watermarkOpacity;
+    ctx.fillStyle = '#ffffff';
+    ctx.fillText(this.watermarkText, x, y);
+
+    ctx.restore();
+  }
+
+  // Draw click ripple on export canvas
+  drawClickRipple(ctx, x, y, age, maxAge = 500) {
+    if (age > maxAge) return;
+
+    const progress = age / maxAge;
+    const radius = 10 + (30 * progress);
+    const alpha = 1 - progress;
+
+    ctx.beginPath();
+    ctx.arc(x, y, radius, 0, Math.PI * 2);
+    ctx.strokeStyle = `rgba(255, 87, 34, ${alpha})`;
+    ctx.lineWidth = 3;
+    ctx.stroke();
+
+    ctx.beginPath();
+    ctx.arc(x, y, 5, 0, Math.PI * 2);
+    ctx.fillStyle = `rgba(255, 87, 34, ${alpha * 0.8})`;
+    ctx.fill();
+  }
+
+  // Draw mouse cursor on export canvas
+  drawMouseCursor(ctx, x, y, styleConfig = {}) {
+    ctx.save();
+    ctx.translate(x, y);
+
+    const cursorStyle = styleConfig.cursorStyle || 'detailed';
+
+    if (cursorStyle === 'simple') {
+      // Simple dot cursor
+      ctx.beginPath();
+      ctx.arc(0, 0, 6, 0, Math.PI * 2);
+      ctx.fillStyle = 'rgba(74, 144, 226, 0.8)';
+      ctx.fill();
+      ctx.strokeStyle = 'white';
+      ctx.lineWidth = 2;
+      ctx.stroke();
+    } else if (cursorStyle === 'debug') {
+      // Debug cursor with coordinates
+      ctx.fillStyle = 'white';
+      ctx.strokeStyle = 'black';
+      ctx.lineWidth = 1;
+
+      // Arrow cursor
+      ctx.beginPath();
+      ctx.moveTo(0, 0);
+      ctx.lineTo(0, 18);
+      ctx.lineTo(4, 14);
+      ctx.lineTo(8, 22);
+      ctx.lineTo(11, 21);
+      ctx.lineTo(7, 13);
+      ctx.lineTo(13, 13);
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+
+      // Coordinate display (if showCoordinates enabled)
+      if (styleConfig.showCoordinates) {
+        ctx.font = '10px monospace';
+        ctx.fillStyle = 'rgba(0,0,0,0.7)';
+        ctx.fillRect(15, 5, 70, 16);
+        ctx.fillStyle = '#00ff00';
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(`${Math.round(x)},${Math.round(y)}`, 18, 13);
+      }
+    } else {
+      // Detailed cursor (default)
+      ctx.fillStyle = 'white';
+      ctx.strokeStyle = 'black';
+      ctx.lineWidth = 1;
+
+      ctx.beginPath();
+      ctx.moveTo(0, 0);
+      ctx.lineTo(0, 18);
+      ctx.lineTo(4, 14);
+      ctx.lineTo(8, 22);
+      ctx.lineTo(11, 21);
+      ctx.lineTo(7, 13);
+      ctx.lineTo(13, 13);
+      ctx.closePath();
+
+      ctx.fill();
+      ctx.stroke();
+    }
+
+    ctx.restore();
+  }
+
+  // Draw logs onto canvas for export
+  drawLogsOnCanvas(ctx, logs, canvasWidth, canvasHeight, styleConfig = {}) {
+    const maxLogs = styleConfig.maxLogs || 5;
+    const fontSize = styleConfig.logFontSize || 12;
+    const panelOpacity = styleConfig.logPanelOpacity || 0.75;
+
+    // Filter logs by level based on logFilter setting
+    let filteredLogs = logs;
+    if (this.logFilter !== 'all') {
+      const levelPriority = { error: 1, warn: 2, info: 3, log: 4, debug: 5 };
+      const filterThresholds = {
+        errors: 1,      // Only errors
+        warnings: 2,    // Errors and warnings
+        info: 3         // Errors, warnings, and info
+      };
+      const threshold = filterThresholds[this.logFilter] || 5;
+      filteredLogs = logs.filter(log => {
+        const level = (log.level || 'log').toLowerCase();
+        return (levelPriority[level] || 4) <= threshold;
+      });
+    }
+
+    // Don't draw panel if no logs pass the filter
+    if (filteredLogs.length === 0) return;
+
+    const logsToShow = filteredLogs.slice(-maxLogs);
+    const padding = 10;
+    const lineHeight = fontSize + 4;
+    const panelHeight = logsToShow.length * lineHeight + padding * 2;
+
+    // Draw semi-transparent background
+    let panelY;
+    if (this.logPosition === 'top') {
+      panelY = 0;
+    } else {
+      panelY = canvasHeight - panelHeight;
+    }
+
+    // Use configured background color with opacity
+    const bgColor = this.backgroundColor.replace(/[\d.]+\)$/, `${panelOpacity})`);
+    ctx.fillStyle = bgColor;
+    ctx.fillRect(0, panelY, canvasWidth, panelHeight);
+
+    // Draw log text
+    ctx.font = `${fontSize}px monospace`;
+
+    logsToShow.forEach((log, i) => {
+      const y = panelY + padding + (i * lineHeight) + fontSize;
+      const level = (log.level || 'log').toLowerCase();
+
+      // Set color based on level
+      const colors = {
+        error: '#ef5350',
+        warn: '#ffb74d',
+        info: '#64b5f6',
+        log: '#888888',
+        debug: '#9575cd'
+      };
+      ctx.fillStyle = colors[level] || colors.log;
+
+      const time = log.relativeTime ? `[${(log.relativeTime / 1000).toFixed(2)}s]` : '';
+      const text = `${time} ${level.toUpperCase()}: ${log.message || ''}`;
+
+      // Truncate if too long - estimate character width based on font size
+      const charWidth = fontSize * 0.6;
+      const maxChars = Math.floor((canvasWidth - padding * 2) / charWidth);
+      const displayText = text.length > maxChars ? text.substring(0, maxChars - 3) + '...' : text;
+
+      ctx.fillText(displayText, padding, y);
+    });
+  }
+
+  // Get interpolated mouse position
+  getMousePositionAtTimestamp(interactions, timestamp) {
+    const mouseMoves = interactions.filter(i => i.type === 'mousemove');
+    if (mouseMoves.length === 0) return null;
+
+    let before = null;
+    let after = null;
+
+    for (const move of mouseMoves) {
+      if (move.timestamp <= timestamp) {
+        before = move;
+      } else if (!after && move.timestamp > timestamp) {
+        after = move;
+        break;
+      }
+    }
+
+    if (!before) return after ? { x: after.x, y: after.y } : null;
+    if (!after) return { x: before.x, y: before.y };
+
+    const t = (timestamp - before.timestamp) / (after.timestamp - before.timestamp);
+    return {
+      x: before.x + (after.x - before.x) * t,
+      y: before.y + (after.y - before.y) * t
+    };
+  }
+
+  // Load image from base64 with robust dimension handling
+  // Uses img.decode() for modern browsers to ensure image is fully decoded
+  // Falls back to polling for older browsers
+  loadImage(imageData) {
+    // DEBUG: Log loadImage call
+    console.log('[VideoExporter] loadImage called:', {
+      imageDataType: typeof imageData,
+      imageDataLength: imageData?.length || 0,
+      startsWithData: imageData?.startsWith?.('data:') || false,
+      prefix: imageData?.substring?.(0, 80) || 'N/A'
+    });
+
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+
+      // Use naturalWidth/naturalHeight for true intrinsic dimensions
+      // These are unaffected by CSS or explicit attributes
+      const validateDimensions = () => {
+        return img.naturalWidth > 0 && img.naturalHeight > 0;
+      };
+
+      img.onload = async () => {
+        // DEBUG: Log onload event
+        console.log('[VideoExporter] img.onload fired:', {
+          width: img.width,
+          height: img.height,
+          naturalWidth: img.naturalWidth,
+          naturalHeight: img.naturalHeight,
+          complete: img.complete
+        });
+
+        // Modern browsers: use decode() to ensure image is fully ready
+        // decode() waits until the image is fully decoded and ready to render
+        if (typeof img.decode === 'function') {
+          try {
+            await img.decode();
+            console.log('[VideoExporter] decode() completed:', {
+              naturalWidth: img.naturalWidth,
+              naturalHeight: img.naturalHeight
+            });
+            if (validateDimensions()) {
+              resolve(img);
+              return;
+            }
+            // decode() succeeded but dimensions still zero - very unusual
+            // Fall through to polling as last resort
+            console.warn('[VideoExporter] decode() succeeded but dimensions still zero');
+          } catch (decodeError) {
+            // Decode failed - could be corrupt image data
+            // Fall through to polling, but this likely won't help
+            console.warn('[VideoExporter] Image decode() failed:', decodeError.message);
+          }
+        }
+
+        // Fallback: poll for dimensions with timeout
+        // This handles older browsers or unusual decode timing issues
+        const maxAttempts = 10;
+        const pollInterval = 50; // ms (total max wait: 500ms)
+        let attempts = 0;
+
+        const checkDimensions = () => {
+          attempts++;
+          if (validateDimensions()) {
+            resolve(img);
+          } else if (attempts >= maxAttempts) {
+            // Include diagnostic info for debugging
+            const dataPreview = imageData.substring(0, 100);
+            reject(new Error(
+              `Image dimensions not available after ${maxAttempts * pollInterval}ms. ` +
+              `naturalWidth=${img.naturalWidth}, naturalHeight=${img.naturalHeight}, ` +
+              `complete=${img.complete}, data starts with: ${dataPreview}...`
+            ));
+          } else {
+            setTimeout(checkDimensions, pollInterval);
+          }
+        };
+
+        // Start polling after a brief delay to avoid immediate re-check
+        setTimeout(checkDimensions, pollInterval);
+      };
+
+      img.onerror = (e) => {
+        const dataPreview = imageData.substring(0, 100);
+        reject(new Error(`Failed to load image. Data starts with: ${dataPreview}...`));
+      };
+
+      // Ensure proper data URL format
+      img.src = imageData.startsWith('data:')
+        ? imageData
+        : `data:image/jpeg;base64,${imageData}`;
+    });
+  }
+
+  // Cancel ongoing export
+  cancel() {
+    this.cancelled = true;
+  }
+
+  // Download blob as file
+  static downloadBlob(blob, filename) {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
+}
+
+// Export for use
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = VideoExporter;
+}