In this article I will explain with an example, how to save image captured using Web Camera (Webcam) into database in ASP.Net Core (.Net Core) MVC.
Note: For beginners in ASP.Net Core (.Net Core 7) MVC, please refer my article ASP.Net Core 7: Hello World Tutorial with Sample Program example.
 
 

jQuery Webcam Plugin

The complete documentation is available in the following link.
jQuery Webcam Plugin
 
 

Captures Folder Location

The Captures Folder (Directory) is located inside the wwwroot Folder (Directory).
ASP.Net Core: Save Webcam capture to Database
 
 

Database

I have made use of the following table Files with the schema as follow.
ASP.Net Core: Save Webcam capture to Database
 
Note: You can download the database table SQL by clicking the download link below.
            Download SQL file
 
 

Database Context

Once the Entity Framework is configured and connected to the database table, the Database Context will look as shown below.
Note: For beginners in ASP.Net Core and Entity Framework, please refer my article ASP.Net Core 7: Simple Entity Framework Tutorial with example. It covers all the information needed for connecting and configuring Entity Framework with ASP.Net Core.
 
using Microsoft.EntityFrameworkCore;
 
namespace WebCam_InsertDB_Core_MVC
{
    public class DBCtx : DbContext
    {
        public DBCtx(DbContextOptions<DBCtx> options) : base(options)
        {
        }
 
        public DbSet<FileModel> Files { get; set; }
    }
}
 
 

Model

The Model class consists of following properties.
public class FileModel
{
    [Key]
    public int FileId { get; set; }
    public string Name { get; set; }
    public string Path { get; set; }
}
 
 

Controller

Inside the Controller, first the private property IWebHostEnvironment interface and DbContext class are created.
Then, these properties are injected into the Constructor (HomeController) using Dependency Injection method and the injected object is assigned to private properties (created earlier).
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.
Then, the BASE64 string is converted into a BYTE Array and file path is read using IWebHostEnvironment interface and the BYTE Array is saved as Image file into the Folder (Directory) named Captures.
Note: For more details on IWebHostEnvironment interface, please refer Using IWebHostEnvironment in ASP.Net Core. For more details on how to access Static Files in Core, please refer my article .Net Core 7: Static Files (Images, CSS and JS files) in ASP.Net Core.
 
Finally, the BYTE Array along with the Name and Content Type is saved into the database using Entity Framework and the string message is sent to the Client using Content function.
Note: The Content function sends the data to the Response similar to Response.Write function.
 
public class HomeController : Controller
{
    private IWebHostEnvironment Environment;
    private DBCtx Context { get; }
    public HomeController(IWebHostEnvironment _environment, DBCtx _context)
    {
        this.Environment = _environment;
        this.Context = _context;
    }
 
    public IActionResult 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]);
 
        //Save the Byte Array as Image File.
        string filePath = Path.Combine(this.Environment.WebRootPath, string.Format("Captures/{0}", fileName)); 
        System.IO.File.WriteAllBytes(filePath, imageBytes);
 
        // Insert Image Name and Path in Database.
        this.Context.Files.Add(new FileModel
        {
             Name = Path.GetFileName(fileName),
             Path = string.Format("~/Captures/{0}", fileName)
        });
        this.Context.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).
Note: For more details on how to implement Webcam and Capture Image from Web Camera, please refer my article ASP.Net Core: Capture Image (Photo) from 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 () {
                var obj = {};
                obj.data = $("#imgCapture")[0].src;
                $.ajax({
                     type: "POST",
                     url: "/Home/SaveCapture",
                     data: obj,
                     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 Core: Save Webcam capture to Database
 

Inserted Record in Database

ASP.Net Core: Save Webcam capture to Database
 
 

Browser Compatibility

The above code has been tested in the following browsers.
Microsoft Edge   FireFox  Chrome  Safari  Opera
* All browser logos displayed above are property of their respective owners.
 
 

Downloads

Download Code