This repository was archived by the owner on Jul 27, 2019. It is now read-only.
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
74 lines (64 loc) · 2.37 KB
/
scripts.js
File metadata and controls
74 lines (64 loc) · 2.37 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
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 => {
console.log(localMediaStream);
// DEPRECIATION :
// The following has been depreceated by major browsers as of Chrome and Firefox.
// video.src = window.URL.createObjectURL(localMediaStream);
// Please refer to these:
// Depreceated - https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
// Newer Syntax - https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject
video.srcObject = localMediaStream;
video.play();
})
.catch(err => {
console.error('Oh no!', 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 original pixels
let pixels = ctx.getImageData(0, 0, width, height);
// mess with them
pixels = redEffect(pixels);
// put them back
ctx.putImageData(pixels, 0, 0);
console.log(pixels);
}, 16);
}
function takePhoto() {
// Will not work so long as Wes' server blocks the download request
// play the sound
// snap.currentTime = 0;
// snap.play();
// take the data out of the canvas
const data = canvas.toDataURL('image/jpeg');
const link = document.createElement('a');
link.href = data;
link.setAttribute('download', 'handsome');
link.innerHTML = `<img src=${data} alt="Handsome Man />`;
strip.insertBefore(link, strip.firstChild);
}
function redEffect(pixels) {
for (let i = 0; i < pixels.data.length; i += 4) {
pixels.data[i - 150] = pixels.data[i + 0] + 100; // RED
pixels.data[i + 500] = pixels.data[i + 1] - 050; // GREEN
pixels.data[i - 550] = pixels.data[i + 2] + 0.5; // BLUE
}
return pixels;
}
getVideo();
video.addEventListener('canplay', paintToCanvas);