C# ASP.NET Project to Capture Image From Webcam Using Webcam.js Library in Browser

Welcome folks today in this blog post we will be capturing an image from webcam in asp.net using webcam.js library. All the full source code of the example is given below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

<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>

<tr>

<th align="center"><u>Live Camera</u></th>

<th align="center"><u>Captured Picture</u></th>

</tr>

<tr>

</tr>

<tr>

</td>

</td>

</tr>

</table>

And now we will be writing the javascript code using the webcam.js library as shown below

<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>

$(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>

Here as you can see we are including the webcam.js library cdn and also jquery cdn. And we are setting the config settings of the webcam.js library. Here we are setting the width and height of the webcam. And also we are setting the image format, and also the quality of the image file

And when we click the snapshot button we will be taking the image from the webcam. We will be using the base64 code. And we are sending this image to asp.net using the ajax post request.

And now we will be storing the captured image from the webcam to local disk using the C# code which is shown below

capturedImage.cs

using System.IO;
using System.Web.Services;

[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;
}

using System.IO;

using System.Web.Services;

[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;

}

And here we are using the c# code to capture the image from the webcam and also we are writing the image to the local disk using the byte array.