-
Notifications
You must be signed in to change notification settings - Fork 5
/
webCam.jade
137 lines (106 loc) · 3.61 KB
/
webCam.jade
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
extends base
block vars
- var title = 'Unreal Webcam'
block styles
link(rel="stylesheet" type="text/css" href="styles/webCam.css")
block body
.photobooth
.controls
button(onClick="takePhoto()") Take Photo
.rgb
label(for="rmin") Red Min:
input(type="range" min="0" max="255" name="rmin")
label(for="rmax") Red Max:
input(type="range" min="0" max="255" name="rmax")
br
label(for="gmin") Green Min:
input(type="range" min="0" max="255" name="gmin")
label(for="gmax") Green Max:
input(type="range" min="0" max="255" name="gmax")
br
label(for="bmin") Blue Min:
input(type="range" min="0" max="255" name="bmin")
label(for="bmax") Blue Max:
input(type="range" min="0" max="255" name="bmax")
canvas.photo
video.player
.strip
audio.snap(src="sounds/snap.mp3" hidden)
script(type="text/javascript").
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.src = window.URL.createObjectURL(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)
// yank out pixels
let pixels = ctx.getImageData(0, 0, width, height)
// manipulate pixels
pixels = rgbSplit(pixels)
//- ctx.globalAlpha = 0.1
// return pixels to canvas
ctx.putImageData(pixels, 0, 0)
}, 16)
}
function takePhoto() {
$snap.currentTime = 0
$snap.play()
const data = $canvas.toDataURL('image/jpeg')
const link = document.createElement('a')
link.href = data
link.setAttribute('download', 'snapShot')
link.innerHTML = `<img src="${data}" alt="snapShot">`
$strip.insertBefore(link, $strip.firstChild)
}
// Effects
function redEffect(pixels) {
for (let i = 0; i < pixels.data.length; i += 4) {
pixels.data[i + 0] = pixels.data[i + 0] + 200
pixels.data[i + 1] = pixels.data[i + 1] - 50
pixels.data[i + 2] = pixels.data[i + 2] * 0.5
}
return pixels
}
function rgbSplit(pixels) {
for (let i = 0; i < pixels.data.length; i += 4) {
pixels.data[i - 150] = pixels.data[i + 0]
pixels.data[i + 500] = pixels.data[i + 1]
pixels.data[i + 550] = pixels.data[i + 2]
}
return pixels
}
function greenScreen(pixels) {
const levels = {}
document.querySelectorAll('.rgb input').forEach($input => {
levels[$input.name] = $input.value
})
for (let i = 0; i < pixels.data.length; i += 4) {
const red = pixels.data[i + 0]
const green = pixels.data[i + 1]
const blue = pixels.data[i + 2]
const alpha = pixels.data[i + 3]
if (red >= levels.rmin && green >= levels.gmin &&
blue >= levels.bmin && red <= levels.rmax &&
green <= levels.gmax && blue <= levels.bmax)
pixels.data[i + 3] = 0
}
return pixels
}
getVideo()
$video.addEventListener('canplay', paintToCanvas)