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

      15 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.