Skip to content

Commit 0decdd9

Browse files
AngelaReadAngelaRead
committed
Complete Day 19 - Webcam Fun
1 parent c31b2ef commit 0decdd9

6 files changed

Lines changed: 152 additions & 121 deletions

File tree

‎19 - Webcam Fun/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,26 +11,26 @@
1111
<div class="photobooth">
1212
<div class="controls">
1313
<button onClick="takePhoto()">Take Photo</button>
14-
<!-- <div class="rgb">
14+
<div class="rgb">
1515
<label for="rmin">Red Min:</label>
1616
<input type="range" min=0 max=255 name="rmin">
1717
<label for="rmax">Red Max:</label>
18-
<input type="range" min=0 max=255 name="rmax">
18+
<input type="range" min=0 max=255 name="rmax" value="255">
1919

2020
<br>
2121

2222
<label for="gmin">Green Min:</label>
2323
<input type="range" min=0 max=255 name="gmin">
2424
<label for="gmax">Green Max:</label>
25-
<input type="range" min=0 max=255 name="gmax">
25+
<input type="range" min=0 max=255 name="gmax" value="255">
2626

2727
<br>
2828

2929
<label for="bmin">Blue Min:</label>
3030
<input type="range" min=0 max=255 name="bmin">
3131
<label for="bmax">Blue Max:</label>
32-
<input type="range" min=0 max=255 name="bmax">
33-
</div> -->
32+
<input type="range" min=0 max=255 name="bmax" value="255">
33+
</div>
3434
</div>
3535

3636
<canvas class="photo"></canvas>

‎19 - Webcam Fun/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,6 @@
99
"author": "",
1010
"license": "ISC",
1111
"devDependencies": {
12-
"browser-sync": "^2.12.5 <2.23.2"
12+
"browser-sync": "^3.0.4"
1313
}
1414
}

‎19 - Webcam Fun/scripts-FINISHED.js‎

Lines changed: 0 additions & 110 deletions
This file was deleted.

‎19 - Webcam Fun/scripts.js‎

Lines changed: 115 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,119 @@
11
const video = document.querySelector('.player');
22
const canvas = document.querySelector('.photo');
3-
const ctx = canvas.getContext('2d');
3+
const ctx = canvas.getContext('2d', { willReadFrequently: true });
44
const strip = document.querySelector('.strip');
55
const snap = document.querySelector('.snap');
6+
7+
function getVideo() {
8+
navigator.mediaDevices.getUserMedia({video: true, audio: false })
9+
.then(localMediaStream => {
10+
console.log(localMediaStream);
11+
video.srcObject = localMediaStream;
12+
video.play();
13+
})
14+
.catch(err => {
15+
console.error(`OH NO!!`, err);
16+
});
17+
}
18+
19+
function paintToCanvas() {
20+
const width = video.videoWidth;
21+
const height = video.videoHeight;
22+
canvas.width = width;
23+
canvas.height = height;
24+
25+
return setInterval(() =>{
26+
ctx.drawImage(video, 0, 0, width, height);
27+
// take the pixels out
28+
let pixels = ctx.getImageData(0, 0, width, height);
29+
// mess with them
30+
//pixels = redEffect(pixels);
31+
32+
pixels = colorEffect(pixels);
33+
34+
pixels = rgbSplit(pixels);
35+
//ctx.globalAlpha = 0.8;
36+
37+
//pixels = greenScreen(pixels);
38+
// put them back
39+
ctx.putImageData(pixels, 0, 0);
40+
}, 16);
41+
}
42+
43+
function takePhoto() {
44+
// played the sound
45+
snap.currentTime = 0;
46+
snap.play();
47+
48+
// take the data out of the canvas
49+
const data = canvas.toDataURL('image/jpeg');
50+
const link = document.createElement('a');
51+
link.href = data;
52+
link.setAttribute('download', 'pretty');
53+
link.innerHTML = `<img src="${data}" alt="Pretty Woman" />`;
54+
strip.insertBefore(link, strip.firstChild);
55+
}
56+
57+
function redEffect(pixels){
58+
for(let i = 0; i < pixels.data.length; i+=4) {
59+
pixels.data[i + 0] = pixels.data[i + 0] + 200; // RED
60+
pixels.data[i + 1] = pixels.data[i + 1] - 50; // GREEN
61+
pixels.data[i + 2] = pixels.data[i + 2] * 0.5; // Blue
62+
}
63+
return pixels;
64+
}
65+
66+
function colorEffect(pixels){
67+
const levels = {};
68+
document.querySelectorAll('.rgb input').forEach((input) => {
69+
levels[input.name] = parseFloat(input.value);
70+
});
71+
72+
for(let i = 0; i < pixels.data.length; i+=4) {
73+
pixels.data[i + 0] = pixels.data[i + 0] + levels.rmax - levels.rmin;
74+
pixels.data[i + 1] = pixels.data[i + 1] + levels.gmax - levels.gmin;
75+
pixels.data[i + 2] = pixels.data[i + 2] + levels.bmax - levels.bmin;
76+
}
77+
return pixels;
78+
}
79+
80+
function rgbSplit(pixels) {
81+
for(let i = 0; i < pixels.data.length; i+=4) {
82+
pixels.data[i - 150] = pixels.data[i + 0] + 100; // RED
83+
pixels.data[i + 100] = pixels.data[i + 1] - 50; // GREEN
84+
pixels.data[i - 500] = pixels.data[i + 2] * 0.5; // Blue
85+
}
86+
return pixels;
87+
}
88+
89+
function greenScreen(pixels) {
90+
const levels = {};
91+
92+
document.querySelectorAll('.rgb input').forEach((input) => {
93+
levels[input.name] = input.value;
94+
});
95+
96+
console.log(levels);
97+
98+
for (i = 0; i < pixels.data.length; i = i + 4) {
99+
red = pixels.data[i + 0];
100+
green = pixels.data[i + 1];
101+
blue = pixels.data[i + 2];
102+
alpha = pixels.data[i + 3];
103+
104+
if (red >= levels.rmin
105+
&& green >= levels.gmin
106+
&& blue >= levels.bmin
107+
&& red <= levels.rmax
108+
&& green <= levels.gmax
109+
&& blue <= levels.bmax) {
110+
// take it out!
111+
pixels.data[i + 3] = 0;
112+
}
113+
}
114+
return pixels;
115+
}
116+
117+
getVideo();
118+
119+
video.addEventListener('canplay', paintToCanvas);

‎19 - Webcam Fun/style.css‎

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,12 @@ html {
88

99
html {
1010
font-size: 10px;
11-
background: #ffc600;
11+
background: #222020;
1212
}
1313

1414
.photobooth {
15-
background: white;
15+
padding: 20px;
16+
background: #222020;
1617
max-width: 150rem;
1718
margin: 2rem auto;
1819
border-radius: 2px;
@@ -26,8 +27,11 @@ html {
2627
}
2728

2829
.photo {
29-
width: 100%;
30+
margin-top: 10px;
31+
width: 60%;
3032
float: left;
33+
padding: 20px;
34+
background: #222020;
3135
}
3236

3337
.player {
@@ -37,12 +41,30 @@ html {
3741
width:200px;
3842
}
3943

44+
label{
45+
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
46+
font-size: 20px;
47+
padding: 10px;
48+
color:#adc9da;
49+
font-weight: bold;
50+
}
51+
52+
button{
53+
padding: 10px;
54+
margin:10px;
55+
}
56+
57+
button:hover{
58+
color:#adc9da;
59+
background-color:#283044
60+
}
61+
4062
/*
4163
Strip!
4264
*/
4365

4466
.strip {
45-
padding: 2rem;
67+
padding: 6rem;
4668
}
4769

4870
.strip img {

‎package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"dependencies": {
3+
"browser-sync": "^3.0.4"
4+
}
5+
}

0 commit comments

Comments
 (0)