Skip to content

Commit 2d7926f

Browse files
remyremy
committed
gum - early commit - needs content
1 parent 80089d5 commit 2d7926f

File tree

1 file changed

+137
-0
lines changed

1 file changed

+137
-0
lines changed

‎demos/gum-canvas.html

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<title>getUserMedia with canvas effects</title>
2+
<style>
3+
#source { -webkit-transform: rotateY(180deg) rotate3d(1, 0, 0, 0deg); display: block; margin: 20px 0; max-width: 100%; }
4+
#strip { display: block; }
5+
video, canvas { display: none; }
6+
input { width: 360px ;}
7+
output { display: inline-block; width: 16px; height: 16px; background: red; padding: 0; margin: 0;}
8+
</style>
9+
<article>
10+
<label for="hue">Colour <input type="range" min="0" max="360" value="0" id="hue"></label> <output id="target"></output>
11+
<video autoplay></video>
12+
<canvas id="source"></canvas>
13+
</article>
14+
<script>
15+
var video = document.querySelector('video'),
16+
source = document.getElementById('source').getContext('2d'),
17+
output = source, //document.getElementById('output').getContext('2d'),
18+
slider = document.getElementById('hue'),
19+
target = document.getElementById('target'),
20+
tr = 255, tg = 0, tb = 0,
21+
width = 160,
22+
height = 120;
23+
24+
/**
25+
* Converts an HSL color value to RGB. Conversion formula
26+
* adapted from http://en.wikipedia.org/wiki/HSL_color_space.
27+
* Assumes h, s, and l are contained in the set [0, 1] and
28+
* returns r, g, and b in the set [0, 255].
29+
*
30+
* @param Number h The hue
31+
* @param Number s The saturation
32+
* @param Number l The lightness
33+
* @return Array The RGB representation
34+
*/
35+
function hslToRgb(h, s, l){
36+
var r, g, b;
37+
38+
if (s == 0) {
39+
r = g = b = l; // achromatic
40+
} else {
41+
function hue2rgb(p, q, t) {
42+
if(t < 0) t += 1;
43+
if(t > 1) t -= 1;
44+
if(t < 1/6) return p + (q - p) * 6 * t;
45+
if(t < 1/2) return q;
46+
if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
47+
return p;
48+
}
49+
50+
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
51+
var p = 2 * l - q;
52+
r = hue2rgb(p, q, h + 1/3);
53+
g = hue2rgb(p, q, h);
54+
b = hue2rgb(p, q, h - 1/3);
55+
}
56+
57+
return [r * 255, g * 255, b * 255];
58+
}
59+
60+
slider.oninput = slider.onchange = function () {
61+
target.style.background = 'hsl(' + this.value + ', 100%, 50%)';
62+
var rgb = hslToRgb(this.value/360, 1, 0.6);
63+
tr = rgb[0];
64+
tg = rgb[1];
65+
tb = rgb[2];
66+
// console.log(brightness / 256);
67+
};
68+
69+
70+
function init() {
71+
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
72+
if (navigator.getUserMedia) {
73+
navigator.getUserMedia('video', successCallback, errorCallback);
74+
// Below is the latest syntax. Using the old syntax for the time being for backwards compatibility.
75+
//navigator.getUserMedia({video: true}, successCallback, errorCallback);
76+
function successCallback(stream) {
77+
window.stream = stream;
78+
if (window.webkitURL) {
79+
video.src = window.webkitURL.createObjectURL(stream);
80+
} else {
81+
video.src = stream;
82+
}
83+
}
84+
function errorCallback(error) {
85+
console.error('An error occurred: [CODE ' + error.code + ']');
86+
return;
87+
}
88+
}
89+
}
90+
91+
video.addEventListener('loadedmetadata', function () {
92+
// output.canvas.width = ;
93+
source.canvas.width = video.videoWidth;
94+
// output.canvas.height =
95+
source.canvas.height = video.videoHeight;
96+
// source.canvas.height = height;
97+
// source.canvas.width = width;
98+
draw();
99+
});
100+
101+
102+
function draw() {
103+
requestAnimFrame(draw);
104+
source.drawImage(video, 0, 0, video.videoWidth, video.videoHeight, 0, 0, source.canvas.width, source.canvas.height);
105+
var pixels = source.getImageData(0, 0, source.canvas.width, source.canvas.height),
106+
i = 0,
107+
brightness;
108+
109+
for (; i < pixels.data.length; i += 4) {
110+
// grey = r*.3 + g*.59 + b*.11;
111+
brightness = ((3*pixels.data[i]+4*pixels.data[i+1]+pixels.data[i+2])>>>3) / 256;
112+
113+
pixels.data[i] = ((tr * brightness)+0.5)>>0;
114+
pixels.data[i+1] = ((tg * brightness)+0.5)>>0
115+
pixels.data[i+2] = ((tb * brightness)+0.5)>>0
116+
// pixels.data[i+2] = 0;
117+
}
118+
output.putImageData(pixels, 0, 0);
119+
}
120+
121+
// shim layer with setTimeout fallback
122+
window.requestAnimFrame = (function(){
123+
return window.requestAnimationFrame ||
124+
window.webkitRequestAnimationFrame ||
125+
window.mozRequestAnimationFrame ||
126+
window.oRequestAnimationFrame ||
127+
window.msRequestAnimationFrame ||
128+
function( callback ){
129+
window.setTimeout(callback, 1000 / 60);
130+
};
131+
})();
132+
133+
134+
init();
135+
</script>
136+
</body>
137+
</html>

0 commit comments

Comments
 (0)