Skip to content

Instantly share code, notes, and snippets.

@1wheel
Last active Aug 29, 2015
Embed
What would you like to do?
Video Capture
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Photobooth</title>
<style>
.blur {
-webkit-filter: blur(3px);
}
.brightness {
-webkit-filter: brightness(5);
}
.contrast {
-webkit-filter: contrast(8);
}
.hue-rotate {
-webkit-filter: hue-rotate(90deg);
}
.hue-rotate2 {
-webkit-filter: hue-rotate(180deg);
}
.hue-rotate3 {
-webkit-filter: hue-rotate(270deg);
}
.saturate {
-webkit-filter: saturate(10);
}
.grayscale {
-webkit-filter: grayscale(1);
}
.sepia {
-webkit-filter: sepia(1);
}
.invert {
-webkit-filter: invert(1)
}
</style>
</head>
<body>
<article>
<video id="monitor" autoplay onclick="changeFilter(this)" title="Click me to see different filters"></video>
<p><button onclick="init(this)">Capture</button></p>
<div id="splash">
<p id="errorMessage">&uarr;<br>Click to begin</p>
</div>
<div id="gallery"></div>
</article>
<canvas id="photo" style="display:none"></canvas>
<script>
navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.getUserMedia;
window.URL = window.URL || window.webkitURL;
var app = document.getElementById('app');
var video = document.getElementById('monitor');
var canvas = document.getElementById('photo');
var effect = document.getElementById('effect');
var gallery = document.getElementById('gallery');
var ctx = canvas.getContext('2d');
var intervalId = null;
var idx = 0;
var filters = [
'grayscale',
'sepia',
'blur',
'brightness',
'contrast',
'hue-rotate', 'hue-rotate2', 'hue-rotate3',
'saturate',
'invert',
''
];
function changeFilter(el) {
el.className = '';
var effect = filters[idx++ % filters.length];
if (effect) {
el.classList.add(effect);
}
}
function gotStream(stream) {
if (window.URL) {
video.src = window.URL.createObjectURL(stream);
} else {
video.src = stream; // Opera.
}
video.onerror = function(e) {
stream.stop();
};
stream.onended = noStream;
video.onloadedmetadata = function(e) { // Not firing in Chrome. See crbug.com/110938.
};
// Since video.onloadedmetadata isn't firing for getUserMedia video, we have
// to fake it.
setTimeout(function() {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
capture()
}, 50);
}
function noStream(e) {
var msg = 'No camera available.';
if (e.code == 1) {
msg = 'User denied access to use camera.';
}
document.getElementById('errorMessage').textContent = msg;cv
}
function capture() {
setTimeout(function(){
ctx.drawImage(video, 0, 0);
var img = document.createElement('img');
img.src = canvas.toDataURL('image/webp');
gallery.appendChild(img);
var w=window.open('about:blank','image from canvas');
w.document.write("<img src='"+img.src+"' alt='from canvas'/>");
}, 1000)
// intervalId = setInterval(function() {
// ctx.drawImage(video, 0, 0);
// var img = document.createElement('img');
// img.src = canvas.toDataURL('image/webp');
// var angle = Math.floor(Math.random() * 36);
// var sign = Math.floor(Math.random() * 2) ? 1 : -1;
// img.style.webkitTransform = 'rotateZ(' + (sign * angle) + 'deg)';
// var maxLeft = document.body.clientWidth;
// var maxTop = document.body.clientHeight;
// img.style.top = Math.floor(Math.random() * maxTop) + 'px';
// img.style.left = Math.floor(Math.random() * maxLeft) + 'px';
// gallery.appendChild(img);
// }, 150);
}
function init(el) {
if (!navigator.getUserMedia) return console.log('navigator.getUserMedia() not available')
el.onclick = capture;
navigator.getUserMedia({video: true}, gotStream, noStream);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment