No results from the scanner on > iOS 14

[malte94]

The scanning functionality of Quagga stopped working. I tried different aspectRatios and different configurations regarding the camera selection without any success.

The camera selection, on the other hand, and general implementation work fine – the stream starts without any issues. No barcodes (ean_code) are recognized though.

Android works without any issues.

 const QuaggaInit = () => {
        Quagga.init(
            {
                inputStream: {
                    type: "LiveStream",
                    constraints: {
                        width: {
                            min: 450
                        },
                        height: {
                            min: 300
                        },
                        deviceId: selectedDevice ? selectedDevice : "default",
                        facingMode: "environment",
                        /*aspectRatio: {
                            "min": 1,
                            "max": 2
                        }*/
                    }
                },
                locator: {
                    "patchSize": "medium",
                    "halfSample": true
                },
                numOfWorkers: 2,
                frequency: 10,
                decoder: {
                    readers: [
                        "ean_reader",
                    ]
                },
                locate: true
            }, err => {
                if (err) {
                    console.log(err, "error msg");
                }
                Quagga.start();
                return () => {
                    Quagga.stop()
                }
            });
    }

    React.useEffect(() => {
        getDevices();
        checkPermissions();
        Quagga.onProcessed(result => {
            var drawingCtx = Quagga.canvas.ctx.overlay,
                drawingCanvas = Quagga.canvas.dom.overlay;

            if (result) {
                if (result.boxes) {
                    drawingCtx.clearRect(
                        0,
                        0,
                        Number(drawingCanvas.getAttribute("width")),
                        Number(drawingCanvas.getAttribute("height"))
                    );
                    result.boxes
                        .filter(function (box) {
                            return box !== result.box;
                        })
                        .forEach(function (box) {
                            Quagga.ImageDebug.drawPath(box, { x: 0, y: 1 }, drawingCtx, {
                                color: "green",
                                lineWidth: 2
                            });
                        });
                }

                if (result.box) {
                    Quagga.ImageDebug.drawPath(result.box, { x: 0, y: 1 }, drawingCtx, {
                        color: "#00F",
                        lineWidth: 2
                    });
                }

                if (result.codeResult && result.codeResult.code) {
                    Quagga.ImageDebug.drawPath(
                        result.line,
                        { x: "x", y: "y" },
                        drawingCtx,
                        { color: "red", lineWidth: 3 }
                    );
                }
            }
        });

        Quagga.onDetected(detected);

    }, []);

    const detected = result => {
        onDetected(result.codeResult.code);
    };

Test device: iPhone 12 Pro

[ericblade]

I'm told that selecting an aspectRatio: { ideal: 1 } in your constraint works there, although I can't confirm that since I lack any iOS devices.

[malte94]

Thank you @ericblade
Unfortunately, that won't fix the issue (anymore).

[ericblade]

just realized it's aspectRatio: { ideal: 1 } ..

might take a look through this thread for some ideas ericblade/quagga2#419

[malte94]

@ericblade

Thank you. I tried this configuration. Still not working properly.

The iPhone camera appears to be incredibly picky. I scanned one EAN code succesfully, which had nearly the exact camera format. As soon as some text is around the EAN, or the EAN is quite small and can not be recorded in the camera's format due to exceeding the minimum focus distance of the iPhone's camera, the scanner always fails.

On the other hand, Android scans EANs without any problems, even if they are not in the camera format, surrounded by text or very small.

So would you suppose that this is an issue related to the library (The iPhone camera itself works perfectly, focusses correctly) or due to Safari/iOS?

[ericblade]

I wish I had any more insight to that. The control that a web app has, and more so on iOS, compared to a native app, over the camera functionality is pretty minimal. It could be hardware, it could be OS/Browser, or it c ould be the library. Could be a combination of all of that just not working together in expected ways that work elsewhere. :|

[JonSnow-vn]

does you fixed it? i have same issues, this beacause onProcessed() function run only one time when init. So it never get onDetected()

[malte94]

@JonSnow-vn
Nope, but Android works fine. onDetected() is called correctly each time on detection :)

[JonSnow-vn]

@JonSnow-vn Nope, but Android works fine. onDetected() is called correctly each time on detection :)

yes, me too, this problem only on iphone. Like what i say, on iphone, onProcessed() function run only one time when init. I test on macbook pro and ipad pro its work fine. I don't konw ipad mini is work? i dont have this.

[malte94]

Interesting observation, I have not debugged it that in-depth.

[JonSnow-vn]

I wish I had any more insight to that. The control that a web app has, and more so on iOS, compared to a native app, over the camera functionality is pretty minimal. It could be hardware, it could be OS/Browser, or it c ould be the library. Could be a combination of all of that just not working together in expected ways that work elsewhere. :|

you have any idea?

[ericblade]

Unfortunately, I don't. The one person using my app on iOS isn't reporting any problems.

[fabricyo]

Unfortunately, I don't. The one person using my app on iOS isn't reporting any problems.

I can confirm, is working fine here.

[erikmillergalow]

Anyone have any other ideas to resolve this? I'm still unable to scan on my iPhone 13 mini after messing around with setting aspectRatio.

[PriyaN-d]

Is this issue resolved?

[erikmillergalow]

@PriyaN-d Yes, we were able to get this working again last year - though we did have to add a way for users to try out each available camera themselves (different models expose different settings/lenses, front/back/wide angle etc...)

[ericblade]

though we did have to add a way for users to try out each available camera themselves (different models expose different settings/lenses, front/back/wide angle etc...)

this is probably the way. On a lot of Android devices, the default camera selection provides fisheye view, which mangles the image