Shulou(Shulou.com)05/31 Report--

This article introduces the knowledge of "how to add the function of taking pictures with a camera in the SAP UI5 application". Many people will encounter this dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Key points of technical implementation:

(1) define the native tag that HTML5 uses to display videos in the HTML page of the web application: video

(2) use the API of WebRTC to obtain the MediaStream object corresponding to the device camera, and then assign this object instance to the srcObject attribute of the DOM object corresponding to the video tag.

After the above two steps are implemented, the video images we observe through the camera can be displayed in real time in the video tag of the web application. As for saving and downloading the video content displayed in the video tag at a certain point in time, the corresponding JavaScript code is not much different for all front-end frameworks, which is skipped in this article.

Therefore, with SAP UI5 development, we just have to repeat the above two steps.

The most commonly used view format for SAP UI5 applications is XML view. What happens if we add HTML native video or div tags directly to the XML view?

404 error, UI5 framework can not load div.js this script file.

When Jerry was working in the CRM Fiori application development team of SAP Chengdu Research Institute, he wrote a SAP UI5 framework code learning tutorial: Jerry's UI5 framework code self-study tutorial, in which there are two articles detailing the rendering principles of the SAP UI5 XML view runtime:

Why my formatter does not work? A trouble shooting example to know how it works

How I do self-study on a given Fiori control-part 10

To put it simply, there is an implementation of XMLTemplateProcessor.js in SAP UI5. At runtime, when the source file of the XML view is loaded and parsed into DOM by the browser, it will traverse the DOM tree depth first, load its implementation file (if it is in UI5 debug mode) for each UI5 tag encountered, and then create an instance corresponding to this tag.

Going back to the example above in Jerry, I wrote that the div tag in the SAP UI5 XML view is treated as a SAP UI5 XML control, so the UI5 framework automatically looks for the implementation file of this non-existent div control, but of course it can't find it.

If you know what the problem is, you will naturally have a way to solve it. Don't you just package the HTML5 native tag video into a UI5 control? In line with the programming idea of SOP (Stackoverflow Oriented Programming) and GOP (Github Oriented Programming), Jerry found a wheel built by others on Github.

This good man is Tiago Almeida. His wheel address: https://github.com/tiagobalmeida/openui5-camera.

Jerry has made a small modification to make a small example that can be accessed directly, and put it in my tool library: (http://jerrywang-sap.cn is a free domain name given by Tencent Cloud community, thank you here)

Https://jerrywang-sap.cn/FioriODataTestTool2014/WebContent/demo/index.html

Let's take a look at the effect of this example being accessed on a laptop:

Click on the content captured by the camera displayed on the page and it can be automatically saved as a picture.

The display on the phone:

Then let's take a look at the implementation principle of this wheel.

The hierarchical results of this camera custom UI5 control implementation are as follows:

Basically, it is implemented strictly according to the blog post How to create a custom UI5 control of the SAP community:

The implementation of the SAP UI5 custom control includes three JavaScript files:

Library.js

Define the control information at the header level of this control, such as name, version number, dependency, etc.

Camera.js

The step of binding the MediaStream object instance obtained by WebRTC API to the video element encapsulated by the control is implemented.

The specific implementation is in the code highlighted by Jerry:

As well as the implementation of the click-to-take function, the code in this section is consistent with that described in the previous article, which is skipped here.

CameraRender.js

Responsible for rendering the custom control's label "Camera" in the XML view to a native combination of video and canvas tags.

Each control of SAP UI5 has a corresponding rendering class, which is used to convert UI5 tags in XML view to HTML5 native tags:

How to use this custom control? Tiago's documentation is also very detailed, so you can follow the steps on his github step by step:

This is the end of the content of "how to add the function of taking pictures with a camera in the SAP UI5 app". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.