made it possible to capture screen recordings as videos.

4 files changed, 25 insertions, 9 deletions

diff --git a/package-lock.json b/package-lock.json
index f74368dd3..c0206ef4c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6483,6 +6483,15 @@
             "resolved": "https://registry.npmjs.org/flexlayout-react/-/flexlayout-react-0.3.11.tgz",
             "integrity": "sha512-V+rEfyYJBqNk9oBgotPoXg8rmom4/ji9Mvr6f7T8sIJs83RuyK1D3oOrya2ydZIUCP2T6BIvj7rFTmRRkzpU8w=="
         },
+        "fluent-ffmpeg": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/fluent-ffmpeg/-/fluent-ffmpeg-2.1.2.tgz",
+            "integrity": "sha1-yVLeIkD4EuvaCqgAbXd27irPfXQ=",
+            "requires": {
+                "async": ">=0.2.9",
+                "which": "^1.1.1"
+            }
+        },
         "flush-write-stream": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
diff --git a/package.json b/package.json
index 5c456449d..9b782c057 100644
--- a/package.json
+++ b/package.json
@@ -164,6 +164,7 @@
         "find-in-files": "^0.5.0",
         "fit-curve": "^0.1.7",
         "flexlayout-react": "^0.3.11",
+        "fluent-ffmpeg": "^2.1.2",
         "formidable": "^1.2.1",
         "function-plot": "^1.22.7",
         "golden-layout": "^1.5.9",
diff --git a/src/client/views/nodes/ScreenshotBox.tsx b/src/client/views/nodes/ScreenshotBox.tsx
index 94d00f429..0a62a8de1 100644
--- a/src/client/views/nodes/ScreenshotBox.tsx
+++ b/src/client/views/nodes/ScreenshotBox.tsx
@@ -153,22 +153,21 @@ export class ScreenshotBox extends ViewBoxBaseComponent<FieldViewProps, Screensh
         if (this._screenCapture) {
             const stream = !this._screenCapture ? undefined : await (navigator.mediaDevices as any).getDisplayMedia({ video: true });
             this._videoRef!.srcObject = stream;
-            this._recorder = new MediaRecorder(stream, {
-                audioBitsPerSecond: 128000,
-                videoBitsPerSecond: 2500000,
-                mimeType: 'video/webm'
-            });
+            this._recorder = new MediaRecorder(stream);
             this._chunks = [];
             this._recorder.ondataavailable = (e: any) => this._chunks.push(e.data);
             this._recorder.onstop = async (e: any) => {
-                const file = new File([this._chunks], `${this.rootDoc[Id]}.mkv`, { type: this._chunks[0].type, lastModified: Date.now() });
-                const [{ result }] = await Networking.UploadFilesToServer(file);
+                const file = new File(this._chunks, `${this.rootDoc[Id]}.mkv`, { type: this._chunks[0].type, lastModified: Date.now() });
+                const completeBlob = new Blob(this._chunks, { type: this._chunks[0].type });
+                (completeBlob as any).lastModifiedDate = new Date();
+                (completeBlob as any).name = `${this.rootDoc[Id]}.mkv`;
+                const [{ result }] = await Networking.UploadFilesToServer(file);//completeBlob as File);
                 if (!(result instanceof Error)) {
                     this.dataDoc.type = DocumentType.VID;
                     this.layoutDoc.layout = VideoBox.LayoutString(this.fieldKey);
-                    this.props.Document[this.props.fieldKey] = new VideoField(Utils.prepend(result.accessPaths.agnostic.client));
+                    this.dataDoc[this.props.fieldKey] = new VideoField(Utils.prepend(result.accessPaths.agnostic.client));
                     console.log(this.props.Document[this.props.fieldKey]);
-                } else alert("video conversion failed")
+                } else alert("video conversion failed");
             };
             this._recorder.start();
         } else {
diff --git a/src/server/DashUploadUtils.ts b/src/server/DashUploadUtils.ts
index a6f752168..5f329094d 100644
--- a/src/server/DashUploadUtils.ts
+++ b/src/server/DashUploadUtils.ts
@@ -16,6 +16,7 @@ import { resolvedServerUrl } from "./server_Initialization";
 import { AcceptableMedia, Upload } from './SharedMediaTypes';
 import request = require('request-promise');
 const parse = require('pdf-parse');
+var ffmpeg = require("fluent-ffmpeg");
 const requestImageSize = require("../client/util/request-image-size");
 
 export enum SizeSuffix {
@@ -72,6 +73,12 @@ export namespace DashUploadUtils {
                 }
             case "video":
                 if (videoFormats.includes(format)) {
+                    if (format.includes("x-matroska")) {
+                        await new Promise(res => ffmpeg(file.path)
+                            .videoCodec("copy") // this will copy the data instead or reencode it
+                            .save(file.path.replace(".mkv", ".mp4")).on('end', () => res()));
+                        file.path = file.path.replace(".mkv", ".mp4");
+                    }
                     return MoveParsedFile(file, Directory.videos);
                 }
             case "application":