Skip to Content
Technical Articles

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

 

 

 

 

 

 

 

 

 

 

12 Comments
You must be Logged on to comment or reply to a post.
  • 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.

     

    /
  • 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

    • 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

       

  • 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

    • 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

      /
      • 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

         

        /
        🙂
    • 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