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