@t3lnet/sceneforge 1.0.24 → 1.0.25

package/cli/commands/record-demo.js

@@ -262,27 +262,35 @@ export async function runRecordDemoCommand(argv) {
     });
     await cdpRecorder.start();
   }
+
   const startUrl = resolveStartUrl(startPath, baseUrl);
 
-  if (startUrl) {
-    await page.goto(startUrl, { waitUntil: "networkidle" });
-  }
-  const result = await runDemo(
-    definition,
-    {
-      page,
-      baseURL: baseUrl,
-      outputDir: outputPaths.outputDir,
-      assetBaseDir: assetRoot ? toAbsolute(rootDir, assetRoot) : undefined,
-      videoRecordingStartTime,
-    },
-    {
-      generateScripts: true,
-      scriptOutputDir: path.join(outputPaths.outputDir, "scripts"),
+  let result;
+  let demoError = null;
+
+  try {
+    if (startUrl) {
+      await page.goto(startUrl, { waitUntil: "networkidle" });
     }
-  );
+    result = await runDemo(
+      definition,
+      {
+        page,
+        baseURL: baseUrl,
+        outputDir: outputPaths.outputDir,
+        assetBaseDir: assetRoot ? toAbsolute(rootDir, assetRoot) : undefined,
+        videoRecordingStartTime,
+      },
+      {
+        generateScripts: true,
+        scriptOutputDir: path.join(outputPaths.outputDir, "scripts"),
+      }
+    );
+  } catch (err) {
+    demoError = err;
+  }
 
-  // Stop CDP recorder before closing context (if using HQ video)
+  // Stop CDP recorder before closing context
   if (cdpRecorder) {
     await cdpRecorder.stop();
   }
@@ -292,27 +300,35 @@ export async function runRecordDemoCommand(argv) {
 
   // Handle video based on recording method
   if (cdpRecorder) {
-    // Assemble CDP frames into video
     const finalVideoPath = path.join(outputPaths.videosDir, `${definition.name}.webm`);
     try {
-      await cdpRecorder.assembleVideo(finalVideoPath);
-      console.log(`[record] High-quality video saved: ${finalVideoPath}`);
-      if (result.scriptPath) {
-        await alignScriptToVideo(result.scriptPath, finalVideoPath, videoRecordingStartTime);
+      if (!demoError && result?.success) {
+        await cdpRecorder.assembleVideo(finalVideoPath);
+        console.log(`[record] High-quality video saved: ${finalVideoPath}`);
+        if (result.scriptPath) {
+          await alignScriptToVideo(result.scriptPath, finalVideoPath, videoRecordingStartTime);
+        }
       }
     } finally {
+      // Always cleanup frames
       await cdpRecorder.cleanup();
+      console.log(`[record] Cleaned up temporary frames from: ${framesDir}`);
     }
   } else if (video) {
     const recordedPath = await video.path();
     const finalVideoPath = path.join(outputPaths.videosDir, `${definition.name}.webm`);
     await moveVideo(recordedPath, finalVideoPath);
     console.log(`[record] Video saved: ${finalVideoPath}`);
-    if (result.scriptPath) {
+    if (result?.scriptPath) {
       await alignScriptToVideo(result.scriptPath, finalVideoPath, videoRecordingStartTime);
     }
   }
 
+  // Re-throw demo error after cleanup
+  if (demoError) {
+    throw demoError;
+  }
+
   if (result.success) {
     console.log(`[record] ✓ Completed ${definition.name}`);
     if (result.scriptPath) {

package/cli/utils/cdp-recorder.js

@@ -55,19 +55,19 @@ export function createCDPRecorder(page, options) {
   let frameTimestamps = [];
   let isRecording = false;
   let startTime = null;
+  let writeQueue = Promise.resolve();
+  let nextFrameNumber = 0;
 
-  const frameHandler = async (params) => {
+  const frameHandler = (params) => {
     if (!isRecording) return;
 
     const { data, metadata, sessionId } = params;
     frameCount += 1;
 
-    // Acknowledge the frame to continue receiving
-    try {
-      await cdpSession.send("Page.screencastFrameAck", { sessionId });
-    } catch {
+    // Acknowledge the frame immediately to continue receiving
+    cdpSession.send("Page.screencastFrameAck", { sessionId }).catch(() => {
       // Session may be closed
-    }
+    });
 
     // Skip frames based on everyNthFrame setting
     if (everyNthFrame > 1 && frameCount % everyNthFrame !== 0) {
@@ -75,19 +75,27 @@ export function createCDPRecorder(page, options) {
     }
 
     const timestamp = metadata.timestamp;
-    const frameNumber = frameTimestamps.length;
+    const frameNumber = nextFrameNumber;
+    nextFrameNumber += 1;
     const paddedNumber = String(frameNumber).padStart(8, "0");
     const extension = format === "png" ? "png" : "jpg";
     const framePath = path.join(framesDir, `frame_${paddedNumber}.${extension}`);
 
-    // Decode base64 and save frame
+    // Decode base64 frame data
     const buffer = Buffer.from(data, "base64");
-    await fs.writeFile(framePath, buffer);
 
-    frameTimestamps.push({
-      frameNumber,
-      timestamp,
-      path: framePath,
+    // Queue frame writes to ensure sequential completion
+    writeQueue = writeQueue.then(async () => {
+      try {
+        await fs.writeFile(framePath, buffer);
+        frameTimestamps.push({
+          frameNumber,
+          timestamp,
+          path: framePath,
+        });
+      } catch (err) {
+        console.warn(`[cdp-recorder] Failed to write frame ${frameNumber}:`, err.message);
+      }
     });
   };
 
@@ -145,6 +153,9 @@ export function createCDPRecorder(page, options) {
         // Session may already be closed
       }
 
+      // Wait for all pending frame writes to complete
+      await writeQueue;
+
       console.log(
         `[cdp-recorder] Captured ${frameTimestamps.length} frames in ${(duration / 1000).toFixed(2)}s`
       );
@@ -186,11 +197,27 @@ export function createCDPRecorder(page, options) {
 
       console.log(`[cdp-recorder] Assembling video at ${fps} fps`);
 
-      const extension = format === "png" ? "png" : "jpg";
-      const framePattern = path.join(framesDir, `frame_%08d.${extension}`);
-
-      // Use lossless encoding for the assembled video (will be compressed at concat step)
-      const encodingArgs = getIntermediateEncodingArgs({ includeAudio: false });
+      const frameExtension = format === "png" ? "png" : "jpg";
+      const framePattern = path.join(framesDir, `frame_%08d.${frameExtension}`);
+
+      // 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
+        encodingArgs = [
+          "-c:v", "libvpx-vp9",
+          "-lossless", "1",  // Lossless mode
+          "-row-mt", "1",    // Enable row-based multithreading
+          "-an",             // No audio for now
+        ];
+      } else {
+        // Use H.264 lossless for MP4
+        encodingArgs = getIntermediateEncodingArgs({ includeAudio: false });
+      }
 
       await runFFmpeg([
         "-y",
@@ -200,7 +227,7 @@ export function createCDPRecorder(page, options) {
         framePattern,
         ...encodingArgs,
         "-pix_fmt",
-        "yuv420p", // Ensure compatibility
+        isWebM ? "yuv420p" : "yuv420p",
         outputPath,
       ]);
 

package/package.json

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