-
Notifications
You must be signed in to change notification settings - Fork 6
/
chroma.js
92 lines (72 loc) · 2.32 KB
/
chroma.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
video = document.getElementById("video");
c1 = document.getElementById("canvas1");
ctx1 = this.c1.getContext("2d");
// Get video
navigator.mediaDevices.getUserMedia({ video: true })
.then(function (stream) {
// Put video input into video tag
video.srcObject = stream;
let self = this;
this.video.addEventListener("loadeddata", function () {
self.width = self.video.videoWidth;
self.height = self.video.videoHeight;
self.time_callback();
}, false);
})
.catch(function (error) {
console.log("Error:", error);
});
function draw() {
ctx1.drawImage(video, 0, 0, this.width, this.height);
}
function time_callback() {
if (video.paused || video.ended) {
return;
}
draw();
findColor(color);
// Update all the time, otherwise the canvas won't be up to date with the video
setTimeout(function () {
this.time_callback();
}, 0);
};
function pickedFilter() {
var selector = document.getElementById("colorFilter");
color = selector.options[selector.selectedIndex].value;
time_callback();
}
// Which color? Green or blue?
pickedFilter();
colorFilter.addEventListener("change", pickedFilter);
function findColor(color) {
let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
let l = frame.data.length / 4;
if (color === "Green") {
for (let i = 0; i < l; i++) {
let r = frame.data[i * 4 + 0];
let g = frame.data[i * 4 + 1];
let b = frame.data[i * 4 + 2];
if (g > r && g > b) {
// If it's too dark it's probably not right
if (g > 100) {
// Alpha value to 0
frame.data[i * 4 + 3] = 0;
}
}
}
} else {
for (let i = 0; i < l; i++) {
let r = frame.data[i * 4 + 0];
let g = frame.data[i * 4 + 1];
let b = frame.data[i * 4 + 2];
if (b > r && b > g) {
if (b > 100) {
frame.data[i * 4 + 3] = 0;
}
}
}
}
// Put the modified data back into the canvas
this.ctx1.putImageData(frame, 0, 0);
return;
}