@t3lnet/sceneforge 1.0.28 → 1.0.29

package/cli/utils/cdp-recorder.js

@@ -206,46 +206,67 @@ export function createCDPRecorder(page, options) {
 
     /**
      * Assemble captured frames into a video using FFmpeg
+     * Uses timestamp-aware assembly to preserve real-time playback timing
      *
      * @param {string} outputPath - Output video path
      * @param {Object} [assembleOptions] - Assembly options
-     * @param {number} [assembleOptions.fps] - Output framerate (auto-detected if not specified)
+     * @param {number} [assembleOptions.fps] - Output framerate for encoding (default: 30)
      * @returns {Promise<string>} - Path to assembled video
      */
     async assembleVideo(outputPath, assembleOptions = {}) {
-      const { fps: fpsOverride } = assembleOptions;
+      const { fps: outputFps = 30 } = assembleOptions;
 
       if (frameTimestamps.length === 0) {
         throw new Error("No frames captured - cannot assemble video");
       }
 
-      // Calculate actual capture FPS for real-time playback
-      // This ensures video duration matches the actual recording duration
-      const calculatedFps = frameTimestamps.length > 0 && recordingDuration > 0
-        ? frameTimestamps.length / (recordingDuration / 1000)
-        : 30;
+      // Sort frames by timestamp to ensure correct order
+      const sortedFrames = [...frameTimestamps].sort((a, b) => a.timestamp - b.timestamp);
+
+      // Calculate duration for each frame based on gap to next frame
+      // This preserves real-time playback - waits stay as waits, actions stay as actions
+      const framesWithDuration = sortedFrames.map((frame, index) => {
+        let duration;
+        if (index < sortedFrames.length - 1) {
+          // Duration is the gap to the next frame
+          duration = sortedFrames[index + 1].timestamp - frame.timestamp;
+        } else {
+          // Last frame - use average duration or minimum display time
+          const avgDuration = sortedFrames.length > 1
+            ? (sortedFrames[sortedFrames.length - 1].timestamp - sortedFrames[0].timestamp) / (sortedFrames.length - 1)
+            : 1 / outputFps;
+          duration = Math.max(avgDuration, 1 / outputFps);
+        }
+        // Clamp duration to reasonable bounds (min 1ms, max 10 seconds per frame)
+        duration = Math.max(0.001, Math.min(duration, 10));
+        return { ...frame, duration };
+      });
 
-      // Use provided fps override or actual capture fps for real-time playback
-      const fps = fpsOverride || calculatedFps;
+      // Calculate total video duration from timestamps
+      const totalDuration = framesWithDuration.reduce((sum, f) => sum + f.duration, 0);
+      console.log(`[cdp-recorder] Assembling ${sortedFrames.length} frames with timestamp-aware timing`);
+      console.log(`[cdp-recorder] Expected video duration: ${totalDuration.toFixed(2)}s (real-time preserved)`);
 
-      if (fpsOverride && Math.abs(fpsOverride - calculatedFps) > 1) {
-        console.log(`[cdp-recorder] Note: Using ${fps} fps (actual capture rate was ${calculatedFps.toFixed(1)} fps)`);
-        console.log(`[cdp-recorder] This will ${fpsOverride > calculatedFps ? 'speed up' : 'slow down'} playback`);
-      }
+      // Generate FFmpeg concat demuxer file
+      // This tells FFmpeg exactly how long to display each frame
+      const concatFilePath = path.join(framesDir, "concat.txt");
+      const concatContent = framesWithDuration
+        .map((frame) => `file '${path.basename(frame.path)}'\nduration ${frame.duration.toFixed(6)}`)
+        .join("\n");
 
-      console.log(`[cdp-recorder] Assembling video at ${fps.toFixed(1)} fps`);
+      // Add the last frame again without duration (FFmpeg concat demuxer requirement)
+      const lastFrame = framesWithDuration[framesWithDuration.length - 1];
+      const finalConcatContent = concatContent + `\nfile '${path.basename(lastFrame.path)}'`;
 
-      const frameExtension = format === "png" ? "png" : "jpg";
-      const framePattern = path.join(framesDir, `frame_%08d.${frameExtension}`);
+      await fs.writeFile(concatFilePath, finalConcatContent);
 
       // Determine encoding based on output format
-      // WebM requires VP8/VP9/AV1, MP4 can use H.264
       const outputExtension = path.extname(outputPath).toLowerCase();
       const isWebM = outputExtension === ".webm";
 
       let encodingArgs;
       if (isWebM) {
-        // Use VP9 with lossless mode for WebM
+        // Use VP9 with high quality for WebM
         encodingArgs = [
           "-c:v", "libvpx-vp9",
           "-lossless", "1",  // Lossless mode
@@ -257,15 +278,16 @@ export function createCDPRecorder(page, options) {
         encodingArgs = getIntermediateEncodingArgs({ includeAudio: false });
       }
 
+      // Use concat demuxer for timestamp-aware assembly
       await runFFmpeg([
         "-y",
-        "-framerate",
-        String(fps),
-        "-i",
-        framePattern,
+        "-f", "concat",
+        "-safe", "0",
+        "-i", concatFilePath,
         ...encodingArgs,
-        "-pix_fmt",
-        isWebM ? "yuv420p" : "yuv420p",
+        "-pix_fmt", "yuv420p",
+        "-r", String(outputFps),  // Output framerate (for smooth playback)
+        "-vsync", "vfr",          // Variable framerate to preserve timing
         outputPath,
       ]);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@t3lnet/sceneforge",
-  "version": "1.0.28",
+  "version": "1.0.29",
   "description": "SceneForge runner and generation utilities for YAML-driven demos",
   "license": "MIT",
   "author": "T3LNET",