vueseq 0.1.0 → 0.2.0

package/src/renderer/encode-parallel.js

@@ -0,0 +1,320 @@
+/**
+ * Parallel Frame Capture Worker (Distributed Capture in Batches)
+ *
+ * Architecture: Scatter-Gather
+ * 1. Workers (xN): Capture DOM -> JPEG DataURL (Fast & Light)
+ * 2. Node.js: Aggregates frames buffers
+ * 3. Main Page: Receives JPEGs -> Decodes (Parallel) -> Encodes to MP4
+ */
+
+import { chromium } from 'playwright'
+import { createVideoServer } from '../bundler/vite.js'
+import { readFile, writeFile } from 'fs/promises'
+import { getTimelineDuration } from './render.js'
+import { join } from 'path'
+import { cpus } from 'os'
+import { getOptimalChromiumConfig } from './gpu.js'
+import { getHtml2CanvasScript } from './capture.js'
+
+const DEFAULT_WORKERS = Math.max(1, cpus().length)
+
+// In-memory buffer limit (frames)
+// Increased to 300 to absorb bursts (10s at 30fps)
+const MAX_BUFFERED_FRAMES = 300
+
+/**
+ * Inject required libraries into a page
+ */
+async function injectLibraries(page, { width, height }) {
+    // Inject Mediabunny
+    const mediabunnyPath = join(
+        process.cwd(),
+        'node_modules',
+        'mediabunny',
+        'dist',
+        'bundles',
+        'mediabunny.cjs',
+    )
+    const mediabunnyCode = await readFile(mediabunnyPath, 'utf-8')
+    await page.addScriptTag({ content: mediabunnyCode })
+
+    // Inject html2canvas
+    const html2canvasScript = await getHtml2CanvasScript()
+    await page.addScriptTag({ content: html2canvasScript })
+
+    // Setup capture infrastructure
+    await page.evaluate(
+        ({ width, height }) => {
+            const captureCanvas = document.createElement('canvas')
+            captureCanvas.width = width
+            captureCanvas.height = height
+            window.__VUESEQ_CAPTURE_CANVAS__ = captureCanvas
+
+            window.__VUESEQ_CAPTURE_OPTIONS__ = {
+                canvas: captureCanvas,
+                width,
+                height,
+                scale: 1,
+                useCORS: true,
+                allowTaint: true,
+                backgroundColor: null,
+                logging: false,
+                imageTimeout: 0,
+                removeContainer: true,
+                foreignObjectRendering: false,
+            }
+        },
+        { width, height },
+    )
+}
+
+/**
+ * Capture frame and return JPEG Data URL
+ */
+async function captureFrameJPEG(page, timestamp) {
+    return await page.evaluate(
+        async ({ timestamp }) => {
+            // Seek
+            window.__VUESEQ_SEEK__(timestamp)
+            await new Promise((resolve) => requestAnimationFrame(resolve))
+
+            // Capture
+            await html2canvas(document.body, window.__VUESEQ_CAPTURE_OPTIONS__)
+
+            const canvas = window.__VUESEQ_CAPTURE_CANVAS__
+            // JPEG 0.95 is visually indistinguishable for video source but much faster/smaller than PNG
+            return canvas.toDataURL('image/jpeg', 0.95)
+        },
+        { timestamp },
+    )
+}
+
+/**
+ * Render to MP4 using parallel frame capture
+ */
+export async function renderToMp4Parallel(options) {
+    const {
+        input,
+        output = './output.mp4',
+        fps = 30,
+        duration: providedDuration,
+        width = 1920,
+        height = 1080,
+        workers: providedWorkers,
+        monitorMemory = false,
+        onProgress,
+    } = options
+
+    // Determine Logic
+    let numWorkers = providedWorkers ? parseInt(providedWorkers, 10) : DEFAULT_WORKERS
+    if (!providedWorkers) {
+        console.log(`  Auto-detected ${numWorkers} CPU cores (Use --workers N to override)`)
+    }
+    console.log(`  Initializing ${numWorkers} capture workers...`)
+
+    // 1. Setup
+    let duration = providedDuration
+    if (!duration || duration <= 0) {
+        duration = await getTimelineDuration({ input, width, height })
+        if (!duration) throw new Error('Could not auto-detect duration.')
+    }
+    const totalFrames = Math.ceil(duration * fps)
+
+    const { url, cleanup: cleanupServer } = await createVideoServer({
+        input,
+        width,
+        height,
+    })
+
+    const gpuConfig = await getOptimalChromiumConfig()
+    const launchOptions = {
+        headless: gpuConfig.headless,
+        args: gpuConfig.args,
+    }
+    if (gpuConfig.channel) {
+        launchOptions.channel = gpuConfig.channel
+    }
+    // Disable queueing on Node side
+    const browser = await chromium.launch(launchOptions)
+
+    try {
+        const context = await browser.newContext({
+            viewport: { width, height },
+            deviceScaleFactor: 1,
+        })
+
+        // 2. Initialize Pages
+        const pages = []
+
+        // Create Encoder Page (Main)
+        const encoderPage = await context.newPage()
+        await encoderPage.goto(url, { waitUntil: 'networkidle' })
+        await injectLibraries(encoderPage, { width, height })
+        pages.push(encoderPage)
+
+        // Create Worker Pages
+        for (let i = 0; i < numWorkers; i++) {
+            const page = await context.newPage()
+            await page.goto(url, { waitUntil: 'networkidle' })
+            await page.waitForFunction(() => window.__VUESEQ_READY__ === true)
+            await injectLibraries(page, { width, height })
+            pages.push(page)
+        }
+
+        // Initialize Encoder on Main Page
+        await encoderPage.evaluate(async ({ width, height, fps }) => {
+            const { Output, Mp4OutputFormat, BufferTarget, QUALITY_HIGH, CanvasSource } = window.Mediabunny
+            window.__VUESEQ_OUTPUT__ = new Output({
+                format: new Mp4OutputFormat(),
+                target: new BufferTarget(),
+            })
+            const canvas = document.createElement('canvas')
+            canvas.width = width
+            canvas.height = height
+            window.__VUESEQ_ENCODE_CANVAS__ = canvas
+            window.__VUESEQ_CTX__ = canvas.getContext('2d', { alpha: false })
+
+            window.__VUESEQ_VIDEO_SOURCE__ = new CanvasSource(canvas, {
+                codec: 'avc',
+                bitrate: QUALITY_HIGH,
+            })
+            window.__VUESEQ_OUTPUT__.addVideoTrack(window.__VUESEQ_VIDEO_SOURCE__)
+            await window.__VUESEQ_OUTPUT__.start()
+
+            // Helper for pipelined loading
+            window.loadAndEncode = async (frames) => {
+                // 1. Parallel Load (Decode JPEGs)
+                const images = await Promise.all(frames.map(frame => {
+                    return new Promise((resolve) => {
+                        const img = new Image()
+                        img.onload = () => resolve({ img, timestamp: frame.timestamp })
+                        img.src = frame.dataUrl
+                    })
+                }))
+
+                // 2. Sequential Encode
+                const ctx = window.__VUESEQ_CTX__
+                const duration = 1 / fps
+                for (const { img, timestamp } of images) {
+                    ctx.drawImage(img, 0, 0)
+                    await window.__VUESEQ_VIDEO_SOURCE__.add(timestamp, duration)
+                }
+            }
+        }, { width, height, fps })
+
+
+        // 3. Orchestrate
+        const frameBuffer = new Map()
+        let nextEncodeFrame = 0
+        let encodedCount = 0
+
+        // Batch size for transfer to encoder (reduces IPC overhead)
+        const ENCODE_BATCH_SIZE = 5
+
+        const frameAssignments = Array.from({ length: numWorkers }, () => [])
+        for (let i = 0; i < totalFrames; i++) {
+            frameAssignments[i % numWorkers].push(i)
+        }
+
+        // Function to process the encode queue in Batches
+        const processEncodeQueue = async () => {
+            const batch = []
+
+            // Collect available sequential frames
+            let lookahead = nextEncodeFrame
+            while (frameBuffer.has(lookahead) && batch.length < ENCODE_BATCH_SIZE) {
+                batch.push({
+                    dataUrl: frameBuffer.get(lookahead),
+                    timestamp: lookahead / fps
+                })
+                frameBuffer.delete(lookahead)
+                lookahead++
+            }
+
+            if (batch.length > 0) {
+                // Send batch to encoder
+                await encoderPage.evaluate(async ({ frames, fps }) => {
+                    await window.loadAndEncode(frames)
+                }, { frames: batch, fps })
+
+                nextEncodeFrame = lookahead
+                encodedCount += batch.length
+
+                if (onProgress) {
+                    onProgress({
+                        frame: encodedCount,
+                        total: totalFrames,
+                        percent: Math.round((encodedCount / totalFrames) * 100)
+                    })
+                }
+            }
+        }
+
+        // Worker Loop
+        const runWorker = async (workerIndex) => {
+            const page = pages[workerIndex + 1]
+            const frames = frameAssignments[workerIndex]
+
+            for (const frameIndex of frames) {
+                // Flow Control
+                if (frameBuffer.size > MAX_BUFFERED_FRAMES) {
+                    // Log only once per wait cycle to avoid spam
+                    // console.log(`[Worker ${workerIndex}] Buffer full. Waiting...`) 
+                    while (frameBuffer.size > MAX_BUFFERED_FRAMES - ENCODE_BATCH_SIZE) {
+                        // Wait until space clears up roughly one batch
+                        await new Promise(r => setTimeout(r, 50))
+                        // Try to drain queue while waiting (if main thread is free here)
+                        await processEncodeQueue()
+                    }
+                }
+
+                const timestamp = frameIndex / fps
+                const dataUrl = await captureFrameJPEG(page, timestamp)
+
+                frameBuffer.set(frameIndex, dataUrl)
+
+                // Try to encode available frames
+                await processEncodeQueue()
+            }
+        }
+
+        console.log(`  Starting parallel capture...`)
+
+        // Run all workers
+        await Promise.all(Array.from({ length: numWorkers }, (_, i) => runWorker(i)))
+
+        // Ensure all remaining frames are encoded
+        while (encodedCount < totalFrames) {
+            await processEncodeQueue()
+            if (encodedCount < totalFrames) await new Promise(r => setTimeout(r, 100))
+        }
+
+        console.log(`  Encoding complete. Finalizing MP4...`)
+
+        // Finalize
+        console.log(`  Transferring video data (Base64)...`)
+        const base64Data = await encoderPage.evaluate(async () => {
+            window.__VUESEQ_VIDEO_SOURCE__.close()
+            await window.__VUESEQ_OUTPUT__.finalize()
+            const buffer = window.__VUESEQ_OUTPUT__.target.buffer
+
+            // Fast conversion to Base64 via Blob (avoids massive Array serialization overhead)
+            const blob = new Blob([buffer], { type: 'video/mp4' })
+            return new Promise((resolve) => {
+                const reader = new FileReader()
+                reader.onloadend = () => resolve(reader.result)
+                reader.readAsDataURL(blob)
+            })
+        })
+
+        const buffer = Buffer.from(base64Data.split(',')[1], 'base64')
+        await writeFile(output, buffer)
+        return output
+
+    } finally {
+        await browser.close()
+        await cleanupServer()
+    }
+}
+
+export { renderToMp4Parallel as renderParallel }

package/src/renderer/encode.js

@@ -1,92 +1,314 @@
 /**
- * FFmpeg Encoder
- * 
- * Encodes PNG frames to MP4 video using FFmpeg.
- * Requires FFmpeg to be installed on the system.
+ * Video Encoder using WebCodecs API + Mediabunny
+ *
+ * Encodes video directly in the browser using WebCodecs API.
+ * No FFmpeg required - all encoding happens via hardware-accelerated WebCodecs.
  */
 
-import { spawn } from 'child_process'
+import { chromium } from 'playwright'
+import { createVideoServer } from '../bundler/vite.js'
+import { readFile, writeFile } from 'fs/promises'
+import { getTimelineDuration } from './render.js'
 import { join } from 'path'
+import { getOptimalChromiumConfig, checkGPUAcceleration } from './gpu.js'
+
+// GPU configuration is now handled by the gpu.js module
+// which auto-detects the best backend for the current system
 
 /**
- * Encode frames to video using FFmpeg
- * @param {Object} options
- * @param {string} options.framesDir - Directory containing frame-XXXXX.png files
- * @param {string} options.output - Output video file path
- * @param {number} [options.fps=30] - Frames per second
- * @returns {Promise<string>} - Path to the output video
+ * Inject Mediabunny library into the page
+ * @param {import('playwright').Page} page
  */
-export function encodeVideo({ framesDir, output, fps = 30 }) {
-    return new Promise((resolve, reject) => {
-        const args = [
-            '-y', // Overwrite output file without asking
-            '-framerate', String(fps),
-            '-i', join(framesDir, 'frame-%05d.png'),
-            '-c:v', 'libx264',
-            '-pix_fmt', 'yuv420p', // Compatibility with most players
-            '-preset', 'fast',
-            '-crf', '18', // High quality (lower = better, 18-23 is good range)
-            output
-        ]
-
-        const ffmpeg = spawn('ffmpeg', args, {
-            stdio: ['ignore', 'pipe', 'pipe']
-        })
+async function injectMediabunny(page) {
+  const libPath = join(
+    process.cwd(),
+    'node_modules',
+    'mediabunny',
+    'dist',
+    'bundles',
+    'mediabunny.cjs',
+  )
+  const libCode = await readFile(libPath, 'utf-8')
+  await page.addScriptTag({ content: libCode })
+}
 
-        let stderr = ''
-        ffmpeg.stderr.on('data', (data) => {
-            stderr += data.toString()
-        })
+/**
+ * Initialize Mediabunny encoder in the browser context
+ * @param {import('playwright').Page} page
+ * @param {Object} config
+ */
+async function initializeEncoder(page, { width, height, fps }) {
+  await page.evaluate(
+    async ({ width, height, fps }) => {
+      const {
+        Output,
+        Mp4OutputFormat,
+        BufferTarget,
+        QUALITY_HIGH,
+        CanvasSource,
+      } = window.Mediabunny
 
-        ffmpeg.on('close', (code) => {
-            if (code === 0) {
-                resolve(output)
-            } else {
-                reject(new Error(`FFmpeg exited with code ${code}\n${stderr}`))
-            }
-        })
+      // Create output with MP4 format
+      window.__VUESEQ_OUTPUT__ = new Output({
+        format: new Mp4OutputFormat(),
+        target: new BufferTarget(),
+      })
 
-        ffmpeg.on('error', (err) => {
-            if (err.code === 'ENOENT') {
-                reject(new Error(
-                    'FFmpeg not found. Please install FFmpeg:\n' +
-                    '  - macOS: brew install ffmpeg\n' +
-                    '  - Ubuntu/Debian: sudo apt install ffmpeg\n' +
-                    '  - Windows: Download from https://ffmpeg.org/download.html'
-                ))
-            } else {
-                reject(new Error(`FFmpeg error: ${err.message}`))
-            }
-        })
+      // Store canvas for reuse
+      const canvas = document.createElement('canvas')
+      canvas.width = width
+      canvas.height = height
+      window.__VUESEQ_CANVAS__ = canvas
+
+      // Create CanvasSource with encoding config
+      window.__VUESEQ_VIDEO_SOURCE__ = new CanvasSource(canvas, {
+        codec: 'avc',
+        bitrate: QUALITY_HIGH,
+      })
+
+      window.__VUESEQ_OUTPUT__.addVideoTrack(window.__VUESEQ_VIDEO_SOURCE__)
+      window.__VUESEQ_FPS__ = fps
+
+      await window.__VUESEQ_OUTPUT__.start()
+    },
+    { width, height, fps },
+  )
+}
+
+/**
+ * Encode a single frame using Mediabunny
+ * @param {import('playwright').Page} page
+ * @param {Buffer} imageBuffer - PNG image buffer from Playwright
+ * @param {number} frameIndex - Current frame index
+ */
+async function encodeFrame(page, imageBuffer, frameIndex) {
+  // Convert buffer to base64 for transmission to browser
+  const base64Data = imageBuffer.toString('base64')
+  const dataUrl = `data:image/png;base64,${base64Data}`
+
+  await page.evaluate(
+    async ({ dataUrl, frameIndex, fps }) => {
+      // Load image
+      const img = new Image()
+      await new Promise((resolve, reject) => {
+        img.onload = resolve
+        img.onerror = reject
+        img.src = dataUrl
+      })
+
+      // Draw to canvas
+      const canvas = window.__VUESEQ_CANVAS__
+      const ctx = canvas.getContext('2d')
+      ctx.drawImage(img, 0, 0)
+
+      // Add frame to video source
+      // Timestamp in seconds
+      const timestamp = frameIndex / fps
+      const frameDuration = 1 / fps
+      await window.__VUESEQ_VIDEO_SOURCE__.add(timestamp, frameDuration)
+    },
+    {
+      dataUrl,
+      frameIndex,
+      fps: await page.evaluate(() => window.__VUESEQ_FPS__),
+    },
+  )
+}
+
+/**
+ * Finalize encoding and retrieve the MP4 buffer
+ * @param {import('playwright').Page} page
+ * @returns {Promise<number[]>} - Array of bytes
+ */
+async function finalizeEncoding(page) {
+  console.log('  Transferring video data (Base64)...')
+  return await page.evaluate(async () => {
+    window.__VUESEQ_VIDEO_SOURCE__.close()
+    await window.__VUESEQ_OUTPUT__.finalize()
+    const buffer = window.__VUESEQ_OUTPUT__.target.buffer
+
+    // Cleanup
+    delete window.__VUESEQ_OUTPUT__
+    delete window.__VUESEQ_CANVAS__
+    delete window.__VUESEQ_VIDEO_SOURCE__
+    delete window.__VUESEQ_FPS__
+
+    // Fast conversion via Blob
+    const blob = new Blob([buffer], { type: 'video/mp4' })
+    return new Promise((resolve) => {
+      const reader = new FileReader()
+      reader.onloadend = () => resolve(reader.result)
+      reader.readAsDataURL(blob)
     })
+  })
 }
 
 /**
- * Render a Vue component to MP4 video
+ * Render a Vue component to MP4 video using WebCodecs API via Mediabunny
  * @param {Object} options
  * @param {string} options.input - Absolute path to the Video.vue component
  * @param {string} [options.output='./output.mp4'] - Output video file path
  * @param {number} [options.fps=30] - Frames per second
- * @param {number} options.duration - Duration in seconds
+ * @param {number} options.duration - Duration in seconds (auto-detected if not provided)
  * @param {number} [options.width=1920] - Video width in pixels
  * @param {number} [options.height=1080] - Video height in pixels
  * @param {function} [options.onProgress] - Progress callback
  * @returns {Promise<string>} - Path to the output video
  */
 export async function renderToMp4(options) {
-    const { renderFrames } = await import('./render.js')
-    const { output = './output.mp4', ...renderOptions } = options
+  const {
+    input,
+    output = './output.mp4',
+    fps = 30,
+    duration: providedDuration,
+    width = 1920,
+    height = 1080,
+    onProgress,
+  } = options
+
+  // Auto-detect duration if not provided
+  let duration = providedDuration
+  if (!duration || duration <= 0) {
+    duration = await getTimelineDuration({ input, width, height })
+    if (!duration || duration <= 0) {
+      throw new Error(
+        'Could not auto-detect duration. Specify duration manually.',
+      )
+    }
+  }
+
+  const totalFrames = Math.ceil(duration * fps)
+
+  // Start Vite server
+  const { url, cleanup: cleanupServer } = await createVideoServer({
+    input,
+    width,
+    height,
+  })
 
-    const { framesDir, cleanup } = await renderFrames(renderOptions)
+  // Launch headless browser with optimal GPU config
+  // The gpu.js module auto-detects the best backend (Vulkan, Metal, D3D11, etc.)
+  // and uses the new headless mode for GPU passthrough
+  const gpuConfig = await getOptimalChromiumConfig()
+  const launchOptions = {
+    headless: gpuConfig.headless,
+    args: gpuConfig.args,
+  }
+  if (gpuConfig.channel) {
+    launchOptions.channel = gpuConfig.channel
+  }
+  const browser = await chromium.launch(launchOptions)
 
-    try {
-        await encodeVideo({
-            framesDir,
-            output,
-            fps: renderOptions.fps || 30
+  const context = await browser.newContext({
+    viewport: { width, height },
+    deviceScaleFactor: 1,
+  })
+
+  const page = await context.newPage()
+
+  try {
+    // Load the page
+    await page.goto(url, { waitUntil: 'networkidle' })
+
+    // Wait for VueSeq bridge to be ready
+    await page.waitForFunction(() => window.__VUESEQ_READY__ === true, {
+      timeout: 30000,
+    })
+
+    // Give Vue a moment to mount and GSAP to set up timelines
+    await page.waitForTimeout(100)
+
+    // Inject Mediabunny library
+    await injectMediabunny(page)
+
+    // Initialize encoder
+    await initializeEncoder(page, { width, height, fps })
+
+    // Render and encode each frame
+    for (let frame = 0; frame < totalFrames; frame++) {
+      const timeInSeconds = frame / fps
+
+      // Seek GSAP to exact time
+      await page.evaluate(async (t) => {
+        window.__VUESEQ_SEEK__(t)
+        await new Promise((resolve) => requestAnimationFrame(resolve))
+      }, timeInSeconds)
+
+      // Take screenshot
+      const screenshotBuffer = await page.screenshot({ type: 'png' })
+
+      // Encode the frame
+      await encodeFrame(page, screenshotBuffer, frame)
+
+      // Progress callback
+      if (onProgress) {
+        onProgress({
+          frame,
+          total: totalFrames,
+          timeInSeconds,
+          percent: Math.round(((frame + 1) / totalFrames) * 100),
         })
-        return output
-    } finally {
-        await cleanup()
+      }
     }
+
+    // Finalize and get MP4 data (Base64)
+    const base64Data = await finalizeEncoding(page)
+
+    // Write the MP4 file
+    const buffer = Buffer.from(base64Data.split(',')[1], 'base64')
+    await writeFile(output, buffer)
+
+    return output
+  } finally {
+    await browser.close()
+    await cleanupServer()
+  }
 }
+
+/**
+ * Check GPU hardware acceleration status
+ * Re-exported from gpu.js module
+ */
+export { checkGPUAcceleration } from './gpu.js'
+
+/**
+ * Check if WebCodecs API is supported in the current environment
+ * @returns {Promise<boolean>}
+ */
+export async function isWebCodecsSupported() {
+  try {
+    const gpuConfig = await getOptimalChromiumConfig()
+    const launchOptions = {
+      headless: gpuConfig.headless,
+      args: gpuConfig.args,
+    }
+    if (gpuConfig.channel) {
+      launchOptions.channel = gpuConfig.channel
+    }
+    const browser = await chromium.launch(launchOptions)
+    const context = await browser.newContext()
+    const page = await context.newPage()
+
+    const supported = await page.evaluate(() => {
+      return (
+        typeof VideoEncoder !== 'undefined' &&
+        typeof VideoFrame !== 'undefined' &&
+        typeof VideoEncoder.isConfigSupported === 'function'
+      )
+    })
+
+    await browser.close()
+    return supported
+  } catch {
+    return false
+  }
+}
+
+// Optimized encoder using in-browser capture (no PNG overhead)
+export { renderToMp4Optimized, benchmarkRenderMethods } from './encode-optimized.js'
+
+// Legacy FFmpeg-based encoding (kept for compatibility if needed)
+// TODO: Remove in future version
+export { encodeVideo } from './ffmpeg-encode.js'
+
+