diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/nodes/AudioBox.tsx | 1 | ||||
| -rw-r--r-- | src/client/views/nodes/ScreenshotBox.tsx | 46 | ||||
| -rw-r--r-- | src/server/DashUploadUtils.ts | 2 | ||||
| -rw-r--r-- | src/server/SharedMediaTypes.ts | 2 |
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"]; } |