HTML Barcode Scanner

Have you ever tried to type in a long number on your cell phone or simply enter the number of your membership card into a web application?

This might be a time consuming and error prone task which can be avoided by using barcodes.
This is nothing new. Many solutions exist for reading barcodes with a regular camera, like zxing, but they require a native platform such as Android or iOS.

Building your own application in two different platforms its not the easiest thing to do because it requires a lot of effort to develop and maintain in parallel. Of course there are cross platform mobile SDKs that give you the flexibility – and some of them are quite exciting like Phonegap/Cordova.

The problem is that you will need to learn and invest on a new API which might lead to unfortunate results.

If let’s say you have build and invest a lot of know-how and source code in a technology that will not evolve, then your company will be exposed to a big risk.

If we had to gather up all the requirements needed in order to build an application that uses the device camera to scan barcodes, we would probably come up with the following aspects:

– It must be able to use the mobile’s/tablet’s camera to scan barcodes quickly enough.

– It must be developed in one platform (at least the 95% of it) in order to avoid duplicate work and maintenance.

– It must be developed with a widely approved technology that minimizes the possibility to be discontinued or having everlasting bugs.

After thoroughly examining the related technologies and the requirements that I had, I concluded on 2 different solutions and each of them had it’s own strengths and weaknesses.

Solution A. Pure HTML5.

This is a very promising solution since it is all implemented in HTML. The HTML5 specification gives to the developer a very powerful toolset that can even gain access to the device camera. Hopefully there are people that have took advantage of it and have already implemented a javascript library that actually does the work.

The best implementation I have come across so far is made by Christoph Oberhofer and it is named quaggaJS. The specific library although it feels a bit immature  works quite impressive on specific devices and browsers. Those that are interested may have a look on http://serratus.github.io/quaggaJS/ which is the original web site. You can also read a nice article in Mozilla about it here

https://hacks.mozilla.org/2014/12/quaggajs-building-a-barcode-scanner-for-the-web/ .

After testing it for a while on android I realized that it still has some issues important enough to be a barrier for production environment.
Some of them are:

– It fails to use camera’s autofocus on some browsers. On Android I managed to make it work in Firefox but I had no luck with chrome.

–  It’s a bit slow on scan. The main requirement of the project is to make it easier to scan than typing. If it takes more time to scan the people will prefer to type.

Solution B. HTML & Native app hybrid.

This solution is a bit hard to grasp the first time you hear about but it makes sense after a while. The basic idea is to write the whole application business logic in pure HTML and leave only the scanning part for the native app. Then in order to activate the scan ability of you phone you can click a link of a URL. The specific url is hooked by a native android/ios application where it’s only scope is to scan and return the value to the caller.

If you don’t know how to open a native app from browser in android you can read here whereas  those that want to do in ios should read here.

The tricky part here is returning the scanned value back to browser since there is an obvious isolation between them. Unfortunately the cookies cannot help you since the native application’s cookies cannot be accessed by the caller browser. So what is left?

The solution that I though was to have browser open the app and at the same time passing a unique token code. Then, after the native app scans the barcode it will make an http post to a web service passing as parameter the token and the value scanned. After that, the mobile app will close automatically and return focus to the caller browser. At the same time the browser should poll the same web service and actual ask it if there is available any value with the specific token.

Here is a diagram describing the process flow.

With this technique, when the value arrives from the mobile app to the web service, the web application will learn about it and display on GUI.

You might think that this is too complicated but we have actually managed to implement a full operational proof of concept with a colleague of mine in a few hours.

Here is a commercial app that more or less does the same.

3 thoughts on “HTML Barcode Scanner

  1. I am often to blogging and i really appreciate your content. The article has really peaks my interest. I am going to bookmark your site and keep checking for new information. starnfc

Leave a Reply to blog Cancel reply

Your email address will not be published. Required fields are marked *