Attempting to scan ISBNs / book barcodes

[dkam]

Hi there - thanks for this great library!

I'm having trouble scanning book barcodes on my iOS device. It seems to be too zoomed out and out of focus if I move in. It works when using my laptop webcam though, but it could be zoomed in too. I'm currently importing via cdn.

Any tips for making this work on iOS?

It's currently live here: https://dev.booko.info/scan

Here's the existing code:

      <script src="https://cdn.jsdelivr.net/npm/@ericblade/[email protected]/dist/quagga.js"></script>
      <script>
        document.addEventListener("turbolinks:load", function() {
          Quagga.init({
              inputStream : {
                name : "Live",
                type : "LiveStream",
                target: document.getElementById("interactive"),
                  constraints: {
                      width: {min: 480},
                      height: {min: 480},
                      facingMode: "environment"
                  }
              },
              locator: {
                  patchSize: "medium",
                  halfSample: true,
                debug: {
                   showCanvas: false,
                   showPatches: false,
                   showFoundPatches: false,
                   showSkeleton: false,
                   showLabels: false,
                   showPatchLabels: false,
                   showRemainingPatchLabels: false,
                   boxFromPatches: {
                     showTransformed: false,
                     showTransformedBox: false,
                     showBB: false
                   }
              }},
              numOfWorkers: 2,
              frequency: 10,
              decoder: {
                  readers : [{
                      format: "ean_reader",
                      config: {}
                  }]
              },
              locate: true
            }, function(err) {
                if (err) {
                    console.log(err);
                    return
                }
                console.log("Initialization finished. Ready to start");
                Quagga.start();
                Quagga.onDetected(function(result) {
                  //alert(result['codeResult']['code'])
                  console.log("Found: " + result['codeResult']['code'] + " @ " + result['angle'])
                  if (result['codeResult']['code'].charAt(0) == '9'){
                    Quagga.stop();
                    window.location.href = "<%= @host %>" + result['codeResult']['code'];
                  }
                });
            });
          });
      </script>

        <div id='interactive' style='width:388; height: 488; border: solid red 1'>
        </div>

[ericblade]

I haven't seen a laptop webcam that was anywhere near high enough quality to manage to get it to read :O so you've definitely got an advantage over that on me :-)

I wish I could say some things to try, but I have zero experience with iOS devices, and no access to anything but a reasonably modern iPad to give anything a test with. My app only has one iOS user, as far as I'm aware, but I've received no feedback of problems.

FWIW, here's what my app uses

        Quagga.init({
            inputStream: {
                type: 'LiveStream',
                constraints: {
                    width: 640,
                    height: 480,
                    ...(cameraId && { deviceId: cameraId }),
                    ...(!cameraId && { facingMode: 'environment' }),
                },
                target: scannerRef.current,
            },
            locator: {
                patchSize: 'medium',
                halfSample: true,
            },
            numOfWorkers: 0,
            decoder: {
                // readers: ['qr-code-reader'],
                readers: ['upc_reader', 'ean_reader'],
            },
            locate: true,
        }, (err) => {

.. and yes, i am aware that my constraints block is probably not even valid, probably could use some work on that.

... I do find that accuracy for EAN/UPC/ISBN is .. often.. questionable.. some filtering and processing needs to be handled in the receiver to improve results.

[dkam]

Thanks @ericblade ! I'll keep experimenting.

[efedericomedina]

Thanks @ericblade ! I'll keep experimenting.

Hi dkam, did you manage to make use of the manual focus and zoom?, I am having kinda the same issue with the auto focus.

[ericblade]

Hi dkam, did you manage to make use of the manual focus and zoom?, I am having kinda the same issue with the auto focus.

@efedericomedina apis for handling focus are not presently available in any browsers that i'm aware of, though they might be up to experimental level now perhaps. zoom can be done with existing APIs, but i haven't looked into how to achieve that. I believe one of the samples in this archive does have a zoom example though