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
You will need to download the jQuery Webcam.js plugin from the following location, it is also available in the attached source code of this article.
 
 
HTML Markup
The HTML Markup consist of an HTML DIV for displaying Live Web Camera, an HTML Image element for displaying the captured image, a Button for capturing the picture using the Web Camera and another Button for uploading the captured Image to the Server and saving it 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
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-yy hh-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-yy hh-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
EndF unction
 
 
The jQuery Webcam Plugin Client Side implementation
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.
1. width – Width of the DIV that displays the live camera.
2. height – Height of the DIV that displays the live camera.
3. image_format – The file format of the Image i.e. JPEG, PNG, etc.
4. 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://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="WebCam.js" type="text/javascript"></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

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