iphone doesn't recognize any barcodes

[gurji999]

I am using an iphone 12 pro max with ios 16.6. I am trying https://scanapp.org/ and some of the demo code with all the default settings. No matter what I do, the iphone will not recognize any barcodes. Occasionally, view area flickers green, but still no recognition.
I am using the standard safari on my iphone. I also tried chrome for iphone, ane same issue.

I tried all the different rear cameras. None of them work

I have an android, and it works perfectly as expected.

Any ideas?

[whitersun]

me either. Actually if only using the demo or the example provided by HTML5QRcode that will work well on iPhone. But if custom the height of the id reader, iPhone does not scan any code except Android.

Even though I know how to set the AspectRatio and qrbox that makes it a little bit better. The scan is not fast as the android

[gurji999]

me either. Actually if only using the demo or the example provided by HTML5QRcode that will work well on iPhone. But if custom the height of the id reader, iPhone does not scan any code except Android.

Even though I know how to set the AspectRatio and qrbox that makes it a little bit better. The scan is not fast as the android

Can you post which demo you are using. I can't even get the demo to work on iphone other than for QR codes. No other type of barcode works.

[ra1nbow1]

Same issue. Problem appears in Safari on MacOS. By the way Google Chrome on MacOS is fine, but in Chrome on iOS occurs this bug

[ra1nbow1]

Same issue. Problem appears in Safari on MacOS. By the way Google Chrome on MacOS is fine, but in Chrome on iOS occurs this bug

It scans if I remove aspectRatio from scanner config

[gurji999]

Same issue. Problem appears in Safari on MacOS. By the way Google Chrome on MacOS is fine, but in Chrome on iOS occurs this bug

It scans if I remove aspectRatio from scanner config

Aspect ratio isn’t even in the default version.

[ra1nbow1]

Same issue. Problem appears in Safari on MacOS. By the way Google Chrome on MacOS is fine, but in Chrome on iOS occurs this bug

It scans if I remove aspectRatio from scanner config

Aspect ratio isn’t even in the default version.

So?

[YerimMoral3s]

i have the same issue on ios and android, it does not recognize any barcode. Any update?

[sblite]

I'm also finding that my iPhone 11 struggles with a lot of barcodes but the same site on an android works ok.

[Raketten1963]

I have the same problem, and it is definitely something about size. If I take a photo of a barcode witrh the iphone, display it on the screen, then some sizes it will not scan, while if making it bigger, it definitely helps. I use the scanapp.org demo app, to take my own code out of the question. How to move on from this is unclear to me...

[mi-na-bot]

The iPhone version is going to have a hard time as it depends on the abandoned zxing project for "soft" in-browser decoding.

[SMe1]

I tested that the camera on the iPhone couldn't autofocus, causing the image to be unclear and the program couldn't recognize it. If the barcode image is placed on the computer screen, the program can recognize it. The reason for this problem is that the iPhone's camera cannot autofocus

[mi-na-bot]

I have the focus problem on the iphone 13 pro max on all cameras too. IOS 16.6.1 using Safari. Scanning a barcode large enough to be in the focal plane worked just fine.

[ManuelLopezAnido]

Yes I have the same problem :(

[NourAdawi]

We also cannot get this working on IOS

[fzafar2]

Can this be resolved by setting the following video constraint to force it to use the higher resolution camera:

video: { width: {ideal:1920}, height: {ideal:1080}, facingMode: {exact: "environment"} }

I am not sure how to insert the above into the initial call to the qrscanner

Does anyone know how the credit card scan option selects and focus's the rear camera as we would ideally want to copy that functionality in this instance?

[Dynalon]

I have the same issue, detection works reasonably well on desktop and android, but detection rate on iOS is not very good. It has nothing todo with the phone, camera, or camera autofocus on iOS, as I've also evaluated this barcode detector polyfill: https://codepen.io/undecaf/pen/LYzXXzg (source: https://github.com/undecaf/barcode-detector-polyfill#readme) and the detection rate on the very same iphone is orders of magnitude higher. It has got to be a software issue.

[Dynalon]

I compared my approaches on the iPhone, and I am convinced that the html5-qrcode uses the camera in a poor-quality mode for some reason. When I manually setup camera access in my app, using .getUserMedia() I can successfully pass in some MediaConstraints:

  const stream = await navigator.mediaDevices.getUserMedia({
        video: {
          width: { min: 400, ideal: 720 },
          height: { min: 400, ideal: 720 },
          facingMode: { ideal: "environment" }
        },
        audio: false,
      })

I attach that stream to a <video> element. The video has higher quality, and also allows me to go very close to a Barcode without becoming blurry. Using html5-qrcode without any MediaConstraints show a much more blurry image and overall less resolution/size. If I try to pass the exact same MediaConstraints to the .start() function, I do not get any camera image at all (same device). So it seems something is odd with the MediaConstraint passing:

 html5QrCode.start(
        {
          facingMode: "environment",
          // with these, I do not get a camera image; if removed, it works, but bad camera quality is selected:
          width: { min: 400, ideal: 720 },
          height: { min: 400, ideal: 720 },
        },

[fzafar2]

I had same issue adding the constraint to the start function. No camera.

Tried various ways to add the constraint as I believe forcing a higher resolution will resolve the scanning issue

the minified code is hard to decipher so any help from the developers would be appreciated.

[Hargne]

I am experiencing a similar issue, where the barcodes are recognized on iOS but only if they are large enough.

To address the issue of resolution mentioned above by @fzafar2 and @Dynalon I was able to make it work by entering the video constraints as the second argument plus including the facingMode, as such:

const html5QrCode = new Html5Qrcode("render");

html5QrCode.start(
   {},
   {
      fps: 10,
      videoConstraints: {
         width: 1920,
         height: 1080,
         facingMode: "environment",
      },
   },
   onScan,
   onError
);

[Dynalon]

@Hargne thanks for your post, indeed for me passing in the videoConstraints as 2nd argument works - that means, I do get a camera image and the width/height are respected. However, on 1920x1080 the detection rate on my iPhone is still abysmal (mostly the QR code gets too blurry when going close and no detection happens). Again, same device and wasm-based barcode-detector-polyfill has better detection rate (but wont work from within an installed PWA).

[Hargne]

Also to be added: what we managed to conclude was that there was a difference between the cameras used when scanning. In the code above I used the "environment" camera, but as we toggled through all the available cameras, the performance was better for some more than others. So assuming the camera selected with the "environment" / "user" input may or may not be the most ideal pick.

[maiconcarraro]

for anyone looking for a solution, setting the focusMode after scanning started, worked for me, ref: https://github.com/mebjas/html5-qrcode/issues/308#issuecomment-940960194

[jgudo]

for anyone looking for a solution, setting the focusMode after scanning started, worked for me, ref: #308 (comment)

Could you share a sample of your code including all the config? I have tried following the suggestion but it still it doesn't scan barcodes.

scanner.current = new Html5QrcodeScanner(
       qrcodeRegionId,
         {
             fps: 10,
              qrbox: { width: isIOS ? 250 : 300, height: isIOS ? 110 : 130 },
              // qrbox: { width: 300, height: 130 },
              // aspectRatio: isIOS ? 1.5 : 0,
              showTorchButtonIfSupported: true,
              rememberLastUsedCamera: true,
              useBarCodeDetectorIfSupported: true,
              formatsToSupport: [Html5QrcodeSupportedFormats.CODE_39, Html5QrcodeSupportedFormats.CODE_128,],
              experimentalFeatures: {
                   useBarCodeDetectorIfSupported: true
              },
          },
)
if (isIOS) {
   // wait 2 seconds to guarantee the camera has already started to apply the focus mode and zoom...
    setTimeout(() => {
       scanner.current.applyVideoConstraints({
            focusMode: "continuous",
            advanced: [{ zoom: 2.0 }],
      });
    }, 2000);
 }

[maiconcarraro]

Could you share a sample of your code including all the config? I have tried following the suggestion but it still it doesn't scan barcodes.

It's very similar to your code snippet, but I found out the zoom option is not available in iOS 16-, only iOS 17 and thats why you might see no effect.

[LucaMargadant]

I had the same problem and can confirm that the approach of @jgudo works. I ended up using a slightly modified version that works very well for my use case. If anyone is interested, basically it's just checking for the capabilities and then conditionally adding the closest possible constraints that are needed for your use case.

    await sleep(2250); // Or use whatever function for the timeout
    const scannerCapabilities = scanner.value.getRunningTrackCapabilities();
    const zoomCapability = scannerCapabilities.zoom > 2 ? 2.0 : scannerCapabilities.zoom;

    const constraints = {
        // Set a higher height then default to get a better resolution
        width: { ideal: 1000 },
        height: { ideal: 1000 },

        // Set the ideal frame rate based on the capabilities
        frameRate: { ideal: scannerCapabilities.frameRate?.max || 30 },

        advanced: [
            // conditionally add the zoom capability if it is supported
            ...(scannerCapabilities.zoom ? [{ zoom: zoomCapability }] : []),

            // conditionally add the focus distance capability if it is supported
            ...(scannerCapabilities.focusDistance ? [{ focusDistance: 1 }] : []),
        ],
    };

    await scanner.value.applyVideoConstraints(constraints);`

[myleftshoe]

Interestingly I had the same problem with the Quagga2 lib, applying zoom constraint only worked after camera was initialized. I also found that zoom was essential on iPhone11, without it I didn't get any detections; with, I get reliable and fast detections. Happy days.

[arkhamvm]

@mebjas Hello, I found that some iPhones rotate content by 90 degrees, so if we rotate phone, QRcode will be scanned correctly. Can you please implement any option for 90/270 degree scanning? Like for Mirrored QR Code?

[gabrielrbarbosa]

https://caniuse.com/mdn-api_barcodedetector

For anyone still here, I solved it enabling Safari Flag: Shape Detection API