Cannot read small QR codes

[zibranyiszgabor]

Describe the bug
Cannot read 1cm or smaller size codes.
The phone's default focus is already far from the code .

Smartphone (please complete the following information):

• Android: sometimes succeed
• Iphone: never succeed

Additional context
The camera's image is too far from the code.
It would be a solution if we could add the camera starting zoom beside qrbox parameter or would work the zoom while reading.

[ROBERT-MCDOWELL]

I think this is really depending on the camera quality. I have tested many different cameras, external and builtin from computers, laptop and smartphones and the results vary extremely.

[ROBERT-MCDOWELL]

also, keep in mind the normal time use of cameras, it can be an iphone, but if this iphone had tough time in its life with the lens so the quality will be less and can affect the scanning.

[unimatrix73]

I try this with an iPhone 12 Pro Max. If a Barcode Code_39 is 3 cm in width and keeps only 5 Numbers, the iPhone is not able to read the Barcode. If the Barcode is at lest 4 cm width it works. With a nativ Barcode App its working also with the smaller Barcode.
One reason is maybe the nativ App has autofocus und zoom functionality.

[pyzenberg]

Even QR codes with the size of 2cm x 2cm are not scanned. (iPhone SE 14)

[mebjas]

This can probably be addressed with zoom feature - #290 (comment)

I'll work on it.

[mebjas]

Feature request for zoom feature: #330

[mebjas]

Zoom feature suppprt added to Html5QrcodeScanner with version 2.3.2

Check release: https://github.com/mebjas/html5-qrcode/releases/tag/v2.3.2

[ehabnady]

I used the latest update, 2.3.2, it works well for Android but for iOS it doesn't work for small dimensions shape (1cm * 1cm).
It is 2D Data Matrix and the target system is iOS version 16
Please advise

[tobias77X]

I do also have the problem that reading small QR-Codes does not work using an iPad.
The QR-Codes do have a size of approx. 3x3cm.
And I need to use the front camera on the same side as the display.

Larger codes do work perfectly!
But for the small codes, you have to place them close to the lense and so they are out of focus.
If you place them with a larger distance to the lense, they are too small to read.

Is there any advice on this?
Any possibility to zoom in?
Thank you.

[luenib]

Same issue. Do you guys have any update on fixing it for iOS?

Thanks for all the good work!

[ssch-99]

any solutions?

[ngothanhtai]

@luenib @ssch-99 @tobias77X

I solve this by using a barcode-detector polyfill and also increase the video constraints. Here is my working code (tested on iOS Safari):

import "barcode-detector/side-effects";
import { BarcodeDetector } from "barcode-detector/pure";

        try {
          // Use video without audio
          const constraints: MediaStreamConstraints = {
            video: {
              facingMode: { exact: "environment" },
              width: { min: 1024, ideal: 4096, max: 4096 },
              height: { min: 540, ideal: 2160, max: 2160 },
              frameRate: { ideal: 60, max: 60 },
            },
            audio: false,
          };

          // Start video stream
          stream = await navigator.mediaDevices.getUserMedia(constraints);
          videoElmRef.current.srcObject = stream;

          const barcodeDetector = new BarcodeDetector({
            formats: ["qr_code"],
          });

          const detectCode = async () => {
            if (videoElmRef.current) {
              // Start detecting codes on to the video element
              const codes = await barcodeDetector.detect(videoElmRef.current);

              // If no codes exit function
              if (codes.length === 0) return;

              setStartScanned(false);
              onDone(codes[0].rawValue);
            }
          };

          intervalId = setInterval(() => detectCode(), 100);
        } catch (e: any) {
          setErrorMessage(e);
        }
`

[tinhthaison]

@luenib @ssch-99 @tobias77X

I solve this by using a barcode-detector polyfill and also increase the video constraints. Here is my working code (tested on iOS Safari):

import "barcode-detector/side-effects";

import { BarcodeDetector } from "barcode-detector/pure";



        try {

          // Use video without audio

          const constraints: MediaStreamConstraints = {

            video: {

              facingMode: { exact: "environment" },

              width: { min: 1024, ideal: 4096, max: 4096 },

              height: { min: 540, ideal: 2160, max: 2160 },

              frameRate: { ideal: 60, max: 60 },

            },

            audio: false,

          };



          // Start video stream

          stream = await navigator.mediaDevices.getUserMedia(constraints);

          videoElmRef.current.srcObject = stream;



          const barcodeDetector = new BarcodeDetector({

            formats: ["qr_code"],

          });



          const detectCode = async () => {

            if (videoElmRef.current) {

              // Start detecting codes on to the video element

              const codes = await barcodeDetector.detect(videoElmRef.current);



              // If no codes exit function

              if (codes.length === 0) return;



              setStartScanned(false);

              onDone(codes[0].rawValue);

            }

          };



          intervalId = setInterval(() => detectCode(), 100);

        } catch (e: any) {

          setErrorMessage(e);

        }

`

hey, bạn ơn dùng với js và html5 bình thường được không.

[ngothanhtai]

@luenib @ssch-99 @tobias77X
I solve this by using a barcode-detector polyfill and also increase the video constraints. Here is my working code (tested on iOS Safari):

import "barcode-detector/side-effects";

import { BarcodeDetector } from "barcode-detector/pure";



        try {

          // Use video without audio

          const constraints: MediaStreamConstraints = {

            video: {

              facingMode: { exact: "environment" },

              width: { min: 1024, ideal: 4096, max: 4096 },

              height: { min: 540, ideal: 2160, max: 2160 },

              frameRate: { ideal: 60, max: 60 },

            },

            audio: false,

          };



          // Start video stream

          stream = await navigator.mediaDevices.getUserMedia(constraints);

          videoElmRef.current.srcObject = stream;



          const barcodeDetector = new BarcodeDetector({

            formats: ["qr_code"],

          });



          const detectCode = async () => {

            if (videoElmRef.current) {

              // Start detecting codes on to the video element

              const codes = await barcodeDetector.detect(videoElmRef.current);



              // If no codes exit function

              if (codes.length === 0) return;



              setStartScanned(false);

              onDone(codes[0].rawValue);

            }

          };



          intervalId = setInterval(() => detectCode(), 100);

        } catch (e: any) {

          setErrorMessage(e);

        }

`

hey, bạn ơn dùng với js và html5 bình thường được không.

mình chưa thử nhưng cái lib này đã làm dùm rồi nên mình dùng đỡ mất thời gian