html5-qrcode
html5-qrcode copied to clipboard
mebjas
Doesn’t scan on iOS and iPadOS devices
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?
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: @.***>
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: @.***>
I suspect your code is failing somehwere as you said html5QrcodeScanner class works well. try to debug it from the console or alert()
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
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.
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.
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. 😿
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.
try aspectRatio:1, focusMode:"continuous" .....
Hi, I cannot find the config focusMode. Is there any doc about this?
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
It looks like focusMode isn't being handled? The focus seems to be fixed causing barcode reads to fail.
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!
continuous
I think it is like this: videoConstraints: { focusMode: 'continuous' }
/** * Optional, @beta(this config is not well supported yet). * * Important: When passed this will override other parameters like * 'cameraIdOrConfig' or configurations like 'aspectRatio'. * 'videoConstraints' should be of type {@code MediaTrackConstraints} as * defined in * https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints * and is used to specify a variety of video or camera controls like: * aspectRatio, facingMode, frameRate, etc. */ videoConstraints?: MediaTrackConstraints | undefined;
I am not able to reproduce the original issue on IPad Pro. Is this issue still occurring with the latest version of the library?
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
@Hussyn72 without any debug console info nothing can be done to fix it.
I had similar issue. aspectRatio: window.outerHeight / window.outerWidth, is helped on iPhone. In portrait mode
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.
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.
<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.🙂
@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
