Skip to Content
Personal Insights
Author's profile photo SAI SUJANA

Camera Functionality in SAPUI5

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

view.xml

Coming to the Controller : code as follows

controller.js

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 @ Archisman Das

This approach created my further interest in UI5.

Please enhance me with your comments.

Thank you…

Assigned Tags

      2 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Chamdeep Mudigolam
      Chamdeep Mudigolam

      Hello SAI SUJANA,

       

      Thanks for very useful information.

       

      I am trying to implement same feature in project, For the first time camera is opening I am taking picture, I can see the picture in UI.

      Second time I can not see the Camera is running and it is overriding the existing picture.

      How can I enable camera for second time, capture the second picture?

      How can I see both pictures at a time?

       

      Regards,

      Chamdeep

      Author's profile photo K P
      K P

      Hi Chamdeep, Did you manage to get the picture second time and attach to canvas?