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
- 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
- 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);
- Place it in the project directory (for example, in the
lib
folder)
- Add dependencies to
manifest.json
insap.ui5.resources.js
- 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
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.
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
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.
Never mind, I was accessing from localhost, after switching this its working fine now.
Thanks.
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
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:
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
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
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
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,
Great blog, thanks for sharing!
Unfortunately I cannot dowload the builded code from provided UNPKG URL, could you please check?
Thanks,
Robin
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
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 🙂
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
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.
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.
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
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.
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.
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.
Any idea why it doesn't read the 2D Barcodes in browser?
It is only working for QR Codes
Thanks,
Abhi
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
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
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