upload screengrab video to server in mkv format ... can't yet play them.

4 files changed, 39 insertions, 12 deletions

diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index ecc93ce67..c0b5476fa 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -23,7 +23,6 @@ import { ContextMenuProps } from "../ContextMenuItem";
 import { ViewBoxAnnotatableComponent } from "../DocComponent";
 import "./AudioBox.scss";
 import { FieldView, FieldViewProps } from './FieldView';
-import { FormattedTextBoxComment } from "./formattedText/FormattedTextBoxComment";
 import { LinkDocPreview } from "./LinkDocPreview";
 declare class MediaRecorder {
     constructor(e: any);  // whatever MediaRecorder has
diff --git a/src/client/views/nodes/ScreenshotBox.tsx b/src/client/views/nodes/ScreenshotBox.tsx
index a14d8ccae..94d00f429 100644
--- a/src/client/views/nodes/ScreenshotBox.tsx
+++ b/src/client/views/nodes/ScreenshotBox.tsx
@@ -18,7 +18,15 @@ import { ViewBoxBaseComponent } from "../DocComponent";
 import { FieldView, FieldViewProps } from './FieldView';
 import "./ScreenshotBox.scss";
 import { CurrentUserUtils } from "../../util/CurrentUserUtils";
+import { Networking } from "../../Network";
+import { DocumentType } from "../../documents/DocumentTypes";
+import { VideoBox } from "./VideoBox";
+import { Id } from "../../../fields/FieldSymbols";
 const path = require('path');
+declare class MediaRecorder {
+    constructor(e: any, options?: any);  // whatever MediaRecorder has
+}
+
 
 type ScreenshotDocument = makeInterface<[typeof documentSchema]>;
 const ScreenshotDocument = makeInterface(documentSchema);
@@ -119,12 +127,7 @@ export class ScreenshotBox extends ViewBoxBaseComponent<FieldViewProps, Screensh
             const url = field.url.href;
             const subitems: ContextMenuProps[] = [];
             subitems.push({ description: "Take Snapshot", event: () => this.Snapshot(), icon: "expand-arrows-alt" });
-            subitems.push({
-                description: "Screen Capture", event: (async () => {
-                    runInAction(() => this._screenCapture = !this._screenCapture);
-                    this._videoRef!.srcObject = !this._screenCapture ? undefined : await (navigator.mediaDevices as any).getDisplayMedia({ video: true });
-                }), icon: "expand-arrows-alt"
-            });
+            subitems.push({ description: "Screen Capture", event: this.toggleRecording, icon: "expand-arrows-alt" });
             ContextMenu.Instance.addItem({ description: "Options...", subitems: subitems, icon: "video" });
         }
     }
@@ -142,16 +145,42 @@ export class ScreenshotBox extends ViewBoxBaseComponent<FieldViewProps, Screensh
             </video>;
     }
 
+    _chunks: any;
+    _recorder: any;
+
     toggleRecording = action(async () => {
         this._screenCapture = !this._screenCapture;
-        this._videoRef!.srcObject = !this._screenCapture ? undefined : await (navigator.mediaDevices as any).getDisplayMedia({ video: true });
+        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._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);
+                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));
+                    console.log(this.props.Document[this.props.fieldKey]);
+                } else alert("video conversion failed")
+            };
+            this._recorder.start();
+        } else {
+            this._recorder.stop();
+        }
     });
 
     private get uIButtons() {
         return (<div className="screenshotBox-uiButtons">
             <div className="screenshotBox-recorder" key="snap" onPointerDown={this.toggleRecording} >
                 <FontAwesomeIcon icon="file" size="lg" />
-            </div>,
+            </div>
             <div className="screenshotBox-snapshot" key="snap" onPointerDown={this.onSnapshot} >
                 <FontAwesomeIcon icon="camera" size="lg" />
             </div>
@@ -164,7 +193,6 @@ export class ScreenshotBox extends ViewBoxBaseComponent<FieldViewProps, Screensh
         e.preventDefault();
     }
 
-
     contentFunc = () => [this.content];
     render() {
         return (<div className="videoBox" onContextMenu={this.specificContextMenu}
diff --git a/src/server/DashUploadUtils.ts b/src/server/DashUploadUtils.ts
index d9b38c014..a6f752168 100644
--- a/src/server/DashUploadUtils.ts
+++ b/src/server/DashUploadUtils.ts
@@ -62,7 +62,7 @@ export namespace DashUploadUtils {
 
         const category = types[0];
         let format = `.${types[1]}`;
-        console.log(green(`Processing upload of file (${name}) with upload type (${type}) in category (${category}).`));
+        console.log(green(`Processing upload of file (${name}) and form (${format}) with upload type (${type}) in category (${category}).`));
 
         switch (category) {
             case "image":
diff --git a/src/server/SharedMediaTypes.ts b/src/server/SharedMediaTypes.ts
index f1fe582e5..0c823b8fc 100644
--- a/src/server/SharedMediaTypes.ts
+++ b/src/server/SharedMediaTypes.ts
@@ -8,7 +8,7 @@ export namespace AcceptableMedia {
     export const webps = [".webp"];
     export const tiffs = [".tiff"];
     export const imageFormats = [...pngs, ...jpgs, ...gifs, ...webps, ...tiffs];
-    export const videoFormats = [".mov", ".mp4", ".quicktime"];
+    export const videoFormats = [".mov", ".mp4", ".quicktime", ".x-matroska;codecs=avc1"];
     export const applicationFormats = [".pdf"];
     export const audioFormats = [".wav", ".mp3", ".mpeg", ".flac", ".au", ".aiff", ".m4a", ".webm"];
 }