Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
159 lines (141 sloc) 4.84 KB
<title>getUserMedia with canvas effects</title>
<style>
#gum {
background: #c00;
color: #fff;
padding: 10px;
}
/* I'm using CSS3 to translate the video on the X axis to give it a mirror effect */
#source {
display: block;
margin: 20px 0;
max-width: 100%;
}
.supported #source { -webkit-transform: rotateY(180deg) rotate3d(1, 0, 0, 0deg);
-o-transform: rotateY(180deg) rotate3d(1, 0, 0, 0deg);
-moz-transform: rotateY(180deg) rotate3d(1, 0, 0, 0deg);
-ms-transform: rotateY(180deg) rotate3d(1, 0, 0, 0deg);
transform: rotateY(180deg) rotate3d(1, 0, 0, 0deg);
}
video, canvas { display: none; }
input { width: 360px; }
</style>
<article>
<label for="hue">Colour <input type="range" min="0" max="360" value="0" id="hue"></label> <output id="target"></output>
<video id="video" muted loop autoplay>
<source src="/assets/remy-and-ellis2.mp4"></source>
<source src="/assets/remy-and-ellis2.webm"></source>
</video>
<canvas id="source"></canvas>
<p id="gum">getUserMeda either not supported or not allowed - so instead here's me and my son headbanging.</p>
</article>
<script>
var video = document.querySelector('video'),
source = document.getElementById('source').getContext('2d'),
output = source, //document.getElementById('output').getContext('2d'),
slider = document.getElementById('hue'),
target = document.getElementById('target'),
tr = 255, tg = 0, tb = 0,
width = 160,
height = 120;
/**
* Converts an HSL color value to RGB. Conversion formula
* adapted from http://en.wikipedia.org/wiki/HSL_color_space.
* Assumes h, s, and l are contained in the set [0, 1] and
* returns r, g, and b in the set [0, 255].
*
* @param Number h The hue
* @param Number s The saturation
* @param Number l The lightness
* @return Array The RGB representation
*/
function hslToRgb(h, s, l){
var r, g, b;
if (s == 0) {
r = g = b = l; // achromatic
} else {
function hue2rgb(p, q, t) {
if(t < 0) t += 1;
if(t > 1) t -= 1;
if(t < 1/6) return p + (q - p) * 6 * t;
if(t < 1/2) return q;
if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
}
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;
r = hue2rgb(p, q, h + 1/3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1/3);
}
return [r * 255, g * 255, b * 255];
}
slider.oninput = slider.onchange = function () {
target.style.background = 'hsl(' + this.value + ', 100%, 50%)';
var rgb = hslToRgb(this.value/360, 1, 0.6);
tr = rgb[0];
tg = rgb[1];
tb = rgb[2];
};
function init() {
// from HTML5 Doctor article: http://html5doctor.com/getusermedia/
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia('video', successCallback, errorCallback);
// Below is the latest syntax. Using the old syntax for the time being for backwards compatibility.
//navigator.getUserMedia({video: true}, successCallback, errorCallback);
function successCallback(stream) {
window.stream = stream;
if (window.webkitURL) {
video.src = window.webkitURL.createObjectURL(stream);
} else {
video.src = stream;
}
}
function errorCallback(error) {
console.error('An error occurred: [CODE ' + error.code + ']');
return;
}
}
}
video.addEventListener('loadedmetadata', function () {
source.canvas.width = video.videoWidth;
source.canvas.height = video.videoHeight;
draw();
});
function draw() {
requestAnimFrame(draw);
source.drawImage(video, 0, 0, video.videoWidth, video.videoHeight, 0, 0, source.canvas.width, source.canvas.height);
var pixels = source.getImageData(0, 0, source.canvas.width, source.canvas.height),
i = 0,
brightness;
for (; i < pixels.data.length; i += 4) {
// brightness code from Tab Atkins' canvas demos
brightness = ((3*pixels.data[i]+4*pixels.data[i+1]+pixels.data[i+2])>>>3) / 256;
pixels.data[i] = ((tr * brightness)+0.5)>>0;
pixels.data[i+1] = ((tg * brightness)+0.5)>>0
pixels.data[i+2] = ((tb * brightness)+0.5)>>0
}
output.putImageData(pixels, 0, 0);
}
// shim layer with setTimeout fallback - from Paul Irish
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
var article = video.parentNode,
gum = document.getElementById('gum');
if (navigator.getUserMedia || navigator.webkitGetUserMedia) {
article.removeChild(gum);
article.className = 'supported';
init();
}
</script>
</body>
</html>
Something went wrong with that request. Please try again.