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
- Download the webcam folder and extract it.
- Add that entire folder to your web application.
- Download the Scripts folder and run them in your SQL Server.
- 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
- Image Control
- 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.
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.
- Captureimage.aspx
The Captureimage.aspx Page contains code for waking up the WebCam and capturing the image.
- 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.
![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.