Monthly Archives: November 2013

Capturing image from camera using getUserMedia() and saving it in a document using XPages

HTML5 introduces a new API navigator.getUserMedia() which allows web applications to access a user’s camera and microphone. This article on HTML5 Rocks and this question on StackOverflow describe how to use it in your web applications.

In this article I will describe how to use navigator.getUserMedia() in your XPage and save the captured image in your Notes document. As of now this demo is supported only on Google Chrome & Mozilla Firefox on desktop and mobile (I have tested it on Andorid only).

HTML5 introduces <video> tag which allow developers access to user’s camera.

Next we need to add <canvas> tag and an <image> tag. The image captured from user’s camera is drawn on to <canvas>. We then get the Base64 encoded image from <canvas> put it into our <image> (JavaScript code to do that comes later in article).


Notice that the <canvas> is hidden.

I am also going to add a text area to my XPage where I will store the Base64 encoded text of the captured image which later would be converted into image using Java (code for that comes later in article). While developing applications you can hide this text area using CSS.

And finally we need a button to take snapshot from camera. Continue reading

Share:


Fatal error: Call to undefined function bccl_full_html_license() in /var/sites/p/pipalia.co.uk/public_html/wp-content/themes/pipalia-ltd/archive.php on line 57