Javascript Barcode Scanner: Empfehlungen?

[drsoong]

Hallo,

ich schaue mir gerade an, inwieweit ich einen Barcode Scanner in einer APP (PWA oder etwas nativer per Webview oder ähnlichem in der Android. iOS App) realisieren kann.

Da scheint es ja einiges zu geben, was allerdings auch bisweilen betagt ist oder zumindest so wirkt.

Ich habe mal quaggaJS angetestet und erste Ergebnisse erzielt (Einsatz in einer PWA via Smartphone getestet). Allerdings ist diese Lösung seit 2014 anscheinend nicht mehr weiterentwickelt worden und ihre Doku ist dürftig.

Kann mir da jemand etwas Aktuelles empfehlen. Es muss nicht unbedingt kostenlos sein...

[protestix]

Das Thema hatten wir schon mal, siehe https://www.php.de/forum/webentwickl...te-integrieren und auch in der Forensuchen mit "barcode scan" findest du Themen.

Ich hatte damals auch ein wenig recherchiert und quaggajs scheint so was wie state of the art zu sein, Das es seit 2014 keine Änderung gab tut der Sache eher gut, da wohl relativ fehlerfrei, aber quaggajs ist auch ein Batteriefresser, daher sollte man ein Zeitlimit in Form eines timeout setzen und quaggajs damit abschalten, damit es nicht die ganze Zeit läuft.

[drsoong]

Wollte nochmal kurz nachschieben, dass quaggaJS "a pain in the arse" ist.

Die miserable Doku hatte ich ja schon erwähnt. Bis da überhaupt mal irgendein Barcode erkannt wird, musste ich endlos recherchieren.

Nur über meine Desktop Kamera konnte hin und wieder ein Code erkannt werden, mein Mobiltelefon erkennt meistens gar nichts und wenn das Falsche.

Ansonsten gibt's da noch einige Ungereimtheiten, deren Lösung in den Sternen steht. Z. B. das richtige Aus- und Einschalten des Scanners.

Der Autor sagt bei Fragen im fragwürdigen Englisch letztlich nur "No idea.".

Für einen echten Einsatz ist die Lösung nicht zu empfehlen.

Ich fürchte, da muss ein kommerzielles Tool ran mit technischem Support.

[protestix]

Geht denn die Demoseite bei dir?
https://serratus.github.io/quaggaJS/...w_locator.html
Du musst ein wenig mit den Einstellungen rumspielen, da jede Kamera eine andere Auflösung hat.

[drsoong]

Geht denn die Demoseite bei dir?
https://serratus.github.io/quaggaJS/...w_locator.html
Du musst ein wenig mit den Einstellungen rumspielen, da jede Kamera eine andere Auflösung hat.

Bei Code 128 geht die Demoseite relativ schnell, bei 93 dauert es schon sehr lange bis da was erkannt wird (Samsung Galaxy S10).
Mein eigener Versuch bringt ja auch hin und wieder Ergebnisse.

Das Doofe ist nur, dass man so ein Herumgefummel keinem User zumuten kann. Die hauen mir die App um die Ohren.

Wenn ich das mal mit der APP "Yazio" (mit der zähle ich meinen Kalorienverzehr) vergleiche: Wenn ich da die Kamera auch nur ein 10-tel Sekunde über einen Barcode halte, poppt sofort
die Kalorieninfo auf. Ganz so endgeil muss es ja nicht laufen...aber ein bisschen mehr Performance muss schon sein. Ich poste gleich nochmal meinen Code....

[drsoong]

So hier nochmal der Code, falls da jemand Lust hat, sich das anzugucken....

var scannerResult = document.getElementById('scannerResult');


        var last_result = [];
        var counter = 0;
          if (Quagga.initialized == undefined) {
          Quagga.onDetected(function (result) {
            var numCodeReads = 20;
            var last_code = result.codeResult.code;
            console.log('Last Code' + last_code);
            last_result.push(last_code);
            counter++;
            $('#counter').html(counter);

                if(last_result.length > numCodeReads) {
                   code = order_by_occurence(last_result)[0];
                   Quagga.stop();
                    console.log(code);
                    scannerResult.innerHTML = code;
                    last_result = [];
                    counter = 0;
                }

          });
          }

        Quagga.init({
        inputStream : {
        name : "Live",
        type : "LiveStream",
        numOfWorkers: navigator.hardwareConcurrency,
        constraints: {
            width: 320,
            height: 320,
            facingMode: "environment"
        },
        target: document.querySelector('#barcode-scanner')    // Or '#yourElement' (optional)
        },
        decoder : {
        readers : ["code_128_reader","code_93_reader","ean_8_reader","code_39_reader","code_39_vin_reader","codabar_reader","upc_reader"]
        }
    }, function(err) {
      if (err) {console.log(err); return }
      Quagga.initialized = true;
      console.log("Initialization finished. Ready to start");

      $('#qStart').click(function () {
        Quagga.start();
      });


      });



      function order_by_occurence(arr) {
            var counts = {};
            arr.forEach(function(value) {
                if(!counts[value]) {
                    counts[value] = 0;
                }
                counts[value]++;
            });

            return Object.keys(counts).sort(function(curKey,nextKey) {
               return counts[curKey] < counts[nextKey];
            });
        }

Und hier der HTML Teil

<div id="deviceSelect" style="padding: 50px;">
    </div>
    <p id="counter">#</p>
    <input type="button" id="qStart" value="Start">
    <p id="scannerResult">--Result--</p>
    <div id="barcode-scanner"></div>

[Zeichen32]

Also ich benutzte in einer Angular App die folgende Lib und bin damit ganz zufrieden: https://github.com/zxing-js/ngx-scanner

Diese nutzt soweit ich weiß die folgende Lib im Hintergrund: https://github.com/zxing-js/library

[protestix]

 
  readers : ["code_128_reader","code_93_reader","ean_8_reader","code_39_reader","code_39_vin_reader","codabar_reader","upc_reader"]         }

Hier sollte nur der Code aufgeführt werden, den du lesen willst, je mehr du aufführst desto mehr Rechenzeit vergeht, weil nacheinander alle codes durchprobiert werden. Ausserdem ist das unnütz, denn. z.B. Code 39 wird wohl nur von der kanadischen Post verwendet, was willst du also damit?

 
 numOfWorkers: navigator.hardwareConcurrency

Anzahl der Prozessorkerne - Hier kannst du 4 fest einstellen, was auch Default ist.

Bitte lese dir Anleitung durch, bei richtiger Einstellung für die User, hast du einen immensen Speedgewinn.

[protestix]

Zxing und Quagga bauen wohll auf dem selben Code auf, Quagga ist da wohl eine Weiterentwicklung von zxing gewesen, soweit ich mich erinnern, kann, ist schon eine Weile her, das ich mich mit dem Thema beschäftigt habe. Es gibt auch ein Fork zu quaggajs, unter https://github.com/ericblade/quagga2

[drsoong]

Hm, muss gerade mal weg. Dieser "Fork" sieht dem ohne "2" zum verwechseln ähnlich - auf den ersten, kurzen Blick...

Ich habe gerade nochmal mit der Demo Site rumgespielt und diverse Einstellungen getestet. Evtl. gibt es ja ein Problem mit einer Chrome , Android oder Smartphone Version.

Ich erziele so gut wie gar keine positiven Ergebnisse mit dem Tool. Aufgeben tue ich aber nicht...Morgen wieder....

[drsoong]

So, habe mir jetzt zxing aus #7 angeguckt. Vorteile:

1. Viel klarere Codebeispiele, unkompliziert
2. Bessere recht schnelle Erkennung
Hier muss man allerdings begreifen, dass die Demos teilweise auf Single Detection eingestellt sind. Man muss also Start, Erkennung, Reset, Start usw. machen.
3. Funktioniert mit Smartphone und Desktop Kamera


Also, Quagga haue ich jetzt erst mal in die Tonne...

[drsoong]

Hier nochmal ein weiterer Userbericht:

Mit der ZXing Lösung bin ich hoch zufrieden. Der Scanner in der 1D Variante reagiert sehr schnell und genau. Und das sogar im Halbdunkeln ohne Smartphone Lampe.

Cool!

[drsoong]

So, jetzt habe ich doch nochmal einen Rückschlag hier. Der nächste Schritt wäre gewesen, dass die den Scanner (zxing) nutzende PWA im standalone mode dem Startbildschrim (Android) oder dem Homebildschirm (Apple) hinzugefügt wird. Wer es nicht schon weiß, kann ja mal raten, wo das nicht funktioniert:

Ja, genau bei Apple mal wieder. Die haben einfach keinen Bock Standalone Web Apps voll zu unterstützen.

Wer sich dafür interessiert kann ja mal hier lesen, dass das mindestens seit 1,5 Jahren nicht klappt.
https://bugs.webkit.org/show_bug.cgi?id=185448

Da muss ich mir wohl nochmal was anderes suchen bzw. das Ganze doch in eine "native" App packen. So'n Sch... aber auch.