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.

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.
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head id="Head1" runat="server">
  3. <%--<meta http-equiv="refresh" content="30;url=WebCamCapture.aspx">--%>
  4. <style type="text/css">
  5. #profile_pic_wrapper
  6. {
  7. position: relative;
  8. border: #ccc solid 1px;
  9. width: 120px;
  10. height: 120px;
  11. border: none;
  12. }
  13. #profile_pic_wrapper a
  14. {
  15. position: absolute;
  16. display: none;
  17. top: 30;
  18. right: 0;
  19. margin-top: -30px;
  20. line-height: 20px;
  21. padding: 5px;
  22. color: #fff;
  23. background-color: #333;
  24. width: 110px;
  25. text-decoration: underline;
  26. text-align: center;
  27. z-index: 100;
  28. text-decoration: none;
  29. font-family: Arial;
  30. font-size: 10px;
  31. }
  32. #profile_pic_wrapper:hover a
  33. {
  34. position: absolute;
  35. margin: 90px 0px 0px 0px;
  36. display: block;
  37. text-decoration: none;
  38. font-family: Arial;
  39. font-size: 10px;
  40. }
  41. #profile_pic_wrapper:hover a:hover
  42. {
  43. text-decoration: none;
  44. font-family: Arial;
  45. font-size: 10px;
  46. }
  47. .profile_pic
  48. {
  49. width: 120px;
  50. height: 120px;
  51. }
  52. </style>
  53. <title>Web capture</title>
  54. </head>
  55. <body>
  56. <form id="form1" runat="server">
  57. <div style="float: left; padding-left: 35px;" id="profile_pic_wrapper">
  58. <asp:Image ID="img" Width="120" Height="120" runat="server" Style="float: left;" />
  59. <asp:LinkButton ID="Linkbutton1" runat="server" OnClick="Linkbutton1_Click">Change Photo</asp:LinkButton>
  60. </div>
  61. </form>
  62. </body>
  63. </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.

  1. protected void Page_Load(object sender, EventArgs e)
  2. {
  3. if (!IsPostBack)
  4. {
  5. SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["Mycon"].ToString());
  6. // connection of sql
  7. // used this StoredProcedure for reteriving image
  8. // According to user id i am reteriving image from database
  9. SqlCommand cmd = new SqlCommand("Usp_InsertImageDT", con);
  10. cmd.CommandType = CommandType.StoredProcedure;
  11. cmd.Parameters.AddWithValue("@UserImagename", null);
  12. cmd.Parameters.AddWithValue("@UserImagePath", null);
  13. cmd.Parameters.AddWithValue("@UserID", 0);
  14. cmd.Parameters.AddWithValue("@QueryID", 2);
  15. DataSet ds = new DataSet();
  16. SqlDataAdapter da = new SqlDataAdapter();
  17. da.SelectCommand = cmd;
  18. da.Fill(ds);
  19. if (ds.Tables[0].Rows.Count > 0)
  20. {
  21. img.ImageUrl = ds.Tables[0].Rows[0]["UserImagePath"].ToString();
  22. // Assiging image to Image Control
  23. }
  24. }
  25. }

Step 5: Button Linkbutton1 click code.

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

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.

  1. <script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
  2. <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.

  1. <div style="text-align: center; margin-bottom: 46px;">
  2. <a href="#" id="filter" onclick="javascript:UploadPic();">
  3. <input type="image" id="Submit" runat="server" src="images/submitBTN.png" />
  4. </a>
  5. </div>
  6. function UploadPic() {
  7. debugger;
  8. // generate the image data
  9. var canvas = document.getElementById("canvas");
  10. var dataURL = canvas.toDataURL("image/png");
  11. // Sending the image data to Server
  12. $.ajax({
  13. type: 'POST',
  14. url: "baseimg.aspx",
  15. data: { imgBase64: dataURL },
  16. success: function () {
  17. alert("Done, Picture Uploaded.");
  18. window.opener.location.reload(true); // reloading Parent page
  19. window.close();
  20. window.opener.setVal(1);
  21. return false;
  22. }
  23. });
  24. }

Step 8:

Baseimg.aspx

  1. protected void Page_Load(object sender, EventArgs e)
  2. {
  3. //called page form json for creating imgBase64 in image
  4. StreamReader reader = new StreamReader(Request.InputStream);
  5. String Data = Server.UrlDecode(reader.ReadToEnd());
  6. reader.Close();
  7. DateTime nm = DateTime.Now;
  8. string date = nm.ToString("yyyymmddMMss");
  9. //used date for creating Unique image name
  10. Session["capturedImageURL"] = Server.MapPath("~/Userimages/") + date + ".jpeg";
  11. Session["Imagename"] = date + ".jpeg";
  12. // We can use name of image where ever we required that why we are storing in Session
  13. drawimg(Data.Replace("imgBase64=data:image/png;base64,", String.Empty), Session["capturedImageURL"].ToString());
  14. // it is method
  15. // passing base64 string and string filename to Draw Image.
  16. insertImagePath(Session["Imagename"].ToString(), "~/Userimages/" + Session["Imagename"].ToString());
  17. // it is method
  18. //inserting image in to database
  19. }

Drawing Method

  1. public void drawimg(string base64, string filename) // Drawing image from Base64 string.
  2. {
  3. using (FileStream fs = new FileStream(filename, FileMode.OpenOrCreate, FileAccess.Write))
  4. {
  5. using (BinaryWriter bw = new BinaryWriter(fs))
  6. {
  7. byte[] data = Convert.FromBase64String(base64);
  8. bw.Write(data);
  9. bw.Close();
  10. }
  11. }
  12. }

Insert Image to Database Method

  1. public void insertImagePath(string imagename, string imagepath) // use for inserting image when it is created.
  2. {
  3. SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["Mycon"].ToString());
  4. SqlCommand cmd = new SqlCommand("Usp_InsertImageDT", con);
  5. cmd.CommandType = CommandType.StoredProcedure;
  6. cmd.Parameters.AddWithValue("@UserImagename", imagename);
  7. cmd.Parameters.AddWithValue("@UserImagePath", imagepath);
  8. cmd.Parameters.AddWithValue("@UserID", 1);
  9. cmd.Parameters.AddWithValue("@QueryID", 1);
  10. con.Open();
  11. cmd.ExecuteNonQuery();
  12. con.Close();
  13. }

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.