fixed web-workers

example/live_w_locator.js

@@ -3,11 +3,11 @@ $(function() {
         init : function() {
             this.overlay = document.querySelector('#interactive canvas.drawing');
 
-            this.state.inputStream.constraints.zoom = {exact: 2};
             Quagga.fromCamera({
                 constraints: this.state.inputStream.constraints,
                 locator: this.state.locator,
                 decoder: this.state.decoder,
+                numOfWorkers: this.state.numOfWorkers,
             }).then(function(scanner) {
                 this.scanner = scanner;
                 this.scanner

src/input/PixelCapture.js

@@ -73,7 +73,7 @@ export function fromSource(source, {target = "#interactive.viewport"} = {}) {
     }
 
     return {
-        grabFrameData: function grabFrameData() {
+        grabFrameData: function grabFrameData({buffer, clipping}) {
             const {viewport, canvas: canvasSize} = source.getDimensions();
             const sx = viewport.x;
             const sy = viewport.y;
@@ -93,12 +93,12 @@ export function fromSource(source, {target = "#interactive.viewport"} = {}) {
                 ctx.drawImage(drawable, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
             }
             var imageData = ctx.getImageData(0, 0, $canvas.width, $canvas.height).data;
-            var buffer = nextAvailableBuffer();
+            var imageBuffer = buffer ? buffer : nextAvailableBuffer();
-            computeGray(imageData, buffer);
+            computeGray(imageData, imageBuffer);
             return Promise.resolve({
                 width: $canvas.width,
                 height: $canvas.height,
-                data: buffer,
+                data: imageBuffer,
             });
         },
         getSource: function() {
@@ -107,5 +107,9 @@ export function fromSource(source, {target = "#interactive.viewport"} = {}) {
         getCanvas: function() {
             return $canvas;
         },
+        getCaptureSize() {
+            return source.getDimensions().canvas;
+        },
+
     };
 }

src/scanner.js

@@ -35,53 +35,43 @@ function createScanner(pixelCapturer) {
         _config = {},
         _events = createEventedElement(),
         _locator;
-    const source = pixelCapturer.getSource();
+
+    const source = pixelCapturer ? pixelCapturer.getSource() : {};
+
+    function setup() {
+        // checkImageConstraints(_inputStream, _config.locator);
+        return adjustWorkerPool(_config.numOfWorkers)
+        .then(() => {
+            if (_config.numOfWorkers === 0) {
+                initializeData();
+            }
+        });
+    }
 
     function initializeData(imageWrapper) {
         initBuffers(imageWrapper);
         _decoder = BarcodeDecoder.create(_config.decoder, _inputImageWrapper);
     }
 
-
-
-    function canRecord(cb) {
-        // checkImageConstraints(_inputStream, _config.locator);
-        // initCanvas();
-        // _framegrabber = FrameGrabber.create(_inputStream, _canvasContainer.dom.image);
-
-        adjustWorkerPool(_config.numOfWorkers, function() {
-            if (_config.numOfWorkers === 0) {
-                initializeData();
-            }
-            ready(cb);
-        });
-    }
-
-    function ready(cb){
-        // _inputStream.play();
-        cb();
-    }
-
     function initBuffers(imageWrapper) {
-        // if (imageWrapper) {
+        if (imageWrapper) {
-        //     _inputImageWrapper = imageWrapper;
+            _inputImageWrapper = imageWrapper;
-        // } else {
+        } else {
-        const {canvas} = source.getDimensions();
+            const captureSize = pixelCapturer.getCaptureSize();
-        _inputImageWrapper = new ImageWrapper({
+            _inputImageWrapper = new ImageWrapper({
-            x: canvas.width,
+                x: captureSize.width,
-            y: canvas.height,
+                y: captureSize.height,
-        });
+            });
-        // }
+        }
-        //
+        if (ENV.development) {
-        // if (ENV.development) {
+            console.log(_inputImageWrapper.size);
-        //     console.log(_inputImageWrapper.size);
+        }
-        // }
+        _boxSize = [
-        // _boxSize = [
+            vec2.clone([0, 0]),
-        //     vec2.clone([0, 0]),
+            vec2.clone([0, _inputImageWrapper.size.y]),
-        //     vec2.clone([0, _inputImageWrapper.size.y]),
+            vec2.clone([_inputImageWrapper.size.x, _inputImageWrapper.size.y]),
-        //     vec2.clone([_inputImageWrapper.size.x, _inputImageWrapper.size.y]),
+            vec2.clone([_inputImageWrapper.size.x, 0])
-        //     vec2.clone([_inputImageWrapper.size.x, 0])
+        ];
-        // ];
         _locator = createLocator(_inputImageWrapper, _config.locator);
     }
 
@@ -201,19 +191,14 @@ function createScanner(pixelCapturer) {
                 availableWorker = _workerPool.filter(function(workerThread) {
                     return !workerThread.busy;
                 })[0];
-                if (availableWorker) {
+                if (!availableWorker) {
-                    //_framegrabber.attachData(availableWorker.imageData);
+                    return Promise.resolve();
-                } else {
-                    return; // all workers are busy
                 }
-            } else {
-                //_framegrabber.attachData(_inputImageWrapper.data);
             }
-
+            const buffer = availableWorker ? availableWorker.imageData : _inputImageWrapper.data;
-            return pixelCapturer.grabFrameData()
+            return pixelCapturer.grabFrameData({buffer})
             .then((bitmap) => {
                 if (bitmap) {
-                    _inputImageWrapper.data = bitmap.data;
                     if (availableWorker) {
                         availableWorker.busy = true;
                         availableWorker.worker.postMessage({
@@ -230,7 +215,7 @@ function createScanner(pixelCapturer) {
             });
         }
 
-        return locateAndDecode();
+        return Promise.resolve(locateAndDecode());
     }
 
     function startContinuousUpdate() {
@@ -262,14 +247,14 @@ function createScanner(pixelCapturer) {
     }
 
     function initWorker(cb) {
-        var blobURL,
+        const captureSize = pixelCapturer.getCaptureSize();
-            workerThread = {
+        const workerThread = {
-                worker: undefined,
+            worker: undefined,
-                imageData: new Uint8Array(_inputStream.getWidth() * _inputStream.getHeight()),
+            imageData: new Uint8Array(captureSize.width * captureSize.height),
-                busy: true
+            busy: true
-            };
+        };
 
-        blobURL = generateWorkerBlob();
+        const blobURL = generateWorkerBlob();
         workerThread.worker = new Worker(blobURL);
 
         workerThread.worker.onmessage = function(e) {
@@ -294,7 +279,7 @@ function createScanner(pixelCapturer) {
 
         workerThread.worker.postMessage({
             cmd: 'init',
-            size: {x: _inputStream.getWidth(), y: _inputStream.getHeight()},
+            size: {x: captureSize.width, y: captureSize.height},
             imageData: workerThread.imageData,
             config: configForWorker(_config)
         }, [workerThread.imageData.buffer]);
@@ -375,33 +360,35 @@ function createScanner(pixelCapturer) {
         }
     }
 
-    function adjustWorkerPool(capacity, cb) {
+    function adjustWorkerPool(capacity) {
-        const increaseBy = capacity - _workerPool.length;
+        return new Promise((resolve) => {
-        if (increaseBy === 0) {
+            const increaseBy = capacity - _workerPool.length;
-            return cb && cb();
+            if (increaseBy === 0) {
-        }
+                return resolve();
-        if (increaseBy < 0) {
-            const workersToTerminate = _workerPool.slice(increaseBy);
-            workersToTerminate.forEach(function(workerThread) {
-                workerThread.worker.terminate();
-                if (ENV.development) {
-                    console.log("Worker terminated!");
-                }
-            });
-            _workerPool = _workerPool.slice(0, increaseBy);
-            return cb && cb();
-        } else {
-            for (var i = 0; i < increaseBy; i++) {
-                initWorker(workerInitialized);
             }
+            if (increaseBy < 0) {
+                const workersToTerminate = _workerPool.slice(increaseBy);
+                workersToTerminate.forEach(function(workerThread) {
+                    workerThread.worker.terminate();
+                    if (ENV.development) {
+                        console.log("Worker terminated!");
+                    }
+                });
+                _workerPool = _workerPool.slice(0, increaseBy);
+                return resolve();
+            } else {
+                for (var i = 0; i < increaseBy; i++) {
+                    initWorker(workerInitialized);
+                }
 
-            function workerInitialized(workerThread) {
+                function workerInitialized(workerThread) {
-                _workerPool.push(workerThread);
+                    _workerPool.push(workerThread);
-                if (_workerPool.length >= capacity){
+                    if (_workerPool.length >= capacity){
-                    cb && cb();
+                        resolve();
+                    }
                 }
             }
-        }
+        });
     }
 
     return {
@@ -413,7 +400,7 @@ function createScanner(pixelCapturer) {
                 initializeData(imageWrapper);
                 return cb();
             } else {
-                canRecord(cb);
+                return setup().then(cb);
             }
         },
         start: function() {