Build an iphone/android barcode scanner app using php and mysql

Last week I had a request for building an iphone and android app where you would scan a product barcode in the warehouse and you will be shown the details of that product from the client warehouse database.

Now the challenge was to build the app using just html/javascript/php and mysql. HTML 5 does allow you to capture both audio and video now (http://www.html5rocks.com/en/tutorials/getusermedia/intro/) but the problem was with decoding the barcode picture at the server. Doing the work server end is that once the captured image is sent by the mobile to the server and the server has decided that the image is too low quality to decipher the whole process becomes a bit slow and unusable.

I had a google around for a barcode app that will send a decoded barcode to my webapp. I came across pic2shoppro which will do just this. The good thing about this app is that your webapp can link direct to the app on your phone using a special protocol url.

So on my web page I have an anchor tag which is formated as follows.

p2spro://scan?formats=EAN13,EAN8,UPCE,ITF,CODE39,CODE128,CODE93,STD2OF5,CODABAR,QR&callback=http%3A%2F%2Fwww.mydomain.co.uk%2Fscan%2F%3Fbarcode%3DCODE%26type%3DFORMAT

Clicking this link in a browser on my mobile device with pic2shoppro installed will start the pic2shoppro camera app allowing me to scan the barcode. The scanner is very accurate and quick and then calls back to the url below.

http://www.mydomain.co.uk/scan/?barcode=CODE&type=FORMAT

Where code is the barcode and FORMAT is the format of the barcode ie, EAN13

My webapp then searches the database and returns the product information. All in all the coding took me about 4 hours as I used botostrap 3 for the first time which I loved. Check out the screen shots below.