Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

C# ASP.NET Project to Capture Image From Webcam Using Webcam.js Library in Browser

Posted on October 2, 2022

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

 

 

JavaScript
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

 

 

C#
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.

 

 

Recent Posts

  • Angular 14/15 JWT Login & Registration Auth System in Node.js & Express Using MongoDB in Browser
  • Build a JWT Login & Registration Auth System in Node.js & Express Using MongoDB in Browser
  • React-Admin Example to Create CRUD REST API Using JSON-Server Library in Browser Using Javascript
  • Javascript Papaparse Example to Parse CSV Files and Export to JSON File and Download it as Attachment
  • Javascript Select2.js Example to Display Single & Multi-Select Dropdown & Fetch Remote Data Using Ajax in Dropdown
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme