1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
|
import React = require("react");
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { action, computed, IReactionDisposer, observable, runInAction } from "mobx";
import { observer } from "mobx-react";
import * as rp from 'request-promise';
import { Doc } from "../../../fields/Doc";
import { documentSchema } from "../../../fields/documentSchemas";
import { InkTool } from "../../../fields/InkField";
import { listSpec, makeInterface } from "../../../fields/Schema";
import { Cast, NumCast } from "../../../fields/Types";
import { VideoField } from "../../../fields/URLField";
import { emptyFunction, returnFalse, returnOne, returnZero, Utils, OmitKeys } from "../../../Utils";
import { Docs } from "../../documents/Documents";
import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView";
import { ContextMenu } from "../ContextMenu";
import { ContextMenuProps } from "../ContextMenuItem";
import { ViewBoxBaseComponent } from "../DocComponent";
import { FieldView, FieldViewProps } from './FieldView';
import "./ScreenshotBox.scss";
const path = require('path');
type ScreenshotDocument = makeInterface<[typeof documentSchema]>;
const ScreenshotDocument = makeInterface(documentSchema);
@observer
export class ScreenshotBox extends ViewBoxBaseComponent<FieldViewProps, ScreenshotDocument>(ScreenshotDocument) {
private _reactionDisposer?: IReactionDisposer;
private _videoRef: HTMLVideoElement | null = null;
public static LayoutString(fieldKey: string) { return FieldView.LayoutString(ScreenshotBox, fieldKey); }
public get player(): HTMLVideoElement | null {
return this._videoRef;
}
videoLoad = () => {
const aspect = this.player!.videoWidth / this.player!.videoHeight;
const nativeWidth = (this.layoutDoc._nativeWidth || 0);
const nativeHeight = (this.layoutDoc._nativeHeight || 0);
if (!nativeWidth || !nativeHeight) {
if (!this.layoutDoc._nativeWidth) this.layoutDoc._nativeWidth = 400;
this.layoutDoc._nativeHeight = NumCast(this.layoutDoc._nativeWidth) / aspect;
this.layoutDoc._height = NumCast(this.layoutDoc._width) / aspect;
}
}
@action public Snapshot() {
const width = NumCast(this.layoutDoc._width);
const height = NumCast(this.layoutDoc._height);
const canvas = document.createElement('canvas');
canvas.width = 640;
canvas.height = 640 * NumCast(this.layoutDoc._nativeHeight) / NumCast(this.layoutDoc._nativeWidth, 1);
const ctx = canvas.getContext('2d');//draw image to canvas. scale to target dimensions
if (ctx) {
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "blue";
ctx.fill();
this._videoRef && ctx.drawImage(this._videoRef, 0, 0, canvas.width, canvas.height);
}
if (this._videoRef) {
//convert to desired file format
const dataUrl = canvas.toDataURL('image/png'); // can also use 'image/png'
// if you want to preview the captured image,
const filename = path.basename(encodeURIComponent("screenshot" + Utils.GenerateGuid().replace(/\..*$/, "").replace(" ", "_")));
ScreenshotBox.convertDataUri(dataUrl, filename).then(returnedFilename => {
setTimeout(() => {
if (returnedFilename) {
const imageSummary = Docs.Create.ImageDocument(Utils.prepend(returnedFilename), {
x: NumCast(this.layoutDoc.x) + width, y: NumCast(this.layoutDoc.y),
_width: 150, _height: height / width * 150, title: "--screenshot--"
});
if (!this.props.addDocument || this.props.addDocument === returnFalse) {
const spt = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
imageSummary.x = spt[0];
imageSummary.y = spt[1];
Cast(Cast(Doc.UserDoc().myOverlayDocs, Doc, null)?.data, listSpec(Doc), []).push(imageSummary);
} else {
this.props.addDocument?.(imageSummary);
}
}
}, 500);
});
}
}
componentDidMount() {
}
componentWillUnmount() {
this._reactionDisposer && this._reactionDisposer();
}
@action
setVideoRef = (vref: HTMLVideoElement | null) => {
this._videoRef = vref;
}
public static async convertDataUri(imageUri: string, returnedFilename: string) {
try {
const posting = Utils.prepend("/uploadURI");
const returnedUri = await rp.post(posting, {
body: {
uri: imageUri,
name: returnedFilename
},
json: true,
});
return returnedUri;
} catch (e) {
console.log("ScreenShotBox:" + e);
}
}
@observable _screenCapture = false;
specificContextMenu = (e: React.MouseEvent): void => {
const field = Cast(this.dataDoc[this.fieldKey], VideoField);
if (field) {
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"
});
ContextMenu.Instance.addItem({ description: "Options...", subitems: subitems, icon: "video" });
}
}
@computed get content() {
const interactive = Doc.GetSelectedTool() !== InkTool.None || !this.props.isSelected() ? "" : "-interactive";
const style = "videoBox-content" + interactive;
return <video className={`${style}`} key="video" autoPlay={this._screenCapture} ref={this.setVideoRef}
style={{ width: this._screenCapture ? "100%" : undefined, height: this._screenCapture ? "100%" : undefined }}
onCanPlay={this.videoLoad}
controls={true}
onClick={e => e.preventDefault()}>
<source type="video/mp4" />
Not supported.
</video>;
}
toggleRecording = action(async () => {
this._screenCapture = !this._screenCapture;
this._videoRef!.srcObject = !this._screenCapture ? undefined : await (navigator.mediaDevices as any).getDisplayMedia({ video: true });
});
private get uIButtons() {
return (<div className="screenshotBox-uiButtons">
<div className="screenshotBox-recorder" key="snap" onPointerDown={this.toggleRecording} >
<FontAwesomeIcon icon="file" size="lg" />
</div>,
<div className="screenshotBox-snapshot" key="snap" onPointerDown={this.onSnapshot} >
<FontAwesomeIcon icon="camera" size="lg" />
</div>
</div>);
}
onSnapshot = (e: React.PointerEvent) => {
this.Snapshot();
e.stopPropagation();
e.preventDefault();
}
contentFunc = () => [this.content];
render() {
return (<div className="videoBox" onContextMenu={this.specificContextMenu}
style={{ transform: `scale(${this.props.ContentScaling()})`, width: `${100 / this.props.ContentScaling()}%`, height: `${100 / this.props.ContentScaling()}%` }} >
<div className="videoBox-viewer" >
<CollectionFreeFormView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit}
PanelHeight={this.props.PanelHeight}
PanelWidth={this.props.PanelWidth}
annotationsKey={""}
focus={this.props.focus}
isSelected={this.props.isSelected}
isAnnotationOverlay={true}
select={emptyFunction}
active={returnFalse}
ContentScaling={returnOne}
whenActiveChanged={emptyFunction}
removeDocument={returnFalse}
moveDocument={returnFalse}
addDocument={returnFalse}
CollectionView={undefined}
ScreenToLocalTransform={this.props.ScreenToLocalTransform}
renderDepth={this.props.renderDepth + 1}
ContainingCollectionDoc={this.props.ContainingCollectionDoc}>
{this.contentFunc}
</CollectionFreeFormView>
</div>
{this.props.isSelected() ? this.uIButtons : (null)}
</div >);
}
}
|
