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!
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.
Thanks Kuntal!
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….
Wolfram, if you could share your email id i can send you the source code there.
Wolfram, you may download the project using this URL:
https://drive.google.com/file/d/1EeGF4ddCPzJQD1AusBnwPgJZZZF_uapj/view?usp=sharing
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.
Thanks Tushar for sharing. I will give it a try!
Hi Archisman, Very nice blog. Thanks for sharing this with us. If possible can you share source code for us?
Please share your email id and i shall do so asap.
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.
Please share your email id and i shall do so asap.
saisujana2597@gmail.com
TQSM for ur reply sir…
Sorry about the delay.
You can download the project using this URL:
https://drive.google.com/file/d/1EeGF4ddCPzJQD1AusBnwPgJZZZF_uapj/view?usp=sharing
Thank you so much.
Nice blog
Thanks Gopi.
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
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
Nice ! Thanks for sharing this sample !
Thanks Radu!