test.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>



<script> /*
 https://davidwalsh.name/browser-camera
 https://stackoverflow.com/questions/18483160/which-camera-will-open-getusermedia-api-in-mobile-device-front-or-rear
 https://codeforgeek.com/2014/11/file-uploads-using-node-js/




 */

'use strict';


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

function gotSources(sourceInfos) {
    for (var i = 0; i !== sourceInfos.length; ++i) {
        var sourceInfo = sourceInfos[i];
        var option = document.createElement('option');
        option.value = sourceInfo.id;
        if (sourceInfo.kind === 'audio') {

        } else if (sourceInfo.kind === 'video') {
            option.text = sourceInfo.label || 'camera ' + (videoSelect.length + 1);
            videoSelect.appendChild(option);
        } else {
            console.log('Some other kind of source: ', sourceInfo);
        }
    }
}





function enableCamera(vid, canvas, takeButton, redoButton, source) {
    if (typeof MediaStreamTrack === 'undefined' ||
            typeof MediaStreamTrack.getSources === 'undefined') {
//        alert('Your browser doesnt support using the camera :( Try uploading or use Chrome instead');
    } else {
        MediaStreamTrack.getSources(gotSources);
    }

    var videoSelect = document.getElementById('videoSource');

    if (source >= videoSelect.length){
        source = videoSelect.length - 1;
    }
    videoSelect.selectedIndex = source;
    var videoSource = videoSelect.value;
    var constraints = {
        video: {
            optional: [{
                sourceId: videoSource
            }]
        }
    };

    function successCallback(stream) {
        window.stream = stream; // make stream available to console
        vid.src = window.URL.createObjectURL(stream);
        vid.play();
    }

    function errorCallback(error) {
        console.log('navigator.getUserMedia error: ', error);
//        alert('Something went wrong with the camera :( Try uploading or use Chrome instead');
    }

    function disableCamera() {
        if (window.stream) {
            vid.src = null;
            window.stream.getTracks().forEach(function (track) {
                track.stop();
            });
            window.stream = null;
        }
    }

    navigator.getUserMedia(constraints, successCallback, errorCallback);

    takeButton.addEventListener("click", function () {
        var context = canvas.getContext("2d");
        context.drawImage(vid, 0, 0, canvasWidth, canvasHeight);
        disableCamera();
    });

    redoButton.addEventListener("click", function(){
        navigator.getUserMedia(constraints, successCallback, errorCallback);
    });
}


</script>





<select class="hidden" style="display: none" id="videoSource"></select>


<video id="video1" width="800" height="600" muted autoplay></video>
<canvas id="canvas1" width="800" height="600"></canvas>
<a id="button" download="file.png">Download</a>
<button id="takeButton1">Take photo</button>
<button id="redoButton1">Retake Photo</button>

<button id="uploadButton1">Upload to server</button>
<input type="file" id="uploadImage1" name="imageLoader"/>
<script>
    var canvasWidth = 800;
    var canvasHeight = 600;

    enableCamera(document.getElementById("video1"),
            document.getElementById("canvas1"),
            document.getElementById("takeButton1"),
            document.getElementById("redoButton1"),
            0);


    var imageLoader = document.getElementById('uploadImage1');
    imageLoader.addEventListener('change', handleImageUpload, false);


    function handleImageUpload() {
        var reader = new FileReader();
        reader.onload = function (event) {
            var img = new Image();
            img.onload = function () {
                var widthScaleFactor = canvas.width / img.width;
                var heightScaleFactor = canvas.height / img.height;
                var scaleFactor = widthScaleFactor > heightScaleFactor ? widthScaleFactor : heightScaleFactor;
                var imgWidth = img.width * scaleFactor;
                var imgHeight = img.height * scaleFactor;
                var widthOffset = (imgWidth - canvas.width) / 2;
                var heightOffset = (imgHeight - canvas.height) / 2;

                context.drawImage(img, -widthOffset, -heightOffset, imgWidth, imgHeight);
            };
            img.src = event.target.result;
        };
        reader.readAsDataURL(e.target.files[0]);
    }


    var canvas = document.getElementById("canvas1");

    $(document).ready(function () {
        $('#uploadButton1').click(function () {
            $.ajax({
                type: "POST",
                contentType: "application/json",
                dataType: "json",
                url: "/savePhoto",
                data: JSON.stringify({image: canvas.toDataURL("image/png")}),
                success: function (resp) {
//                    alert(resp);
                }
            });
        })
    })
</script>