greco / quaggaJS

An advanced barcode-scanner written in JavaScript

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool


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 and check out the blog post (How barcode-localization works in QuaggaJS) if you want to dive deeper into this topic.


Yet another barcode library?

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.


Just clone the repository and include dist/quagga.js in your project. You can also build the library yourself by simply typing:

> npm install
> grunt


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 (see below) which also includes a callback function (readyFunc) which is called when Quagga is ready to start. The initialization process also requests for camera access if real-time detection is configured.

  inputStream : {
    name : "Live",
    type : "LiveStream"
  decoder : {
    readers : ["code_128_reader"]
  readyFunc : function() {
    console.log("Initialization finished. Ready to 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.


Registers 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.

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.


The default config object is set as followed:

  inputStream: { name: "Live",
       type: "LiveStream"
  tracking: false,
  debug: false,
  controls: false,
  locate: true,
  visual: {
    show: true
    drawBoundingBox: true,
    showFrequency: false,
    drawScanline: true,
    showPattern: false,
    readers: [
  locator: {
    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.

  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){


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
ezoic increase your site revenue


An advanced barcode-scanner written in JavaScript

License:MIT License


Language:JavaScript 94.9%Language:CSS 4.9%Language:Ruby 0.2%