search

mebjas / html5-qrcode

A cross platform HTML5 QR code reader. See end to end implementation at: https://scanapp.org
https://qrcode.minhazav.dev
Apache License 2.0
4.76k stars 940 forks source link

Doesn’t scan on iOS and iPadOS devices #484

Open itandtri opened 2 years ago

itandtri commented 2 years ago

Hi everyone

This module works pretty well on Android, macOS and Windows browsers. But here’s some bug on IOS and IpadOS:

When I’m starts camera and camera starts to scan, immediately everything just stops. Here’s no any bugs and errors on console, here’s no anything about “camera paused”. It’s just stops and that’s it.

It happens with module Html5Qrcode, with Html5QrcodeScanner API everything works fine, but it’s not what I really need.

Who had same problems?

ROBERT-MCDOWELL commented 2 years ago

which browser and version? which iOS/ipadOS version?

itandtri commented 2 years ago

Hi

I'm talking about Safari browser and iOS 15, iPadOS 15.2.1

вт, 14 июн. 2022 г., 16:07 ROBERT MCDOWELL @.***>:

which browser and version? which iOS/ipadOS version?

— Reply to this email directly, view it on GitHub https://github.com/mebjas/html5-qrcode/issues/484#issuecomment-1154984140, or unsubscribe https://github.com/notifications/unsubscribe-auth/AVEWVAS6SVSVZWE5J7SZN4LVPBKVVANCNFSM5YWHQXYQ . You are receiving this because you authored the thread.Message ID: @.***>

ROBERT-MCDOWELL commented 2 years ago

could you try to upgrade to 15.5?

itandtri commented 2 years ago

Yeah, I’ve tried it on different IOS devices with different IOS versions.

I can share you repository with my demo if you want to see

Вт, 14 июня 2022 г. в 4:27 PM, ROBERT MCDOWELL @.***>:

could you try to upgrade to 15.5?

— Reply to this email directly, view it on GitHub https://github.com/mebjas/html5-qrcode/issues/484#issuecomment-1155003289, or unsubscribe https://github.com/notifications/unsubscribe-auth/AVEWVAXA5CDC6L22IFCC6D3VPBNCDANCNFSM5YWHQXYQ . You are receiving this because you authored the thread.Message ID: @.***>

ROBERT-MCDOWELL commented 2 years ago

I suspect your code is failing somehwere as you said html5QrcodeScanner class works well. try to debug it from the console or alert()

KixAss commented 2 years ago

I've got the same problem. It opens the camera, but doesn't recognise the barcode. Tried with EAN13 and QR. Also no console-messages or onScanFailure events. Tried on iOS 15.5 and 16B1

ROBERT-MCDOWELL commented 2 years ago

@KixAss with html5QrcodeScanner class too?

KixAss commented 2 years ago

I'm using this code: html5QrcodeScanner = new Html5QrcodeScanner( "reader", { fps: 10, qrbox: { width: 250, height: 250 }, experimentalFeatures: { useBarCodeDetectorIfSupported: false }, rememberLastUsedCamera: true, verbose: true }); html5QrcodeScanner.render(onScanSuccess, onScanFailure);

Tried with and without useBarCodeDetectorIfSupported

With verbose-mode i get this in console: Code scan error = QR code parse error, error = N: No MultiFormat Readers were able to detect the code.

ROBERT-MCDOWELL commented 2 years ago

did you try with several different type of QR codes ?

KixAss commented 2 years ago

I tried QR and EAN13.

ROBERT-MCDOWELL commented 2 years ago

I mean did you try several QR codes? small, big etc....

KixAss commented 2 years ago

Yes, I tried multiple sizes, but that doesnt matter.

ROBERT-MCDOWELL commented 2 years ago

could you upload some exemple of the one you tried?

emkowale commented 2 years ago

Mine works great. I have an iphone xr with ios 14.8.1. I have been using this wonerfull code for a couple of years. As a developer I NEVER leave automatic updates on. Never do an update on ANYTHING without reading the change log. Never trust big tech. If it ain't broke, don't fix it.

weihaopeng commented 2 years ago

Hi everyone

This module works pretty well on Android, macOS and Windows browsers. But here’s some bug on IOS and IpadOS:

When I’m starts camera and camera starts to scan, immediately everything just stops. Here’s no any bugs and errors on console, here’s no anything about “camera paused”. It’s just stops and that’s it.

It happens with module Html5Qrcode, with Html5QrcodeScanner API everything works fine, but it’s not what I really need.

Who had same problems?

@itandtri Hi, I had the same question. And my start code is:

    ......
    this.html5QrCode = new Html5Qrcode('scan-render');
    const height = document.body.offsetHeight
    const width = document.body.offsetWidth
    const minWidth = Math.min(height, width)
    const config = { fps: 10, qrbox: { width: minWidth * 0.667, height: minWidth * 0.667 }, aspectRatio: Math.ceil(height / width) 
    this.html5QrCode.start({facingMode: {exact: 'environment'}}, config, qrcodeSuccess, (error) => {})}
    ....

Today I try to delete aspectRatio in config, then I found I can get scan result in my iPhone. You can check your code, hope this help.

I found that in my iPhone13, document.body.offsetHeight / document.body.offsetWidth is 2.01xxxx, use Math.ceil, the aspectRatio is 3, very different with 2.01. In iPhone X, the result is 1.99xxx, use Math.ceil, got 2. very close to 1.99xxx. I change Math.ceil to Math.round, then I get the scan result. Maybe 3 is the very wrong ratio. 😿

image

BTW, my iPhone X with iOS14.7.1, can get success scan result with aspectRatio config, my iPhone 13 Pro Max with iOS 15.0.2, has 'no result and no error' problem.

ROBERT-MCDOWELL commented 2 years ago

try aspectRatio:1, focusMode:"continuous" .....

weihaopeng commented 2 years ago

try aspectRatio:1, focusMode:"continuous" .....

Hi, I cannot find the config focusMode. Is there any doc about this?

jigneshpanchal22 commented 2 years ago

have wrapped my site using Xamarin forms, and also getting same issue in iOS devices (getting black screen), works fine in Android.
iPhone 11 - version 15.5

have tried this demo in iOS app, but it stuck on 'launching camera' https://blog.minhazav.dev/research/html5-qrcode.html

jcroucher commented 1 year ago

It looks like focusMode isn't being handled? The focus seems to be fixed causing barcode reads to fail.

fersaling commented 1 year ago

try aspectRatio:1, focusMode:"continuous" .....

Hi, I cannot find the config focusMode. Is there any doc about this?

Hi. Did work for you? Thank you!

xbindt commented 1 year ago

continuous

I think it is like this: videoConstraints: { focusMode: 'continuous' }

/**

mebjas commented 1 year ago

I am not able to reproduce the original issue on IPad Pro. Is this issue still occurring with the latest version of the library?

Hussyn72 commented 1 year ago

Working fine in Android but not able to scan Barcodes in iPhone 12 v16.2 and in iPhone 14 pro latest version did we find any solution for this how to fix it please help Testing in chrome and safari both are not working

ROBERT-MCDOWELL commented 1 year ago

@Hussyn72 without any debug console info nothing can be done to fix it.

teacherguy2020 commented 1 year ago

Make sure you aren't in a private browser window

AndriiTsarenko commented 1 year ago

I had similar issue. aspectRatio: window.outerHeight / window.outerWidth, is helped on iPhone. In portrait mode

gurji999 commented 11 months ago

Has anybody figured this out? Iphone 12 running ios 16.6 not recognizing any barcodes except for QR. Android working fine. I am just trying to use the demo provided here. I haven't added or changed anything. Even scanapp.org just doesn't work for anything other than a QR. Other types of barcodes don't work.

fs98 commented 9 months ago

Did anyone manage to fix this? I have the exact some problem. I have not tried iPad, but on iPhone the scanner just stops suddenly. On first open it works perfectly, but if I force close the app it breaks, sometimes after first close and sometimes after several (I still fail to catch the pattern). I do get prompted but the camera icon on the top left corner displays for a second and then nothing happens, the scanner does not start. No issues on Android.

useEffect(() => {
    const html5QrCode = new Html5Qrcode("reader");

    const qrCodeSuccessCallback = (decodedText: string) => {
      navigate("/equipment", {
        state: {
          equipment: decodedText,
        },
      });
    };

    html5QrCode.start(
      { facingMode: "environment" },
      { fps: 10, qrbox: { width: 250, height: 250 } },
      qrCodeSuccessCallback,
      undefined
    );

    return () => {
      html5QrCode.stop().then(() => {
        html5QrCode.clear();
      });
    };
  }, [navigate]);

Using Html5QrcodeScanner I've got the same exact issue: scanner is not rendering, the button says "Stop Scanning" but it does not work.

IMG_4522 IMG_4523

RasikaEkanayake commented 7 months ago

<div style="width: 270px" id="reader"></div>

 var html5QrcodeScanner = new Html5QrcodeScanner(
            "reader",
            { fps: 10, qrbox: 250 ,focusMode: "continuous"}
        );

use focusMode: "continuous" this fixed my issue But I don't no why.🙂

HusainTsim commented 7 months ago

@ROBERT-MCDOWELL without any debug console info nothing can be done to fix it.

there's not any error message its just not scanning in iphone devices I keep trying 1-2 mins to scan the barcode but it did not scanned properly only rare cases sometimes it scan tested in IPhone 14 version 17.2.1 and IPhone 15 same latest version.

Please some body help I've been stucked here its working for andriod devices only and not scanning barcode in ios devices while it take miliseconds to scan in android but in ios it takes minutes and then also it does not read barcodes without showing any error its just not scanning.

this is my code implementation

js.txt

brunocarrard commented 6 months ago

I managed to solve the problem. If you look at the console of your iPhone's browser (with is not as easy as one might think lol) it says that your html element must not be larger then qrbox property. Therefore, you have to either increase qrbox or decrease your html element width.

HusainTsim commented 5 months ago

I managed to solve the problem. If you look at the console of your iPhone's browser (with is not as easy as one might think lol) it says that your html element must not be larger then qrbox property. Therefore, you have to either increase qrbox or decrease your html element width.

It did not worked in my case log showing nothing. however when I increased the size of barcode it scanned.

ROBERT-MCDOWELL commented 5 months ago

@HusainTsim so your issue is related to your phone focus, not html5-qrcode. you will find all answers about focus in open and closed issues. thanks to close your issue now.