HTML5調用攝像頭拍照

<video id="video" width="100%" height="100%" autoplay></video>
<canvas id="canvas" width="965" height="680"></canvas>
<div style="padding: 10px;">
    <button class="button button-block button-energized button-drive" id="snap">確認</button>
</div>

var video = document.getElementById('video');
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
        video.src = window.URL.createObjectURL(stream);
        video.play();
    });
}
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

document.getElementById("snap").addEventListener("click", function() {
    context.drawImage(video, 0, 0, 965, 680);
});