Barcode Erkennung im Browser mit JavaScript

Robuste, portable und performante Bildverarbeitung zur Erkennung von Barcodes in Browsern als Alternative zur nativen App.

Customer Self-Service Apps auf Smartphones können durch Benutzung von Barcodes die fehlerfreie Erfassung von Bestellungen vereinfachen und beschleunigen. Jedoch ist die Entwicklung und Wartung von Applikationen fĂŒr die verschiedenen Plattformen (iOS, Android, etc. ) teuer oder die Service Infrastruktur zur Anbindung im Hintergrund nicht vorhanden.

Aber durch den Einsatz von Frameworks wie PhoneGap kann einerseits von der unten liegenden GerĂ€teplattform abstrahiert werden, andererseits unterstĂŒtzen diese Werkzeuge die Entwicklung mit Web-Technologien wie Html5, JavaScript und CSS (und damit oft die Wiederverwendung von im Unternehmen bereits vorhandenem Know-How).

Es stellt sich nun natĂŒrlich die Frage, inwiefern diese Technologien zur Lösung von Performance-kritischen Problemen geeignet sind. Eines dieser Probleme ist z.B. die Bildverarbeitung (Computer-Vision), die zum Erkennen eines Barcodes in einem Bild notwendig wird.

Ggf. mĂŒssen zum Laden externen Bildquellen (Domain nicht lx-networking.de) die Sicherheitseinstellungen des Browsers angepasst werden. Die Same-Origin-Policy der Browser lĂ€sst zwar das nachladen der Bilder von einer anderen Domain zu, jedoch können nur Bilddaten der selben Domain per JavaScript ausgelesen werden.

Die derzeitige Implementierungen kann nur EAN13 (ISBN, UPAC) Codes erkennen. Da der Code nur als Proof-of-Concept dient, wurde die Verarbeitung der PrĂŒfziffer ausgespart. Die Bilddaten werden aus einem Canvas-Element ausgelesen und dann verarbeitet. Die einzelnen Verarbeitungs-Filter sind im Moment nicht optimiert. Dennoch ist die Verarbeitungsgeschwindigkeit auch auf mobilen GerĂ€ten (iPhone 4, iPad 2, etc) beachtlich. Die Erkennung eines Barcodes in einem Bild mit VGA Auflösung dauert weniger als 500ms. Da keine exotischen ECMAScript/JavaScript Sprachfeatures nötig sind, funktioniert der Code in IE8/9, Firefox, Safari, Android und iOS ohne Weiteres.

Der Quellcode ist unter https://bitbucket.org/jrosskopf/balkenkode unter der MIT-Lizenz also OpenSource zu beziehen. Bei ÄnderungswĂŒnschen, Erweiterungen oder Anbindung an GerĂ€tefunktionen stehen wir Ihnen gerne zur VerfĂŒgung. Kontaktieren Sie uns unverbindlich unter info@lx-networking.de