movim_ynh/sources/app/widgets/Avatar/avatar.js

var Avatar = {
    file : function(files) {
        var f = files[0];
        if (!f.type.match(/image.*/)) {
          console.log("Not a picture !");
        } else {
            var reader = new FileReader();
            reader.readAsDataURL(f);

            reader.onload = function (ev) {
                var img = new Image();
                img.src = ev.target.result;
                Avatar.preview(img.src);
            };
        };
    },
    preview : function(src) {
        var canvas = document.createElement('canvas');
        width = height = canvas.width = canvas.height = 410;
        var image = new Image();
        image.src = src;
        image.onload = function(){
            if (image.width == image.height) {
                canvas.getContext("2d").drawImage(image, 0, 0, width, height);
            } else {
                minVal = parseInt(Math.min(image.width, image.height));
                if (image.width > image.height) {
                    canvas.getContext("2d").drawImage(image, (parseInt(image.width) - minVal) / 2, 0, minVal, minVal, 0, 0, width, height);
                } else {
                    canvas.getContext("2d").drawImage(image, 0, (parseInt(image.height) - minVal) / 2, minVal, minVal, 0, 0, width, height);
                }
            }

            var base64 = canvas.toDataURL('image/jpeg', 0.7);

            var preview = document.querySelector('form[name=avatarform] img');
            var input = document.querySelector('input[name="photobin"]');
            preview.src = base64;

            var bin = base64.split(",");
            input.value = bin[1];
        }
    }
}

MovimWebsocket.attach(function() {
    Avatar_ajaxGetForm();
});

function showVideo(){
	navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
	navigator.getUserMedia({video:true, audio:false}, successCallback, errorCallback);

    movim_toggle_class('#camdiv', 'active');
}
function successCallback(stream) {
  video = document.getElementById("runningcam");
  video.src = window.URL.createObjectURL(stream);
  localMediaStream = stream; // stream available to console

  document.getElementById("shoot").addEventListener('click', snapshot, false);
}

function errorCallback(error){
  console.log("navigator.getUserMedia error: ", error);
}


function snapshot() {
    if (localMediaStream) {
        canvas = document.querySelector("canvas");
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        ctx = canvas.getContext('2d');
        video = document.getElementById("runningcam");

        ctx.drawImage(video,0,0, canvas.width, canvas.height);
        // "image/webp" works in Chrome 18. In other browsers, this will fall back to image/png.
        var img = new Image();
        img.src = canvas.toDataURL('image/png');

        img.onload = function() {
            vCardImageResize(this);
        }
    }
}