Configuring camera-resolution

README.md

@@ -167,7 +167,12 @@ The default `config` object is set as followed:
 ```javascript
 {
   inputStream: { name: "Live",
-       type: "LiveStream"
+       type: "LiveStream",
+       constraints: {
+         width: 640,
+         height: 480,
+         facing: "environment"
+       }
   },
   tracking: false,
   debug: false,

dist/quagga.js

@@ -6810,7 +6810,12 @@ define('html_utils',[], function() {
 define('config',[],function(){
   var config = {
       inputStream: { name: "Live",
-           type: "LiveStream"
+          type: "LiveStream",
+          constraints: {
+              width: 640,
+              height: 480,
+              facing: "environment" // or user
+          }
       },
       tracking: false,
       debug: false,
@@ -6943,7 +6948,7 @@ define('events',[],function() {
 /* jshint undef: true, unused: true, browser:true, devel: true */
 /* global define, MediaStreamTrack */
 
-define('camera_access',[],function() {
+define('camera_access',["html_utils"], function(HtmlUtils) {
     
     var streamRef;
     
@@ -6996,43 +7001,63 @@ define('camera_access',[],function() {
         });
     }
 
-    /**
-     * Requests the back-facing camera of the user. The callback is called
-     * whenever the stream is ready to be consumed, or if an error occures.
-     * @param {Object} video
-     * @param {Object} callback
-     */
-    function request(video, callback) {
+    function normalizeConstraints(config, cb) {
+        var constraints = {
+                audio: false,
+                video: true
+            },
+            videoConstraints = HtmlUtils.mergeObjects({
+                width: 640,
+                height: 480,
+                facing: "environment"
+            }, config);
+
         if ( typeof MediaStreamTrack.getSources !== 'undefined') {
             MediaStreamTrack.getSources(function(sourceInfos) {
                 var videoSourceId;
                 for (var i = 0; i != sourceInfos.length; ++i) {
                     var sourceInfo = sourceInfos[i];
-                    if (sourceInfo.kind == "video" && sourceInfo.facing == "environment") {
+                    if (sourceInfo.kind == "video" && sourceInfo.facing == videoConstraints.facing) {
                         videoSourceId = sourceInfo.id;
                     }
                 }
-                var constraints = {
-                    audio : false,
-                    video : {
-                        optional : [{
-                            sourceId : videoSourceId
-                        }]
-                    }
+                constraints.video = {
+                    mandatory: {
+                        minWidth: videoConstraints.width,
+                        minHeight: videoConstraints.height
+                    },
+                    optional: [{
+                        sourceId: videoSourceId
+                    }]
                 };
-                initCamera(constraints, video, callback);
+                return cb(constraints);
             });
         } else {
-            initCamera({
-                video : true,
-                audio : false
-            }, video, callback);
+            constraints.video = {
+                mediaSource: "camera",
+                width: { min: videoConstraints.width, max: videoConstraints.width },
+                height: { min: videoConstraints.height, max: videoConstraints.height },
+                require: ["width", "height"]
+            };
+            return cb(constraints);
         }
     }
 
+    /**
+     * Requests the back-facing camera of the user. The callback is called
+     * whenever the stream is ready to be consumed, or if an error occures.
+     * @param {Object} video
+     * @param {Object} callback
+     */
+    function request(video, videoConstraints, callback) {
+        normalizeConstraints(videoConstraints, function(constraints) {
+            initCamera(constraints, video, callback);
+        });
+    }
+
     return {
-        request : function(video, callback) {
-            request(video, callback);
+        request : function(video, constraints, callback) {
+            request(video, constraints, callback);
         },
         release : function() {
             var tracks = streamRef && streamRef.getVideoTracks();
@@ -8232,7 +8257,7 @@ function(Code128Reader, EANReader, InputStream, ImageWrapper, BarcodeLocator, Ba
                 $viewport.appendChild(video);
             }
             _inputStream = InputStream.createLiveStream(video);
-            CameraAccess.request(video, function(err) {
+            CameraAccess.request(video, _config.inputStream.constraints, function(err) {
                 if (!err) {
                     _inputStream.trigger("canrecord");
                 } else {

spec/camera_access.spec.js

@@ -52,7 +52,7 @@ define(['camera_access'], function(CameraAccess){
     
     describe('request', function() {
         it('should request the camera', function(done) {
-            CameraAccess.request(video, function() {
+            CameraAccess.request(video, {}, function() {
                 expect(navigator.getUserMedia.calledOnce).to.equal(true);
                 expect(video.src).to.deep.equal(stream);
                 done();
@@ -62,7 +62,7 @@ define(['camera_access'], function(CameraAccess){
     
     describe('release', function() {
         it('should release the camera', function(done) {
-            CameraAccess.request(video, function() {
+            CameraAccess.request(video, {}, function() {
                 expect(video.src).to.deep.equal(stream);
                 CameraAccess.release();
                 expect(video.src.getVideoTracks()).to.have.length(1);

src/camera_access.js

@@ -1,7 +1,7 @@
 /* jshint undef: true, unused: true, browser:true, devel: true */
 /* global define, MediaStreamTrack */
 
-define(function() {
+define(["html_utils"], function(HtmlUtils) {
     "use strict";
     var streamRef;
     
@@ -20,7 +20,7 @@ define(function() {
     }
 
     /**
-     * Tries to attach the camer-stream to a given video-element
+     * Tries to attach the camera-stream to a given video-element
      * and calls the callback function when the content is ready
      * @param {Object} constraints
      * @param {Object} video
@@ -55,42 +55,68 @@ define(function() {
     }
 
     /**
-     * Requests the back-facing camera of the user. The callback is called
-     * whenever the stream is ready to be consumed, or if an error occures.
-     * @param {Object} video
-     * @param {Object} callback
+     * Normalizes the incoming constraints to satisfy the current browser
+     * @param config
+     * @param cb Callback which is called whenever constraints are created
+     * @returns {*}
      */
-    function request(video, callback) {
+    function normalizeConstraints(config, cb) {
+        var constraints = {
+                audio: false,
+                video: true
+            },
+            videoConstraints = HtmlUtils.mergeObjects({
+                width: 640,
+                height: 480,
+                facing: "environment"
+            }, config);
+
         if ( typeof MediaStreamTrack.getSources !== 'undefined') {
             MediaStreamTrack.getSources(function(sourceInfos) {
                 var videoSourceId;
                 for (var i = 0; i != sourceInfos.length; ++i) {
                     var sourceInfo = sourceInfos[i];
-                    if (sourceInfo.kind == "video" && sourceInfo.facing == "environment") {
+                    if (sourceInfo.kind == "video" && sourceInfo.facing == videoConstraints.facing) {
                         videoSourceId = sourceInfo.id;
                     }
                 }
-                var constraints = {
-                    audio : false,
-                    video : {
-                        optional : [{
-                            sourceId : videoSourceId
-                        }]
-                    }
+                constraints.video = {
+                    mandatory: {
+                        minWidth: videoConstraints.width,
+                        minHeight: videoConstraints.height
+                    },
+                    optional: [{
+                        sourceId: videoSourceId
+                    }]
                 };
-                initCamera(constraints, video, callback);
+                return cb(constraints);
             });
         } else {
-            initCamera({
-                video : true,
-                audio : false
-            }, video, callback);
+            constraints.video = {
+                mediaSource: "camera",
+                width: { min: videoConstraints.width, max: videoConstraints.width },
+                height: { min: videoConstraints.height, max: videoConstraints.height },
+                require: ["width", "height"]
+            };
+            return cb(constraints);
         }
     }
 
+    /**
+     * Requests the back-facing camera of the user. The callback is called
+     * whenever the stream is ready to be consumed, or if an error occures.
+     * @param {Object} video
+     * @param {Object} callback
+     */
+    function request(video, videoConstraints, callback) {
+        normalizeConstraints(videoConstraints, function(constraints) {
+            initCamera(constraints, video, callback);
+        });
+    }
+
     return {
-        request : function(video, callback) {
-            request(video, callback);
+        request : function(video, constraints, callback) {
+            request(video, constraints, callback);
         },
         release : function() {
             var tracks = streamRef && streamRef.getVideoTracks();

src/config.js

@@ -5,7 +5,12 @@
 define(function(){
   var config = {
       inputStream: { name: "Live",
-           type: "LiveStream"
+          type: "LiveStream",
+          constraints: {
+              width: 640,
+              height: 480,
+              facing: "environment" // or user
+          }
       },
       tracking: false,
       debug: false,

src/quagga.js

@@ -63,7 +63,7 @@ function(Code128Reader, EANReader, InputStream, ImageWrapper, BarcodeLocator, Ba
                 $viewport.appendChild(video);
             }
             _inputStream = InputStream.createLiveStream(video);
-            CameraAccess.request(video, function(err) {
+            CameraAccess.request(video, _config.inputStream.constraints, function(err) {
                 if (!err) {
                     _inputStream.trigger("canrecord");
                 } else {

test-main.js

@@ -21,7 +21,8 @@ require.config({
     'glMatrixAddon': 'src/glMatrixAddon',
     'cluster': 'src/cluster',
     'camera_access': 'src/camera_access',
-    'events': 'src/events'
+    'events': 'src/events',
+    'html_utils': 'src/html_utils'
   },
   deps: allTestFiles,
   callback: window.__karma__.start