Welcome folks today in this blog post we will be capturing an image from webcam in asp.net using webcam.js library. All the full source code of the example is given below.
Get Started
In order to get started you need to make an index.html
file and copy paste the following code
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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> |
And now we will be writing the javascript code using the webcam.js library as shown below
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="WebCam.js" type="text/javascript"></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: "CS.aspx/SaveCapturedImage", data: "{data: '" + $("#imgCapture")[0].src + "'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (r) { } }); }); }); </script> |
Here as you can see we are including the webcam.js library cdn and also jquery cdn. And we are setting the config settings of the webcam.js library. Here we are setting the width and height of the webcam. And also we are setting the image format, and also the quality of the image file
And when we click the snapshot button we will be taking the image from the webcam. We will be using the base64 code. And we are sending this image to asp.net using the ajax post request.
And now we will be storing the captured image from the webcam to local disk using the C# code which is shown below
capturedImage.cs
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
using System.IO; using System.Web.Services; [WebMethod()] public static bool SaveCapturedImage(string data) { string fileName = 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 = HttpContext.Current.Server.MapPath(string.Format("~/Captures/{0}.jpg", fileName)); File.WriteAllBytes(filePath, imageBytes); return true; } |
And here we are using the c#
code to capture the image from the webcam and also we are writing the image to the local disk using the byte array.