In this article I will explain with an example, how to capture still image / photo / picture from
Web Camera (Webcam) in
ASP.Net using C# and VB.Net.
In order to capture images from
Web Camera (Webcam),
jQuery Webcam.js plugin will be used.
The images captured using
Web Camera (Webcam) will be saved in Folder (Directory) and displayed in
HTML Image control in
ASP.Net.
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 and one for uploading in the Folder (Directory).
<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 align="center">
<input type="button" id="btnUpload" value="Upload" disabled="disabled" />
</td>
</tr>
</table>
Namespaces
You need to import the following namespaces.
C#
using System.IO;
using System.Web.Services;
VB.Net
Imports System.IO
Imports System.Web.Services
Server Side Implementation using Web Method
The following
WebMethod is called using
jQuery AJAX after the Image (Photo) is captured and uploaded.
The WebMethod accepts the captured Image file data in BASE64 string format.
The BASE64 string is converted into a Byte Array and the Byte Array is saved as Image file in the Folder (Directory).
C#
[WebMethod]
public static bool SaveCapturedImage(string data)
{
string fileName = DateTime.Now.ToString("dd-MM-yyhh-mm-ss");
//Convert Base64 Encoded string to Byte Array.
byte[]imageBytes = Convert.FromBase64String(data.Split(',')[1]);
//Save the Byte Array as Image File.
string filePath = HttpContext.Current.Server.MapPath(string.Format("~/Captures/{0}.jpg", fileName));
File.WriteAllBytes(filePath, imageBytes);
return true;
}
VB.Net
<WebMethod>
Public Shared Function SaveCapturedImage(ByVal data As String) As Boolean
Dim fileName As String = DateTime.Now.ToString("dd-MM-yyhh-mm-ss")
'Convert Base64 Encoded string to Byte Array.
Dim imageBytes() As Byte = Convert.FromBase64String(data.Split(",")(1))
'Save the Byte Array as Image File.
Dim filePath As String = HttpContext.Current.Server.MapPath(String.Format("~/Captures/{0}.jpg", fileName))
File.WriteAllBytes(filePath, imageBytes)
Return True
End Function
The jQuery Webcam Plugin Client Side implementation
Inside the
HTML Markup, the following
jQuery and
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 the
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.
Uploading the Image from Web Camera (Webcam)
When the
Upload Button is clicked, the captured Image data in
BASE64 string format is uploaded to Server using
jQuery AJAX call and then inside the
WebMethod, it is converted into Image file and saved in Folder (Directory).
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/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;
$("#btnUpload").removeAttr("disabled");
});
});
$("#btnUpload").click(function () {
$.ajax({
type: "POST",
url: "CS.aspx/SaveCapturedImage",
data: "{data: '" + $("#imgCapture")[0].src +"'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r){ }
});
});
});
</script>
Screenshot
![Capture Image (Photo) from Web Camera (Webcam) in ASP.Net using C# and VB.Net]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
