use camera api

gistfile1.js

// At first we should write three basic html tag
// include: 
// 1) a video tag
// 2) a button
// 3) a canvas tag
// just like below:
// <video id="video" width=600 height=480 autoplay></video>
// <button id="snap">Snap</button>
// <canvas id="canvas" width=600 height=480></canvas>
// prepare work done!
var $ = document.querySelector.bind(document);

var video = $('#video');
var snap = $("#snap");
var canvas = $("#canvas");
var ctx = canvas.getContext("2d");

var getUerMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia).bind(navigator);
var createObjectURL = window.webkitURL.createObjectURL || window.URL.createObjectURL;
if(navigator.getUserMedia){
  navigator.getUserMedia({"video": true},function(stream){
    video.src = createObjectURL(stream);
    video.play();
  },function(err){
    throw err;
  })
}else{
  alert("oops, it seems that your browser doesn't support this awsome function~")
}

snap.addEventListener("click",function(){
  ctx.drawImage(video,0,0,600,480);
})