forked from wesbos/JavaScript30
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathscripts.js
More file actions
116 lines (102 loc) · 3.6 KB
/
scripts.js
File metadata and controls
116 lines (102 loc) · 3.6 KB
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
const filter = document.querySelector('#filter');
const video = document.querySelector('.player');
const canvas = document.querySelector('.photo');
const ctx = canvas.getContext('2d');
const strip = document.querySelector('.strip');
const snap = document.querySelector('.snap');
function getVideo() {
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
.then(localMediaStream => {
video.srcObject = localMediaStream;
video.play();
})
.catch(err => {
alert(`This page doesn't work unless you allow webcam access!\n\n${err}`);
});
}
function paintToCanvas() {
const width = video.videoWidth;
const height = video.videoHeight;
canvas.width = width;
canvas.height = height;
return setInterval(() => {
ctx.drawImage(video, 0, 0, width, height);
// get the image's data, mess with it, and put it back
let pixels = ctx.getImageData(0, 0, width, height);
switch (filter.value) {
case 'red-shift':
pixels = redEffect(pixels); break;
case 'rgb-split':
pixels = rgbSplit(pixels); break;
case 'green-screen':
pixels = greenScreen(pixels); break;
}
ctx.putImageData(pixels, 0, 0);
}, 16);
}
function takePhoto() {
// play sound
snap.currentTime = 0;
snap.play();
// create linked image from canvas and put it at beginning of strip
const data = canvas.toDataURL('image/jpeg');
const link = document.createElement('a');
link.href = data;
//link.setAttribute('download', 'snapshot');
link.setAttribute('target', '_blank');
link.innerHTML = `<img src="${data}" alt="photo from webcam">`;
strip.insertBefore(link, strip.firstChild);
link.addEventListener('click', deletePhoto);
}
function deletePhoto(e) {
e.altKey && e.preventDefault();
e.altKey && this.remove();
}
function redEffect(pixels) {
// pixel data is [red, green, blue, alpha] per pixel
for (let i=0; i < pixels.data.length; i+=4) {
pixels.data[i] += 100; // red
pixels.data[i + 1] -= 50; // green
pixels.data[i + 2] *= 0.5; // blue
}
return pixels;
}
function rgbSplit(pixels) {
// pixel data is [red, green, blue, alpha] per pixel
for (let i=0; i < pixels.data.length; i+=4) {
pixels.data[i - 150] = pixels.data[i]; // red
pixels.data[i + 100] = pixels.data[i + 1]; // green
pixels.data[i - 150] = pixels.data[i + 2]; // blue
}
return pixels;
}
function greenScreen(pixels) {
const levels = {};
document.querySelectorAll('.rgb input').forEach(input => {
levels[input.name] = input.value;
});
// If min < max for a color, swap them
if (levels.rmin > levels.rmax) {
levels.rmax = [levels.rmin, levels.rmin = levels.rmax][0];
}
if (levels.gmin > levels.gmax) {
levels.gmax = [levels.gmin, levels.gmin = levels.gmax][0];
}
if (levels.bmin > levels.bmax) {
levels.bmax = [levels.bmin, levels.bmin = levels.bmax][0];
}
for (var i=0; i < pixels.data.length; i+=4) {
const red = pixels.data[i];
const green = pixels.data[i + 1];
const blue = pixels.data[i + 2];
// pixels.data[i + 3] is alpha
if (levels.rmin <= red && red <= levels.rmax &&
levels.gmin <= green && green <= levels.gmax &&
levels.bmin <= blue && blue <= levels.bmax) {
pixels.data[i + 3] = 0; // make it fully transparent
}
}
return pixels;
}
getVideo();
video.addEventListener('canplay', paintToCanvas);