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