Scanning barcodes with built-in mobile camera and HTML5

While my previous post focused on scanning barcodes and QR-codes from mobile web applications using third-party apps, in this article I am going to show some pure JavaScript alternatives utilizing the library QuaggaJS. I chose QuaggJS because it is well documented and there are examples for multiple operation modes - in particular it seems to be the only library supporting live-detection of barcodes in the camera's live stream, while the others need still images. Unfortunately, QuaggaJS currently does not support QR-Codes, but similar approaches are possible using other code readers in JavaScript: e.g. the jQuery plugins WebCodeCamJS and Barcode-Reader.

So let's take a look, at how we can scan barcodes with the built-in camera of a smartphone or tablet with pure HTML5 and JavaScript

HTML5 File API

The most simple way to scan a barcode with JavaScript works by capturing a picture with the HTML5 File API (see a brief introduction here and compatibility overview here) and decoding it afterwards. This File API basically allows to access files from the client device without uploading them to the server. Clicking on a corresponding button on a mobile device will open a popup letting you choose, where to get the file from - including the camera. Selecting the latter will open the regular camera app. After the picture was taken, it will be given back to the JavaScript for further processing. Now it will be upto the code reader to find and read the code in the picture - here is an example using QuaggJS.

The most important advantage of this approach is that moste modern Browsers support the File API and it works very well. It is also important, that the native camera app is used to take the picture: it is reliable and surely easy to use for every user. On the other hand, the camera takes quite a long time to start (depending on the mobile device) and there are many taps needed for the whole procedure. The taken picture also needs to be sharp and of a good quality. If not, the reader will not be able to read the code and the user will have to take another picture.

HTML5 getUserMedia API

Using the getUserMedia API a web application can gain access to the live stream of the built-in cameras. Unfortunately, it is far not that well supported by browsers, as the File API (see compatibility table). But if supported by the browser, it makes it possible to embed the live video stream of the camera into the web page at any place and even to control it: switch front and back camera, adjust the brightness, etc. Thus, the user will not need to leave the app to scan the code - see example with QuaggaJS. The main advantage of QuaggaJS at this point is, that it performes a live search for barcodes on the moving picture, so the user can aim at the code directly seeing the result. Other libraries just use the live stream as a viewfinder to take a picture for later recognition.

I think, using the getUserMedia API is the best approach from the point of view of usability. However, there are some technical difficulties. The main one is the lack of autofocus for video via getUserMedia on a lot of mobile devices. Without autofocus the barcode will always appear blurred because it is much closer, than most objects you would take pictures of normally (and thus out of the default focus). In this case, it is simply impossible to read the barcode through the getUserMedia API. Thus, this method only works well with recent top-level smartphones and tablets. The browser support keeps improving though, so, for example, the autofocus recently started working with my LG G3 on Chrome.

Conclusion

At the bottom line, there is no all-round perfect way to make your mobile web app read barcodes via built-in camera of a tablet or smartphone with pure HTML5 and JavaScript. But you might well find a solution matching the needs of your specific app. Here are the choices I've evaluated in the latest posts:

• A custom virtual keyboard app with a built-in scanner (currently on android only)
• A dedicated scanner app with an API based on special URLs (currently on android only)
• A JavaScript barcode reader library and the HTML5 File API (works on PCs and mobiles of any flavour)
• A JavaScript barcode reader and the getUserMedia API (works on top-level smartphones and tablets starting from 2014)
• A separate bluetooth barcode scanner (see previous post)

My personal oppinion is, that the File API is currently the most stable way to read a barcode with the built-in camera - it is similar to what native apps would do and offers decent user experience. The getUserMedia API, on the other hand, is the most fancy way to do it: thus, I'm looking forward to getUserMedia getting better in the coming years. Finally, if it comes down to speed, there is no other choice, than using a dedicated barcode scanner (for example a small bluetooth device) - all the methods using the built-in camera are not suitable for scanning multiple codes in a row.