The trouble with pure web applications is, that their client-side code - mostly written in JavaScript - runs within sandboxes and cannot access any hardware APIs directly for security reasons. But there are numerous ways, how mobile web applications can benefit from the rich set of sensors built into modern smartphones and tablets. Im my special field of interest - business web applications - a mobile app could use the camera to scan a barcode on a product's label or a document to quickly look it up in the data base. Looking around for possible solutions, I've come across several possibilities, each using a different technology and thus, having their own benefits and drawbacks:
- 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)
In this article, I will briefly introduce those approaches, that work with the help of third-party mobile apps and barely need any coding. In the next article, we will take a brief look at pure JavaScript methods and the respecitve libraries.
Custom on-screen keyboard with a built-in scanner
Perhaps, the easiest method to start with, is an app called "Barcodescanner Keyboard" - a custom keyboard for Android devices with built-in support for reading barcodes via the main camera. There is a free add-supported version available on Google Play and the full version is available at merely 3,59€. The app works just like any other on-screen keyboard, but it has a separate button to activate the camera. Once a barcode was read, it is "typed" just like regular keyboard input. Thus, you can easily use it with any app, web page - anywhere. No need to code anything!
The downside of this approach is, that you still need to tap on an editable field, let the keyboard pop up, press the camera button on the keyboard, etc. It is not a one-click solution. Apart from that, you have to ensure, the user uses exactly this keyboard. Otherwise your app won't have any barcode support. Finally, the actual keyboard is clearly not one the best. It does support different languages, but it looks pretty ugly an works far not as smooth as the default android keyboard, for example. Of course, being a keyboard is not the primary focus of the app, but you will have to keep in mind, that the actual typing will get more cumbersome.
Unfortunately, I have not found such an app for iOS, so this idea only works for Android at the moment.
Special scanner app
Another fairly simple approach - also utilizing third-party applications - is based on the app called "Barcode Scanner". This is a dedicated scanner app and a very good one. It offers a special API for scanning from web applications. All you need to do, is add a link or button to your application, with a special URL. Clicking on it will open the scanner app, just like clicking on a facebook-link opens the facebook app on your smartphone. The URL has different parameters including the desired barcode types and a callback URL, which will get opened once a barcode is read. The barcode is then passed to the callback URL as one of the parameters.
Generally this works very well. The scanner app gets started very quickly and works great, but you cannot control the way the callback URL is opened: it will probably get opened in the default browser, no matter which browser you used initially. This is especially uncomfortable, if you were using webview or kiosk mode (a Link to your web app from the home screen) - after scanning the barcode you will get redirected to a browser, not the orignal webview instance.
Unfortunately, the scanner app seems not to be available on iOS anymore. However even the original iOS-Version used a different format of the URL to call the app than the android one. This makes this approach not really universal. On Android you also need to take into account, that pressing the back button will direct you to the scanner app first and only then to the page previously viewed.
Conclusion
Reading barcodes from a mobile web application can be really simple thanks to some helper-apps available on the market. However, that approach forces to install a specific app on the target mobile device. Additionally, there are far less options on iOS than on android. I have not looked for windows mobile apps specifically, but I've also not come across any of them while searching - I assume, there are very few or even none.
From my personal point of view this type of camera integration will only work if your project is meant to run on a specific (android) device and you are sure to have a lot of control over what is installed there and what the user actually uses. A suitable example would be a dedicated mobile device for scanning tickets or some other kind of documents. In all other cases, using a JavaScript scanner library is clearly the better solution.
