Skip to Content
Technical Articles
Author's profile photo Andrey Danilin

Native JS (zxing) scanner in SAPUI5

SAPUI5 has a module that allows you to scan Barcodes (1D, 2D) sap.ndc.BarcodeScanner, but it has a limitation: this module uses native library that is only available through the SAP Fiori Client (mobile application for Android/iOS).

If it’s needed to use such functionality in Web-browser, we have to use external JS-Modules for scan and decode the codes, such as:

*there are many open source project in github with such functionality, i will list only few of them

  • QuaggaJS (1D Barcodes);
  • Quirc (QR Codes);
  • ZXing-JS (Multi code reader).

The last of them is best choice if you have to work with different formats (Barcodes, QR codes, 2D Codes (PDF417, DataMatrix …)) – that’s why I choosed this library to integrate it in my SAPUI5 Application.

ZXing features

GitHub repository

  • Automatically detect the type of code and decode it;
  • A large list of supported formats (EAN-8, EAN-13, Code 39, Code 128, ITF, RSS-14, QR, Data Matrix, PDF 417).

Adding to SAPUI5 App

  1. Dowload the builded code from UNPKG (or add it to the dependency in package.json, but in this case you need to build the project from sources);
  2. Place it in the project directory (for example, in the lib folder)
  3. Add dependencies to manifest.json in sap.ui5.resources.js
  4. Use zxing features! (global object ZXing)

Working with ZXing

To start the scanning process in the application, you will need:

  • HTML Video element (for displaying a video stream from a device);
  • ZXing initialization – create the decoder object – you can choose the mode: Barcode, QR Code, PDF417, MultiFormat, …;
  • Select the video source (it can be one of the device camera) – use the method of ZXing listVideoInputDevices to get the list of available devices;
  • Star searching and decoding – using decodeFromVideoDevice;

The process of analysis and decoding will be looped, if the format is recognized successfully, the “Scanned” callback will be called with the decoded text and code type {text: ‘String’, format: Number}.

Example of control

The best way to use ZXing in your SAPUI5 Application is create a custom control with all needed elements.

I created a example of such project GitHub

There can find the example application with custom control ExtScanner

(see “Readme.md” to get info about start and using this example)

Scan%20dialog

Scan dialog

Business case

Often a lot of data is encoded in barcode, such as UII, Date of manafacture, Part number, but only one part is important (for example UII), in this case additional processing of the decoded data may be required to accurately determine the UII from the code.

Example – PDF417:

PDF-417%20%28Example%29

PDF-417 (Example)

There the 3 groups of data with UII (group stated with (S)), Manufacture Number (started with (21P)), Part Number (started with (1P)).

I add the special decoder wich can return just UII data for PDF417 code or RAW data – this special function can be added to control (see example).

Notes

As described in ZXing documentation – this library use BigInt to decode PDF417 but it isn’t supported in some browser (Safary for example).

It was important to use PDF417 in Safary Mobile Browser, that’s why I extended the version 0.15.2 of ZXing-js with external library JSBI

So, decoding of PDF417 works also in Safary in my example, but it’s not latest release of ZXing-js.

 

Best Regards,

Andrey

 

 

 

 

 

 

 

 

 

 

Assigned Tags

      24 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Gowtham Arunachalam
      Gowtham Arunachalam

      Thanks Andrey Danilin , really interesting blog , when I tried this from Web ide its working fine , after deploying into SAP instead of camera input dialog is opening , I am not getting any listVideoInputDevices() after deployment , any suggestions on this please..

      Thanks.

       

      Author's profile photo Gowtham Arunachalam
      Gowtham Arunachalam

      Never mind, I was accessing from localhost, after switching this its working fine now.

       

      Thanks.

      Author's profile photo Andrey Danilin
      Andrey Danilin
      Blog Post Author

      Hi,

      great ) actually Input dialog will be oppened if the video devices are not available / blocked or JS error (can be checked in console).

      Best regards,

      Andrey

      Author's profile photo Mike Zaschka
      Mike Zaschka

      Hey Andrey Danilin ,

      thank you for this blog post and especially your github example project.
      I am also dealing with ZXing (Data Matrix and Code 128) right now and while stuff like QuaggaJS seems to have a better API, ZXing is far more powerful!

      Two quick questions:

      1. Is there any reason why you did go with version 0.15.2 (current one is 0.18.4)?
      2. How did you extend the library with JSBI?

      Kind Regards,

      Mike

      Author's profile photo Andrey Danilin
      Andrey Danilin
      Blog Post Author

      Hello Mike Zaschka ,

      i took part in extending ZXing-JS to add format PDF417 and it was in 0.15.2 - that's why I done this extending with this version (actually I wanted to add JSBI in the main release but other developers were opposed).

      To extend the library with JSBI you have to add this dependencies to source code and change all places with BigInt to JSBI.BigInt:

      a = BigInt('456') a = JSBI.BigInt('456')

      You can check my commit (branch feature/pdf417-reader-prod):

      https://github.com/Neasit/library/commit/467f468190708dd7b436cbf9e90e6f724b58e475

      Best regards,

      Andrey

       

      Author's profile photo Minh Tri Le
      Minh Tri Le

      Hi Andrey Danilin,

      Thanks for great help. I know IE is not a modern browser. How could we make it run on IE as I see the code uses ES6 a lot?

      Thanks.

      Tri

      Author's profile photo Andrey Danilin
      Andrey Danilin
      Blog Post Author

      Hi,

      Unfortunately IE can’t use the Media Devices such as  camera via API, so there are no way to work with it in IE.

      Best regards,
      Andrey

      Author's profile photo Ramya Chinnaswamy
      Ramya Chinnaswamy

      Hello Andrey,

      Thanks for this very useful blog!

      When I tested this solution in Iphone, I noticed some inconsistent behaviour, only the lower portion of the screen opens the camera and sometimes it opens up Input dialog. What could be reason for this behavior? Any device limitations or required versions to be checked in prior? Please advise.

      Regards,

      Ramya

      Author's profile photo Andrey Danilin
      Andrey Danilin
      Blog Post Author

      Hello Ramya,

      strange, as I mantioned, the version from my example have no limitation for using with iOS (Safary) - but the version of ZXing is not latest.

      On my iPhone it works correctly (iPhone 8, iOS 14.5.1)

      I published this app as a github pages - so you can check it:

      https://neasit.github.io/ui5_bar_scanner/webapp/index.html

      Best regards,

      Andrey

      Author's profile photo Ramya Chinnaswamy
      Ramya Chinnaswamy

      Hello Andrey,

      Thanks again for posting your reply with your app details in Github. I missed out CSS custom classes that I found in your app. After those additions, it is now working fine for me too... Cheers 🙂

      Regards,

      Ramya

       

      Author's profile photo R. Van Den Brandt
      R. Van Den Brandt

      Hi,

       

      Great blog, thanks for sharing!

      Unfortunately I cannot dowload the builded code from provided UNPKG  URL, could you please check?

       

      Thanks,

       

      Robin

      Author's profile photo Andrey Danilin
      Andrey Danilin
      Blog Post Author

      Hi Robin,

      it's opensource project (ZXing-js) and I can't change the build process.

      Anyway I updated the link to the ZXing "index.min.js" file.

      Best regards,

      Andrey

      Author's profile photo Vinicius Barrionuevo
      Vinicius Barrionuevo

      Hey, @Andrey Danilin

      Just so you know, since 1.92 sap.ndc.BarcodeScanner is being fully supported by (modern) browsers. A little late, but better late than ever 🙂

      Author's profile photo Andrey Danilin
      Andrey Danilin
      Blog Post Author

      Hi,

      great news 🙂

      As I see, there is used ported version of ZXing - it sounds great!

      One little thing, description for sap.ndc.BarcodeScanner is missing since 1.28 - so, we have to always check the source code to know how it works )))

       

      Best regards,

      Andrey

      Author's profile photo Paul Büttner
      Paul Büttner

      It's even ported now to the latest 1.84.* patch.

       

      Unfortunately following support it's not intended to be patched into 1.71.* as well.

      Author's profile photo Anshuman vats
      Anshuman vats

      Hello Andrey Danilin,

      Thanks for the blog, it helped a lot to setup the bar code reader.

      One of the issue that I am facing and can't seem to solve is that for some code it adds a leading zero to it.

      You can see in the attached image that I am scanning a barcode that doesn't start with zero but when it gets scanned the reader adds an 0 to the actual code

      Please let me know if you have some insights on this, it will be very helpful.

      Thank you, regards.

      Author's profile photo Andrey Danilin
      Andrey Danilin
      Blog Post Author

      Hello,

       

      as I see the multiformat decoder is work with such Barcode as a "EAN_13" (format 7)

      It can be reason of problem with leading 0.

      Maybe it's a bug in zxing library... maybe the new version will work corectly.

      Also if you are sure that you work with UPC-A - then you can just take 12 digit from end 🙂

       

      Best regards,

      Andrey

      Author's profile photo Anshuman vats
      Anshuman vats

      Thanks, you are right I did some research and found the same thing but unfortunately, I need multiple formats and this is a critical issue for me.

      Just as a work around as of now I am trimming first zero based on these conditions.

      if (result.text.length === 13 && result.text[0] === '0' && result.format === 7 && !result.rawBytes) {
           this.$emit('decode', result.text.slice(1))
      } else {
           this.$emit('decode', result.text)
      }
      Do you think there might be some edge cases that I might be missing here?
      Really appreciate your help.
      Thanks
      Anshuman vats
      Author's profile photo Andrey Danilin
      Andrey Danilin
      Blog Post Author

      It's seems ok, as a work around solutions but there are one problem - it's not resolve the main problem of determination of barcode type:

      if barcode have real EAN_13 encoding and have "0" as a first symbol then the encoded data will be incorrect.

      Did you try the actual version of ZXING? If this problem not resolved in new versions you can create issue in repo on github.

      Author's profile photo Anshuman vats
      Anshuman vats

      I did some research and had found out that the first character of EAN-13 symbolizes country code and if the first character is 0 then it's a UPC-A [12 digits].

      There is a 2-year-old issue about the same and the code has been merged but the issue is still open. Not sure what that means.

      Author's profile photo Abhinay Dogiparthi
      Abhinay Dogiparthi

      Any idea why it doesn't read the 2D Barcodes in browser?

      It is only working for QR Codes

       

      Thanks,

      Abhi

      Author's profile photo Jürgen Berndt
      Jürgen Berndt

      Hi Andrey,

      thanks for the great blog.

      I'm looking for a solution to place a focus area in the video stream to improve the scan results.
      In the latest ZXing library there is a method drawFrameOnCanvas which is supposed to support this requirement.

      I've tried several approaches, but I can't manage to manipulate the video stream.

      Have you ever tried something like this?

      Regards

      Jürgen

      Author's profile photo DHIRAJ BARNWAL
      DHIRAJ BARNWAL

      Thanks Andrey Danilin, great post!. I was going through the steps and tried to implement in my application and its work fine in webIDE.

      Now I am facing the below issue while deploying the app on fiori launchpad.

      1. ZXing.min.js file - unable to push the code from webIDE and it's throwing error in "class n". Could you please share the link to download the zxing.min.js file.

      2. I have deployed the code from se38 in sap system. But while running the app from fiori launchpad then throwing error in console "ZXing" not defined. In file ext.js.

       

      Could you please help me to resolve the above issue.

      Thanks in advance!

       

      Best regards,

      Dhiraj

      Author's profile photo Rakesh Kumar
      Rakesh Kumar

      Hi Andrey Danilin ,

      Does it support zoom-in/out feature when using camera for scan? Unfortunately it's not supported for iOS by standard sap library. Vinicius Barrionuevo 

      Thanks,

      Rakesh