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

This commit is contained in:
Christoph Oberhofer
2015-01-18 11:56:34 +01:00
parent 72940990d3
commit 63993dfa8c
9 changed files with 60 additions and 70 deletions
+8 -9
View File
@@ -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);
}
+17 -17
View File
@@ -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);
}
});
}
}());
}
+1
View File
@@ -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 />
+6
View File
@@ -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
};
+1 -1
View File
@@ -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 : {
+8 -9
View File
@@ -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);
}
+1
View File
@@ -24,6 +24,7 @@ define(function(){
]
},
locator: {
halfSample: true,
useWorker: true,
showCanvas: false,
showPatches: false,
+8 -8
View File
@@ -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);
}
});
}
}());
}
+9 -25
View File
@@ -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);
}