Scanning not working iPhone14 and Samsung Galaxy A, S Series

[vigneshsithirai]

I have used both quagga2 and quagga. I cant able to scan any type of barcode from iPhone14 and Samsung Galaxy A, S Series. And I am not getting any error from console.

[github-actions]

Thank you for filing an issue! Please be patient. :-)

[lampsbr]

I'm using current quagga2 with a galaxy s22 and iphone 12, runs ok. Can you detail the issue a little more?

[ericblade]

Please post your configuration object. The most common problem is the device auto-selecting a wide-angle device, you may have to implement a way to find (or have the user select) a camera that is not wide angle, as wide angle camera produces a fisheye effect that makes recognition quite difficult

[vigneshsithirai]

@ericblade
I have used below config

import Quagga from 'quagga'

class Scanner extends Component {
  componentDidMount() {
    Quagga.init(
      {
        inputStream: {
          type: 'LiveStream',
          constraints: {
            width: 640,
            height: 320,
            facingMode: 'environment',
          },
        //   area: { // defines rectangle of the detection/localization area
        //     top: "10%",    // top offset
        //     right: "10%",  // right offset
        //     left: "10%",   // left offset
        //     bottom: "10%"  // bottom offset
        //   },
        },
        locator: {
            halfSample: true,
            patchSize: "large", // x-small, small, medium, large, x-large
            debug: {
                showCanvas: true,
                showPatches: false,
                showFoundPatches: false,
                showSkeleton: false,
                showLabels: false,
                showPatchLabels: false,
                showRemainingPatchLabels: false,
                boxFromPatches: {
                    showTransformed: true,
                    showTransformedBox: true,
                    showBB: true
              }
            }
        },
        numOfWorkers: 4,
        decoder: {
            readers: ['code_128_reader'],
            debug: {
                drawBoundingBox: true,
                showFrequency: true,
                drawScanline: true,
                showPattern: true
            },
        },
        locate: true,
      },
      function(err) {
        if (err) {
          return console.log(err)
        }
        Quagga.start()
      },
    )
    Quagga.onDetected(this._onDetected)
  }

  componentWillUnmount() {
    Quagga.offDetected(this._onDetected)
  }

  _onDetected = result => {
    this.props.onDetected(result)
  }

  render() {
    return <div id="interactive" className="viewport"/>
    }
}

export default Scanner
/```

[vigneshsithirai]

@lampsbr In my case iPhone 13 working, but only for iPhone 14 and for some of Samsung S series not working

[ericblade]

My guess would be that it's autoselecting a camera that is not suitable for use.

I unfortunately do not have a device to try this with, but I don't have any complaints from users of my own app, which does allow the user to select which camera device to use in the constraints.

[vigneshsithirai]

@ericblade Your sample app is also not working on the iPhone 14.

If possible, could you please share the sample code for user to select device camera.

[vigneshsithirai]

@ericblade Any update regarding issue that scanning from iPhone 14?

[ericblade]

@vigneshsithirai per this bug report, which Apple considers fixed, but it's clearly not, using facingMode: 'environment' on iOS 16.4+ gives the ultrawide camera, which is most definitely an error for barcode scanning solutions, and honestly probably nearly every other use case as well.

Second to last comment in that thread seems to provide a method for dealing with it, however in my opinion, it's quite unstable -- using the device constraints in WebKit at this point, is simply asking for trouble.

This is at least the second time that I know of, that Apple messing with how constraints operate, has completely broken nearly every web app in existence that uses the camera. And both times they have completely failed to understand why what they did was bad. It won't be the last time, either. Now, the constraint system is actually pretty bad in and of it's own, soooooooooooooooo it's probably best to write a selector, and have the user actually select it..

You might try removing the width and height from your constraints, though, and maybe it'll work, considering that this report #396 is that only having facingMode: environment seems to leave the most recent poster with a workable camera that also includes autofocus.

This init() block is looking for the user to provide either a cameraId or a facingMode

        Quagga.init({
            inputStream: {
                type: 'LiveStream',
                constraints: {
                    ...constraints,
                    ...(cameraId && { deviceId: cameraId }),
                    ...(!cameraId && { facingMode }),
                },
                target: scannerRef.current,
            },
            locator,
            numOfWorkers,
            decoder: { readers: decoders },
            locate,
        }, (err) => {
            Quagga.onProcessed(handleProcessed);

            if (err) {
                return console.log('Error starting Quagga:', err);
            }
            if (scannerRef && scannerRef.current) {
                Quagga.start();
                if (onScannerReady) {
                    onScannerReady();
                }
            }
        });

though, actually, this is what i'm using on my production site

                    constraints: {
                        width: {
                            ideal: 1920,
                            min: 640,
                        },
                        height: {
                            ideal: 1080,
                            min: 480,
                        },
                        ...(cameraId && { deviceId: cameraId }),
                        ...(!cameraId && { facingMode: { ideal: 'environment' } }),
                    },

If the user has a cameraId store in their preferences, then we init with that, otherwise we init with facingMode: { ideal: 'environment' }

The application runs this to get a list of available cameras

async function doCameraEnumeration(dispatch: Dispatch) {
    const { CameraAccess } = Quagga;
    const videoDevices = await CameraAccess.enumerateVideoDevices();
    dispatch(receiveVideoDevices(videoDevices));
}

and presents the data received to the user in a drop-down box to select which device they want. It then stores the ID of that device in the user settings, and uses it the next time they open the camera.

[vigneshsithirai]

@ericblade Still I am facing the same issues. Is there any update from Apple side?.

Thanks.

[ericblade]

@ericblade Still I am facing the same issues. Is there any update from Apple side?.

Thanks.

I'm not aware of anything. Providing a specific hardware device ID seems to work for everyone, regardless of OS, and I don't have anything running modern iOS on hand to make any investigations into how it handles constraints. Sorry :| :|