Using webcam to capture image in your web page

Hi friends,

If you want to capture a image within your webpage usin g webcam, here is the method:

Files required:

1. scriptcam.min.js

2.swfobject.js

3.jquery-min.js

4.scriptcam.swf

(If you dont get the files, tell me i ll send it to you)

This is using php. following is the code:

Include the files as below:

<script type=”text/javascript” language=”javascript” src=”js/jquery-min.js”></script>
<script type=”text/javascript” src=”js/scriptcam.min.js”></script>
<script type=”text/javascript” src=”js/swfobject.js”></script>

Add the javascript as below:

<script>
$(document).ready(function() {
$(“#webcam”).scriptcam({
width: 320, height: 240,
showMicrophoneErrors:false,
onError:onError,
//cornerRadius:20,
cornerColor:’00000′,
onWebcamReady:onWebcamReady,
onPictureAsBase64:base64_tofield_and_image
});
});
function base64_tofield_and_image() {
$(‘#badgePic’).val($.scriptcam.getFrameAsBase64());
$(“#webcam”).hide();
$(‘#image’).attr(“src”,”data:image/png;base64,”+$.scriptcam.getFrameAsBase64());
$(‘#imageHolder’).show();
};
function onError(errorId,errorMsg) {
$( “#vCapture” ).attr( “disabled”, true );
alert(errorMsg);
}
function onWebcamReady(cameraNames,camera,microphoneNames,microphone,volume) {
var cameraFound=0;
$.each(cameraNames, function(index, text) { cameraFound++;});
if(cameraFound==0){alert(‘No Camera found. Please Check.’);}
}
function cancelImage(){
$(‘#imageHolder’).hide(); $(“#webcam”).show();
}
</script>

In HTML use the following code:

<div id=”imageHolder” style=”display:none”><img  id=”image” /></div>
<div id=”webcam”></div>
<input type=button value=”CAPTURE” id=”vCapture” onclick=”base64_tofield_and_image(); “>

<input type=button value=”CANCEL” onClick=”cancelImage()”>

 

For beautification:

<style>
#webcam {
width: 288px;
border-top:10px solid #333;
border-right:10px solid #333;
border-left:10px solid #333;
border-bottom:20px solid #333;
background:#eee;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#imageHolder {
width: 268px; height:210px;
border-top:10px solid #333;
border-right:10px solid #333;
border-left:10px solid #333;
border-bottom:20px solid #333;
background:#eee;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
overflow:hidden;
}
</style>

Screenshot: Attached.

You are done. Contact me if you have any doubt.

VMS Happy programming.

 

 

Advertisements

7 thoughts on “Using webcam to capture image in your web page

  1. wonderful issues altogether, you just received a brand new
    reader. What would you recommend in regards to
    your post that you made some days in the past? Any certain?

  2. Whoa! This blog looks just like my old one!

    It’s on a completely different subject but it has pretty much the same layout and design. Superb choice of colors!

  3. 1. scriptcam.min.js

    2.swfobject.js

    3.jquery-min.js

    4.scriptcam.swf i need to above all the files

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s