made it possible to capture screen recordings as videos.

2 files changed, 15 insertions, 9 deletions

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":