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.