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!