Camera functionality in SAPUI5

[archisman92]

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 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: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 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 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 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!

[former_member204155]

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.

[archisman92]

Thanks Kuntal!

[knanw]

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....

[former_member3474]

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.

 

 

[archisman92]

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

[archisman92]

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

[Ramesh_1205]

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

[saisujana]

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.

[archisman92]

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

[archisman92]

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

[former_member646377]

Nice blog

[saisujana]

saisujana2597@gmail.com

 

TQSM for ur reply sir...

[archisman92]

Thanks Gopi.

[archisman92]

Sorry about the delay.

 

You can download the project using this URL:

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

[archisman92]

Wolfram, you may download the project using this URL:

 

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

 

[saisujana]

Thank you so much.

[saibudaraju]

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

 

 

[archisman92]

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

 

 

[former_member247294]

Nice ! Thanks for sharing this sample !

[archisman92]

Thanks Radu!

[former_member607819]

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

[mahi_31196]

Can we use the navigator.mediaDevices for Http Connection?

[former_member663468]

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

[former_member739271]

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"

[former_member748595]

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?

[archisman92]

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

[msuday]

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

[fitha_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

[RamyaC]

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

 

[former_member777308]

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?

[mohanapriyab]

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

[Shailesh_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 clicking on Capture blank image was download.And image not shown in preview box.

 

[Shailesh_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.