Unable to read large QR code

[DhirajSAP2022]

Hi Team,

I am implementing the QR code scanner in my application and used the quaggaJS.min.js file. I am able to scan the small QR Code(Example: 100039456) and its working fine. QRCode format: 128

But problem is here when I am trying to read large QR Code from the device camera is opened but unable to read the QRCode and continuous camera is showing on in the device.
This is the QR code which I want to read : 10650000011[]20MSH345[]

Also I changed the type : medium to Large and X-Large but no luck.

Could you please help me to resolve this issue. Thanks in advance!

Best Regards,
Dhiraj

[ericblade]

Quagga reads 2D barcodes, it does not read QR codes.

[DhirajSAP2022]

I think this is 2D barcodes. I have used below link to generate the barcodes.
https://barcode.tec-it.com/en/Code128?data=1065000001%5B%5D20MSM345%5B%5D

I have attached the sample barcode.
Please help me to fix this issue.

Best REgards,
Dhiraj

[DhirajSAP2022]

Quagga reads 2D barcodes, it does not read QR codes.

?Yes barcode only. I have attached sample barcode image and url to generate the bar code.

[ericblade]

This reads fine for me using the standard settings. What settings are you using?

[DhirajSAP2022]

This reads fine for me using the standard settings. What settings are you using?

I am trying to use in my application. So when click on scan its open the mobile camera after that nothing happen and unable to read. Also don't see any error in console.

In mobile I haven't done any setting. So can you please share steps if any setting changes is needed?

Best Regards,
Dhiraj

[DhirajSAP2022]

This reads fine for me using the standard settings. What settings are you using?

I am trying to use in my application. So when click on scan its open the mobile front camera after that nothing happen and unable to read. Also don't see any error in console.

I want to open back camera as well.

In mobile I haven't done any setting. So can you please share steps if any setting changes is needed?

Best Regards, Dhiraj

[ericblade]

By settings, I mean what is the contents of the object being passed to Quagga.init() ?

[DhirajSAP2022]

By settings, I mean what is the contents of the object being passed to Quagga.init() ?

Below are set of code:

afterOpen: function () {
this._initQuagga(this.getView().byId("scanContainer").getDomRef()).done(function () {
// Initialisation done, start Quagga
Quagga.start();
}).fail(function (oError) {
// Failed to initialise, show message and close dialog...this should not happen as we have
// already checked for camera device ni /model/models.js and hidden the scan button if none detected
sap.m.MessageBox.error(oError.message.length ? oError.message : ("Failed to initialise Quagga with reason code " + oError.name), {
onClose: function () {
this._oScanDialog.close();
}.bind(this)
});
}.bind(this));
}.bind(this),
afterClose: function () {
// Dialog closed, stop Quagga
Quagga.stop();
}

_initQuagga: function (oTarget) {
		var oDeferred = jQuery.Deferred();

		// Initialise Quagga plugin - see https://serratus.github.io/quaggaJS/#configobject for details
		Quagga.init({
			inputStream: {
				type: "LiveStream",
				target: oTarget,
				constraints: {
					width: {
						min: 640
					},
					height: {
						min: 480
					},
					facingMode: "environment"
				}
			},
			locator: {
				patchSize: "x-large",
				halfSample: true
			},
			numOfWorkers: 2,
			frequency: 10,
			decoder: {
				readers: [{
					format: "code_128_reader",
					config: {}
				}]
			},
			locate: true
		}, function (error) {
			if (error) {
				oDeferred.reject(error);
			} else {
				oDeferred.resolve();
			}
		});

		if (!this._oQuaggaEventHandlersAttached) {
			// Attach event handlers...

			Quagga.onProcessed(function (result) {
				var drawingCtx = Quagga.canvas.ctx.overlay,
					drawingCanvas = Quagga.canvas.dom.overlay;

				if (result) {
					// The following will attempt to draw boxes around detected barcodes
					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
						});
					}
				}
			}.bind(this));

			Quagga.onDetected(function (result) {
				// Barcode has been detected, value will be in result.codeResult.code. If requierd, validations can be done 
				// on result.codeResult.code to ensure the correct format/type of barcode value has been picked up

				// Set barcode value in input field
				this.getView().byId("scannedValue").setValue(result.codeResult.code);

				// Close dialog
				this._oScanDialog.close();
			}.bind(this));

			// Set flag so that event handlers are only attached once...
			this._oQuaggaEventHandlersAttached = true;
		}

		return oDeferred.promise();
	}

could you pls check if anything need to change.

[ericblade]

Looks like it works fine with medium patch size, as shown in the image above. Extra large patch size is probably not real useful unless you're working on very high resolution images