Barcode Scanner in SAPUI5 without Cordova

[mahesh_z]

Hello ,

Recently, Many of our customers are asking about barcode scanning feature within SAPUI5, but the application should be a browser based. No Native feature or platform dependency. I came across one of the HTML5 based API's which serves similar purpose without any need of Cordova Integration. On Desktop , it gives you an option to choose an image which contains Barcode and on mobile device , you can either choose an image from gallery or Take a picture. Basically this API is dependent on HTML Media Tag. I have attached some screenshots with this blog. I hope this will help you to achieve this really IMP functionality in your UI5 App.

Sample Project is available on GITHUB : " MaheshZ87/BarCodeScanner · GitHub"

Apologies for Layout probs as its just a demo project I had created giving more importance to actual functionality :smile:

Please provide your suggestions to improve this API further.

Happy Coding :smile:

Thanks ,

Mahesh.

Note : This has been tested with following devices :

Mobile Handset	OS Version	Output
Red Mi 1S	Anrdoid  JellyBean	For Sample images from photo gallery of mobile, it worked fine.
Motorolla G2	Anrdoid Lollypop - 5.0.2	For Sample images from photo gallery of mobile, it worked fine. When I tried camera option, it stared camera however I was not able to take picture. Hence I tried it other way round. I took a picture of a barcode and used choose file option form gallery where the picture was stored. It gave me the correct barcode of the image.
Xiomi Note 4G	Anrdoid KitKat	For Sample images from photo gallery of mobile, it worked fine. When I tried camera option, it stared camera with video option. I tried my luck again with previous approach. I took a picture of a barcode and used choose file option form gallery where the picture was stored. It gave me error for the first time and then I again tried it by keeping the picture as stable and clear as possible. In my third attempt, It gave me the correct barcode of the image.
Samsung Galaxy S2	Android Platform 2.3 ( GingerBread )	App started running however when I click on choose file option, it directly opened camera by giving some error message for flash. I took the picture however it’s not giving me an option to choose file from gallery.
iPhone 6	iOs 8.1	Its working for all possible options. I can take a picture from app itself and it will be used for scanning. Most of the times, It gave me the correct barcode in the first attempt itself. For some sample images which are not clear or barcodes which were not that clear, it gave me the error but rarely.
Sony Xperia C3	Android 4.2.2 Jelly Bean	For Sample images from photo gallery of mobile, it worked fine. With camera option, I took the picture and it gave me correct barcode(For a Fanta Bottle J).Then I took a picture of a barcode and used choose file option form gallery where the picture was stored. It gave me the correct barcode of the image again. So worked well with this as well.

My Observations :  This API works well with clear images and proper barcodes. With Latest Smartphones , it works well however compatibility with older devices is still an issue :sad: .