In this article I will explain with an example, how to capture image (Photo) from Web Camera (Webcam) using HTML5.
In order to capture images from Web Camera (Webcam), jQuery Webcam.js plugin will be used.
jQuery Webcam Plugin
The complete documentation is available in the following link.
HTML Markup
The HTML Markup consist of:
DIV – For displaying Live Web Camera.
Image – For displaying the captured image.
Button – For capturing the picture using the Web Camera.
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<th align="center"><u>Live Camera</u></th>
<th align="center"><u>Captured Picture</u></th>
</tr>
<tr>
<td><div id="webcam"></div></td>
<td><img id="imgCapture" /></td>
</tr>
<tr>
<td align="center">
<input type="button" id="btnCapture" value="Capture" />
</td>
<td></td>
</tr>
</table>
The jQuery Webcam Plugin Client Side implementation
Inside the HTML Markup, the following jQueryand jQuery Webcam.js JS Script files are inherited.
1. jquery.min.js
2. webcam.js
Applying the jQuery Webcam.js plugin
Inside the jQuery document ready event handler, the jQuery Webcam.js plugin is applied to the HTML DIV.
The following are the configuration properties of the jQuery Webcam.js plugin:
width – Width of the DIV that displays the live camera.
height – Height of the DIV that displays the live camera.
image_format – The file format of the Image i.e. JPEG, PNG, etc.
jpeg_quality – The quality of the captured Image.
Capturing the Image from Web Camera (Webcam)
When Capture button is clicked, the Image is captured from Web Camera (Webcam) using the snap function of the jQuery Webcam.js plugin.
Then the captured Image data in BASE64 string format is assigned to the HTML Image element.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.26/webcam.js"></script>
<script type="text/javascript">
$(function () {
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach('#webcam');
$("#btnCapture").click(function () {
Webcam.snap(function (data_uri) {
$("#imgCapture")[0].src = data_uri;
});
});
});
</script>
Screenshot
![Capture Image (Photo) from Web Camera (Webcam) using HTML5 and jQuery]()
Browser Compatibility
The above code has been tested in the following browsers only in versions that support HTML5.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
