Merge pull request #131 from serratus/issue/128

Camera Facing Issue in Chrome >= 53

README.md

@@ -1,7 +1,7 @@
 quaggaJS
 ========
 
-- [Changelog](#changelog) (2016-08-15)
+- [Changelog](#changelog) (2016-10-03)
 - [Browser Support](#browser-support)
 - [Installing](#installing)
 - [Getting Started](#gettingstarted)
@@ -664,6 +664,10 @@ on the ``singleChannel`` flag in the configuration when using ``decodeSingle``.
 
 ## <a name="changelog">Changelog</a>
 
+### 2016-10-03
+- Fixes
+  - Fixed `facingMode` issue with Chrome >= 53 (see [#128](https://github.com/serratus/quaggaJS/issues/128))
+
 ### 2016-08-15
 - Features
   - Proper handling of EXIF orientation when using `Quagga.decodeSingle`

example/live_w_locator.js

@@ -97,9 +97,9 @@ $(function() {
                 constraints: function(value){
                     var values = value.split('x');
                     return {
-                        width: parseInt(values[0]),
+                        width: {min: parseInt(values[0])},
-                        height: parseInt(values[1])
+                        height: {min: parseInt(values[1])}
-                    }
+                    };
                 }
             },
             numOfWorkers: function(value) {
@@ -128,9 +128,10 @@ $(function() {
             inputStream: {
                 type : "LiveStream",
                 constraints: {
-                    width: 640,
+                    width: {min: 640},
-                    height: 480,
+                    height: {min: 480},
-                    facingMode: "environment"
+                    facingMode: "environment",
+                    aspectRatio: {min: 1, max: 2}
                 }
             },
             locator: {

karma-integration.conf.js

@@ -24,6 +24,7 @@ module.exports = function(config) {
             resolve: {
                 modules: [
                     path.resolve('./src/input/'),
+                    path.resolve('./src/common/'),
                     'node_modules'
                 ]
             },

karma.conf.js

@@ -29,6 +29,7 @@ module.exports = function(config) {
             resolve: {
                 modules: [
                     path.resolve('./src/input/'),
+                    path.resolve('./test/mocks/'),
                     'node_modules'
                 ]
             },

src/common/mediaDevices.js

@@ -0,0 +1,17 @@
+
+export function enumerateDevices() {
+    if (navigator.mediaDevices
+            && typeof navigator.mediaDevices.enumerateDevices === 'function') {
+        return navigator.mediaDevices.enumerateDevices();
+    }
+    return Promise.reject(new Error('enumerateDevices is not defined'));
+};
+
+export function getUserMedia(constraints) {
+    if (navigator.mediaDevices
+            && typeof navigator.mediaDevices.getUserMedia === 'function') {
+        return navigator.mediaDevices
+            .getUserMedia(constraints);
+    }
+    return Promise.reject(new Error('getUserMedia is not defined'));
+}

src/input/camera_access.js

@@ -1,4 +1,10 @@
-import {merge, pick} from 'lodash';
+import {omit, pick} from 'lodash';
+import {getUserMedia, enumerateDevices} from 'mediaDevices';
+
+const facingMatching = {
+    "user": /front/i,
+    "environment": /back/i
+};
 
 var streamRef;
 
@@ -32,10 +38,7 @@ function waitForVideo(video) {
  * @param {Object} video
  */
 function initCamera(video, constraints) {
-    if (navigator.mediaDevices
+    return getUserMedia(constraints)
-            && typeof navigator.mediaDevices.getUserMedia === 'function') {
-        return navigator.mediaDevices
-            .getUserMedia(constraints)
     .then((stream) => {
         return new Promise((resolve) => {
             streamRef = stream;
@@ -48,8 +51,6 @@ function initCamera(video, constraints) {
         });
     })
     .then(waitForVideo.bind(null, video));
-    }
-    return Promise.reject(new Error('getUserMedia is not defined'));
 }
 
 function deprecatedConstraints(videoConstraints) {
@@ -68,16 +69,50 @@ function deprecatedConstraints(videoConstraints) {
     return normalized;
 }
 
-function pickConstraints(videoConstraints) {
+function pickDevice(constraints) {
-    return {
+    const desiredFacing = constraints.video.facingMode,
+        facingMatch = facingMatching[desiredFacing];
+
+    if (!facingMatch) {
+        return Promise.resolve(constraints);
+    }
+    return enumerateDevices()
+    .then(devices => {
+        const selectedDeviceId = devices
+            .filter(device => device.kind === 'videoinput' && facingMatch.test(device.label))
+            .map(facingDevice => facingDevice.deviceId)[0];
+        if (selectedDeviceId) {
+            constraints = {
+                ...constraints,
+                video: {
+                    ...omit(constraints.video, ["facingMode"]),
+                    deviceId: selectedDeviceId,
+                }
+            };
+        }
+        return Promise.resolve(constraints);
+    });
+}
+
+export function pickConstraints(videoConstraints) {
+    const normalizedConstraints = {
         audio: false,
         video: deprecatedConstraints(videoConstraints)
     };
+
+    if (!normalizedConstraints.video.deviceId) {
+        if (typeof normalizedConstraints.video.facingMode === 'string'
+                && normalizedConstraints.video.facingMode.length > 0) {
+            return pickDevice(normalizedConstraints);
+        }
+    }
+    return Promise.resolve(normalizedConstraints);
 }
 
 export default {
     request: function(video, videoConstraints) {
-        return initCamera(video, pickConstraints(videoConstraints));
+        return pickConstraints(videoConstraints)
+            .then(initCamera.bind(null, video));
     },
     release: function() {
         var tracks = streamRef && streamRef.getVideoTracks();

test/mocks/mediaDevices.js

@@ -0,0 +1,36 @@
+
+let devices = [],
+    stream,
+    _constraints,
+    _supported = true;
+
+export function enumerateDevices() {
+    console.log("enumerateDevices!!!!");
+    return Promise.resolve(devices);
+};
+
+export function getUserMedia(constraints) {
+    console.log("getUserMedia!!!!");
+    _constraints = constraints;
+    if (_supported) {
+        return Promise.resolve(stream);
+    }
+    return Promise.reject(new Error("das"));
+}
+
+export function setDevices(newDevices) {
+    devices = [...newDevices];
+}
+
+export function setStream(newStream) {
+    stream = newStream;
+}
+
+export function getConstraints() {
+    return _constraints;
+}
+
+export function setSupported(supported) {
+    console.log("Supported: " + supported);
+    _supported = supported;
+}

test/spec/camera_access.spec.js

@@ -1,11 +1,14 @@
-import CameraAccess from '../../src/input/camera_access';
+import CameraAccess, {pickConstraints} from '../../src/input/camera_access';
+import {setDevices, setStream, getConstraints, setSupported} from 'mediaDevices';
 
 var originalURL,
     originalMediaStreamTrack,
     video,
-    stream;
+    stream,
+    devices = [];
 
-beforeEach(function() {
+describe("camera_access", () => {
+    beforeEach(function() {
         var tracks = [{
             stop: function() {}
         }];
@@ -24,6 +27,7 @@ beforeEach(function() {
                 return tracks;
             }
         };
+        setStream(stream);
         sinon.spy(tracks[0], "stop");
 
         video = {
@@ -39,28 +43,18 @@ beforeEach(function() {
             cb();
         });
         sinon.stub(video, "play");
-});
-
-afterEach(function() {
-    window.URL = originalURL;
-    window.MediaStreamTrack = originalMediaStreamTrack;
-});
-
-describe('success', function() {
-    beforeEach(function() {
-        sinon.stub(navigator.mediaDevices, "getUserMedia", function(constraints) {
-            return Promise.resolve(stream);
-        });
     });
 
     afterEach(function() {
-        navigator.mediaDevices.getUserMedia.restore();
+        window.URL = originalURL;
+        window.MediaStreamTrack = originalMediaStreamTrack;
     });
+
+    describe('success', function() {
         describe('request', function () {
             it('should request the camera', function (done) {
                 CameraAccess.request(video, {})
                 .then(function () {
-                expect(navigator.mediaDevices.getUserMedia.calledOnce).to.equal(true);
                     expect(video.srcObject).to.deep.equal(stream);
                     done();
                 })
@@ -75,16 +69,14 @@ describe('success', function() {
                     maxAspectRatio: 100
                 })
                 .then(function () {
-                const call = navigator.mediaDevices.getUserMedia.getCall(0),
+                    const constraints = getConstraints();
-                    args = call.args;
+                    expect(constraints.video.width).to.equal(320);
-                expect(call).to.be.defined;
+                    expect(constraints.video.height).to.equal(240);
-                expect(args[0].video.width).to.equal(320);
+                    expect(constraints.video.facingMode).to.equal("user");
-                expect(args[0].video.height).to.equal(240);
+                    expect(constraints.video.aspectRatio).to.equal(2);
-                expect(args[0].video.facingMode).to.equal("user");
+                    expect(constraints.video.facing).not.to.be.defined;
-                expect(args[0].video.aspectRatio).to.equal(2);
+                    expect(constraints.video.minAspectRatio).not.to.be.defined;
-                expect(args[0].video.facing).not.to.be.defined;
+                    expect(constraints.video.maxAspectRatio).not.to.be.defined;
-                expect(args[0].video.minAspectRatio).not.to.be.defined;
-                expect(args[0].video.maxAspectRatio).not.to.be.defined;
                     done();
                 })
             });
@@ -102,20 +94,18 @@ describe('success', function() {
                 });
             });
         });
-});
+    });
+
+    describe('failure', function() {
+        beforeEach(() => {
+            setSupported(false);
+        });
+
+        afterEach(() => {
+            setSupported(true);
+        });
 
-describe('failure', function() {
         describe("permission denied", function(){
-        beforeEach(function() {
-            sinon.stub(navigator.mediaDevices, "getUserMedia", function(constraints, success, failure) {
-                return Promise.reject(new Error());
-            });
-        });
-
-        afterEach(function() {
-            navigator.mediaDevices.getUserMedia.restore();
-        });
-
             it('should throw if getUserMedia not available', function(done) {
                 CameraAccess.request(video, {})
                 .catch(function (err) {
@@ -128,15 +118,6 @@ describe('failure', function() {
         describe("not available", function(){
             var originalGetUserMedia;
 
-        beforeEach(function() {
-            originalGetUserMedia = navigator.mediaDevices.getUserMedia;
-            navigator.mediaDevices.getUserMedia = undefined;
-        });
-
-        afterEach(function() {
-            navigator.mediaDevices.getUserMedia = originalGetUserMedia;
-        });
-
             it('should throw if getUserMedia not available', function(done) {
                 CameraAccess.request(video, {})
                 .catch((err) => {
@@ -145,4 +126,48 @@ describe('failure', function() {
                 });
             });
         });
+
+        describe("pickConstraints", () => {
+            it("should return the given constraints if no facingMode is defined", (done) => {
+                const givenConstraints = {width: 180};
+                return pickConstraints(givenConstraints).then((actualConstraints) => {
+                    expect(actualConstraints.video).to.deep.equal(givenConstraints);
+                    done();
+                })
+                .catch((err) => {
+                    expect(err).to.equal(null);
+                    console.log(err);
+                    done();
+                });
+            });
+
+            it("should return the given constraints if deviceId is defined", (done) => {
+                const givenConstraints = {width: 180, deviceId: "4343"};
+                return pickConstraints(givenConstraints).then((actualConstraints) => {
+                    expect(actualConstraints.video).to.deep.equal(givenConstraints);
+                    done();
+                })
+                .catch((err) => {
+                    expect(err).to.equal(null);
+                    console.log(err);
+                    done();
+                });
+            });
+
+            it("should set deviceId if facingMode is set to environment", (done) => {
+                setDevices([{deviceId: "front", kind: "videoinput", label: "front Facing"},
+                    {deviceId: "back", label: "back Facing", kind: "videoinput"}]);
+                const givenConstraints = {width: 180, facingMode: "environment"};
+                return pickConstraints(givenConstraints).then((actualConstraints) => {
+                    expect(actualConstraints.video).to.deep.equal({width: 180, deviceId: "back"});
+                    done();
+                })
+                .catch((err) => {
+                    console.log(err);
+                    expect(err).to.equal(null);
+                    done();
+                });
+            });
+        });
+    });
 });

test/spec/result_collector.spec.js

@@ -5,7 +5,9 @@ var canvasMock,
     imageSize,
     config;
 
-beforeEach(function() {
+
+describe("resultCollector", () => {
+    beforeEach(function() {
         imageSize = {x: 320, y: 240};
         config = {
             capture: true,
@@ -28,22 +30,22 @@ beforeEach(function() {
                 return canvasMock;
             }
         });
-});
+    });
 
-afterEach(function() {
+    afterEach(function() {
         document.createElement.restore();
-});
+    });
 
 
-describe('create', function () {
+    describe('create', function () {
         it("should return a new collector", function() {
             ResultCollector.create(config);
             expect(document.createElement.calledOnce).to.be.equal(true);
             expect(document.createElement.getCall(0).args[0]).to.equal("canvas");
         });
-});
+    });
 
-describe('addResult', function() {
+    describe('addResult', function() {
         beforeEach(function() {
             sinon.stub(ImageDebug, "drawImage", function() {});
         });
@@ -100,4 +102,5 @@ describe('addResult', function() {
             collector.addResult([], imageSize, {code: "3574660239843", format: "ean_13"});
             expect(collector.getResults()).to.have.length(1);
         });
-});
+    });
+})

webpack.config.js

@@ -17,6 +17,7 @@ module.exports = {
     resolve: {
         modules: [
             path.resolve('./src/input/'),
+            path.resolve('./src/common/'),
             'node_modules'
         ]
     },

webpack.node.config.js

@@ -6,6 +6,7 @@ module.exports = require('./webpack.config.js');
 module.exports.resolve = {
     modules: [
         path.resolve('./lib/'),
+        path.resolve('./src/common/'),
         'node_modules'
     ]
 };