Merge pull request #181 from shadielhajj/ccapture

Offline recording capabilities (via CCapture). Sequel to PR #180.

Author: Malacath-92

README.md

@@ -155,12 +155,27 @@ The extension also supports highlighting of compilation errors in the text edito
 ![error example](https://raw.githubusercontent.com/stevensona/shader-toy/master/images/example3.png)
 
 ## Recording Capabilities
-The following settings allow to configure recording quality
+Two rendering modes are supported:
+* Realtime rendering: suitable for previews and scenarios where real-time interaction with the visuals are required. As with all real-time video capture, frame drops might occur, especially on lower spec hardware or when rendering very complex visuals.
+* Offline rendering: suitable for production-grade rendering. Each frame is rendered sequentially without any drops.
+
+The default is real-time rendering to activate offline rendering set `shader-toy.recordOffline`to true.
+
+### Shared parameters
+
+* `shader-toy.recordTargetFramerate`: Set recording target frame-rate. Default is 30fps.
+* `shader-toy.recordMaxDuration`: Maximum recording duration in seconds. 0 (the default) will keep recording until the record button is pressed again.
+
+### Real-time Rendering parameters
+
 * `shader-toy.recordVideoContainer`: Set the video file container. Currently only `webm` is supported, but `mp4`support is coming [soon](https://chromestatus.com/feature/5163469011943424).
 * `shader-toy.recordVideoCodec`: Set video codec. `vp8`, `vp9`, `h264` and `avc1` are all supported. Default it `vp8`.
 * `shader-toy.recordVideoBitRate`: Set recording bit rate in bits/second. Default is 2500000.
-* `shader-toy.recordTargetFramerate`: Set recording target frame-rate. Default is 30fps.
-* `shader-toy.recordMaxDuration`: Maximum recording duration in seconds. 0 (the default) will keep recording until the record button is pressed again.
+
+### Offline rendering parameters
+
+* `shader-toy.recordOfflineFormat`: Offline recording format. Possible value are `webm`, `gif`, `png` and `jpg`. PNG and JPEG images are individual images packaged in a .tar archive.
+* `shader-toy.recordOfflineQuality`: Offline recording quality. 0 is lowest and 100 highest. Applies when format is `webm` or `jpg`.
 
 ## Requirements
 
@@ -185,12 +200,15 @@ Contributions of any kind are welcome and encouraged.
 ## Release Notes
 
 ### 0.11.4
-* Added `shader-toy.recordVideoContainer` (set video file container),
-* Added `shader-toy.recordVideoCodec` (set video codec),
-* Added `shader-toy.recordVideoBitRate` (set recording bit rate),
-* Added `shader-toy.recordMaxDuration` (set maximum recording duration),
-* Fixed the `shader-toy.recordTargetFramerate` setting,
+* Added `shader-toy.recordVideoContainer` (set video file container).
+* Added `shader-toy.recordVideoCodec` (set video codec).
+* Added `shader-toy.recordVideoBitRate` (set recording bit rate).
+* Added `shader-toy.recordMaxDuration` (set maximum recording duration).
+* Fixed the `shader-toy.recordTargetFramerate` setting.
 * Moved the Stats widget to the bottom left, so it doesn't overlap with the GUI.
+* Added `shader-toy.recordOffline` to switch between real-time and offline rendering.
+* Added `shader-toy.recordOfflineFormat`. Used in conjunction with `shader-toy.recordOffline`
+* Added `shader-toy.recordOfflineQuality`. Used in conjunction with `shader-toy.recordOffline`
 
 ### 0.11.3
 * Added option to reload on save,

package.json

@@ -134,6 +134,21 @@
                     "default": 0,
                     "description": "Maximum recording duration in seconds. 0 (the default) will keep recording until the record button is pressed again."
                 },
+                "shader-toy.recordOffline": {
+                    "type": "boolean",
+                    "default": false,
+                    "description": "Enable high-quality offline recording."
+                },
+                "shader-toy.recordOfflineFormat": {
+                    "type": "string",
+                    "default": "webm",
+                    "description": "Offline recording quality. Possible value are webm, gif, png and jpg."
+                },
+                "shader-toy.recordOfflineQuality": {
+                    "type": "number",
+                    "default": 80,
+                    "description": "Offline recording format. 0 is lowest and 100 highest. Applies when format is webm or jpg."
+                },
                 "shader-toy.showPauseButton": {
                     "type": "boolean",
                     "default": true,

resources/CCapture.all.min.js

@@ -92,6 +92,7 @@
 <script src="<!-- Three.js -->"></script>
 <!-- Stats.js -->
 <!-- dat.gui -->
+<!-- CCapture.js -->
 
 <canvas id="canvas"></canvas>
 
@@ -236,6 +237,7 @@
     let frameCounter = 0;
     let recorder = null;
     let recordingTimeout = null;
+    let offlineRecording = false;
 
     // Audio Init
     // Audio Resume
@@ -396,6 +398,10 @@
             }
         }
 
+        if (offlineRecording) {
+            recorder.capture(canvas);
+        }
+
         frameCounter++;
     }
     function forceAspectRatio(width, height) {
@@ -482,6 +488,48 @@
         }
     }
     function recordAction() {
+        if (typeof CCapture !== 'undefined') {
+            recordCCapture();
+        } else {
+            recordMediaRecorder();
+        }
+    }
+    function recordCCapture() {
+        let maxDuration = <!-- Record Max Duration -->;
+        let targetFrameRate = <!-- Record Target Framerate -->;
+        let format = <!-- Record Offline Format -->;
+        let quality = <!-- Record Offline Quality -->;
+        let extension = format == "png" || format == "jpg" ? "tar" : format;
+
+        let recordButton = document.getElementById("record");
+        if (recorder == null) {
+            recordButton.classList.add('recording');
+
+            offlineRecording = true;
+            recorder = new CCapture( {
+                format: format,
+                quality: quality,
+                timeLimit: maxDuration,
+                framerate: targetFrameRate,
+            } );
+            recorder.start();
+        }
+        else {
+            recordButton.classList.remove('recording');
+
+            recorder.stop();
+            recorder.save((blob) => {
+                let a = document.createElement('a');
+                let url = URL.createObjectURL(blob);
+                a.href = url;
+                a.download = `shadertoy.${extension}`;
+                a.click();
+            } );
+            recorder = null;
+            offlineRecording = false;
+        }
+    }
+    function recordMediaRecorder() {
         let recordButton = document.getElementById("record");
         if (recordingTimeout != null) {
             clearTimeout(recordingTimeout);
@@ -493,8 +541,9 @@
             let videoContainer = <!-- Record Video Container -->;
             let videoCodec = <!-- Record Video Codec -->;
             let maxDuration = <!-- Record Max Duration -->;
+            let targetFrameRate = <!-- Record Target Framerate -->;
 
-            let stream = canvas.captureStream(<!-- Record Target Framerate -->);
+            let stream = canvas.captureStream(targetFrameRate);
             let recorderOptions = {
                 videoBitsPerSecond: <!-- Record Video Bit Rate -->,
                 mimeType: `video/${videoContainer};codecs=${videoCodec}`

resources/webview_base.html

@@ -0,0 +1,22 @@
+'use strict';
+
+import { WebviewExtension } from '../webview_extension';
+
+export class CCaptureExtension implements WebviewExtension {
+    private getWebviewResourcePath: (relativePath: string) => string;
+    private generateStandalone: boolean;
+
+    constructor(getWebviewResourcePath: (relativePath: string) => string, generateStandalone: boolean) {
+        this.getWebviewResourcePath = getWebviewResourcePath;
+        this.generateStandalone = generateStandalone;
+    }
+
+    public generateContent(): string {
+        if (this.generateStandalone) {
+            return `\
+<script src='https://cdn.jsdelivr.net/npm/[email protected]/build/CCapture.all.min.js'></script>`;
+        }
+        return `\
+<script src='${this.getWebviewResourcePath('CCapture.all.min.js')}'></script>`;
+    }
+}

src/extensions/packages/ccapture_extension.ts

@@ -0,0 +1,15 @@
+'use strict';
+
+import { WebviewExtension } from '../webview_extension';
+
+export class RecordOfflineFormatExtension implements WebviewExtension {
+    private recordOfflineFormat: string;
+
+    public constructor(recordOfflineFormat: string) {
+        this.recordOfflineFormat = recordOfflineFormat;
+    }
+
+    public generateContent(): string {
+        return `"${this.recordOfflineFormat}"`;
+    }
+}

src/extensions/user_interface/record_offline_format_extension.ts

@@ -0,0 +1,15 @@
+'use strict';
+
+import { WebviewExtension } from '../webview_extension';
+
+export class RecordOfflineQualityExtension implements WebviewExtension {
+    private recordOfflineQuality: number;
+
+    public constructor(recordOfflineQuality: number) {
+        this.recordOfflineQuality = recordOfflineQuality;
+    }
+
+    public generateContent(): string {
+        return `${this.recordOfflineQuality}`;
+    }
+}

src/extensions/user_interface/record_offline_quality_extension.ts

@@ -29,6 +29,7 @@ import { ThreeExtension } from './extensions/packages/three_extension';
 import { ThreeFlyControlsExtension } from './extensions/packages/three_flycontrols';
 import { StatsExtension } from './extensions/packages/stats_extension';
 import { DatGuiExtension } from './extensions/packages/dat_gui_extension';
+import { CCaptureExtension } from './extensions/packages/ccapture_extension';
 
 import { PauseButtonStyleExtension } from './extensions/user_interface/pause_button_style_extension';
 import { PauseButtonExtension } from './extensions/user_interface/pause_button_extension';
@@ -71,6 +72,8 @@ import { RecordVideoContainerExtension } from './extensions/user_interface/recor
 import { RecordVideoCodecExtension } from './extensions/user_interface/record_video_codec_extension';
 import { RecordVideoBitRateExtension } from './extensions/user_interface/record_video_bit_rate_extension';
 import { RecordMaxDurationExtension } from './extensions/user_interface/record_max_duration_extension';
+import { RecordOfflineFormatExtension } from './extensions/user_interface/record_offline_format_extension';
+import { RecordOfflineQualityExtension } from './extensions/user_interface/record_offline_quality_extension';
 
 export class WebviewContentProvider {
     private context: Context;
@@ -340,6 +343,10 @@ export class WebviewContentProvider {
             const statsExtension = new StatsExtension(getWebviewResourcePath, generateStandalone);
             this.webviewAssembler.addWebviewModule(statsExtension, '<!-- Stats.js -->');
         }
+        if (this.context.getConfig<boolean>('recordOffline')) {
+            const ccaptureExtension = new CCaptureExtension(getWebviewResourcePath, generateStandalone);
+            this.webviewAssembler.addWebviewModule(ccaptureExtension, '<!-- CCapture.js -->');
+        }
 
         /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
         // Pause Logic
@@ -390,7 +397,7 @@ export class WebviewContentProvider {
 
         const recordTargetFramerate = this.context.getConfig<number>('recordTargetFramerate') || 30;
         const recordTargetFramerateExtension = new RecordTargetFramerateExtension(recordTargetFramerate);
-        this.webviewAssembler.addReplaceModule(recordTargetFramerateExtension, 'let stream = canvas.captureStream(<!-- Record Target Framerate -->);', '<!-- Record Target Framerate -->');
+        this.webviewAssembler.addReplaceModule(recordTargetFramerateExtension, 'let targetFrameRate = <!-- Record Target Framerate -->;', '<!-- Record Target Framerate -->');
 
         const recordVideoContainer = this.context.getConfig<string>('recordVideoContainer') || "webm";
         const recordVideoContainerExtension = new RecordVideoContainerExtension(recordVideoContainer);
@@ -408,6 +415,14 @@ export class WebviewContentProvider {
         const recordMaxDurationExtension = new RecordMaxDurationExtension(recordMaxDuration);
         this.webviewAssembler.addReplaceModule(recordMaxDurationExtension, 'let maxDuration = <!-- Record Max Duration -->;', '<!-- Record Max Duration -->');
 
+        const recordOfflineFormat = this.context.getConfig<string>('recordOfflineFormat') || "webm";
+        const recordOfflineFormatExtension = new RecordOfflineFormatExtension(recordOfflineFormat);
+        this.webviewAssembler.addReplaceModule(recordOfflineFormatExtension, 'let format = <!-- Record Offline Format -->;', '<!-- Record Offline Format -->');
+
+        const recordOfflineQuality = this.context.getConfig<number>('recordOfflineQuality') || 80;
+        const recordOfflineQualityExtension = new RecordOfflineQualityExtension(recordOfflineQuality);
+        this.webviewAssembler.addReplaceModule(recordOfflineQualityExtension, 'let quality = <!-- Record Offline Quality -->;', '<!-- Record Offline Quality -->');
+
         /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
         // Reload Logic
         if (!generateStandalone) {