Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 69d57a2

Browse files
Day 19 - Webcam Fun
1 parent 54be58c commit 69d57a2

File tree

6 files changed

+222
-0
lines changed

6 files changed

+222
-0
lines changed

‎19_day/index.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>19 Day</title>
7+
<link rel="stylesheet" href="main.css">
8+
</head>
9+
10+
<body>
11+
12+
<div class="photobooth">
13+
<div class="controls">
14+
<button class="takePhotos">Take Photo</button>
15+
<div class="rgb">
16+
<label for="rmin">Red Min:</label>
17+
<input type="range" min=0 max=255 name="rmin">
18+
<label for="rmax">Red Max:</label>
19+
<input type="range" min=0 max=255 name="rmax">
20+
21+
<br>
22+
23+
<label for="gmin">Green Min:</label>
24+
<input type="range" min=0 max=255 name="gmin">
25+
<label for="gmax">Green Max:</label>
26+
<input type="range" min=0 max=255 name="gmax">
27+
28+
<br>
29+
30+
<label for="bmin">Blue Min:</label>
31+
<input type="range" min=0 max=255 name="bmin">
32+
<label for="bmax">Blue Max:</label>
33+
<input type="range" min=0 max=255 name="bmax">
34+
</div>
35+
</div>
36+
37+
<canvas class="photo"></canvas>
38+
<video class="player"></video>
39+
<div class="strip"></div>
40+
</div>
41+
42+
<audio class="snap" src="http://wesbos.com/demos/photobooth/snap.mp3" hidden></audio>
43+
44+
<script src="main.js"></script>
45+
46+
</body>
47+
48+
</html>

‎19_day/main.css

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
html {
2+
box-sizing: border-box;
3+
}
4+
5+
*, *:before, *:after {
6+
box-sizing: inherit;
7+
}
8+
9+
html {
10+
font-size: 10px;
11+
background: rgba(#115373, 0.65);
12+
}
13+
14+
.photobooth {
15+
background: rgba(#115373, 0.65);
16+
max-width: 150rem;
17+
margin: 2rem auto;
18+
border-radius: 2px;
19+
}
20+
21+
22+
.photobooth:after {
23+
content: '';
24+
display: block;
25+
clear: both;
26+
}
27+
28+
.photo {
29+
width: 100%;
30+
float: left;
31+
}
32+
33+
.player {
34+
position: absolute;
35+
top: 20px;
36+
right: 20px;
37+
width: 200px;
38+
}
39+
40+
.strip {
41+
padding: 2rem;
42+
}
43+
44+
.strip img {
45+
width: 100px;
46+
overflow-x: scroll;
47+
padding: 0.8rem 0.8rem 2.5rem 0.8rem;
48+
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
49+
background: white;
50+
}
51+
52+
.strip a:nth-child(5n+1) img {
53+
rotate: 10deg;
54+
}
55+
56+
.strip a:nth-child(5n+2) img {
57+
rotate: -2deg;
58+
}
59+
60+
.strip a:nth-child(5n+3) img {
61+
rotate: 8deg;
62+
}
63+
64+
.strip a:nth-child(5n+4) img {
65+
rotate: -11deg;
66+
}
67+
68+
.strip a:nth-child(5n+5) img {
69+
rotate: 12deg;
70+
}

‎19_day/main.js

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
const video = document.querySelector('.player');
2+
const canvas = document.querySelector('.photo');
3+
const ctx = canvas.getContext('2d');
4+
const strip = document.querySelector('.strip');
5+
const snap = document.querySelector('.snap');
6+
const takePhotos = document.querySelector('.takePhotos');
7+
8+
function getVideo() {
9+
navigator.mediaDevices.getUserMedia({video: true, audio: false}).then(localMediaStream => {
10+
console.log(localMediaStream);
11+
video.src = window.URL.createObjectURL(localMediaStream);
12+
video.play();
13+
}).catch(err => {
14+
console.error(`OH NO!!!`, err);
15+
});
16+
}
17+
18+
function paintToCanavas() {
19+
const width = video.videoWidth;
20+
const height = video.videoHeight;
21+
canvas.width = width;
22+
canvas.height = height;
23+
24+
return setInterval(() => {
25+
26+
ctx.drawImage(video, 0, 0, width, height);
27+
28+
let pixels = ctx.getImageData(0, 0, width, height);
29+
}, 16);
30+
}
31+
32+
function redEffect(pixels) {
33+
for (let i = 0; i < pixels.data.length; i += 4) {
34+
pixels.data[i + 0] += 100; // RED
35+
pixels.data[i + 1] -= 50; // GREEN
36+
pixels.data[i + 2] *= 0.5; // Blue
37+
}
38+
return pixels;
39+
}
40+
41+
function rgbSplit(pixels) {
42+
for (let i = 0; i < pixels.data.length; i += 4) {
43+
pixels.data[i - 150] = pixels.data[i + 0]; // RED
44+
pixels.data[i + 200] = pixels.data[i + 1]; // GREEN
45+
pixels.data[i - 250] = pixels.data[i + 2]; // Blue
46+
}
47+
return pixels;
48+
}
49+
50+
function greenScreen(pixels) {
51+
const levels = {};
52+
53+
document.querySelectorAll('.rgb input').forEach((input) => {
54+
levels[input.name] = input.value;
55+
});
56+
57+
for (i = 0; i < pixels.data.length; i = i + 4) {
58+
red = pixels.data[i + 0];
59+
green = pixels.data[i + 1];
60+
blue = pixels.data[i + 2];
61+
alpha = pixels.data[i + 3];
62+
63+
if (red >= levels.rmin && green >= levels.gmin && blue >= levels.bmin && red <= levels.rmax && green <= levels.gmax && blue <= levels.bmax) {
64+
pixels.data[i + 3] = 0;
65+
}
66+
}
67+
68+
return pixels;
69+
}
70+
71+
function takePhoto() {
72+
snap.currentTime = 0;
73+
snap.play();
74+
75+
const data = canvas.toDataURL('image/jpeg');
76+
77+
const link = document.createElement('a');
78+
link.href = data;
79+
link.setAttribute('download', 'handsome');
80+
link.innerHTML = `<img src="${data}" alt="Handsome Man" />`;
81+
strip.insertBefore(link, strip.firsChild);
82+
}
83+
84+
getVideo();
85+
86+
video.addEventListener('canplay', paintToCanavas);
87+
takePhotos.addEventListener('click', takePhoto);

‎19_day/package.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "gum",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "scripts.js",
6+
"scripts": {
7+
"start" : "browser-sync start --server --files '*.css, *.html, *.js'"
8+
},
9+
"author": "",
10+
"license": "ISC",
11+
"devDependencies": {
12+
"browser-sync": "^2.12.5"
13+
}
14+
}

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,3 +114,5 @@ Learned more about `Array.prototype.reduce()` and its usability test case scenar
114114

115115
**Tools/Sites Found:**
116116
- New, interactive Chrome Dev Tools tutorial: [How to analyze page load performance ⚡️🚀🔎](https://developers.google.com/web/tools/chrome-devtools/network-performance/)
117+
### Day 19: 6 Jul 2018
118+
It was too much fun today. Learned a lot about canvas and pipelining real-time images.

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
<a class="active" href="./16_day/index.html">16 Day</a>
2828
<a class="active" href="./17_day/index.html">17 Day</a>
2929
<a class="active" href="./18_day/index.html">18 Day</a>
30+
<a class="active" href="./19_day/index.html">19 Day</a>
3031
</div>
3132
</body>
3233

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /