Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

file 69 lines (66 sloc) 2.117 kb
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Image Capture Test</title>
<!-- <link rel="stylesheet" href="style.css" /> -->
<!-- <script src="script.js"></script> -->
</head>
<body>
<h1>Image Capture Test</h1>
<canvas width="400" height="400"></canvas>
<button class="startVideo">Use Camera</button>
<button class="takeSnapshot">Take Picture</button>
<video height="400" style="display:none"></video>
<img src="disco_vader.png" style="display:none" />
<script>
var canvas = document.querySelector('canvas');
var video = document.querySelector('video');
var ctx = canvas.getContext('2d');
navigator.getMedia = ( navigator.getUserMedia ||
                       navigator.webkitGetUserMedia ||
                       navigator.mozGetUserMedia ||
                       navigator.msGetUserMedia);

// mask the part we will clip
function mask(){
ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
ctx.fillRect(0,0,400,55);
ctx.fillRect(0,55,55,345);
ctx.fillRect(345,55,400,345);
ctx.fillRect(0,345,400,400);
}
function drawStartingImage(){
var img = document.querySelector('img');
ctx.drawImage(img, 0, 0, img.width, img.height);
}
function start(){
drawStartingImage();
mask();
}
function startCamera(){
canvas.style.display = 'none';
video.style.display = 'block';
var videoStream = navigator.getMedia({video:true}, function(stream) {
if (navigator.mozGetUserMedia) {
video.mozSrcObject = stream;
} else {
var vendorURL = window.URL || window.webkitURL;
video.src = vendorURL.createObjectURL(stream);
}
video.play();
},function(err){
console.log('an error occurred: %o', err);
});
}

function takeSnapshot(){
video.pause();
video.style.display = 'none';
canvas.style.display = 'block';
ctx.drawImage(video, 0, 0);
}
window.addEventListener('load', start, false);
document.querySelector('.startVideo').addEventListener('click', startCamera);
document.querySelector('.takeSnapshot').addEventListener('click', takeSnapshot);
</script>
</body>
</html>
Something went wrong with that request. Please try again.