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

Updated quagga and readme to the newest version

Browse Source
This commit is contained in:
Christoph Oberhofer
2015-01-22 20:42:59 +01:00
parent 208f6c943d
commit 8ed1bc3d39
5 changed files with 1656 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/file_input.js
+28 -2
View File
@@ -38,12 +38,38 @@ $(function() {
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) {
var $node = null, canvas = Quagga.canvas.dom.image;
var code = result.codeResult.code,
$node,
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.find("img").attr("src", canvas.toDataURL());
$node.find("h4.code").html(result);
$node.find("h4.code").html(code);
$("#result_strip ul.thumbnails").prepend($node);
});
});
examples/js/quagga.js
+1424 -129
View File
File diff suppressed because it is too large Load Diff
examples/live_w_locator.js
+32 -8
View File
@@ -8,11 +8,10 @@ $(function() {
},
decoder : {
readers : ["code_128_reader"]
},
readyFunc : function() {
App.attachListeners();
Quagga.start();
}
}, function() {
App.attachListeners();
Quagga.start();
});
},
attachListeners : function() {
@@ -29,16 +28,41 @@ $(function() {
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) {
if (App.lastResult !== result) {
App.lastResult = result;
var code = result.codeResult.code;
if (App.lastResult !== code) {
App.lastResult = code;
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.find("img").attr("src", canvas.toDataURL());
$node.find("h4.code").html(result);
$node.find("h4.code").html(code);
$("#result_strip ul.thumbnails").prepend($node);
}
});
});
examples/static_images.js
+31 -6
View File
@@ -9,11 +9,10 @@ $(function() {
},
decoder : {
readers : [App.config.reader + "_reader"]
},
readyFunc : function() {
App.attachListeners();
Quagga.start();
}
}, function() {
App.attachListeners();
Quagga.start();
});
},
config: {
@@ -42,12 +41,38 @@ $(function() {
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) {
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.find("img").attr("src", canvas.toDataURL());
$node.find("h4.code").html(result);
$node.find("h4.code").html(detectedCode);
$("#result_strip ul.thumbnails").prepend($node);
});
});
index.md
+141 -22
View File
@@ -7,12 +7,14 @@ showInMenu: true
quaggaJS
========
QuaggaJS is a barcode-scanner entirely written in JavaScript supporting real-time localization and decoding of
various types of barcodes such as __EAN__ and __CODE128__. The library is also capable of using `getUserMedia` to get direct
access to the user's camera stream. Although the code relies on heavy image-processing even recent smartphones are
- [Changelog](#changelog) (2015-01-21)
QuaggaJS is a barcode-scanner entirely written in JavaScript supporting real-time localization and decoding of
various types of barcodes such as __EAN__ and __CODE128__. The library is also capable of using `getUserMedia` to get direct
access to the user's camera stream. Although the code relies on heavy image-processing even recent smartphones are
capable of locating and decoding barcodes in real-time.
Try some [examples]({{ site.baseurl }}/examples) and check out the blog post
Try some [examples]({{ site.baseurl }}/examples) and check out the blog post
([How barcode-localization works in QuaggaJS](http://www.oberhofer.co/how-barcode-localization-works-in-quaggajs/))
if you want to dive deeper into this topic.
@@ -21,25 +23,25 @@ if you want to dive deeper into this topic.
## Yet another barcode library?
This is not yet another port of the great [zxing][zxing_github] library, but more of an extension to it.
This implementation features a barcode locator which is capable of finding a barcode-like pattern in an
image resulting in an estimated bounding box including the rotation. Simply speaking, this reader is invariant
This is not yet another port of the great [zxing][zxing_github] library, but more of an extension to it.
This implementation features a barcode locator which is capable of finding a barcode-like pattern in an
image resulting in an estimated bounding box including the rotation. Simply speaking, this reader is invariant
to scale and rotation, whereas other libraries require the barcode to be aligned with the viewport.
## Requirements
In order to take full advantage of quaggaJS, the browser needs to support the `getUserMedia` API which is
already implemented in recent versions of Firefox, Chrome and Opera. The API is also available on their
mobile counterparts installed on Android. Safari and IE do not allow the access to the camera yet, neither
In order to take full advantage of quaggaJS, the browser needs to support the `getUserMedia` API which is
already implemented in recent versions of Firefox, Chrome and Opera. The API is also available on their
mobile counterparts installed on Android. Safari and IE do not allow the access to the camera yet, neither
on desktop, nor on mobile. You can check [caniuse][caniuse_getusermedia] for updates.
In cases where real-time decoding is not needed, or the platform does not support `getUserMedia` QuaggaJS is
In cases where real-time decoding is not needed, or the platform does not support `getUserMedia` QuaggaJS is
also capable of decoding image-files using the File API or other URL sources.
## Installation
Just clone the repository and include `dist/quagga.js` in your project. You can also build the library yourself
Just clone the repository and include `dist/quagga.js` in your project. You can also build the library yourself
by simply typing:
```console
@@ -54,9 +56,22 @@ Basically the library exposes the following API:
### Quagga.init(config, callback)
This method initializes the library for a given configuration (see below) and a function which is called
when the loading-process has finished. The initialization process also requests for camera access if real-time
detection is configured.
This method initializes the library for a given configuration `config` (see below) and invokes the `callback` when Quagga is ready to start. The initialization process also requests for camera access if real-time detection is configured.
```javascript
Quagga.init({
inputStream : {
name : "Live",
type : "LiveStream"
},
decoder : {
readers : ["code_128_reader"]
}
}, function() {
console.log("Initialization finished. Ready to start");
Quagga.start();
});
```
### Quagga.start()
@@ -65,18 +80,91 @@ the images.
### Quagga.stop()
If the decoder is currently running, after calling `stop()` the decoder does not process any more images.
If the decoder is currently running, after calling `stop()` the decoder does not process any more images. Additionally, if a camera-stream was requested upon initialization, this operation also disconnects the camera.
### Quagga.onProcessed(callback)
This method registers a `callback(data)` function that is called for each frame after the processing is done. The `data` object contains detailed information about the success/failure of the operation. The output varies, depending whether the detection and/or decoding were successful or not.
### Quagga.onDetected(callback)
Registeres a callback function which is triggered whenever a barcode-pattern has been located and decoded
successfully. The callback function is called with the decoded data as the first parameter.
Registers a `callback(data)` function which is triggered whenever a barcode-pattern has been located and decoded
successfully. The passed `data` object contains information about the decoding process including the detected code which can be obtained by calling `data.codeResult.code`.
### Quagga.decodeSingle(config, callback)
In contrast to the calls described above, this method does not rely on `getUserMedia` and operates on a
single image instead. The provided callback is the same as in `onDetected` and contains the decoded data
as first parameter.
single image instead. The provided callback is the same as in `onDetected` and contains the result `data`
object.
## <a name="resultobject">The result object</a>
The callbacks passed into `onProcessed`, `onDetected` and `decodeSingle` receive a `data` object upon execution. The `data` object contains the following information. Depending on the success, some fields may be `undefined` or just empty.
```javascript
{
"codeResult": {
"code": "FANAVF1461710",
"start": 355,
"end": 26,
"codeset": 100,
"startInfo": {
"error": 1.0000000000000002,
"code": 104,
"start": 21,
"end": 41
},
"decodedCodes": [{
"code": 104,
"start": 21,
"end": 41
},
// stripped for brevity
{
"error": 0.8888888888888893,
"code": 106,
"start": 328,
"end": 350
}],
"endInfo": {
"error": 0.8888888888888893,
"code": 106,
"start": 328,
"end": 350
},
"direction": -1
},
"line": [{
"x": 25.97278706156836,
"y": 360.5616435369468
}, {
"x": 401.9220519377024,
"y": 70.87524989906444
}],
"angle": -0.6565217179979483,
"pattern": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, /* ... */ 1],
"box": [
[77.4074243622672, 410.9288668804402],
[0.050203235235130705, 310.53619724086366],
[360.15706727788256, 33.05711026051813],
[437.5142884049146, 133.44977990009465]
],
"boxes": [
[
[77.4074243622672, 410.9288668804402],
[0.050203235235130705, 310.53619724086366],
[360.15706727788256, 33.05711026051813],
[437.5142884049146, 133.44977990009465]
],
[
[248.90769330706507, 415.2041489551161],
[198.9532321622869, 352.62160512937635],
[339.546160777576, 240.3979259789976],
[389.5006219223542, 302.98046980473737]
]
]
}
```
## Config
@@ -91,11 +179,13 @@ The default `config` object is set as followed:
debug: false,
controls: false,
locate: true,
numOfWorkers: 4,
scriptName: 'quagga.js',
visual: {
show: true
},
decoder:{
drawBoundingBox: true,
drawBoundingBox: false,
showFrequency: false,
drawScanline: true,
showPattern: false,
@@ -104,6 +194,7 @@ The default `config` object is set as followed:
]
},
locator: {
halfSample: true,
showCanvas: false,
showPatches: false,
showFoundPatches: false,
@@ -122,7 +213,7 @@ The default `config` object is set as followed:
## Examples
The following example takes an image `src` as input and prints the result on the console.
The following example takes an image `src` as input and prints the result on the console.
The decoder is configured to detect _Code128_ barcodes and enables the locating-mechanism for more robust results.
```javascript
@@ -135,7 +226,35 @@ Quagga.decodeSingle({
});
```
## Tests
Unit Tests can be run with [Karma][karmaUrl] and written using [Mocha][mochaUrl], [Chai][chaiUrl] and [SinonJS][sinonUrl]. Coverage reports are automatically generated in the coverage/ folder.
```console
> npm install
> grunt test
```
## Image Debugging
In case you want to take a deeper dive into the inner workings of Quagga, get to know the _debugging_ capabilities of the current implementation. The various flags exposed through the `config` object give you the abilily to visualize almost every step in the processing. Because of the introduction of the web-workers, and their restriction not to have access to the DOM, the configuration must be explicitly set to `config.numOfWorkers = 0` in order to work.
## <a name="changelog">Changelog</a>
### 2015-01-21
- Features
- Added support for web-worker (using 4 workers as default, can be changed through `config.numOfWorkers`)
- Due to the way how web-workers are created, the name of the script file (`config.scriptName`) should be kept in sync with your actual filename
- Removed canvas-overlay for decoding (boxes & scanline) which can now be easily implemented using the existing API (see example)
- API Changes
In the course of implementing web-workers some breaking changes were introduced to the API.
- The `Quagga.init` function no longer receives the callback as part of the config but rather as a second argument: `Quagga.init(config, cb)`
- The callback to `Quagga.onDetected` now receives an object containing much more information in addition to the decoded code. (see [data](#resultobject))
[zxing_github]: https://github.com/zxing/zxing
[teaser_left]: {{ site.baseurl }}/assets/mobile-located.jpg
[teaser_right]: {{ site.baseurl }}/assets/mobile-detected.jpg
[caniuse_getusermedia]: http://caniuse.com/#feat=stream
[sinonUrl]: http://sinonjs.org/
[chaiUrl]: http://chaijs.com/
[mochaUrl]: https://github.com/mochajs/mocha
[karmaUrl]: http://karma-runner.github.io/