<!DOCTYPE html>
<html>
<head>
<title>getUserMedia Demo 2</title>
<style>
video {
    border:5px solid black;
    width:480px;
    height:360px;
}
canvas {
    border:5px solid black;
    width:480px;
    height:360px;     
}
button {
  font: 18px sans-serif;
  padding: 8px;
}
</style>
</head>
<body>
<video id="vid" autoplay="true"></video>
<canvas id="cvs"></canvas>
<br>
<button id="btn1" onclick="start()">Start</button>
<button id="btn2" onclick="snap()">Snapshot</button>
<script>
video = document.getElementById("vid");
canvas = document.getElementById("cvs");
canvas.width = 480;
canvas.height = 360;  
btn2.disabled = true;
function start() {
  navigator.webkitGetUserMedia({video:true}, gotStream, function() {}); 
  btn1.disabled = true;
}
function gotStream(stream) {
  video.src = webkitURL.createObjectURL(stream);
  btn2.disabled = false
}
function snap() {
  canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
}
</script>
</body>
</html>