Capturing Image From Web Cam in ASP.Net

This article provides the procedure for capturing an image from a webcam and store it in folder.

This article provides the procedure for capturing an image from a webcam and store it in folder.

Here I used JSON, jQuery, SQL and C# to do it.

Preparation

  1. Download the webcam folder and extract it.
  2. Add that entire folder to your web application.
  3. Download the Scripts folder and run them in your SQL Server.
  4. Change the database name in your webconfig file.

Now we are ready to go.

Step 1: Starting with SQL.

The following is the table and Stored Procedure that I have used.

Table

Table

Stored Procedure
 
Stored Procedure

Show Records
 
Show Records

Step 2: Now we are starting the coding.
  • Create a new project
  • Select Template Visual C# in side select Web.
  • After Selecting Select ASP.NET Web Forms Application.
  • Enter Name for application.

Step 3: Creating the WebCamCapture.aspx page.

Add a web form to your application and name it WebCamCapture.aspx.

Add the following Styles and Controls the page.

Controls

  1. Image Control
  2. Linkbutton.
     

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head id="Head1" runat="server">

        <%--<meta http-equiv="refresh" content="30;url=WebCamCapture.aspx">--%>

     

        <style type="text/css">

            #profile_pic_wrapper

            {

                position: relative;

                border: #ccc solid 1px;

                width: 120px;

                height: 120px;

                border: none;

            }

     

                #profile_pic_wrapper a

                {

                    position: absolute;

                    display: none;

                    top: 30;

                    right: 0;

                    margin-top: -30px;

                    line-height: 20px;

                    padding: 5px;

                    color: #fff;

                    background-color: #333;

                    width: 110px;

                    text-decoration: underline;

                    text-align: center;

                    z-index: 100;

                    text-decoration: none;

                    font-family: Arial;

                    font-size: 10px;

                }

     

                #profile_pic_wrapper:hover a

                {

                    position: absolute;

                    margin: 90px 0px 0px 0px;

                    display: block;

                    text-decoration: none;

                    font-family: Arial;

                    font-size: 10px;

                }

     

                    #profile_pic_wrapper:hover a:hover

                    {

                        text-decoration: none;

                        font-family: Arial;

                        font-size: 10px;

                    }

            .profile_pic

            {

                width: 120px;

                height: 120px;

            }

        </style>

     

        <title>Web capture</title>

    </head>

    <body>

        <form id="form1" runat="server">

          <div style="float: left; padding-left: 35px;" id="profile_pic_wrapper">

          <asp:Image ID="img" Width="120" Height="120" runat="server" Style="float: left;" />

          <asp:LinkButton ID="Linkbutton1" runat="server" OnClick="Linkbutton1_Click">Change  Photo</asp:LinkButton>

            </div>

        </form> 

    </body>

    </html>

Here is snapshot of the page.

Page 

Step 4: After adding the Styles and Controls to your page.

On the load of this page we will set the image to an image control from the database.

The following is the on load code.

protected void Page_Load(object sender, EventArgs e)

{

   if (!IsPostBack)

   {

       SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["Mycon"].ToString());

       // connection of sql 

      // used this StoredProcedure for reteriving image

      // According to user id i am reteriving image from database

      SqlCommand cmd = new SqlCommand("Usp_InsertImageDT", con);

      cmd.CommandType = CommandType.StoredProcedure;

      cmd.Parameters.AddWithValue("@UserImagename", null);

      cmd.Parameters.AddWithValue("@UserImagePath", null);

      cmd.Parameters.AddWithValue("@UserID", 0);

      cmd.Parameters.AddWithValue("@QueryID", 2);               

      DataSet ds = new DataSet();

      SqlDataAdapter da = new SqlDataAdapter();

      da.SelectCommand = cmd;

      da.Fill(ds);

       if (ds.Tables[0].Rows.Count > 0)

       {

           img.ImageUrl = ds.Tables[0].Rows[0]["UserImagePath"].ToString();

           // Assiging image to Image Control

       }

   }

}

Step 5: Button Linkbutton1 click code.

protected void Linkbutton1_Click(object sender, EventArgs e)
{
    
// to how Pop and calling another Page in Popup.
    string url = "/WebCam/Captureimage.aspx";
    
string s = "window.open('" + url + "', 'popup_window', 'width=900,height=460,left=100,top=100,resizable=no');";
    ClientScript.RegisterStartupScript(
this.GetType(), "script", s, true);
}

Step 6:

Add a folder Name (WebCam) to your project that I am providing for you.

You can download it from the top folder.

Here is snapshot of the folder.

It contains all files the required for web cam image capturing.

Just add it.

Project

In this folder are the following 2 .Aspx pages.
  1.  Captureimage.aspx

    The Captureimage.aspx Page contains code for waking up the WebCam and capturing the image.
     
  2. Baseimg.aspx

    After capturing an image it will call the baseimg.aspx page and provide a base64 string to it.

    On the load of this page it receive the base64 string.

    Using a FileStream and Binary Writer it will draw an image.

    After drawing it will save it to a folder and insert it into the database.

Step 7:

Captureimage.aspx Page

It contains 2 main JS Files.

<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>

<script src="Scripts/jquery.webcam.js" type="text/javascript"></script>

And JavaScript Code.

Snapshot of Captureimage.aspx

Snapshot of Captureimage

This will pop-up when you will click on the change Photo link button on the image.

It will ask for the Adobe Flash player setting.

Just click "Allow".

After clicking on Allow:
 
Clicking

After clicking of Capture.
 
Capture

When you click on the "Submit" Button then it will call the page Baseimg.aspx for writing the Base 64 string .

The following is the JSON script for calling baseimg.aspx and reloading the image on the parent page.

<div style="text-align: center; margin-bottom: 46px;">

        <a href="#" id="filter" onclick="javascript:UploadPic();">

        <input type="image" id="Submit" runat="server" src="images/submitBTN.png" />

       </a>

</div>

 

function UploadPic() {

    debugger;

    // generate the image data

   var canvas = document.getElementById("canvas");

   var dataURL = canvas.toDataURL("image/png");

    // Sending the image data to Server

     $.ajax({

          type: 'POST',

          url: "baseimg.aspx",

          data: { imgBase64: dataURL },

          success: function () {

          alert("Done, Picture Uploaded.");

            window.opener.location.reload(true); // reloading Parent page

            window.close();

            window.opener.setVal(1);

            return false;

         }

    });

}

Step 8:

Baseimg.aspx

protected void Page_Load(object sender, EventArgs e)

{

        //called page form json for creating imgBase64 in image

        StreamReader reader = new StreamReader(Request.InputStream);

        String Data = Server.UrlDecode(reader.ReadToEnd());

        reader.Close();

 

        DateTime nm = DateTime.Now;

        string date = nm.ToString("yyyymmddMMss");

        //used date for creating Unique image name

        Session["capturedImageURL"] = Server.MapPath("~/Userimages/") + date + ".jpeg"

        Session["Imagename"] = date + ".jpeg";

   // We can use name of image where ever we required that why we are storing in Session

        drawimg(Data.Replace("imgBase64=data:image/png;base64,", String.Empty), Session["capturedImageURL"].ToString());

        // it is method

        // passing base64 string and string filename to Draw Image.

        insertImagePath(Session["Imagename"].ToString(), "~/Userimages/" + Session["Imagename"].ToString());

        // it is method

        //inserting image in to database         

}

Drawing Method

public void drawimg(string base64, string filename)  // Drawing image from Base64 string.

{

    using (FileStream fs = new FileStream(filename, FileMode.OpenOrCreate, FileAccess.Write))

    {

        using (BinaryWriter bw = new BinaryWriter(fs))

        {

            byte[] data = Convert.FromBase64String(base64);

            bw.Write(data);

            bw.Close();

        }

    }

}

Insert Image to Database Method

public void insertImagePath(string imagename, string imagepath) // use for inserting image when it is created.

{

    SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["Mycon"].ToString());

    SqlCommand cmd = new SqlCommand("Usp_InsertImageDT", con);

    cmd.CommandType = CommandType.StoredProcedure;

    cmd.Parameters.AddWithValue("@UserImagename", imagename);

    cmd.Parameters.AddWithValue("@UserImagePath", imagepath);

    cmd.Parameters.AddWithValue("@UserID", 1);

    cmd.Parameters.AddWithValue("@QueryID", 1);

    con.Open();

    cmd.ExecuteNonQuery();

    con.Close();

}

Step 9

Final output.

output
 
Final output
 
Result

I am providing you the entire solution and table script. If you have any problem creating this then just run this solution and check it else you can comment on this article.