Yesterday I have finally tried out the new technology of Opera which is to link the webcam video stream with the HTML5 video object. So far what we can do with this new technology is still limited to the above mentioned plus taking a photo from the video stream but I think more features will soon arrive. Anyway, if you are interested to try out the above technology by yourself here are the steps you need to go through.
1) Make sure the webcam is available on your pc. Here is how to find out whether the device is ready or not: Click on the windows start button then enter ‘Device Manager’ under search. Click on the ‘Device Manager’ tab under Control Panel to open up the Device Manager panel, then click on ‘Imaging devices’ and if the webcam is there then you will see it displays under ‘Imaging devices’. If the webcam is not there then you will not be able to use the above technology.
2) After that create a simple html5 file and enter below code within the body tags of your html5 file.
<input id="button" onclick="snapshot()" type="button" value="Take Picture" />
<div><canvas id="canvasCamera" width="300" height="300">Canvas Not Support</canvas></div>
<script type="text/javascript">// < ![CDATA[
var video = document.getElementsByTagName('video')[0];
if(navigator.getUserMedia) {
navigator.getUserMedia('video', successCallback, errorCallback);
function successCallback( stream ) {
video.src = stream;
}
function errorCallback( error ) {
}
} else {
}
function snapshot() {
var c = document.getElementById('canvasCamera');
var ctx = c.getContext('2d');
ctx.drawImage(video, 0, 0, c.width, c.height);
var dataURL = c.toDataURL();
window.open(dataURL);
}
// ]]></script>
Then save the entire file somewhere in your computer (I will not write any code for the return error part, just leave it blank if you want to!).
3) Then you will need a special opera browser known as ‘Opera Labs Camera and Pages’ in order to run the program. You can’t run this program with the normal Opera Browser you have now. So go ahead and download this browser @ this url address, make sure you pick the right browser for your pc.
4) Final step is to run the file you have just created with the ‘Opera Labs Camera and Pages’ browser (Click on ‘Opera Labs’ tab on the top left of the browser->Page->Open) and the webcam should auto run once you have loaded the html5 file and you will see your activities in the video object. Click on the ‘Take Picture’ button to take a picture of your own self and then on the new pop up window right click on your mouse and choose ‘Save Image’ to save the picture into your pc hard drive. In order to allow the save process you will need to do the following set up : Enter opera:config in the browser’s URL bar and browse to that url, then select ‘Security Prefs’ and checked the option ‘Allow Camera to Canvas Copy’, finally ‘Save’ the change you have made. You will not see the pop up window if you have not make the above changes, if you are concern about the security issue then please don’t change it.
Besides Opera, the latest version of Chrome browser also supports this feature, below is an application which creates by myself and is available to download at chrome web store through this link. Alright just watch the video below for further information on this application.