iPhone 13 & 14 Pro - blurry images - no chance to scan a code

[NiTRoeSE]

Hi,

we recognize that a iPhone 13 & 14 Pro are not able to use the scanner because the focus of the cam is not working. A iPhone 12 Pro works as expected.

Any chance to get a fix for this ?

Thanks in Advanced

[ROBERT-MCDOWELL]

better to contact apple for the fix....

[NiTRoeSE]

better to contact apple for the fix....

The cameras are working fine in any other app. Its like the focus didn't work with html5-qrcode and or the switching to the macro mode of the cams. Like i said a iPhone 12 Pro work as expected ( it has no macro mode ) .. seems to me that html5-qrcode didn't support iPhone 13 & 14 Pro.

[ROBERT-MCDOWELL]

the issue comes from apple and browsers, if html5-qrcode works on iphone 12 and not iphone 14 that's because there is an issue between javascript and the device itself.

[robdigital]

I'm having the same issue. Testing on iPhone 14 and latest iOS 16.2 and it will not switch to the macro lens. I've noticed the exact same problem in many 3rd party apps on the app store that worked fine on my iPhone 13. Googling or searching reddit you will find many people complaining. Calling apple is useless, they say app developers need to update their bugs..

[jefelon]

Mismo problema con android

[wickedvic]

@NiTRoeSE @robdigital check it now. You can toggle between multiple camera options. On my iPhone 13, with the wide angle camera, I'm able to scan code 128 barcodes without the blurriness

@jefelon for android you can add showZoomSliderIfSupported: true to the config. Tested on One Plus 6T and Im able to pick up the barcodes once doing so. See this for reference https://github.com/mebjas/html5-qrcode/releases/tag/v2.3.2

[NiTRoeSE]

@NiTRoeSE @robdigital check it now. You can toggle between multiple camera options. On my iPhone 13, with the wide angle camera, I'm able to scan code 128 barcodes without the blurriness

Hi, where can i find the updated code to test it ? (Github says last push in any branch is 3 weeks ago ) In Latest version i can only switch between front and back camera on iPhone 14Pro.

[ROBERT-MCDOWELL]

play with zoom and focusMode continuous settings

[jmldsilva]

In IOS we cannot change zoom settings with JavaScript in that case is hard to scan barcodes. Have to wait until something changes Regards

[ROBERT-MCDOWELL]

so that's the reason why it's much better to open an issue on iOS developer support website and ask them why they decided to lock the focus and zoom with javascript API, this has nothing to do with html5-qrcode.

[wickedvic]

@NiTRoeSE @jmldsilva These are the camera options I see on my iPhone 13 Pro IOS 16.3. Both on the online demo as well as my local, Im able to switch between the extra cameras. Between last week and this week I haven't changed anything besides a software update to my phone (16.1 => 16.3). Before this I was also seeing only front/back camera options.

Update: I tested on another iphone 13 Pro on IOS 16.1 and I don't get these extra camera options. Only front and back camera

Update 2: Upgraded from IOS 16.1 => 16.3 on the second iPhone I tested. Went from front and back options to all 5 options shown in screenshot

[robdigital]

Confirmed, this is fixed in iOS 16.3

iOS 16.2:

iOS 16.3: Selecting Back Ultra Wide Camera on iPhone 14 gives me the best results.

[alexcgrd]

I can confirm the same issue on Iphone 13. After Updating to iOS 16.3.1, I am still unable to scan a lot of barcodes (mostly smaller ones) even after changing the cameras. I haven't played around with zoom and focus yet.

[jmldsilva]

@NiTRoeSE @jmldsilva These are the camera options I see on my iPhone 13 Pro IOS 16.3. Both on the online demo as well as my local, Im able to switch between the extra cameras. Between last week and this week I haven't changed anything besides a software update to my phone (16.1 => 16.3). Before this I was also seeing only front/back camera options.

Update: I tested on another iphone 13 Pro on IOS 16.1 and I don't get these extra camera options. Only front and back camera

Update 2: Upgraded from IOS 16.1 => 16.3 on the second iPhone I tested. Went from front and back options to all 5 options shown in screenshot

Hello , But if you try your code in android you can play with zoom settings, with that,scanning is fantastic.

[wickedvic]

I can confirm the same issue on Iphone 13. After Updating to iOS 16.3.1, I am still unable to scan a lot of barcodes (mostly smaller ones) even after changing the cameras. I haven't played around with zoom and focus yet.

Ive shared the code I use in my workflow. For our use case I'm able to scan code 128, QR codes and data matrixs without an issue. Play around with the parameters passed on your local especially qr box. Ive found this setup to be able to scan all the barcodes i've needed on Mac Chrome/Safari, IOS 13 Pro (>=16.3 with Back Ultra Wide Camera) and Android One Plus 6t

import { Html5QrcodeScanner, Html5QrcodeScanType } from "html5-qrcode";
import React, { useEffect, useState } from "react";
import "./BarcodeScanner.css";

function ScannerComponent({ childToParentScanner, cameraToggle }) {
  useEffect(() => {
    if (Html5QrcodeScanner) {
      let html5QrcodeScanner = new Html5QrcodeScanner(
        "reader",

        {
          fps: 10,
          disableFlip: false,
          focusMode: "continuous",
          advanced: [{ zoom: 2.0 }],
          rememberLastUsedCamera: true,
          experimentalFeatures: {
            useBarCodeDetectorIfSupported: true,
          },
          willReadFrequently: true,
          supportedScanTypes: [
            // Html5QrcodeScanType.SCAN_TYPE_FILE,
            Html5QrcodeScanType.SCAN_TYPE_CAMERA,
          ],
          qrbox: {
            width: window.screen.width < 600 ? 200 : 300,
            height: window.screen.width < 600 ? 100 : 100,
          },
        },
        /* verbose= */ false
      );

      function onScanSuccess(data) {
        childToParentScanner(data);

        // Stop scanning
        html5QrcodeScanner
          .clear()
          .then((_) => {
            // the UI should be cleared here
          })
          .catch((error) => {
            console.log("Closing Camera Error");
            // Could not stop scanning for reasons specified in `error`.
            // This conditions should ideally not happen.
          });
      }

      function onScanFailure(error) {
        cameraToggle(html5QrcodeScanner);
        // handle scan failure, usually better to ignore and keep scanning
        console.warn(`QR error = ${error}`);
      }

      html5QrcodeScanner.render(onScanSuccess, onScanFailure);
    }
  }, [Html5QrcodeScanner]);

  return <div id="reader"></div>;
}
export default ScannerComponent;

[alexcgrd]

I can confirm the same issue on Iphone 13. After Updating to iOS 16.3.1, I am still unable to scan a lot of barcodes (mostly smaller ones) even after changing the cameras. I haven't played around with zoom and focus yet.

Ive shared the code I use in my workflow. For our use case I'm able to scan code 128, QR codes and data matrixs without an issue. Play around with the parameters passed on your local especially qr box. Ive found this setup to be able to scan all the barcodes i've needed on Mac Chrome/Safari, IOS 13 Pro (>=16.3 with Back Ultra Wide Camera) and Android One Plus 6t

import { Html5QrcodeScanner, Html5QrcodeScanType } from "html5-qrcode";
import React, { useEffect, useState } from "react";
import "./BarcodeScanner.css";

function ScannerComponent({ childToParentScanner, cameraToggle }) {
  useEffect(() => {
    if (Html5QrcodeScanner) {
      let html5QrcodeScanner = new Html5QrcodeScanner(
        "reader",

        {
          fps: 10,
          disableFlip: false,
          focusMode: "continuous",
          advanced: [{ zoom: 2.0 }],
          rememberLastUsedCamera: true,
          experimentalFeatures: {
            useBarCodeDetectorIfSupported: true,
          },
          willReadFrequently: true,
          supportedScanTypes: [
            // Html5QrcodeScanType.SCAN_TYPE_FILE,
            Html5QrcodeScanType.SCAN_TYPE_CAMERA,
          ],
          qrbox: {
            width: window.screen.width < 600 ? 200 : 300,
            height: window.screen.width < 600 ? 100 : 100,
          },
        },
        /* verbose= */ false
      );

      function onScanSuccess(data) {
        childToParentScanner(data);

        // Stop scanning
        html5QrcodeScanner
          .clear()
          .then((_) => {
            // the UI should be cleared here
          })
          .catch((error) => {
            console.log("Closing Camera Error");
            // Could not stop scanning for reasons specified in `error`.
            // This conditions should ideally not happen.
          });
      }

      function onScanFailure(error) {
        cameraToggle(html5QrcodeScanner);
        // handle scan failure, usually better to ignore and keep scanning
        console.warn(`QR error = ${error}`);
      }

      html5QrcodeScanner.render(onScanSuccess, onScanFailure);
    }
  }, [Html5QrcodeScanner]);

  return <div id="reader"></div>;
}
export default ScannerComponent;

Thank you for the code snippet. I have played around with the zoom and focus configurations but I didn't notice any differences. I have also copied your config into the Html5QrcodeScanner and it didn't make a difference.

On further testing I noticed that cameraCapabilities.zoomFeature().isSupported() returns false on my Iphone 13 in Chrome and in Safari. Is there any reason why it is not supported? The torch feature is also not supported.

I am testing this with Code 39 Barcodes. I am able to scan barcodes with bigger sizes but once they reach a certain size, it becomes impossible to scan. Native Apps don't have any trouble scanning them.

[ErwinThompsonF]

@NiTRoeSE @jmldsilva These are the camera options I see on my iPhone 13 Pro IOS 16.3. Both on the online demo as well as my local, Im able to switch between the extra cameras. Between last week and this week I haven't changed anything besides a software update to my phone (16.1 => 16.3). Before this I was also seeing only front/back camera options.

Update: I tested on another iphone 13 Pro on IOS 16.1 and I don't get these extra camera options. Only front and back camera

Update 2: Upgraded from IOS 16.1 => 16.3 on the second iPhone I tested. Went from front and back options to all 5 options shown in screenshot

Do we have any official article from Apple about this? I can't find any. Thanks!

[rahulsharma991]

Hi,

we recognize that a iPhone 13 & 14 Pro are not able to use the scanner because the focus of the cam is not working. A iPhone 12 Pro works as expected.

Any chance to get a fix for this ?

Thanks in Advanced

Initialize this class Html5Qrcode into your component you will find function

• getRunningTrackCameraCapabilities(): CameraCapabilities; under CameraCapabilities interface you see zoomFeature(): RangeCameraCapability; use this function to set min and max values then apply the values using apply(value:T) method this function will return promise.

This will help you to zoom the camera and able to scan small QR.

[ssch-99]

Hi, we recognize that a iPhone 13 & 14 Pro are not able to use the scanner because the focus of the cam is not working. A iPhone 12 Pro works as expected.

Any chance to get a fix for this ? Thanks in Advanced

Initialize this class Html5Qrcode into your component you will find function

• getRunningTrackCameraCapabilities(): CameraCapabilities; under CameraCapabilities interface you see zoomFeature(): RangeCameraCapability; use this function to set min and max values then apply the values using apply(value:T) method this function will return promise.

This will help you to zoom the camera and able to scan small QR.

Which values?

[rahulsharma991]

Hi, we recognize that a iPhone 13 & 14 Pro are not able to use the scanner because the focus of the cam is not working. A iPhone 12 Pro works as expected.

Any chance to get a fix for this ? Thanks in Advanced

Initialize this class Html5Qrcode into your component you will find function

• getRunningTrackCameraCapabilities(): CameraCapabilities; under CameraCapabilities interface you see zoomFeature(): RangeCameraCapability; use this function to set min and max values then apply the values using apply(value:T) method this function will return promise.

This will help you to zoom the camera and able to scan small QR.

Which values?

Sorry for the confusion by setting min and max values. Min and Max values are already provided by detecting your device.

Like - zoomFeature().max() — You will get the max zoom Level value relative to device. zoomFeature().min() — You will get the min zoom level value relative to device

If you want to apply those value accordingly to your speciation you can use apply(minValue) method.

To get more specific You have to dig deep inside the library on code level.

[T-mac-one]

try to modify the resolution to make it clear. html5Qrcode.start( { facingMode: "environment", }, { aspectRatio: 1.777778, // 16:9 focusMode: "continuous", fps: 15, videoConstraints: { facingMode: 'environment', width: 9999, // It may be useful!! }, qrbox: { width: 280, height: 280, }, },