From 63993dfa8c7932a2e6b2e4a16665cf7c9cf60533 Mon Sep 17 00:00:00 2001 From: Christoph Oberhofer Date: Sun, 18 Jan 2015 11:56:34 +0100 Subject: [PATCH] Web-Worker now working for live-streams. Passing config to worker --- dist/locator.js | 17 ++++++++--------- dist/quagga.js | 34 +++++++++++++++++----------------- example/live_w_locator.html | 1 + example/live_w_locator.js | 6 ++++++ example/static_images.js | 2 +- src/barcode_locator.js | 17 ++++++++--------- src/config.js | 1 + src/quagga.js | 16 ++++++++-------- src/worker_locator.js | 36 ++++++++++-------------------------- 9 files changed, 60 insertions(+), 70 deletions(-) diff --git a/dist/locator.js b/dist/locator.js index 53196b7..c823c80 100644 --- a/dist/locator.js +++ b/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), - y : 16 * ( _halfSample ? 1 : 2) + x : 16 * ( _config.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); } diff --git a/dist/quagga.js b/dist/quagga.js index d7df581..964aa47 100644 --- a/dist/quagga.js +++ b/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), - y : 16 * ( _halfSample ? 1 : 2) + x : 16 * ( _config.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) { - if (_config.inputStream.type == "LiveStream") { - window.requestAnimFrame(frame); - } - update(); + update(function() { + if (_config.inputStream.type == "LiveStream") { + window.requestAnimFrame(frame); + } + }); } }()); } diff --git a/example/live_w_locator.html b/example/live_w_locator.html index 10ef63f..9849539 100644 --- a/example/live_w_locator.html +++ b/example/live_w_locator.html @@ -27,6 +27,7 @@ It works best if your camera has built-in auto-focus.

+
diff --git a/example/live_w_locator.js b/example/live_w_locator.js index af46b6d..42b8551 100644 --- a/example/live_w_locator.js +++ b/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 }; diff --git a/example/static_images.js b/example/static_images.js index cda493c..7165986 100644 --- a/example/static_images.js +++ b/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 : { diff --git a/src/barcode_locator.js b/src/barcode_locator.js index 8f68ed7..3c8da8e 100644 --- a/src/barcode_locator.js +++ b/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), - y : 16 * ( _halfSample ? 1 : 2) + x : 16 * ( _config.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); } diff --git a/src/config.js b/src/config.js index 2b5f217..b535d66 100644 --- a/src/config.js +++ b/src/config.js @@ -24,6 +24,7 @@ define(function(){ ] }, locator: { + halfSample: true, useWorker: true, showCanvas: false, showPatches: false, diff --git a/src/quagga.js b/src/quagga.js index 6407df1..e404d74 100644 --- a/src/quagga.js +++ b/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) { - if (_config.inputStream.type == "LiveStream") { - window.requestAnimFrame(frame); - } - update(); + update(function() { + if (_config.inputStream.type == "LiveStream") { + window.requestAnimFrame(frame); + } + }); } }()); } diff --git a/src/worker_locator.js b/src/worker_locator.js index 1a6c60b..bb6b512 100644 --- a/src/worker_locator.js +++ b/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); -} \ No newline at end of file +}; \ No newline at end of file