In this article I will explain with an example, how to save image captured using Web Camera (Webcam) into database in ASP.Net MVC.
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.
![ASP.Net MVC: Save Webcam capture to Database]()
Note: You can download the database table SQL by clicking the download link below.
Creating an Entity Data Model
The very first step is to create an ASP.Net MVC Application and connect it to the database using
Entity Framework.
Once the
Entity Framework is configured and connected to the database table, the Model will look as shown below.
![ASP.Net MVC: Save Webcam capture to Database]()
Controller
The Controller consists of following Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
Action method for handling POST operation for saving the Captured Image
Inside this Action method, the captured Image data is received 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 is saved into the database using
Entity Framework.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
[HttpPost]
public ContentResult SaveCapture(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.
dbFilesEntities entities = new dbFilesEntities();
entities.tblFiles.Add(new tblFile
{
Name = fileName,
ContentType = "image/jpeg",
Data = imageBytes
});
entities.SaveChanges();
return Content("true");
}
}
View
HTML Markup
The View 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.
Inside the View, 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 Action method using
jQuery AJAX call where it is saved into the database.
Finally, success message is displayed using
JavaScript Alert Message Box.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<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: "/Home/SaveCapture",
data: "{data: '" + $("#imgCapture")[0].src + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
if (r) {
$("#imgCapture")[0].src = "";
alert("Image uploaded successfully.");
}
}
});
});
});
</script>
</head>
<body>
<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>
</body>
</html>
Screenshots
![ASP.Net MVC: Save Webcam capture to Database]()
Inserted Record in Database
![ASP.Net MVC: Save Webcam capture to Database]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Downloads
