Barcode Scanning for a web based application

August 20, 2020

In this article I will share some information about a recent barcode scanning implementation we did for a web based application for one of our clients.

Barcodes are nothing more than a machine readable form of data represented in the form of lines.  Nowadays, barcodes are an essential part of inventory management for a number of reasons. Firstly, saving time both in terms of data entry, and the automatic processing of the entries. Secondly, entry errors are reduced as the barcode scanning process has a very low error rate. Finally, barcodes help companies track the product across the entire production pipeline. Even after the product is shipped out, the company can track the product throughout its entire lifecycle.

Recently, we worked on a project for a client who wished to include barcode scanning capability in a personal health tracking software application. The required functionality was that the end-user could scan various food items and store the data in the applications web portal. This would allow the user to record their daily food intake conveniently, without wasting much time entering the data.

The first step in the implementation was a data import of standard food item barcodes, which we imported from an available data library. This gave us over 200,000 records of day-to-day food items of popular brands.

Since the users don’t typically own barcode readers, we required a solution that allowed the users to scan the barcodes using their personal electronic devices. Since most people carry mobile phones with a camera, we started looking into the option of using phone cameras as barcode readers.

Since we had a web-based application, it was preferable for us to use a client-side code library or plug-in. After evaluating a few possible options, we decided to use ‘QuaggaJS’ which is a JavaScript-based advanced barcode reader. ‘QuaggaJS’ can read various types of barcodes such as EANCODE 128CODE 39EAN 8UPC-AUPC-CI2of52of5CODE 93 and CODABAR.

‘QuaggaJS’ implements the following steps:

  1. Read the image and convert it into a binary representation
  2. Find the location and rotation of barcode
  3. Decode the barcode

We wanted to allow the users to scan barcodes using their laptop as well as mobile phones. We kept specific benchmarks about camera resolutions, and if a user’s laptop or mobile camera met those benchmarks, then they could scan the barcode. We also required an alternative solution for users with older mobile phones which did not have cameras that met the benchmark. We decided to let the user choose any of three options to enter a food on the portal:

  1. Live scan: using the mobile camera to scan the barcode
  2. File upload: upload an image of the barcode on the portal
  3. Manual entry: enter the barcode numerically

After entering the barcode, the user can look up various information about the item if it is in the library. The library includes valuable information such as calories, portion sizes, and nutritional content. Our goal was to make food tracking on the application very user friendly, and using barcode scanning we managed to provide the user a very quick and easy way to track packaged foods.

Feel free to contact us if you are interested in a similar implementation for your application.

Leave a Comment

Tags :

Category :