UnknownObject/quaggaJS
1
0
Fork 0
mirror of https://github.com/serratus/quaggaJS.git synced 2026-08-12 21:21:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

Outsourced drawing of scanline and bounding-box to the interface; Debug version can be enabled through setting nrOfWorkers = 0;

Browse Source
This commit is contained in:
Christoph Oberhofer
2015-01-19 22:58:16 +01:00
parent 2d5fa058d5
commit 9af9a0db7e
7 changed files with 179 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/quagga.js
Vendored
+67 -53
View File
@@ -6445,31 +6445,33 @@ define('barcode_decoder',["bresenham", "image_debug", 'code_128_reader', 'ean_re
initConfig(); initConfig();
function initCanvas() { function initCanvas() {
/* var $debug = document.querySelector("#debug.detection"); if (typeof document !== 'undefined') {
_canvas.dom.frequency = document.querySelector("canvas.frequency"); var $debug = document.querySelector("#debug.detection");
if (!_canvas.dom.frequency) { _canvas.dom.frequency = document.querySelector("canvas.frequency");
_canvas.dom.frequency = document.createElement("canvas"); if (!_canvas.dom.frequency) {
_canvas.dom.frequency.className = "frequency"; _canvas.dom.frequency = document.createElement("canvas");
if($debug) { _canvas.dom.frequency.className = "frequency";
$debug.appendChild(_canvas.dom.frequency); if($debug) {
$debug.appendChild(_canvas.dom.frequency);
}
}
_canvas.ctx.frequency = _canvas.dom.frequency.getContext("2d");
_canvas.dom.pattern = document.querySelector("canvas.patternBuffer");
if (!_canvas.dom.pattern) {
_canvas.dom.pattern = document.createElement("canvas");
_canvas.dom.pattern.className = "patternBuffer";
if($debug) {
$debug.appendChild(_canvas.dom.pattern);
}
}
_canvas.ctx.pattern = _canvas.dom.pattern.getContext("2d");
_canvas.dom.overlay = document.querySelector("canvas.drawingBuffer");
if (_canvas.dom.overlay) {
_canvas.ctx.overlay = _canvas.dom.overlay.getContext("2d");
} }
} }
_canvas.ctx.frequency = _canvas.dom.frequency.getContext("2d");
_canvas.dom.pattern = document.querySelector("canvas.patternBuffer");
if (!_canvas.dom.pattern) {
_canvas.dom.pattern = document.createElement("canvas");
_canvas.dom.pattern.className = "patternBuffer";
if($debug) {
$debug.appendChild(_canvas.dom.pattern);
}
}
_canvas.ctx.pattern = _canvas.dom.pattern.getContext("2d");
_canvas.dom.overlay = document.querySelector("canvas.drawingBuffer");
if (_canvas.dom.overlay) {
_canvas.ctx.overlay = _canvas.dom.overlay.getContext("2d");
} */
} }
function initReaders() { function initReaders() {
@@ -6481,22 +6483,24 @@ define('barcode_decoder',["bresenham", "image_debug", 'code_128_reader', 'ean_re
} }
function initConfig() { function initConfig() {
/* var i, if (typeof document !== 'undefined') {
vis = [{ var i,
node : _canvas.dom.frequency, vis = [{
prop : config.showFrequency node : _canvas.dom.frequency,
}, { prop : config.showFrequency
node : _canvas.dom.pattern, }, {
prop : config.showPattern node : _canvas.dom.pattern,
}]; prop : config.showPattern
}];
for (i = 0; i < vis.length; i++) { for (i = 0; i < vis.length; i++) {
if (vis[i].prop === true) { if (vis[i].prop === true) {
vis[i].node.style.display = "block"; vis[i].node.style.display = "block";
} else { } else {
vis[i].node.style.display = "none"; vis[i].node.style.display = "none";
}
} }
} */ }
} }
/** /**
@@ -6650,6 +6654,7 @@ define('barcode_decoder',["bresenham", "image_debug", 'code_128_reader', 'ean_re
for ( i = 0; i < boxes.length; i++) { for ( i = 0; i < boxes.length; i++) {
result = decodeFromBoundingBox(boxes[i]); result = decodeFromBoundingBox(boxes[i]);
if (result && result.codeResult) { if (result && result.codeResult) {
result.box = boxes[i];
return result; return result;
} }
} }
@@ -6811,7 +6816,7 @@ define('config',[],function(){
debug: false, debug: false,
controls: false, controls: false,
locate: true, locate: true,
numOfWorkers: 4, numOfWorkers: 0,
scriptName: 'quagga.js', scriptName: 'quagga.js',
visual: { visual: {
show: true show: true
@@ -6827,9 +6832,9 @@ define('config',[],function(){
}, },
locator: { locator: {
halfSample: true, halfSample: true,
showCanvas: false, showCanvas: true,
showPatches: false, showPatches: false,
showFoundPatches: false, showFoundPatches: true,
showSkeleton: false, showSkeleton: false,
showLabels: false, showLabels: false,
showPatchLabels: false, showPatchLabels: false,
@@ -6869,10 +6874,10 @@ define('events',[],function() {
function publishSubscription(subscription, data) { function publishSubscription(subscription, data) {
if (subscription.async) { if (subscription.async) {
setTimeout(function() { setTimeout(function() {
subscription.callback.call(null, data); subscription.callback(data);
}, 4); }, 4);
} else { } else {
subscription.callback.call(null, data); subscription.callback(data);
} }
} }
@@ -7010,6 +7015,10 @@ define('camera_access',[],function() {
var constraints = { var constraints = {
audio : false, audio : false,
video : { video : {
mandatory: {
minWidth: 1280,
minHeight: 720
},
optional : [{ optional : [{
sourceId : videoSourceId sourceId : videoSourceId
}] }]
@@ -7019,7 +7028,12 @@ define('camera_access',[],function() {
}); });
} else { } else {
initCamera({ initCamera({
video : true, video : {
mandatory: {
minWidth: 1280,
minHeight: 720
}
},
audio : false audio : false
}, video, callback); }, video, callback);
} }
@@ -8165,8 +8179,8 @@ define('camera_access',[],function() {
/* jshint undef: true, unused: true, browser:true, devel: true */ /* jshint undef: true, unused: true, browser:true, devel: true */
/* global define, vec2, importScripts */ /* global define, vec2, importScripts */
define('quagga',["code_128_reader", "ean_reader", "input_stream", "image_wrapper", "barcode_locator", "barcode_decoder", "frame_grabber", "html_utils", "config", "events", "camera_access", "async"], define('quagga',["code_128_reader", "ean_reader", "input_stream", "image_wrapper", "barcode_locator", "barcode_decoder", "frame_grabber", "html_utils", "config", "events", "camera_access", "async", "image_debug"],
function(Code128Reader, EANReader, InputStream, ImageWrapper, BarcodeLocator, BarcodeDecoder, FrameGrabber, HtmlUtils, _config, Events, CameraAccess, async) { function(Code128Reader, EANReader, InputStream, ImageWrapper, BarcodeLocator, BarcodeDecoder, FrameGrabber, HtmlUtils, _config, Events, CameraAccess, async, ImageDebug) {
var _inputStream, var _inputStream,
@@ -8185,7 +8199,7 @@ function(Code128Reader, EANReader, InputStream, ImageWrapper, BarcodeLocator, Ba
_inputImageWrapper, _inputImageWrapper,
_boxSize, _boxSize,
_decoder, _decoder,
_workerPool, _workerPool = [],
_onUIThread = true; _onUIThread = true;
function initializeData(imageWrapper) { function initializeData(imageWrapper) {
@@ -8250,9 +8264,6 @@ function(Code128Reader, EANReader, InputStream, ImageWrapper, BarcodeLocator, Ba
if (_config.numOfWorkers > 0) { if (_config.numOfWorkers > 0) {
initWorkers(function() { initWorkers(function() {
console.log("Workers created"); console.log("Workers created");
_workerPool.forEach(function(workerThread) {
console.log(workerThread.busy);
});
ready(cb); ready(cb);
}); });
} else { } else {
@@ -8333,9 +8344,11 @@ function(Code128Reader, EANReader, InputStream, ImageWrapper, BarcodeLocator, Ba
boxes = getBoundingBoxes(); boxes = getBoundingBoxes();
if (boxes) { if (boxes) {
result = _decoder.decodeFromBoundingBoxes(boxes); result = _decoder.decodeFromBoundingBoxes(boxes);
result = result || {};
result.boxes = boxes;
Events.publish("processed", result); Events.publish("processed", result);
if (result && result.codeResult) { if (result && result.codeResult) {
Events.publish("detected", result.codeResult.code); Events.publish("detected", result);
} }
} else { } else {
Events.publish("processed"); Events.publish("processed");
@@ -8360,7 +8373,6 @@ function(Code128Reader, EANReader, InputStream, ImageWrapper, BarcodeLocator, Ba
_framegrabber.attachData(_inputImageWrapper.data); _framegrabber.attachData(_inputImageWrapper.data);
} }
if (_framegrabber.grab()) { if (_framegrabber.grab()) {
_canvasContainer.ctx.overlay.clearRect(0, 0, _inputStream.getWidth(), _inputStream.getHeight());
if (availableWorker) { if (availableWorker) {
availableWorker.busy = true; availableWorker.busy = true;
availableWorker.worker.postMessage({ availableWorker.worker.postMessage({
@@ -8420,8 +8432,9 @@ function(Code128Reader, EANReader, InputStream, ImageWrapper, BarcodeLocator, Ba
} else if (e.data.event === 'processed') { } else if (e.data.event === 'processed') {
workerThread.imageData = new Uint8Array(e.data.imageData); workerThread.imageData = new Uint8Array(e.data.imageData);
workerThread.busy = false; workerThread.busy = false;
Events.publish("processed", e.data.result);
if (e.data.result && e.data.result.codeResult) { if (e.data.result && e.data.result.codeResult) {
Events.publish("detected", e.data.result.codeResult.code); Events.publish("detected", e.data.result);
} }
} }
}; };
@@ -8535,7 +8548,8 @@ function(Code128Reader, EANReader, InputStream, ImageWrapper, BarcodeLocator, Ba
EANReader : EANReader, EANReader : EANReader,
Code128Reader : Code128Reader Code128Reader : Code128Reader
}, },
ImageWrapper: ImageWrapper ImageWrapper: ImageWrapper,
ImageDebug: ImageDebug
}; };
}); });
example/live_w_locator.js
+29 -3
View File
@@ -34,14 +34,40 @@ $(function() {
App.init(); App.init();
Quagga.onProcessed(function(result) {
var drawingCtx = Quagga.canvas.ctx.overlay,
drawingCanvas = Quagga.canvas.dom.overlay;
if (result) {
if (result.boxes) {
drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
result.boxes.filter(function (box) {
return box !== result.box;
}).forEach(function (box) {
Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, drawingCtx, {color: "green", lineWidth: 2});
});
}
if (result.box) {
Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, drawingCtx, {color: "#00F", lineWidth: 2});
}
if (result.codeResult && result.codeResult.code) {
Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, drawingCtx, {color: 'red', lineWidth: 3});
}
}
});
Quagga.onDetected(function(result) { Quagga.onDetected(function(result) {
if (App.lastResult !== result) { var code = result.codeResult.code;
App.lastResult = result;
if (App.lastResult !== code) {
App.lastResult = code;
var $node = null, canvas = Quagga.canvas.dom.image; var $node = null, canvas = Quagga.canvas.dom.image;
$node = $('<li><div class="thumbnail"><div class="imgWrapper"><img /></div><div class="caption"><h4 class="code"></h4></div></div></li>'); $node = $('<li><div class="thumbnail"><div class="imgWrapper"><img /></div><div class="caption"><h4 class="code"></h4></div></div></li>');
$node.find("img").attr("src", canvas.toDataURL()); $node.find("img").attr("src", canvas.toDataURL());
$node.find("h4.code").html(result); $node.find("h4.code").html(code);
$("#result_strip ul.thumbnails").prepend($node); $("#result_strip ul.thumbnails").prepend($node);
} }
}); });
example/static_images.html
+1
View File
@@ -41,6 +41,7 @@
<ul class="thumbnails"></ul> <ul class="thumbnails"></ul>
</div> </div>
<div id="interactive" class="viewport"></div> <div id="interactive" class="viewport"></div>
<div id="debug"></div>
</section> </section>
<footer> <footer>
<p> <p>
example/static_images.js
+28 -2
View File
@@ -41,12 +41,38 @@ $(function() {
App.init(); App.init();
Quagga.onProcessed(function(result) {
var drawingCtx = Quagga.canvas.ctx.overlay,
drawingCanvas = Quagga.canvas.dom.overlay;
if (result) {
if (result.boxes) {
drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
result.boxes.filter(function (box) {
return box !== result.box;
}).forEach(function (box) {
Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, drawingCtx, {color: "green", lineWidth: 2});
});
}
if (result.box) {
Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, drawingCtx, {color: "#00F", lineWidth: 2});
}
if (result.codeResult && result.codeResult.code) {
Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, drawingCtx, {color: 'red', lineWidth: 3});
}
}
});
Quagga.onDetected(function(result) { Quagga.onDetected(function(result) {
var $node = null, canvas = Quagga.canvas.dom.image; var $node,
canvas = Quagga.canvas.dom.image,
detectedCode = result.codeResult.code;
$node = $('<li><div class="thumbnail"><div class="imgWrapper"><img /></div><div class="caption"><h4 class="code"></h4></div></div></li>'); $node = $('<li><div class="thumbnail"><div class="imgWrapper"><img /></div><div class="caption"><h4 class="code"></h4></div></div></li>');
$node.find("img").attr("src", canvas.toDataURL()); $node.find("img").attr("src", canvas.toDataURL());
$node.find("h4.code").html(result); $node.find("h4.code").html(detectedCode);
$("#result_strip ul.thumbnails").prepend($node); $("#result_strip ul.thumbnails").prepend($node);
}); });
}); });
src/barcode_decoder.js
+42 -37
View File
@@ -30,31 +30,33 @@ define(["bresenham", "image_debug", 'code_128_reader', 'ean_reader'], function(B
initConfig(); initConfig();
function initCanvas() { function initCanvas() {
/* var $debug = document.querySelector("#debug.detection"); if (typeof document !== 'undefined') {
_canvas.dom.frequency = document.querySelector("canvas.frequency"); var $debug = document.querySelector("#debug.detection");
if (!_canvas.dom.frequency) { _canvas.dom.frequency = document.querySelector("canvas.frequency");
_canvas.dom.frequency = document.createElement("canvas"); if (!_canvas.dom.frequency) {
_canvas.dom.frequency.className = "frequency"; _canvas.dom.frequency = document.createElement("canvas");
if($debug) { _canvas.dom.frequency.className = "frequency";
$debug.appendChild(_canvas.dom.frequency); if($debug) {
$debug.appendChild(_canvas.dom.frequency);
}
}
_canvas.ctx.frequency = _canvas.dom.frequency.getContext("2d");
_canvas.dom.pattern = document.querySelector("canvas.patternBuffer");
if (!_canvas.dom.pattern) {
_canvas.dom.pattern = document.createElement("canvas");
_canvas.dom.pattern.className = "patternBuffer";
if($debug) {
$debug.appendChild(_canvas.dom.pattern);
}
}
_canvas.ctx.pattern = _canvas.dom.pattern.getContext("2d");
_canvas.dom.overlay = document.querySelector("canvas.drawingBuffer");
if (_canvas.dom.overlay) {
_canvas.ctx.overlay = _canvas.dom.overlay.getContext("2d");
} }
} }
_canvas.ctx.frequency = _canvas.dom.frequency.getContext("2d");
_canvas.dom.pattern = document.querySelector("canvas.patternBuffer");
if (!_canvas.dom.pattern) {
_canvas.dom.pattern = document.createElement("canvas");
_canvas.dom.pattern.className = "patternBuffer";
if($debug) {
$debug.appendChild(_canvas.dom.pattern);
}
}
_canvas.ctx.pattern = _canvas.dom.pattern.getContext("2d");
_canvas.dom.overlay = document.querySelector("canvas.drawingBuffer");
if (_canvas.dom.overlay) {
_canvas.ctx.overlay = _canvas.dom.overlay.getContext("2d");
} */
} }
function initReaders() { function initReaders() {
@@ -66,22 +68,24 @@ define(["bresenham", "image_debug", 'code_128_reader', 'ean_reader'], function(B
} }
function initConfig() { function initConfig() {
/* var i, if (typeof document !== 'undefined') {
vis = [{ var i,
node : _canvas.dom.frequency, vis = [{
prop : config.showFrequency node : _canvas.dom.frequency,
}, { prop : config.showFrequency
node : _canvas.dom.pattern, }, {
prop : config.showPattern node : _canvas.dom.pattern,
}]; prop : config.showPattern
}];
for (i = 0; i < vis.length; i++) { for (i = 0; i < vis.length; i++) {
if (vis[i].prop === true) { if (vis[i].prop === true) {
vis[i].node.style.display = "block"; vis[i].node.style.display = "block";
} else { } else {
vis[i].node.style.display = "none"; vis[i].node.style.display = "none";
}
} }
} */ }
} }
/** /**
@@ -235,6 +239,7 @@ define(["bresenham", "image_debug", 'code_128_reader', 'ean_reader'], function(B
for ( i = 0; i < boxes.length; i++) { for ( i = 0; i < boxes.length; i++) {
result = decodeFromBoundingBox(boxes[i]); result = decodeFromBoundingBox(boxes[i]);
if (result && result.codeResult) { if (result && result.codeResult) {
result.box = boxes[i];
return result; return result;
} }
} }
src/events.js
+2 -2
View File
@@ -23,10 +23,10 @@ define(function() {
function publishSubscription(subscription, data) { function publishSubscription(subscription, data) {
if (subscription.async) { if (subscription.async) {
setTimeout(function() { setTimeout(function() {
subscription.callback.call(null, data); subscription.callback(data);
}, 4); }, 4);
} else { } else {
subscription.callback.call(null, data); subscription.callback(data);
} }
} }
src/quagga.js
+10 -10
View File
@@ -1,8 +1,8 @@
/* jshint undef: true, unused: true, browser:true, devel: true */ /* jshint undef: true, unused: true, browser:true, devel: true */
/* global define, vec2, importScripts */ /* global define, vec2, importScripts */
define(["code_128_reader", "ean_reader", "input_stream", "image_wrapper", "barcode_locator", "barcode_decoder", "frame_grabber", "html_utils", "config", "events", "camera_access", "async"], define(["code_128_reader", "ean_reader", "input_stream", "image_wrapper", "barcode_locator", "barcode_decoder", "frame_grabber", "html_utils", "config", "events", "camera_access", "async", "image_debug"],
function(Code128Reader, EANReader, InputStream, ImageWrapper, BarcodeLocator, BarcodeDecoder, FrameGrabber, HtmlUtils, _config, Events, CameraAccess, async) { function(Code128Reader, EANReader, InputStream, ImageWrapper, BarcodeLocator, BarcodeDecoder, FrameGrabber, HtmlUtils, _config, Events, CameraAccess, async, ImageDebug) {
"use strict"; "use strict";
var _inputStream, var _inputStream,
@@ -21,7 +21,7 @@ function(Code128Reader, EANReader, InputStream, ImageWrapper, BarcodeLocator, Ba
_inputImageWrapper, _inputImageWrapper,
_boxSize, _boxSize,
_decoder, _decoder,
_workerPool, _workerPool = [],
_onUIThread = true; _onUIThread = true;
function initializeData(imageWrapper) { function initializeData(imageWrapper) {
@@ -86,9 +86,6 @@ function(Code128Reader, EANReader, InputStream, ImageWrapper, BarcodeLocator, Ba
if (_config.numOfWorkers > 0) { if (_config.numOfWorkers > 0) {
initWorkers(function() { initWorkers(function() {
console.log("Workers created"); console.log("Workers created");
_workerPool.forEach(function(workerThread) {
console.log(workerThread.busy);
});
ready(cb); ready(cb);
}); });
} else { } else {
@@ -169,9 +166,11 @@ function(Code128Reader, EANReader, InputStream, ImageWrapper, BarcodeLocator, Ba
boxes = getBoundingBoxes(); boxes = getBoundingBoxes();
if (boxes) { if (boxes) {
result = _decoder.decodeFromBoundingBoxes(boxes); result = _decoder.decodeFromBoundingBoxes(boxes);
result = result || {};
result.boxes = boxes;
Events.publish("processed", result); Events.publish("processed", result);
if (result && result.codeResult) { if (result && result.codeResult) {
Events.publish("detected", result.codeResult.code); Events.publish("detected", result);
} }
} else { } else {
Events.publish("processed"); Events.publish("processed");
@@ -196,7 +195,6 @@ function(Code128Reader, EANReader, InputStream, ImageWrapper, BarcodeLocator, Ba
_framegrabber.attachData(_inputImageWrapper.data); _framegrabber.attachData(_inputImageWrapper.data);
} }
if (_framegrabber.grab()) { if (_framegrabber.grab()) {
_canvasContainer.ctx.overlay.clearRect(0, 0, _inputStream.getWidth(), _inputStream.getHeight());
if (availableWorker) { if (availableWorker) {
availableWorker.busy = true; availableWorker.busy = true;
availableWorker.worker.postMessage({ availableWorker.worker.postMessage({
@@ -256,8 +254,9 @@ function(Code128Reader, EANReader, InputStream, ImageWrapper, BarcodeLocator, Ba
} else if (e.data.event === 'processed') { } else if (e.data.event === 'processed') {
workerThread.imageData = new Uint8Array(e.data.imageData); workerThread.imageData = new Uint8Array(e.data.imageData);
workerThread.busy = false; workerThread.busy = false;
Events.publish("processed", e.data.result);
if (e.data.result && e.data.result.codeResult) { if (e.data.result && e.data.result.codeResult) {
Events.publish("detected", e.data.result.codeResult.code); Events.publish("detected", e.data.result);
} }
} }
}; };
@@ -371,6 +370,7 @@ function(Code128Reader, EANReader, InputStream, ImageWrapper, BarcodeLocator, Ba
EANReader : EANReader, EANReader : EANReader,
Code128Reader : Code128Reader Code128Reader : Code128Reader
}, },
ImageWrapper: ImageWrapper ImageWrapper: ImageWrapper,
ImageDebug: ImageDebug
}; };
}); });