Support for QR code

[g-p-g]

Are there any plans to support recognizing QR codes?

[serratus]

QR codes are definitely on my list, but the entire localization process is built upon "bar"-codes. This makes it quite hard to add support to QR codes. But there is an already work in progress implementation of the zxingjs library which supports QR-codes. But I haven't tried it yet.

[gabrielfurini]

@serratus Are you still working on implementation of this feature?

[serratus]

Unfortunately this feature costs a lot of time I currently don't have. Sorry, I just don't want to promise anything.

[maxshuty]

@gabrielfurini Probably a little late...

Anyway I recently had to do an implementation of QuaggaJS and needed QR Code scanning functionality as well. What I did was add the ZXing library to my solution, which reads QR Codes (but obviously not at all of the angles like QuaggaJS will). In the JavaScript I'm just checking if Quagga detects a barcode, and if not then go do an AJAX call and have ZXing do a lookup. It's not exactly the ideal solution, but works just fine.

[gabrielfurini]

It's never too late, @maxshuty! Thanks for sharing your experience and how you dealt with the problem. That's the spirit of open-source. Regards

[rugk]

@maxshuty And which QR code scanner do you use? Aka which JS-port of the ZXing library?

[maxshuty]

@rugk I used QuaggaJS and a port of ZXing for .NET

[brianwong3]

Might be a bit late, but just thought of contributing on my approach to this issue. I went through the codes and noticed that the @serratus had catered to allow for the codes to be extended with the concept of readers.

I created a new reader just for qr codes and opted to use a port of the jsqrcode since the original version is no longer maintained. qr_code_reader.txt

You will need to do 3 small changes to the existing libraries though. 1) Add your new reader to the READERS variable in barcode_decoder.js .

2) In barcode_decoder.js, you need to overload decodePattern function in tryDecode to pass in an extra parameter, the inputImageWrapper variable. result = _barcodeReaders[i].decodePattern(barcodeLine.line, inputImageWrapper);

3) In the jsqrcode library, the library grayscales the image passed in and you will need to remove that portion of code since ( I suspect that quagga already grayscales the image ) grayscaling a grayscaled image is a bad idea.

Note: I have only done some light testing so if it breaks for you, do inform me.

[mikemand]

@brianwong3 Could you tell us how you disabled grayscaling in jsqrcode? I found the spot that does the grayscaling (node_modules/qrcode-reader/src/qrcode.js:116), but I am unsure what I need to remove...

[brianwong3]

@mikemand , you can just change var image = this.grayScaleToBitmap(this.grayscale(imageData)); to var image = this.grayScaleToBitmap(imageData);

[mikemand]

@brianwong3 Thank you!

[kaburkett]

@brianwong3 seems like a fix for this issue... if you added in the project and did a PR he would prob merge it

[brianwong3]

@kaburkett its not really an fix though especially since quagga was built for reading 1D barcodes. the fix is really just an extension of @serratus code structure.

[jerodfritz]

@brianwong3 Did you have to tweak the locator to locate the QR codes. I'm finding it won't recognize the full patch?

[brianwong3]

@centogram, I didnt have to tweak the locator, but then again, my users are trained operators so it doesnt affect my project.

[rinukkusu]

I fixed that QrCodeReader module @brianwong3 provided:

import QrCode from '../../../jsqrcode/src/qrcode';

var qr = new QrCode();

var properties = {
    FORMAT: {value: "qr_code", writeable: false}
};

QrCodeReader.prototype = Object.create(null, properties);
QrCodeReader.prototype.constructor = QrCodeReader;

function QrCodeReader(config, supplements) {
    this._row = [];
    this.config = config || {};
    this.supplements = supplements;
    return this;
}

QrCodeReader.prototype.decodePattern  = function(pattern, inputImageWrapper) {   
    var result = qr.decode( { width: inputImageWrapper.size.x, height: inputImageWrapper.size.y, data: inputImageWrapper.data } );
    if(result == null ) {
        return null;
    }
    return { code: result.result };
};

export default QrCodeReader;

Also you need to edit the qrcode.js on line 63 and return the decoded data:

  if (src != undefined && src.width != undefined) {
    /* decode from canvas canvas.context.getImageData */
    this.width = src.width;
    this.height = src.height;
    this.imagedata = {"data": data || src.data};
    this.imagedata.width = src.width;
    this.imagedata.height = src.height;

    return decode(); // <-- return it here
  } else {

And check on line 146 if the decoded string is not null or empty:

  var end = new Date().getTime();
  var time = end - start;
  if (this.debug) {
    console.log('QR Code processing time (ms): ' + time);
  }

  // check string here
  if (str == null || str.length == 0) {
    return null;
  }

  return {result: str, points: qRCodeMatrix.points};
};

Good luck 😸

[cgonzalvo]

Might be a bit late, but just thought of contributing on my approach to this issue. I went through the codes and noticed that the @serratus had catered to allow for the codes to be extended with the concept of readers.

I created a new reader just for qr codes and opted to use a port of the jsqrcode since the original version is no longer maintained. qr_code_reader.txt

You will need to do 3 small changes to the existing libraries though.

1. Add your new reader to the READERS variable in barcode_decoder.js .
2. In barcode_decoder.js, you need to overload decodePattern function in tryDecode to pass in an extra parameter, the inputImageWrapper variable. result = _barcodeReaders[i].decodePattern(barcodeLine.line, inputImageWrapper);
3. In the jsqrcode library, the library grayscales the image passed in and you will need to remove that portion of code since ( I suspect that quagga already grayscales the image ) grayscaling a grayscaled image is a bad idea.

Note: I have only done some light testing so if it breaks for you, do inform me.

HI, how do you add new reader to READERS? can anyone explain? I am new on JS. Thanks in advance

[caiotarifa]

@rinukkusu What exactly did you pack? Is it still necessary to edit an original library?

[rinukkusu]

@caiotarifa it's probably easier to just use https://github.com/zxing-js/library