Add progress bar for video encoding (#106)

* Add progress bar for video encoding

* Remove debugging console.logs

* Disable record button when encoding

Author: willeastcott

examples/assets/scripts/video-recorder-ui.mjs

@@ -3,6 +3,10 @@ import { Script } from 'playcanvas';
 export class VideoRecorderUI extends Script {
     initialize() {
         this.createUI();
+        // Listen to video recording progress events
+        this.app.on('encode:begin', this.onEncodeBegin, this);
+        this.app.on('encode:progress', this.onEncodeProgress, this);
+        this.app.on('encode:end', this.onEncodeEnd, this);
     }
 
     createUI() {
@@ -40,8 +44,8 @@ export class VideoRecorderUI extends Script {
 
             const label = document.createElement('label');
             label.textContent = labelText;
-            label.style.width = '100px';  // Fixed width for alignment
-            label.style.color = '#fff';   // Very light grey
+            label.style.width = '100px';
+            label.style.color = '#fff';
 
             const select = document.createElement('select');
             select.style.width = '75px';
@@ -101,6 +105,9 @@ export class VideoRecorderUI extends Script {
         button.style.width = '100%';  // Make button same width as rows
         button.style.fontSize = 'inherit';
 
+        // Store the button reference on the instance for later access.
+        this.recordButton = button;
+
         button.addEventListener('click', () => {
             const videoRecorder = this.entity.script.videoRecorder;
             if (videoRecorder.recording) {
@@ -135,8 +142,56 @@ export class VideoRecorderUI extends Script {
             }
         });
 
+        // Create a simple progress indicator (could be a div styled as a progress bar)
+        this.progressBar = document.createElement('div');
+        this.progressBar.style.height = '10px';
+        this.progressBar.style.background = '#ccc';
+        this.progressBar.style.width = '0%';
+        this.progressBar.style.transition = 'width 0.2s';
+        container.appendChild(this.progressBar);
+
         container.appendChild(optionsContainer);
         container.appendChild(button);
         document.body.appendChild(container);
     }
+
+    onEncodeBegin() {
+        // Show the progress bar and disable the Record/Stop button once encoding begins.
+        this.progressBar.style.display = 'block';
+        this.recordButton.disabled = true;
+    }
+
+    onEncodeProgress(progress) {
+        // progress is a value between 0 and 1
+        // Update our progress bar width accordingly.
+        const percent = Math.min(Math.max(progress * 100, 0), 100);
+        this.progressBar.style.width = `${percent}%`;
+    }
+
+    onEncodeEnd(buffer) {
+        // Hide the progress bar and re-enable the Record/Stop button once encoding is complete.
+        this.progressBar.style.display = 'none';
+        this.recordButton.disabled = false;
+
+        // Download the recorded video.
+        const blob = new Blob([buffer], { type: 'video/mp4' });
+        this.downloadBlob(blob);
+    }
+
+    /**
+     * Download the recorded video.
+     *
+     * @param {Blob} blob - The recorded video blob.
+     * @private
+     */
+    downloadBlob(blob) {
+        const url = URL.createObjectURL(blob);
+
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'recording.mp4';
+        a.click();
+
+        URL.revokeObjectURL(url);
+    }
 }

examples/assets/scripts/video-recorder.mjs

@@ -52,7 +52,13 @@ export class VideoRecorder extends Script {
     muxer = null;
 
     /** @private */
-    framesGenerated = 0;
+    totalFrames = 0;
+
+    /** @private */
+    framesEncoded = 0;
+
+    /** @private */
+    framesEncodedAtFlush = 0;
 
     /** @private */
     recording = false;
@@ -95,13 +101,13 @@ export class VideoRecorder extends Script {
 
     captureFrame() {
         const frame = new VideoFrame(this.app.graphicsDevice.canvas, {
-            timestamp: this.framesGenerated * 1e6 / this.frameRate,
+            timestamp: this.totalFrames * 1e6 / this.frameRate,
             duration: 1e6 / this.frameRate
         });
         this.encoder.encode(frame);
         frame.close();
 
-        this.framesGenerated++;
+        this.totalFrames++;
     }
 
     /**
@@ -110,7 +116,9 @@ export class VideoRecorder extends Script {
     record() {
         if (this.recording) return;
         this.recording = true;
-        this.framesGenerated = 0;
+        this.totalFrames = 0;
+        this.framesEncoded = 0;
+        this.framesEncodedAtFlush = 0;
 
         const { width, height } = this.getResolutionDimensions();
 
@@ -128,7 +136,13 @@ export class VideoRecorder extends Script {
 
         // Create video frame encoder
         this.encoder = new VideoEncoder({
-            output: (chunk, meta) => this.muxer.addVideoChunk(chunk, meta),
+            output: (chunk, meta) => {
+                this.framesEncoded++;
+                this.muxer.addVideoChunk(chunk, meta);
+                if (!this.recording) {
+                    this.app.fire('encode:progress', (this.framesEncoded - this.framesEncodedAtFlush) / (this.totalFrames - this.framesEncodedAtFlush));
+                }
+            },
             error: e => console.error(e)
         });
 
@@ -158,10 +172,17 @@ export class VideoRecorder extends Script {
     async stop() {
         if (!this.recording) return;
         this.recording = false;
+        this.framesEncodedAtFlush = this.framesEncoded;
+
+        this.app.fire('encode:begin');
 
         // Restore update function
         this.restoreUpdate();
 
+        // Disable auto render - this allows CPU/GPU resources to be directed towards encoding
+        const originalAutoRender = this.app.autoRender;
+        this.app.autoRender = false;
+
         // Stop capturing frames
         this.app.off('frameend', this.captureFrame, this);
 
@@ -175,30 +196,16 @@ export class VideoRecorder extends Script {
 
         // Download video
         const { buffer } = this.muxer.target;
-        this.downloadBlob(new Blob([buffer], { type: 'video/mp4' }));
+        this.app.fire('encode:end', buffer);
 
         // Free resources
         this.encoder.close();
         this.encoder = null;
         this.muxer = null;
 
-        console.log(`Recording stopped. Captured ${this.framesGenerated} frames.`);
-    }
-
-    /**
-     * Download the recorded video.
-     *
-     * @param {Blob} blob - The recorded video blob.
-     * @private
-     */
-    downloadBlob(blob) {
-        const url = URL.createObjectURL(blob);
-
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = 'recording.mp4';
-        a.click();
+        // Restore auto render state
+        this.app.autoRender = originalAutoRender;
 
-        URL.revokeObjectURL(url);
+        console.log(`Recording stopped. Captured ${this.totalFrames} frames.`);
     }
 }