Web-Worker now working for live-streams. Passing config to worker

dist/locator.js

@@ -4528,7 +4528,6 @@ function(ImageWrapper, CVUtils, Rasterizer, Tracer, skeletonizer, ArrayHelper, I
         _patchLabelGrid,
         _imageToPatchGrid,
         _binaryImageWrapper,
-        _halfSample = true,
         _patchSize,
         _canvasContainer = {
             ctx : {
@@ -4549,7 +4548,7 @@ function(ImageWrapper, CVUtils, Rasterizer, Tracer, skeletonizer, ArrayHelper, I
     function initBuffers() {
         var skeletonImageData;
         
-        if (_halfSample) {
+        if (_config.halfSample) {
             _currentImageWrapper = new ImageWrapper({
                 x : _inputImageWrapper.size.x / 2 | 0,
                 y : _inputImageWrapper.size.y / 2 | 0
@@ -4559,8 +4558,8 @@ function(ImageWrapper, CVUtils, Rasterizer, Tracer, skeletonizer, ArrayHelper, I
         }
 
         _patchSize = {
-            x : 16 * ( _halfSample ? 1 : 2),
+            x : 16 * ( _config.halfSample ? 1 : 2),
-            y : 16 * ( _halfSample ? 1 : 2)
+            y : 16 * ( _config.halfSample ? 1 : 2)
         };
 
         _numPatches.x = _currentImageWrapper.size.x / _patchSize.x | 0;
@@ -4663,7 +4662,7 @@ function(ImageWrapper, CVUtils, Rasterizer, Tracer, skeletonizer, ArrayHelper, I
             ImageDebug.drawPath(box, {x: 0, y: 1}, _canvasContainer.ctx.binary, {color: '#ff0000', lineWidth: 2});
         }
 
-        scale = _halfSample ? 2 : 1;
+        scale = _config.halfSample ? 2 : 1;
         // reverse rotation;
         transMat = mat2.inverse(transMat);
         for ( j = 0; j < 4; j++) {
@@ -4998,7 +4997,7 @@ function(ImageWrapper, CVUtils, Rasterizer, Tracer, skeletonizer, ArrayHelper, I
         _worker = new Worker('../src/worker_locator.js');
         tmpData = _inputImageWrapper.data;
         _inputImageWrapper.data = null; // do not send the data along
-        _worker.postMessage({cmd: 'init', inputImageWrapper: _inputImageWrapper});
+        _worker.postMessage({cmd: 'init', inputImageWrapper: _inputImageWrapper, config: _config});
         _inputImageWrapper.data = tmpData;
         _worker.onmessage = function(e) {
             if (e.data.event === 'initialized') {
@@ -5012,9 +5011,9 @@ function(ImageWrapper, CVUtils, Rasterizer, Tracer, skeletonizer, ArrayHelper, I
     }
 
     return {
-        init : function(config, data, cb) {
+        init : function(inputImageWrapper, config, cb) {
             _config = config;
-            _inputImageWrapper = data.inputImageWrapper;
+            _inputImageWrapper = inputImageWrapper;
 
             // 1. check config for web-worker
             if (_config.useWorker) {
@@ -5034,7 +5033,7 @@ function(ImageWrapper, CVUtils, Rasterizer, Tracer, skeletonizer, ArrayHelper, I
                 _locatedCb = cb;
                 _worker.postMessage({cmd: 'locate', buffer: _inputImageWrapper.data}, [_inputImageWrapper.data.buffer]);
             } else {
-                if (_halfSample) {
+                if (_config.halfSample) {
                     CVUtils.halfSample(_inputImageWrapper, _currentImageWrapper);
                 }
 

dist/quagga.js

@@ -5709,7 +5709,6 @@ function(ImageWrapper, CVUtils, Rasterizer, Tracer, skeletonizer, ArrayHelper, I
         _patchLabelGrid,
         _imageToPatchGrid,
         _binaryImageWrapper,
-        _halfSample = true,
         _patchSize,
         _canvasContainer = {
             ctx : {
@@ -5730,7 +5729,7 @@ function(ImageWrapper, CVUtils, Rasterizer, Tracer, skeletonizer, ArrayHelper, I
     function initBuffers() {
         var skeletonImageData;
         
-        if (_halfSample) {
+        if (_config.halfSample) {
             _currentImageWrapper = new ImageWrapper({
                 x : _inputImageWrapper.size.x / 2 | 0,
                 y : _inputImageWrapper.size.y / 2 | 0
@@ -5740,8 +5739,8 @@ function(ImageWrapper, CVUtils, Rasterizer, Tracer, skeletonizer, ArrayHelper, I
         }
 
         _patchSize = {
-            x : 16 * ( _halfSample ? 1 : 2),
+            x : 16 * ( _config.halfSample ? 1 : 2),
-            y : 16 * ( _halfSample ? 1 : 2)
+            y : 16 * ( _config.halfSample ? 1 : 2)
         };
 
         _numPatches.x = _currentImageWrapper.size.x / _patchSize.x | 0;
@@ -5844,7 +5843,7 @@ function(ImageWrapper, CVUtils, Rasterizer, Tracer, skeletonizer, ArrayHelper, I
             ImageDebug.drawPath(box, {x: 0, y: 1}, _canvasContainer.ctx.binary, {color: '#ff0000', lineWidth: 2});
         }
 
-        scale = _halfSample ? 2 : 1;
+        scale = _config.halfSample ? 2 : 1;
         // reverse rotation;
         transMat = mat2.inverse(transMat);
         for ( j = 0; j < 4; j++) {
@@ -6179,7 +6178,7 @@ function(ImageWrapper, CVUtils, Rasterizer, Tracer, skeletonizer, ArrayHelper, I
         _worker = new Worker('../src/worker_locator.js');
         tmpData = _inputImageWrapper.data;
         _inputImageWrapper.data = null; // do not send the data along
-        _worker.postMessage({cmd: 'init', inputImageWrapper: _inputImageWrapper});
+        _worker.postMessage({cmd: 'init', inputImageWrapper: _inputImageWrapper, config: _config});
         _inputImageWrapper.data = tmpData;
         _worker.onmessage = function(e) {
             if (e.data.event === 'initialized') {
@@ -6193,9 +6192,9 @@ function(ImageWrapper, CVUtils, Rasterizer, Tracer, skeletonizer, ArrayHelper, I
     }
 
     return {
-        init : function(config, data, cb) {
+        init : function(inputImageWrapper, config, cb) {
             _config = config;
-            _inputImageWrapper = data.inputImageWrapper;
+            _inputImageWrapper = inputImageWrapper;
 
             // 1. check config for web-worker
             if (_config.useWorker) {
@@ -6215,7 +6214,7 @@ function(ImageWrapper, CVUtils, Rasterizer, Tracer, skeletonizer, ArrayHelper, I
                 _locatedCb = cb;
                 _worker.postMessage({cmd: 'locate', buffer: _inputImageWrapper.data}, [_inputImageWrapper.data.buffer]);
             } else {
-                if (_halfSample) {
+                if (_config.halfSample) {
                     CVUtils.halfSample(_inputImageWrapper, _currentImageWrapper);
                 }
 
@@ -6858,6 +6857,7 @@ define('config',[],function(){
         ]
       },
       locator: {
+        halfSample: true,
         useWorker: true,
         showCanvas: false,
         showPatches: false,
@@ -7210,7 +7210,7 @@ function(Code128Reader, EANReader, InputStream, ImageWrapper, BarcodeLocator, Ba
                 vec2.create([_inputStream.getWidth() - 20, _inputStream.getHeight() / 2 + 100]), 
                 vec2.create([_inputStream.getWidth() - 20, _inputStream.getHeight() / 2 - 100])
             ];
-        BarcodeLocator.init(_config.locator, {inputImageWrapper : _inputImageWrapper}, cb);
+        BarcodeLocator.init(_inputImageWrapper, _config.locator, cb);
     }
 
     function getBoundingBoxes(cb) {
@@ -7221,14 +7221,12 @@ function(Code128Reader, EANReader, InputStream, ImageWrapper, BarcodeLocator, Ba
         }
     }
 
-    function update() {
+    function update(cb) {
         var result;
 
         if (_framegrabber.grab()) {
             _canvasContainer.ctx.overlay.clearRect(0, 0, _inputImageWrapper.size.x, _inputImageWrapper.size.y);
-            console.time("getBoundingBoxes");
             getBoundingBoxes(function(boxes) {
-                console.timeEnd("getBoundingBoxes");
                 // attach data back to grabber
                 _framegrabber.attachData(_inputImageWrapper.data);
                 if (boxes) {
@@ -7237,6 +7235,7 @@ function(Code128Reader, EANReader, InputStream, ImageWrapper, BarcodeLocator, Ba
                         Events.publish("detected", result.codeResult.code);
                     }
                 }
+                return cb();
             });
         }
     }
@@ -7245,10 +7244,11 @@ function(Code128Reader, EANReader, InputStream, ImageWrapper, BarcodeLocator, Ba
         _stopped = false;
         ( function frame() {
             if (!_stopped) {
+                update(function() {
                     if (_config.inputStream.type == "LiveStream") {
                         window.requestAnimFrame(frame);
                     }
-                update();
+                });
             }
         }());
     }

example/live_w_locator.html

@@ -27,6 +27,7 @@
             It works best if your camera has built-in auto-focus.
             </p>
       <div class="controls">
+        <button class="stop">Stop</button>
         <fieldset class="reader-group">
             <label>Code128</label>
             <input type="radio" name="reader" value="code_128" checked />

example/live_w_locator.js

@@ -20,9 +20,15 @@ $(function() {
                 e.preventDefault();
                 Quagga.setReaders([e.target.value + "_reader"]);
             });
+
+            $(".controls").on("click", "button.stop", function(e) {
+                e.preventDefault();
+                Quagga.stop();
+            });
         },
         detachListeners : function() {
             $(".controls .reader-group").off("change", "input");
+            $(".controls").off("click", "button.stop");
         },
         lastResult : null
     };

example/static_images.js

@@ -4,7 +4,7 @@ $(function() {
             Quagga.init({
                 inputStream: { name: "Test",
                    type: "ImageStream",
-                   src: "/test/fixtures/" + App.config.reader + "/",
+                   src: "../test/fixtures/" + App.config.reader + "/",
                    length: App.config.length
                 },
                 decoder : {

src/barcode_locator.js

@@ -14,7 +14,6 @@ function(ImageWrapper, CVUtils, Rasterizer, Tracer, skeletonizer, ArrayHelper, I
         _patchLabelGrid,
         _imageToPatchGrid,
         _binaryImageWrapper,
-        _halfSample = true,
         _patchSize,
         _canvasContainer = {
             ctx : {
@@ -35,7 +34,7 @@ function(ImageWrapper, CVUtils, Rasterizer, Tracer, skeletonizer, ArrayHelper, I
     function initBuffers() {
         var skeletonImageData;
         
-        if (_halfSample) {
+        if (_config.halfSample) {
             _currentImageWrapper = new ImageWrapper({
                 x : _inputImageWrapper.size.x / 2 | 0,
                 y : _inputImageWrapper.size.y / 2 | 0
@@ -45,8 +44,8 @@ function(ImageWrapper, CVUtils, Rasterizer, Tracer, skeletonizer, ArrayHelper, I
         }
 
         _patchSize = {
-            x : 16 * ( _halfSample ? 1 : 2),
+            x : 16 * ( _config.halfSample ? 1 : 2),
-            y : 16 * ( _halfSample ? 1 : 2)
+            y : 16 * ( _config.halfSample ? 1 : 2)
         };
 
         _numPatches.x = _currentImageWrapper.size.x / _patchSize.x | 0;
@@ -149,7 +148,7 @@ function(ImageWrapper, CVUtils, Rasterizer, Tracer, skeletonizer, ArrayHelper, I
             ImageDebug.drawPath(box, {x: 0, y: 1}, _canvasContainer.ctx.binary, {color: '#ff0000', lineWidth: 2});
         }
 
-        scale = _halfSample ? 2 : 1;
+        scale = _config.halfSample ? 2 : 1;
         // reverse rotation;
         transMat = mat2.inverse(transMat);
         for ( j = 0; j < 4; j++) {
@@ -484,7 +483,7 @@ function(ImageWrapper, CVUtils, Rasterizer, Tracer, skeletonizer, ArrayHelper, I
         _worker = new Worker('../src/worker_locator.js');
         tmpData = _inputImageWrapper.data;
         _inputImageWrapper.data = null; // do not send the data along
-        _worker.postMessage({cmd: 'init', inputImageWrapper: _inputImageWrapper});
+        _worker.postMessage({cmd: 'init', inputImageWrapper: _inputImageWrapper, config: _config});
         _inputImageWrapper.data = tmpData;
         _worker.onmessage = function(e) {
             if (e.data.event === 'initialized') {
@@ -498,9 +497,9 @@ function(ImageWrapper, CVUtils, Rasterizer, Tracer, skeletonizer, ArrayHelper, I
     }
 
     return {
-        init : function(config, data, cb) {
+        init : function(inputImageWrapper, config, cb) {
             _config = config;
-            _inputImageWrapper = data.inputImageWrapper;
+            _inputImageWrapper = inputImageWrapper;
 
             // 1. check config for web-worker
             if (_config.useWorker) {
@@ -520,7 +519,7 @@ function(ImageWrapper, CVUtils, Rasterizer, Tracer, skeletonizer, ArrayHelper, I
                 _locatedCb = cb;
                 _worker.postMessage({cmd: 'locate', buffer: _inputImageWrapper.data}, [_inputImageWrapper.data.buffer]);
             } else {
-                if (_halfSample) {
+                if (_config.halfSample) {
                     CVUtils.halfSample(_inputImageWrapper, _currentImageWrapper);
                 }
 

src/config.js

@@ -24,6 +24,7 @@ define(function(){
         ]
       },
       locator: {
+        halfSample: true,
         useWorker: true,
         showCanvas: false,
         showPatches: false,

src/quagga.js

@@ -138,7 +138,7 @@ function(Code128Reader, EANReader, InputStream, ImageWrapper, BarcodeLocator, Ba
                 vec2.create([_inputStream.getWidth() - 20, _inputStream.getHeight() / 2 + 100]), 
                 vec2.create([_inputStream.getWidth() - 20, _inputStream.getHeight() / 2 - 100])
             ];
-        BarcodeLocator.init(_config.locator, {inputImageWrapper : _inputImageWrapper}, cb);
+        BarcodeLocator.init(_inputImageWrapper, _config.locator, cb);
     }
 
     function getBoundingBoxes(cb) {
@@ -149,14 +149,12 @@ function(Code128Reader, EANReader, InputStream, ImageWrapper, BarcodeLocator, Ba
         }
     }
 
-    function update() {
+    function update(cb) {
         var result;
 
         if (_framegrabber.grab()) {
             _canvasContainer.ctx.overlay.clearRect(0, 0, _inputImageWrapper.size.x, _inputImageWrapper.size.y);
-            console.time("getBoundingBoxes");
             getBoundingBoxes(function(boxes) {
-                console.timeEnd("getBoundingBoxes");
                 // attach data back to grabber
                 _framegrabber.attachData(_inputImageWrapper.data);
                 if (boxes) {
@@ -165,6 +163,7 @@ function(Code128Reader, EANReader, InputStream, ImageWrapper, BarcodeLocator, Ba
                         Events.publish("detected", result.codeResult.code);
                     }
                 }
+                return cb();
             });
         }
     }
@@ -173,10 +172,11 @@ function(Code128Reader, EANReader, InputStream, ImageWrapper, BarcodeLocator, Ba
         _stopped = false;
         ( function frame() {
             if (!_stopped) {
+                update(function() {
                     if (_config.inputStream.type == "LiveStream") {
                         window.requestAnimFrame(frame);
                     }
-                update();
+                });
             }
         }());
     }

src/worker_locator.js

@@ -2,38 +2,22 @@
 /* global importScripts, self, Locator */
 
 importScripts('../dist/locator.js');
-var inputImageWrapper = null;
+var inputImageWrapper,
+    config;
+
 self.onmessage = function(e) {
     if (e.data.cmd === 'init') {
         inputImageWrapper = e.data.inputImageWrapper;
-        init(function() {
+        config = e.data.config;
+
+        config.useWorker = false;
+        Locator.init(inputImageWrapper, config, function() {
             self.postMessage({'event': 'initialized'});
         });
     } else if (e.data.cmd === 'locate') {
-        locate(new Uint8Array(e.data.buffer), function(result) {
+        inputImageWrapper.data = new Uint8Array(e.data.buffer);
+        Locator.locate(function(result) {
             self.postMessage({'event': 'located', result: result, buffer : inputImageWrapper.data}, [inputImageWrapper.data.buffer]);
         });
     }
 };
-function init(cb) {
-    Locator.init({
-        showCanvas: false,
-        showPatches: false,
-        showFoundPatches: false,
-        showSkeleton: false,
-        showLabels: false,
-        showPatchLabels: false,
-        showRemainingPatchLabels: false,
-        boxFromPatches: {
-            showTransformed: false,
-            showTransformedBox: false,
-            showBB: false
-        }
-    }, {
-        inputImageWrapper : inputImageWrapper
-    }, cb);
-}
-function locate(buffer, cb) {
-    inputImageWrapper.data = buffer;
-    Locator.locate(cb);
-}