Fix video duration and quality: use timeslice and proper frame timing

main.js

@@ -706,12 +706,19 @@ async function downloadVideo() {
             throw new Error('Recording failed');
         };
         
-        recorder.start();
+        // Start with timeslice to ensure proper chunking and duration
+        recorder.start(100); // Request data every 100ms
         
-        // Render frames
+        // Calculate frame duration based on filmstrip timing
+        const totalDuration = videoFrames[videoFrames.length - 1].timing;
+        const frameDuration = totalDuration / videoFrames.length;
+        
+        console.log(`Rendering ${videoFrames.length} frames over ${totalDuration}ms (${frameDuration}ms per frame)`);
+        
+        // Render frames with proper timing
         for (let i = 0; i < videoFrames.length; i++) {
             const img = new Image();
-            img.crossOrigin = 'anonymous'; // Handle CORS
+            img.crossOrigin = 'anonymous';
             
             await new Promise((resolve, reject) => {
                 img.onload = resolve;
@@ -719,6 +726,10 @@ async function downloadVideo() {
                 img.src = videoFrames[i].data;
             });
             
+            // Render this frame multiple times to fill the duration
+            const renderCount = Math.max(1, Math.ceil(frameDuration / 33)); // 33ms per render at 30fps
+            
+            for (let r = 0; r < renderCount; r++) {
                 // Black background
                 ctx.fillStyle = '#000';
                 ctx.fillRect(0, 0, canvas.width, canvas.height);
@@ -736,9 +747,13 @@ async function downloadVideo() {
                 ctx.font = 'bold 24px Arial';
                 ctx.fillText(`${(videoFrames[i].timing / 1000).toFixed(1)}s`, 20, canvas.height - 20);
                 
-            // Wait for frame duration (33ms = ~30fps)
+                // Wait for next frame at 30fps
                 await new Promise(r => setTimeout(r, 33));
             }
+        }
+        
+        // Add a small delay before stopping to ensure all data is captured
+        await new Promise(r => setTimeout(r, 200));
         
         // Stop recording after all frames are rendered
         recorder.stop();