Skip to Content

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 🙂

Please provide your suggestions to improve this API further.

Happy Coding 🙂

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

  1. 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 🙁 .

To report this post you need to login first.

5 Comments

You must be Logged on to comment or reply to a post.

    1. Mahesh Z Post author

      Yes Ajay , I tried it with many devices but it works better with latest devices(Not all the times though 🙁 ). If its not able to decode , it gives error, decoding format not supported. But it was just a trial for those who want’s to achieve this but not familiar with cordova 🙂 .

      (0) 
      1. Ajay Nayak

        Exactly !

        The decoding JS library are too heavy to run in browser , there is a way we can fix .The trick is to know your customer’s barcode method(standard) and only decoding that one it will reduce the amount of processing and we will get a nice response as well .

        Now webrtc is relatively new and with time it will improve a lot and also the browser capability .I do’t know yet but it gives the SAP UI5 core development team one more new feature to work for 🙂

        (0) 

Leave a Reply