This article was not in Jerry’s plan. Our SAP China Research Institute has officially started work today, and Jerry has also returned to work and started to move bricks.

Today, a colleague asked me how to realize the function described in the title of this paper. Jerry searched the Internet casually. There are many similar examples.

In fact, Jerry’s previous article only requires 200 lines of JavaScript code to bring Tesla cars to your side. The react-Native and ViroReact combination used in the article can also realize the function of calling mobile phone cameras with JavaScript and taking photos. However, that application is a Native application generated through the React-Native package, which is slightly different from the examples in this article. The example given in this article is a pure Web application running in a browser.

Let’s look at the effect. I have hosted this web application on my personal blog on Github via Github GH-Pages, which can be accessed via the following link: jerrywang-sap.cn/FioriODataT…

I first accessed it from my laptop, and the browser would pop up asking the user whether to allow the app to access the camera on the device:

After clicking Allow, the area below the app will display an image of the area my camera is facing in real time:

After clicking the “Take photo” button, the image displayed by the camera will be solidified below the button and automatically saved locally as a picture.

To access the link on my Samsung phone, the app must also be authorized to use the camera:

Aim at the mascot, an alien sentinel, which teacher Wu Ji gave me at my company’s workstation, and click the button to take photos:

Automatically generate a picture and save it to your phone:

My source code location (note the GH-Pages branch) : github.com/i042416/Fio…

Several key code points

(1) the reason why JavaScript can identify the available camera of the device (including the available audio input and output devices) through the browser is that modern browsers support a set of APIS named WebRTC(Web Real Time Communication). This API enables Web application developers to implement rich real-time multimedia applications through simple JavaScript programming without learning digital signal processing of multimedia. Web application users also do not need to download additional plug-ins.

In Jerry’s example, JavaScript is used to check the device’s available multimedia devices in a single line of code:

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

The code first half period of the navigator. MediaDevices. EnumerateDevices () is the native API browser support, this is an asynchronous invocation, returns a promise object:

Wait until after the asynchronous invocation result is available for applications, we through the chain then was introduced into the callback function called gotDevices is triggered, the input parameter is the navigator. MediaDevices. EnumerateDevices () call return values. Take a look at the details of the return values in the debugger:

From the debugger, enumerateDevices returns a list of available audio and video devices on my laptop. The information is consistent with the device information I saw in the operating system:

(2) IN my HTML page, I have defined a video label supported by HTML5, which is used to display images observed through the camera of the device.

But we also need to associate the device camera with the video tag. This is done by assigning a MediaStream object to the srcObject property of the DOM object for the tag.

Where does this MediaStream object come from? In the same way, through the chain called the navigator. MediaDevices. GetUserMedia (constraints) are:

(3) After clicking the photo button, the function of automatically generating pictures and downloading them to local is realized in the click event response function of the button. First, call the API drawImage corresponding to the Context of the Canvas tag to draw the current content displayed in the video tag of the camera content to the Canvas tag, and then use this content to generate a jpeg image and download it to the local.

Jerry will continue to share content related to SAP cloud platform tomorrow, stay tuned.

For more of Jerry’s original articles, please follow the public account “Wang Zixi “: