camera2.js

var webcam = (function(){

    var video = document.createElement('video'),
        photo = document.createElement('canvas');

    function play() {

        if (navigator.getUserMedia) {

            navigator.getUserMedia({video: true, audio: true, toString : function() {return "video,audio";} }, onSuccess, onError);

        } else {

            changeStatus('getUserMedia is not supported in this browser.', true);
        }

    }

    function onSuccess(stream) {

        var source;

        if (window.webkitURL) {

            source = window.webkitURL.createObjectURL(stream);

        } else {

            source = stream; // Opera and Firefox
        }


        video.autoplay = true;

        video.src = source;

        changeStatus('', false);

    }

    function onError() {

        changeStatus('Please accept the getUserMedia permissions! Refresh to try again.', true);

    }

    function changeStatus(msg, error) {
        var status = document.getElementById('status');
        status.innerHTML = msg;
        status.style.color = (error) ? 'red' : 'green';
    }


    // allow the user to take a screenshot
    function setupPhotoBooth() {
        var takeButton = document.createElement('a');
        takeButton.innerText = 'Smile!';
        takeButton.classList.add('button');
        takeButton.addEventListener('click', takePhoto, true);
        document.getElementById('camera').appendChild(takeButton);

        var saveButton = document.createElement('a');
        saveButton.id = 'save';
        saveButton.classList.add('button');
        saveButton.innerText = 'Save!';
        saveButton.disabled = true;
        saveButton.addEventListener('click', savePhoto, true);
        document.getElementById('camera').appendChild(saveButton);

    }

    function takePhoto() {

        // set our canvas to the same size as our video
        photo.width = video.width;
        photo.height = video.height;

        var context = photo.getContext('2d');
        context.drawImage(video, 0, 0, photo.width, photo.height);

        // allow us to save
        var saveButton = document.getElementById('save');
        saveButton.disabled = false;

    }

    function savePhoto() {
        var data = photo.toDataURL("image/png");

        data = data.replace("image/png","image/octet-stream");

        document.location.href = data;

    }

    return {
        init: function() {

            changeStatus('Look up and click "ALLOW".', true);

            video.width = 400;
            video.height = 300;

            document.getElementById('camera').appendChild(video);
            document.getElementById('camera').appendChild(photo);
            startCam.style.display = 'none';
            navigator.getUserMedia || (navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia || navigator.msGetUserMedia);

            play();
            setupPhotoBooth();

        }()

    }


});

var startCam = document.getElementById('startCam');
startCam.addEventListener('click', function(){webcam(); return false;});