In this article I will explain with an example, how to save image captured using Web Camera (Webcam) into database in ASP.Net using C# and VB.Net.
jQuery Webcam Plugin
The complete documentation is available in the following link.
Database
I have made use of the following table Files with the schema as follow.
![Save Webcam capture to Database in ASP.Net]()
Note: You can download the database table SQL by clicking the download link below.
HTML Markup
The HTML Markup consists of following elements:
DIV – For displaying Live Web Camera.
IMG – For displaying the captured image.
Buttons – One for capturing the picture using the Web Camera (Webcam) and another one for saving it into the database.
The Button for saving captured image is made disabled and it will be made enabled once the Image is captured.
<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
You will need to import the following namespaces.
C#
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Services;
VB.Net
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Web.Services
Saving Captured Image in database
The
WebMethod accepts the captured Image data as parameter in BASE64 string format.
Finally, the BASE64 string is converted into a BYTE Array and the BYTE Array along with the Name and Content Type of the file is saved into the database.
C#
[WebMethod]
public static bool SaveCapturedImage(string data)
{
string fileName = string.Format("{0}.jpg", DateTime.Now.ToString("dd-MM-yy hh-mm-ss"));
//Convert Base64 Encoded string to Byte Array.
byte[] imageBytes = Convert.FromBase64String(data.Split(',')[1]);
//Insert Image in Database.
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
string query = "INSERT INTO tblFiles VALUES (@Name, @ContentType, @Data)";
using (SqlCommand cmd = new SqlCommand(query, con))
{
cmd.Parameters.AddWithValue("@Name", fileName);
cmd.Parameters.AddWithValue("@ContentType", "image/jpeg");
cmd.Parameters.AddWithValue("@Data", imageBytes);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
}
return true;
}
VB.Net
<WebMethod>
Public Shared Function SaveCapturedImage(ByVal data As String) As Boolean
Dim fileName As String = String.Format("{0}.jpg", 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))
'Insert Image in Database.
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using conn As SqlConnection = New SqlConnection(constr)
Dim sql As String = "INSERT INTO tblFiles VALUES (@Name, @ContentType, @Data)"
Using cmd As SqlCommand = New SqlCommand(sql, conn)
cmd.Parameters.AddWithValue("@Name", fileName)
cmd.Parameters.AddWithValue("@ContentType", "image/jpeg")
cmd.Parameters.AddWithValue("@Data", imageBytes)
conn.Open()
cmd.ExecuteNonQuery()
conn.Close()
End Using
End Using
Return True
End Function
The jQuery Webcam Plugin Client Side implementations
Inside the HTML Markup, the following script files are inherited.
1. jquery.min.js.
2. webcam.js.
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:
width – Width of the DIV that displays the live camera.
height – Height of the DIV that displays the live camera.
image_format – The file format in which the captured file will be saved i.e. JPEG, PNG, etc.
jpeg_quality – The quality of the captured Image. Doubt
Capturing the Image from Web Camera (Webcam)
When Capture Button is clicked, the Image is captured using Web Camera (Webcam).
Uploading the Image from Web Camera (Webcam)
When the
Upload Button is clicked, the captured Image data in BASE64 string format is sent to Server-Side
WebMethod (explained earlier) using
jQuery AJAX call where it is saved into the database.
Finally, success message is displayed using
JavaScript Alert Message Box.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.26/webcam.js"></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: "Default.aspx/SaveCapturedImage",
data: "{data: '" + $("#imgCapture")[0].src + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
if (r.d) {
$("#imgCapture")[0].src = "";
alert("Image uploaded successfully.");
}
}
});
});
});
</script>
Screenshots
![Save Webcam capture to Database in ASP.Net]()
Inserted Record in Database
![Save Webcam capture to Database in ASP.Net]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Downloads
