Actualizacion con cambios de miguel

web/frontend/js/capture.js

-(function() {
+(function () {
     // The width and height of the captured photo. We will set the
     // width to the value defined here, but the height will be
     // calculated based on the aspect ratio of the input stream.
@@ -27,30 +27,30 @@
         var video_constraints = {mandatory: {
                 maxWidth: 320,
                 maxHeight: 240,
-        maxAspectRatio:4/3,
-        maxFrameRate:60
+                maxAspectRatio: 4 / 3,
+                maxFrameRate: 60
             },
-    optional: [ ]
-};
+            optional: []
+        };
         navigator.mediaDevices.getUserMedia({video: true, audio: false})
                 //navigator.mediaDevices.getUserMedia({video:video_constraints, audio: false})
-    .then(function(stream) {
+                .then(function (stream) {
                     video.srcObject = stream;
                     video.play();
                 })
-    .catch(function(err) {
+                .catch(function (err) {
                     console.log("An error occurred: " + err);
                 });
 
-    video.addEventListener('canplay', function(ev){
+        video.addEventListener('canplay', function (ev) {
             if (!streaming) {
-        height = video.videoHeight / (video.videoWidth/width);
+                height = video.videoHeight / (video.videoWidth / width);
 
                 // Firefox currently has a bug where the height can't be read from
                 // the video, so we will make assumptions if this happens.
 
                 if (isNaN(height)) {
-          height = width / (4/3);
+                    height = width / (4 / 3);
                 }
 
                 video.setAttribute('width', width);
@@ -61,7 +61,7 @@
             }
         }, false);
 
-    startbutton.addEventListener('click', function(ev){
+        startbutton.addEventListener('click', function (ev) {
             takepicture();
             ev.preventDefault();
             showForm();
@@ -91,10 +91,11 @@
 
     function takepicture() {
         var context = canvas.getContext('2d');
+        var calculatedRatio = calculateAspectRatioFit(width, height, 600, 400);
         if (width && height) {
-      canvas.width = width;
-      canvas.height = height;
-      context.drawImage(video, 0, 0, width, height / 4/3);
+            canvas.width = calculatedRatio.width;
+            canvas.height = calculatedRatio.height;
+            context.drawImage(video, 0, 0, canvas.width, canvas.height);
 
             var data = canvas.toDataURL('image/png');
             photo.setAttribute('src', data);
@@ -103,11 +104,28 @@
         }
     }
 
-  function showForm(){
+    /**
+     * Conserve aspect ratio of the original region. Useful when shrinking/enlarging
+     * images to fit into a certain area.
+     *
+     * @param {Number} srcWidth width of source image
+     * @param {Number} srcHeight height of source image
+     * @param {Number} maxWidth maximum available width
+     * @param {Number} maxHeight maximum available height
+     * @return {Object} { width, height }
+     */
+    function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
+
+        var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
+
+        return {width: srcWidth * ratio, height: srcHeight * ratio};
+    }
+
+    function showForm() {
         $("#containerFormulario").show();
     }
 
-  function hidePhotoButtons(){
+    function hidePhotoButtons() {
         $("#tomarFotoContainer").show();
         $("#subirFotoContainer").hide();
     }