Introduction to several solutions of SAP ui5 using camera to scan barcode in PC browser and mobile device

Time:2022-5-14

The requirement described in the title of this article can be disassembled into two small steps to learn from the implementation idea:

  1. How to use JavaScript to call the camera of the machine (PC or mobile device);
  2. How to complete barcode scanning in the pop-up camera scanning window.

For the first step, there are too many solutions on the network. Jerry only shares several methods he has used and tested in the project.

For the second step, obviously, we don’t need to make wheels repeatedly. We can use sap in SAP ui5 control library ndc. Barcodescanner control, operate the camera to scan the barcode.

Contents of this article

How to use JavaScript to call the camera of the machine (PC or mobile device)

How to complete barcode scanning in the pop-up camera scanning window

How to debug SAP ui5 applications running on mobile phones on desktop computers

Why can’t the camera of the mobile phone be turned on when the sap ui5 application is running in the mobile browser

How to package SAP ui5 into Cordova application and add barcode plug-in

The following is the text.

Jerry’s previous official account article on the function of calling the device camera and taking pictures in pure JavaScript once introduced a solution to access the local camera based on webrtc API. Webrtc (WEB real time communication) is a group of APIs supported by modern browsers, which enables web developers to develop rich real-time multimedia applications only through pure JavaScript programming without learning the underlying knowledge of multimedia digital signal processing. Applications based on webrtc API do not need to download any additional browser plug-ins or extensions when running.

Code for local multimedia device detection using webrtc API:

navigator.mediaDevices.enumerateDevices().then(gotDevices);

Method enumeratiedevices uses asynchronous execution to enumerate all multimedia devices (including cameras) supported by the machine, and pass the result to the callback function gotdevices

Check the details of these listed multimedia devices in the debugger and find that they are consistent with those in my windows10 operating system:
Introduction to several solutions of SAP ui5 using camera to scan barcode in PC browser and mobile device

Introduction to several solutions of SAP ui5 using camera to scan barcode in PC browser and mobile device

When the web application including the above webrtc API call is executed for the first time in the PC or mobile browser environment, a dialog box will pop up asking whether the user grants the application access to local multimedia devices such as camera and microphone:

Introduction to several solutions of SAP ui5 using camera to scan barcode in PC browser and mobile device

As for how to use JavaScript to save the content in the current camera’s field of view as a picture, it has nothing to do with the subject of this article. For detailed steps, please refer to Jerry’s previous official account article: the function of calling the device camera and taking pictures with pure JavaScript.

Introduction to several solutions of SAP ui5 using camera to scan barcode in PC browser and mobile device

The above is the idea of web application calling local camera through webrtc API. Some friends will ask, if I develop with SAP ui5, where is the code mentioned above written in SAP ui5 application? Component. JS is also a view controller JS?

For specific code writing, please see my article: how to add the function of using camera to take photos in SAP ui5 application

How to complete barcode scanning in the pop-up camera scanning window

The answer is to use SAP ui5 standard control sap ndc. BarcodeScannerButton.

Introduction to several solutions of SAP ui5 using camera to scan barcode in PC browser and mobile device

Detailed implementation steps of this article:

https://jerry.blog.csdn.net/a…

Follow the steps in the above article to run SAP ui5 application on PC for the first time. Click Scan button and a dialog box will pop up asking whether the user allows the application to access camera:

Introduction to several solutions of SAP ui5 using camera to scan barcode in PC browser and mobile device

After selecting allow, a camera icon will appear in the upper right corner of the browser to prompt the user that the current application is using the camera of this machine.

At the same time, the scanning can be completed successfully before placing the object surface containing bar code on the camera.

Introduction to several solutions of SAP ui5 using camera to scan barcode in PC browser and mobile device

How to debug SAP ui5 applications running on mobile phones on desktop computers

Some friends reported that with the same SAP ui5 code, the camera can be accessed normally on the PC browser. When the browser on the mobile phone runs, the camera cannot be opened. What pops up is a dialog box where the scanner is unavailable and the user can enter the barcode manually.

Introduction to several solutions of SAP ui5 using camera to scan barcode in PC browser and mobile device

In this case, blind speculation is useless. Single step debugging on the mobile phone helps to accurately find the crux of the problem.

I use Android mobile phone + windows10 operating system. Using chrome, I can easily debug SAP ui5 applications running on the mobile phone in one step in the chrome developer tool on the PC.

For specific debugging environment configuration steps, please refer to my article:

https://jerry.blog.csdn.net/a…

Turn on the USB debugging mode on the Android mobile phone and connect the laptop and mobile phone with the data cable:

Introduction to several solutions of SAP ui5 using camera to scan barcode in PC browser and mobile device

Find the sap ui5 application process running on the mobile phone in the chrome developer tool, and click inspect to start debugging:

Introduction to several solutions of SAP ui5 using camera to scan barcode in PC browser and mobile device

The debugging interface is shown in the figure below:

Introduction to several solutions of SAP ui5 using camera to scan barcode in PC browser and mobile device

Why can’t the camera of the mobile phone be turned on when the sap ui5 application is running in the mobile browser

After mastering the debugging steps in the previous chapter, it is not difficult to find the answer to the question.

Jerry found sap.com by debugging SAP ui5 application running on mobile phone in one step on PC ndc. In the implementation code of barcodescanner, getfeatureapi function will be called during initialization to detect Cordova plugin. The availability of barcodescanner is shown in line 105 below. If available, store its reference in the variable ocordovascanner API.

Introduction to several solutions of SAP ui5 using camera to scan barcode in PC browser and mobile device

After clicking the scan button, the user will check whether the ocordovascanner API is null in the if statement on line 584 below. If not, the camera scanning page will pop up.

Introduction to several solutions of SAP ui5 using camera to scan barcode in PC browser and mobile device

Otherwise, execute the fallback branch, that is, the else statement on line 618 below, and a dialog box pops up asking the user to manually enter barcode

Introduction to several solutions of SAP ui5 using camera to scan barcode in PC browser and mobile device

The sap ui5 standard control barcodescanner is located in the namespace sap NDC, NDC stands for native device capabilities, implying that these controls need the support of native device features.

Solve Cordova plugin. There are two ways to solve the problem of unavailability of barcodescanner.

The first method is to install SAP Fiori client on the mobile device, and then run the above SAP ui5 application in Fiori client. At this time, Cordova plugin. Barcodescanner will be available.

SAP Fiori client is an enhanced mobile runtime, which is built on the Apache Cordova framework and provides a higher-level mobile experience for Web-based SAP Fiori applications, including device integration, full screen operation and enhanced attachment processing.

Introduction to several solutions of SAP ui5 using camera to scan barcode in PC browser and mobile device

The relationship between sap ui5 and Cordova is discussed in detail in Jerry’s InfoQ article: overview of SAP mobile development technology.

https://xie.infoq.cn/article/…

Introduction to several solutions of SAP ui5 using camera to scan barcode in PC browser and mobile device

The second method is to package the sap ui5 application into a Cordova application, and then add the bar code scanner plug-in to the Cordova application.

How to package SAP ui5 into Cordova application and add barcode plug-in

For detailed steps, refer to Jerry’s article to build SAP ui5 application into an APK file that can be directly installed on Android phones through Cordova.

https://jerry.blog.csdn.net/a…

After successful installation, view the permission required for the Cordova application on the mobile phone, which is temporarily “no permission required”.

Introduction to several solutions of SAP ui5 using camera to scan barcode in PC browser and mobile device

Add a barcode scanner plugin to the Cordova application through the steps described in Jerry’s following article:

https://jerry.blog.csdn.net/a…

Introduction to several solutions of SAP ui5 using camera to scan barcode in PC browser and mobile device

Rebuild the application after successful addition. After clicking the scan button, a window will pop up asking the user whether to run the application to access the device camera:

Introduction to several solutions of SAP ui5 using camera to scan barcode in PC browser and mobile device

After permission, you can use the mobile camera to scan the barcode:

Introduction to several solutions of SAP ui5 using camera to scan barcode in PC browser and mobile device

The interface of successful scanning is shown in the following figure:

Introduction to several solutions of SAP ui5 using camera to scan barcode in PC browser and mobile device
At this time, check the permission of the application in the mobile phone settings panel and find that there is one more permission for the camera.

Introduction to several solutions of SAP ui5 using camera to scan barcode in PC browser and mobile device

summary

The above is the sharing of several solutions used by Jerry in his actual work to call the device camera for barcode scanning through SAP ui5. The detailed implementation steps and codes of each chapter of this article can be obtained by clicking “read the original text” below.

Thanks for reading.