Add Video Recorder in Tools Tab in Inspector

inspector/src/tabs/ToolsTab.ts

@@ -1,4 +1,4 @@
-import { CubeTexture, Engine, EnvironmentTextureTools, Nullable, Scene, Tools } from "babylonjs";
+import { CubeTexture, Engine, EnvironmentTextureTools, Nullable, Scene, Tools, VideoRecorder } from "babylonjs";
 import { Helpers } from "../helpers/Helpers";
 import { Inspector } from "../Inspector";
 import { Tab } from "./Tab";
@@ -10,6 +10,8 @@ export class ToolsTab extends Tab {
 
     private _scene: Scene;
 
+    private _videoRecorder: Nullable<VideoRecorder> = null;
+
     constructor(tabbar: TabBar, insp: Inspector) {
         super(tabbar, 'Tools');
 
@@ -138,6 +140,29 @@ export class ToolsTab extends Tab {
                 }
             };
             elemValue.appendChild(inputElement);
+
+            if (VideoRecorder.IsSupported(this._scene.getEngine())) {
+                let videoRecorderElement = Inspector.DOCUMENT.createElement('input');
+                videoRecorderElement.value = "Start Recording Video";
+                videoRecorderElement.type = "button";
+                videoRecorderElement.className = "tool-input";
+                videoRecorderElement.onclick = () => {
+                    if (!this._videoRecorder) {
+                        this._videoRecorder = new VideoRecorder(this._scene.getEngine());
+                    }
+
+                    if (this._videoRecorder.isRecording) {
+                        this._videoRecorder.stopRecording();
+                    }
+                    else {
+                        videoRecorderElement.value = "Stop Recording Video";
+                        this._videoRecorder.startRecording().then(() => {
+                            videoRecorderElement.value = "Start Recording Video";
+                        });
+                    }
+                };
+                elemValue.appendChild(inputElement);
+            }
         }
     }
 

src/Tools/babylon.videoRecorder.ts

@@ -154,10 +154,10 @@ module BABYLON {
          * Starts recording the canvas for a max duration specified in parameters.
          * @param fileName Defines the name of the file to be downloaded when the recording stop. If null no automatic download will start and you can rely on the promise to get the data back.
          * @param maxDuration Defines the maximum recording time in seconds. 
-         * It default to 5 seconds. A value of zero will not stop automatically, you would need to call stopRecording manually.
+         * It default to 7 seconds. A value of zero will not stop automatically, you would need to call stopRecording manually.
          * @return a promise callback at the end of the recording with the video data in Blob.
          */
-        public startRecording(fileName: Nullable<string> = "babylonjs.webm", maxDuration = 5): Promise<Blob> {
+        public startRecording(fileName: Nullable<string> = "babylonjs.webm", maxDuration = 7): Promise<Blob> {
             if (!this._canvas || !this._mediaRecorder) {
                 throw "Recorder has already been disposed";
             }