写真を撮る、と言っても、実際はvideoタグにカメラの映像を流して、瞬間を切り取るだけのやりかたです。

MediaDevices.getUserMedia()を利用する

まだ2017/05/31現在は実験段階らしいので利用する際は注意。
MediaDevices.getUserMedia()

使うのは、

･ htmlでvideoタグ設置
･ camera取得,videoタグのsrcに入れる

てな感じ。

videoタグ設置

普通にhtmlで下記のようにタグを準備しておく。
ポイントはautoplayにしておくこと。
勝手に再生してくれるので。

<video autoplay></video>

constraintsを設定

constraintsでvideoを使う設定。
なんかwidthとかheightとか細かい設定できるっぽいけど、とりあえずスルー(最後までスルー)。

var constraints = {
    video: {
    },
}

navigator.mediaDevices使ってstream情報を取得して、videoタグのsrcに入れる。

//デバイス情報ゲット
var item = navigator.mediaDevices.getUserMedia(constraints);
//ストリーム情報をビデオタグのsrcに設置
item.then( function(stream) {
   var video = document.querySelector('video');
   video.src = window.URL.createObjectURL(stream);
   video.onloadedmetadata = function(e) {
        //ロード完了後にカメラの設定
        $(".js-btn").on("click",function(){
            captureShot();
        }.bind(this));

   };
});

これでvideoタグに動画が勝手に流れる。

navigator.mediaDevices.getUserMedia(constraints);

‘MediaStreamConstraints オブジェクトは各種類に対するなんらかの要求に沿って、要求するメディアの種類を特定します。’
MDN

videoをキャプチャしてcanvasに描画

あとは流れているvideoタグの画面をcanvasタグに貼り付けて完了。

//キャプチャを
function captureShot(){
    //videoタグ取得
    var videocnt = $(".videoBox");
    //canvas取得
    var canvas = $("canvas")[0];
    //cssで設定しててもよい
    canvas.width = videocnt.width();
    canvas.height = videocnt.height();
    var cnt2d = $("canvas")[0].getContext('2d');
    //canvasに書き込み
    cnt2d.drawImage(videocnt[0], 0, 0);
}