-
Notifications
You must be signed in to change notification settings - Fork 3
/
main.js
95 lines (73 loc) · 2.34 KB
/
main.js
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
class Fps {
constructor(interval, element) {
this.lastTick = performance.now();
this.lastNotify = this.lastTick;
this.interval = interval;
this.element = element;
this.runningSum = 0;
this.runningSamples = 0;
}
tick() {
const now = performance.now();
this.runningSum += (now - this.lastTick);
this.runningSamples++;
this.lastTick = now;
if ((now - this.lastNotify) > this.interval) {
this.notify(now);
}
}
notify(now) {
const avgFrame = this.runningSum / this.runningSamples;
const fps = 1000 / avgFrame;
this.element.innerText = `${fps.toFixed(2)}fps`;
this.lastNotify = now;
this.runningSamples = 0;
this.runningSum = 0;
}
}
const WIDTH = 800;
const HEIGHT = 800;
const elements = {
canvas: {
video: document.getElementById('video'),
hidden: document.createElement('canvas'),
visible: document.getElementById('canvas'),
capture: document.getElementById('capture'),
template: document.getElementById('template'),
ctx: {}
},
loading: document.getElementById('loading'),
fps: document.getElementById('fps'),
options: [
document.getElementById('grey_on'),
document.getElementById('invert_on'),
document.getElementById('noise_on'),
document.getElementById('red_on'),
]
};
// Hidden canvas for rendering video directly onto
elements.canvas.hidden.width = WIDTH;
elements.canvas.hidden.height = HEIGHT;
elements.canvas.ctx.hidden = elements.canvas.hidden.getContext('2d');
// Target canvas for rendering effects to
elements.canvas.ctx.visible = elements.canvas.visible.getContext('2d');
// Setup target canvas for capture
elements.canvas.ctx.capture = elements.canvas.capture.getContext('2d');
elements.canvas.ctx.capture.drawImage(elements.canvas.template, 0, 0);
const getOptions = () => {
let options = -1;
for (let [i, el] of elements.options.entries()) {
if (el.checked) {
options = i
}
}
return options;
};
// Start to capture webcam
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
.then(function (stream) {
elements.canvas.video.srcObject = stream;
})
.catch(function (err) {
throw err;
});