$(document).ready(function () {


    $(".modal").modal();

    var video = document.getElementById("video");
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia  || navigator.mozGetUserMedia || navigator.oGetUserMedia || navigator.msGetUserMedia;

    if (navigator.getUserMedia) {
        navigator.getUserMedia({ video: true }, streamWebcam, throwError);
    }

    $(".btnsnap").click(function() {
        snap();
    });
    
});

function streamWebcam(stream) {
    video.srcObject = stream;
    video.play();
}

function throwError(error) {
    alert(error.name);
}

function snap() {
    canvas.width = video.clientWidth;
    canvas.height = video.clientHeight;
    canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
}