In this article I will explain with an example, how to capture still image / photo / picture from Web Camera (Webcam) in ASP.Net MVC 5 Razor.
jQuery Webcam plugin is used to capture images (photos) from Web Camera (Webcam). The images (photos) captured using Web Camera (Webcam) will be saved in folder and displayed in View in ASP.Net MVC 5 Razor.
 
jQuery Webcam Plugin
You will need to download the jQuery Webcam plugin from the following location, it is also available in the attached source code of this article.
 
View
The View consists of an HTML DIV for the displaying the Live Web Camera, an HTML Image element for displaying the captured image, an HTML SPAN for displaying the status of the Web Camera and an HTML Button for capturing the picture using the Web Camera.
Inside the jQuery load event handler, the jQuery Webcam plugin is applied to the HTML DIV so that the live web camera recording can be played on the View.
jQuery Webcam plugin Properties and Events
Properties
1. width – Width of the DIV that displays the live camera.
2. height – Height of the DIV that displays the live camera.
3. mode – There are different modes such as callback, save, etc. This article makes use of the save mode as the captured image needs to be uploaded on the server.
4. swffile – The path of the Flash file that will be used for displaying the web camera on the page.
Events
1. debug – This event is a debugging event and is triggered after every time the jQuery Webcam plugin performs some operation. This event can be used to display the status of the jQuery Webcam plugin.
2. onSave – This event is triggered after the image is captured and uploaded to the server.
3. onCapture - This event is trigged when the capture function of the jQuery Webcam plugin is executed.
When the Button is clicked the JavaScript function named Capture is executed which makes a call to the capture method of the jQuery Webcam plugin.
Once the image is captured it is uploaded to the server using the save method of the jQuery Webcam plugin which is called within the OnCapture event handler.
Once the image is successfully uploaded to the server, a jQuery AJAX call to the GetCapture Action method which returns the URL of the captured image saved on the server and this URL is then assigned to the HTML Image element.
@{
    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>
            <td align="center"><u>Live Camera</u></td>
            <td></td>
            <td align="center"><u>Captured Picture</u></td>
        </tr>
        <tr>
            <td><div id="webcam"></div></td>
            <td>&nbsp;</td>
            <td><img id="imgCapture" style="visibility: hidden; width: 320px;height: 240px"/></td>
        </tr>
    </table>
    <br/>
    <input type="button" value="Capture" onclick="Capture();"/>
    <br/>
    <span id="camStatus"></span>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="~/Webcam_Plugin/jquery.webcam.js"></script>
    <script type="text/javascript">
        $(function () {
            jQuery("#webcam").webcam({
                width: 320,
                height: 240,
                mode: "save",
                swffile: '/Webcam_Plugin/jscam.swf',
                debug: function (type, status) {
                    $('#camStatus').append(type + ": " + status + '<br /><br />');
                },
                onSave: function (data, ab) {
                    $.ajax({
                        type: "POST",
                        url: '/Home/GetCapture',
                        data: '',
                        contentType: "application/json; charset=utf-8",
                        dataType: "text",
                        success: function (r) {
                            $("#imgCapture").css("visibility", "visible");
                            $("#imgCapture").attr("src", r);
                        },
                        failure: function (response) {
                            alert(response.d);
                        }
                    });
                },
                onCapture: function () {
                    webcam.save('/Home/Capture');
                }
            });
        });
        function Capture() {
            webcam.capture();
        }
    </script>
</body>
</html>
 
 
Controller
The Controller consists of three Action methods.
Action method for handling GET operation
Inside this Action method, the Session variable which stores the URL of the Captured Image is initialized and the View is returned.
 
HTTP POST Action method for saving the Captured Image
The Captured Image is send as raw data in the form of Hexadecimal string by the save method of the jQuery Webcam plugin.
The raw data of the Captured Image is read using the StreamReader class and it is converted to a Hexadecimal string.
Then the Hexadecimal string is converted to a Byte Array which is finally saved as an Image file in a folder and the URL of the saved Captured Image is stored into the Session variable.
 
HTTP POST Action method for returning the URL of Captured Image
This Action method will be called using jQuery AJAX and it returns the URL from the Session variable and then destroys the Session variable.
Note: The return type of this Action method is set as ContentResult as it simply returns a string. For more details, please refer my article ASP.Net MVC ContentResult Example.
 
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        Session["CapturedImage"] = "";
        return View();
    }
 
    [HttpPost]
    public ActionResult Capture()
    {
        if (Request.InputStream.Length > 0)
        {
            using (StreamReader reader = new StreamReader(Request.InputStream))
            {
                string hexString = Server.UrlEncode(reader.ReadToEnd());
                string imageName = DateTime.Now.ToString("dd-MM-yy hh-mm-ss");
                string imagePath = string.Format("~/Captures/{0}.png", imageName);
                System.IO.File.WriteAllBytes(Server.MapPath(imagePath), ConvertHexToBytes(hexString));
                Session["CapturedImage"] = VirtualPathUtility.ToAbsolute(imagePath);
            }
        }
 
        return View();
    }
 
    [HttpPost]
    public ContentResult GetCapture()
    {
        string url = Session["CapturedImage"].ToString();
        Session["CapturedImage"] = null;
        return Content(url);
    }
 
    private static byte[] ConvertHexToBytes(string hex)
    {
        byte[] bytes = new byte[hex.Length / 2];
        for (int i = 0; i < hex.Length; i += 2)
        {
            bytes[i / 2] = Convert.ToByte(hex.Substring(i, 2), 16);
        }
        return bytes;
    }
}
 
 
Screenshots
Adobe Flash is requesting user to grant access to the Web Camera
Capture Image (Photo) from Web Camera (Webcam) in ASP.Net MVC
 
The jQuery Webcam plugin displaying live recording from the Web Camera
Capture Image (Photo) from Web Camera (Webcam) in ASP.Net MVC
 
The captured image being displayed next to the live recording from the Web Camera
Capture Image (Photo) from Web Camera (Webcam) in ASP.Net MVC
 
 
Downloads