QuaggaJS is a barcode-scanner entirely written in JavaScript supporting real-
time localization and decoding of various types of barcodes such as EAN,
CODE 128, CODE 39, EAN 8, UPC-A, UPC-C and CODABAR.
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 and check out the blog post (How barcode-localization works in QuaggaJS) if you want to dive deeper into this topic.
This is not yet another port of the great zxing 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.
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
for updates.
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.
You can simply include dist/quagga.min.js in your project and you are ready
to go.
If you want to keep your project modular, you can also install QuaggaJS via npm:
> npm install quagga
And then import it as dependency in your project:
var quagga = require('quagga');
For starters, have a look at the examples to get an idea where to go from here.
You can build the library yourself by simply cloning the repo and typing:
> npm install
> grunt dist
This grunt task builds a non optimized version quagga.js and a minified
version quagga.min.js and places both files in the dist folder.
You can check out the examples to get an idea of how to use QuaggaJS. Basically the library exposes the following API:
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.
Quagga.init({
inputStream : {
name : "Live",
type : "LiveStream"
},
decoder : {
readers : ["code_128_reader"]
}
}, function() {
console.log("Initialization finished. Ready to start");
Quagga.start();
});
When the library is initialized, the start() method starts the video-stream
and begins locating and decoding the 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.
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.
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.
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 result data object.
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.
{
"codeResult": {
"code": "FANAVF1461710", // the decoded code as a string
"format": "code_128", // or code_39, codabar, ean_13, ean_8, upc_a, upc_e
"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]
]
]
}
The default config object is set as followed:
{
inputStream: { name: "Live",
type: "LiveStream",
constraints: {
width: 640,
height: 480,
facing: "environment"
},
area: { // defines rectangle of the detection/localization area
top: "0%", // top offset
right: "0%", // right offset
left: "0%", // left offset
bottom: "0%" // bottom offset
}
},
tracking: false,
debug: false,
controls: false,
locate: true,
numOfWorkers: 4,
visual: {
show: true
},
decoder:{
drawBoundingBox: false,
showFrequency: false,
drawScanline: true,
showPattern: false,
readers: [
'code_128_reader'
]
},
locator: {
halfSample: true,
patchSize: "medium", // x-small, small, medium, large, x-large
showCanvas: false,
showPatches: false,
showFoundPatches: false,
showSkeleton: false,
showLabels: false,
showPatchLabels: false,
showRemainingPatchLabels: false,
boxFromPatches: {
showTransformed: false,
showTransformedBox: false,
showBB: false
}
}
}
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.
Quagga.decodeSingle({
readers: ['code_128_reader'],
locate: true, // try to locate the barcode in the image
src: '/test/fixtures/code_128/image-001.jpg' // or 'data:image/jpg;base64,' + data
}, function(result){
console.log(result);
});
Unit Tests can be run with Karma and written using Mocha, Chai and SinonJS. Coverage reports are automatically generated in the coverage/ folder.
> npm install
> grunt test
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.
format property to codeResult (in result)Code39Reader (trailing whitespace was missing)area propertyQuagga.stop()patchSize for better adjustment to small/medium/large
barcodesconfig.numOfWorkers)config.scriptName) should be kept in sync with your actual filenameQuagga.init function no longer receives the callback as part of the
config but rather as a second argument: Quagga.init(config, cb)Quagga.onDetected now receives an object containing
much more information in addition to the decoded code.(see
data)Quagga.onProcessed(callback) which provides a way to get information
for each image processed. The callback receives the same data object as
Quagga.onDetected does. Depending on the success of the process the data
object might not contain any resultCode and/or box properties.FAQs
An advanced barcode-scanner written in JavaScript
The npm package quagga receives a total of 18,566 weekly downloads. As such, quagga popularity was classified as popular.
We found that quagga demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.