In this article I will explain with an example, how to capture [Non-Flash] image from Web Camera (Webcam) in ASP.Net Core (.Net Core 8) MVC.
Note: For beginners in ASP.Net Core (.Net Core 8) MVC, please refer my article ASP.Net Core 8: Hello World Tutorial with Sample Program example.
 
The images (photos) captured using Web Camera (Webcam) will be saved in folder and displayed in View in ASP.Net Core (.Net Core 8) MVC.
 
 

jQuery Webcam Plugin

This article uses jQuery Webcam plugin is used to capture images (photos) from Web Camera (Webcam).
For more information, please refer jQuery Webcam Plugin Documentation.
 
 

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

Inside this Action method, the Captured Image is received in BASE64 string format.
Then, the BASE64 string is converted into a BYTE Array and the BYTE Array is saved as Image file in the Folder (Directory).
Finally, an EmptyResult (NULL) is returned.
public class HomeController : Controller
{
    private IWebHostEnvironment Environment;
 
    public HomeController(IWebHostEnvironment _environment)
    {
        Environment = _environment;
    }
 
    public IActionResult Index()
    {
 
        return View();
    }
 
    [HttpPost]
    public IActionResult SaveCapturedImage(string data)
    {
        string fileName = DateTime.Now.ToString("dd-MM-yyhh-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}.jpg", fileName));
        System.IO.File.WriteAllBytes(filePath, imageBytes);
        return new EmptyResult();
    }
}
 
 

View

HTML Markup

The HTML of View consists of following elements:
div – For the displaying the Live Web Camera.
image – For displaying the captured image.
Button – One for capturing the picture using the Web Camera and another one for saving the captured Image in the Folder (Directory).
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 of the Image i.e. JPEG, PNG, etc.
jpeg_quality – The quality of the captured Image.
 

Capturing the Image from Web Camera (Webcam)

When the Capture Button is clicked, the Image is captured from Web Camera (Webcam) using the snap function of the jQuery Webcam.js plugin.
Then, the captured Image data in BASE64 string format is assigned to the HTML Image element.
 

Uploading the Image from Web Camera (Webcam)

When the Upload Button is clicked, the captured Image data in BASE64 string format is uploaded to Server using jQuery AJAX call and then inside the SaveCapture Action method, it is converted into Image file and saved in Folder (Directory).
@{
     Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</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"/>
            </td>
        </tr>
    </table>
    <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/SaveCapturedImage",
                     data: { data: $("#imgCapture")[0].src },
                     success: function  (r){ }
                });
            });
        });
    </script>
</body>
</html>
 
 

Screenshot

ASP.Net Core: [Non-Flash] Capture Image (Photo) from Web Camera (Webcam)
 
 

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.
 
 

Demo

View Demo
 
 

Downloads

Download Code


Other available versions