Skip to Content
Technical Articles
Author's profile photo Archisman Das

Camera functionality in SAPUI5

Hi UI5 Experts,

In a recent demo for a client, we were faced with a challenge where the client wanted to use the camera functionality of the device to capture and save an image. Since there are no in-built controls in UI5 to do so, I am outlining the steps that we followed to approach this challenge:

  • Create a simple view with a button that will trigger the camera of the device, and a vertical box that will serve as a container for our canvas where the image is going to be set. Below is an image of my xml View.

 

XML%20View

XML View

 

  • On click of the button, I am creating a new dialog control and in the content aggregation of the dialog control i am creating a HTML element <video> and an Input control Input control where you can give a name to the image about to get captured.

Controler%3ADialog%20Control

Controler:Dialog Control

 

  • Once the dialog is created, you need to stream the feed from your camera to the <video> element created in the content of the Dialog controller. To achieve this, I have used the web API MediaDevices.getUserMedia().

Video%20Stream

Video Stream

 

  • Once user clicks on the Capture button on the Dialog control, the dialog will be closed and an event handler will be triggered which will set the image to the UI.

 

Event%20Handler

Event Handler

 

  • Function to set the image:

 

  • Here we are creating a <canvas> HTML element and binding it to the “items” aggregation of the <VBox> in our view. Next, upon rendering of the canvas element, we are setting the image captured to the same.  This takes advantage of the fact that the HTMLVideoElement interface looks like an HTMLImageElement to any API that accepts an HTMLImageElement as a parameter, with the video’s current frame presented as the image’s contents. The result is shown below:

 

Captured%20Image

Captured Image

 

  • Now that we have captured and set the image to our view, there is one step left, which is to download the image so that it can be uploaded in some other view if needed. There are 2 ways that I could think of to go about this task:
    • Using a third party js library download.js which takes as input the base64 encoded image data, image name, the mime-type and prompts you with a dialog box to save the image as shown in the above pic.
    • If you want to avoid using third party js libraries, then you can simply do a window.open() and this will open the image captured in a new window.
//	window.open(imageData);  --Use this if you dont want to use third party download.js file

 

A few references that i would like to put in here:

  • https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos
  • https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
  • http://danml.com/download.html

 

Thank you for your patient reading. Please don’t hesitate to suggest any improvement. We are all learning here!

Assigned Tags

      33 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Kuntal Sarkar
      Kuntal Sarkar

      Nice bolg ! Archisman. Thanks for sharing

      This is a very useful functionality that can be explored in may ui5 application use cases. Not using any custom libs or framework this will be real easy to extendent in any ui5 app.

      Author's profile photo Archisman Das
      Archisman Das
      Blog Post Author

      Thanks Kuntal!

      Author's profile photo Wolfram Knan
      Wolfram Knan

      Hi Archisman. Is there the complete source code available for this tutorial or could you make it available? Would be great to follow step by step....

      Author's profile photo Archisman Das
      Archisman Das
      Blog Post Author

      Wolfram, if you could share your email id i can send you the source code there.

      Author's profile photo Archisman Das
      Archisman Das
      Blog Post Author

      Wolfram, you may download the project using this URL:

       

      https://drive.google.com/file/d/1EeGF4ddCPzJQD1AusBnwPgJZZZF_uapj/view?usp=sharing

       

      Author's profile photo Sailesh Pawar
      Sailesh Pawar

      Hi Archisman,

      I'm following your steps. download and run the project through google drive link.

      But I'm facing problem while capturing image.After%20clicking%20on%20Capture%20this%20type%20of%20image%20was%20download.

      After clicking on Capture blank image was download.And image not shown in preview box.

       

      Author's profile photo Tushar Sharma
      Tushar Sharma

      Nice one!! FYI, images can be also be captured or uploaded using sap.ui.unified.FileUploader .

      If the app is accessed in the device using Fiori Cleint or the browser the FileUploader control can access device's camera and file system in order to capture image/upload files.

       

       

      Author's profile photo Archisman Das
      Archisman Das
      Blog Post Author

      Thanks Tushar for sharing. I will give it a try!

      Author's profile photo Ramesh Danduboina
      Ramesh Danduboina

      Hi Archisman, Very nice blog. Thanks for sharing this with us. If possible can you share source code for us?

      Author's profile photo Archisman Das
      Archisman Das
      Blog Post Author

      Please share your email id and i shall do so asap.

      Author's profile photo SAI SUJANA
      SAI SUJANA

      Very nice blog Archisman . Thanks for sharing this with us. If possible can you share the source code? i have a requirement related to this topic.

      Author's profile photo Archisman Das
      Archisman Das
      Blog Post Author

      Please share your email id and i shall do so asap.

      Author's profile photo SAI SUJANA
      SAI SUJANA

      saisujana2597@gmail.com

       

      TQSM for ur reply sir...

      Author's profile photo Archisman Das
      Archisman Das
      Blog Post Author

      Sorry about the delay.

       

      You can download the project using this URL:

      https://drive.google.com/file/d/1EeGF4ddCPzJQD1AusBnwPgJZZZF_uapj/view?usp=sharing

      Author's profile photo SAI SUJANA
      SAI SUJANA

      Thank you so much.

      Author's profile photo gopi vadde
      gopi vadde

      Nice blog

      Author's profile photo Archisman Das
      Archisman Das
      Blog Post Author

      Thanks Gopi.

      Author's profile photo sravya B
      sravya B

      Hi Archisman,

      Nice blog thank you very much.

      Is this code will support on both desktop and mobile?

      Got the same requirement and should work on mobile (Andriod/ios) as well.

       

      Regards,

      Sravya

       

       

      Author's profile photo Archisman Das
      Archisman Das
      Blog Post Author

      Hi Sravya,

       

      Thanks! To answer your question, if you continue to use this as a web application on your mobile, then yes it will work fine(tested on Android). To use the back camera you just have to set the property "facingMode" as environment. By default, it is user (front cam).

      However, if you deploy this as an apk, I would suggest you to explore the cordova camera plugin.

       

      Regards,

      Archisman

       

       

      Author's profile photo Radu Constantin Simen
      Radu Constantin Simen

      Nice ! Thanks for sharing this sample !

      Author's profile photo Archisman Das
      Archisman Das
      Blog Post Author

      Thanks Radu!

      Author's profile photo kiran ravi
      kiran ravi

      how your handling multiple images with this functionality  and deleting a particular image of taken images

      Author's profile photo Mogilipalli Maheswari
      Mogilipalli Maheswari

      Can we use the navigator.mediaDevices for Http Connection?

      Author's profile photo Subha Palanichamy
      Subha Palanichamy

      hi,

      Please tell me which format create steam will accept the camera image.

      am able to capture image and same date am receiving in the odata but am not able to see the uploaded image,its saying that.

      please guide me how to handle this in odata.

      am uploading image to IW32 work order tcode

      Author's profile photo Uddhav Vyas
      Uddhav Vyas

      Hello sir I am facing this error in console can you help me out

      you can contact me on : uddhavvyas12@gmail.com

      "Uncaught TypeError: Cannot read property 'getUserMedia' of undefined"

      Author's profile photo Daouda POUYE
      Daouda POUYE

      Good morning Archisman,
      I find your blog very interesting. Thank you for sharing.
      A question? Is it possible to start a video (take a video) instead of taking a picture?

      Author's profile photo Archisman Das
      Archisman Das
      Blog Post Author

      You may want to look at the api documentation and see if that is possible.

      Author's profile photo Uday M S
      Uday M S

      Hi Archisman

      Very nice blog with so much useful information. Could you kindly share me source code to uday.ms.88@gmail.com

       

      Thanks

      Uday

      Author's profile photo Fitha Zainab Zakkeer
      Fitha Zainab Zakkeer
      Hi Archisman,
      Thank you for this nice blog.
      I have one doubt regarding closing of the camera.
      Eventhough we closed that dialog box showing camera ,the camera is still enabled for that site.
      So how we can disable camera once we close that dialog box?
      Thanks
      Fitha
      Author's profile photo Ramya Chinnaswamy
      Ramya Chinnaswamy

      Hello Archisman,

      Thank you for this useful blog!

      When this is used in mobile devices it always opens the Front Camera even though the property 'facingMode' is set as "environment'. Could you please suggest if you have ideas or solution on this.

      Regards,

      Ramya

       

      Author's profile photo Cem Uzunoglu
      Cem Uzunoglu

      Hello Archisman, I have tried your coding on my browser but I only see a white screen. The browser is asking for permission to access the camera and the red recording icon is visible on the tab. I also get the same result with other solutions. Can you help me with this?

      Author's profile photo Mohanapriya Bhaskaran
      Mohanapriya Bhaskaran

      Hi

      Thanks for this blog.

      Need help to solve my requirement.

      My requirement is to capture and display multiple images.

      1. User clicks a button, in popup camera opens and on click of capture, photo is taken and displayed.

      2.The above step repeated to capture multiple images.

      3. At the end user clicks the save button to save all the images.

      Any code sample for this scenario.

      Thanks,

      Mohanapriya

      Author's profile photo Sailesh Pawar
      Sailesh Pawar

      I'm following your steps as per the project.

      But I'm facing problem while capturing image. blank image was captured.

       

      This type of images was captured after clicking on capture.