notes/Basic Webcam Video Stream to Canvas with Image Overlay-4VrnULyH.html
<!DOCTYPE html><html><head><title>Basic Webcam Video Stream to Canvas - with Image Overlay</title><style>
#camera-stream {
display : none;
}
#output{
/* video effects
-webkit-filter: sepia(1);
-webkit-filter: blur(3px);
-webkit-filter: grayscale(1);
-webkit-filter: sepia(1);
-webkit-filter: brightness(2.5);
-webkit-filter: contrast(5);
-webkit-filter: hue-rotate(125deg);
-webkit-filter: invert(1);
-webkit-filter: saturate(3);
-webkit-filter: opacity(0.3);
*/
}
</style></head><body><div id="video-container"><video id="camera-stream" autoplay></video><canvas id="output"></canvas></div><script src="ccv.js"></script><script src="face.js"></script><script>
var overlay = new Image();
overlay.src = 'http://filmsbykris.com/scripts/canvas/img/opensec-tux-mario-1732.png';
var canvas = document.getElementById('output');
var context = canvas.getContext('2d');
window.onload = function() {
// Normalize the various vendor prefixed versions of getUserMedia.
navigator.getUserMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
if (navigator.getUserMedia) {
// Request the camera.
navigator.getUserMedia(
// Constraints
{
video: true
},
// Success Callback
function(localMediaStream) {
// Get a reference to the video element on the page.
vid = document.getElementById('camera-stream');
// Create an object URL for the video stream and use this
// to set the video source.
vid.src = window.URL.createObjectURL(localMediaStream);
vid.addEventListener('canplay', function(){
vid.removeEventListener('canplay');
vid.play();
draw_canvas();
});
}
);
}
}
function draw_canvas(){
requestAnimationFrame(draw_canvas);
context.drawImage(vid, 0, 0, 300, 200);
context.drawImage(overlay, 0, 0, 100, 100);
}
</script></body></html>