Camera Functionality in SAPUI5

[saisujana]

Hello Community,

I am one of the newbies in the SAP World. As a learner, I recently came across a basic requirement to enable camera  in the Sapui5 Application.

 

Requirement: To enable the camera functionality in the app and capture the live picture/image.

Prerequisites to develop this app: Basic knowledge of Sapui5, JavaScript

I am outlining the steps that I followed to approach this requirement:

Create a simple View with a button and press event. And also a Vbox which serves as a container for our image.

view.xml

Coming to the Controller : code as follows

controller.js

 step:1 create a popup object as a global variable

step:2 launch the popup

step:3 capture the pic in our vbox (using canvas)

• before closing the dialog box capture the image from the player which is triggered when we click on capture.


• Before closing the dialog box we have to take the image out of the video stream and set it to our canvas which is the view part of our main screen app
  this Dialog which we are creating in screen is taken as external window.so in order to bind to our view we need to have add Dependent code line... to connect my view and dialog popup box.


•  set image is a function where we set the live image in the canvas to display the user

The flow of the App:

capture Button ---> triggers the video --- >triggers the Navigator API gives --->the live/current Camera Screen.

Output:

reference blog @ archisman92

This approach created my further interest in UI5.

Please enhance me with your comments.

Thank you...