In this article I will explain with an example, how to switch between front and back camera while capturing image (photo) from Web Camera (Webcam) using jQuery in ASP.Net with C# and VB.Net.
 
 

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.
 
 

HTML Markup

The HTML Markup consist of following elements:
div – For displaying Live Web Camera.
Image – For displaying the captured image.
Button – For capturing the picture using the Web Camera and one for uploading in the Folder (Directory).
<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="btnFrontBack" value="Back" />
            <input type="button" id="btnCapture" value="Capture" />
        </td>
        <td align = "center">
            <input type="button" id="btnUpload" value="Upload" disabled="disabled" />
        </td>
    </tr>
</table>
 
 

The jQuery Webcam Plugin Client Side implementation

Inside the HTML Markup, the following Script files are inherited.
1. jquery.min.js
2. webcam.js
 

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.
 

Switching the facing mode of Web Camera (Webcam)

When Switch Button is clicked, the facingmode of jQuery Webcam.js plugin is switched.
facingMode has following two options:
environment – To access the rear camera.
user - To access the front camera. It is by default if not set.
 

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 WebMethod, it is converted into Image file and saved in Folder (Directory).
 

Applying the jQuery Webcam.js plugin

Inside the jQuery document ready event handler, the jQuery Webcam plugin is applied to the HTML div.
The following are the configuration properties of the jQuery Webcam 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.
<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 () {
        ApplyPlugin();
        $("#btnCapture").click(function () {
            Webcam.snap(function (data_uri) {
                $("#imgCapture")[0].src = data_uri;
                $("#btnUpload").removeAttr("disabled");
            });
        });
 
        $("#btnFrontBack").click(function () {
            $('#btnFrontBack').val($('#btnFrontBack').val() == 'Back' ? 'Front' : 'Back');
            Webcam.reset();
            ApplyPlugin();
        });
 
        $("#btnUpload").click(function () {
            $.ajax({
                type: "POST",
                url: "Default.aspx/SaveCapturedImage",
                data: "{data: '" + $("#imgCapture")[0].src + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) { }
            });
        });
    });
 
    function ApplyPlugin() {
        var mode = $('#btnFrontBack').val() == 'Back' ? 'user' : 'environment';
        Webcam.set({
            width: 320,
            height: 240,
            image_format: 'jpeg',
            jpeg_quality: 90,
            constraints: { facingMode: mode }
        });
        Webcam.attach('#webcam');
    }
</script>
 
 

Namespaces

You will need to import the following namespaces.
C#
using System.IO;
using System.Web.Services;
 
VB.Net
Imports System.IO
Imports System.Web.Services
 
 

Saving image on Server Side using Web Method

The following WebMethod is called using jQuery AJAX after the Image (Photo) is captured and uploaded.
Inside the SaveCapturedImage WebMethod, a current date time is set using DateTime class which will be the name of the captured image.
The WebMethod accepts the captured Image file data in BASE64 string format.
The BASE64 string is converted into a BYTE Array and the BYTE Array is saved as Image file in the Folder (Directory).
Note: The method is declared as static (C#) and Shared (VB.Net) and also it is declared as WebMethod unless you do this you won�t be able to call the methods.
 
C#
[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;
}
 
VB.Net
<WebMethod>
Public Shared Function SaveCapturedImage(ByVal data As String) As Boolean
    Dim fileName As String = DateTime.Now.ToString("dd-MM-yy hh-mm-ss")
 
    'Convert Base64 Encoded string to Byte Array.
    Dim imageBytes() As Byte = Convert.FromBase64String(data.Split(",")(1))
 
    'Save the Byte Array as Image File.
    Dim filePath As String = HttpContext.Current.Server.MapPath(String.Format("~/Captures/{0}.jpg", fileName))
    File.WriteAllBytes(filePath, imageBytes)
    Return True
End Function
 
 

Screenshot

Switch between Front and Back camera in WebCam using jQuery in ASP.Net
 
 

Browser Compatibility

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

Demo

 
 

Downloads



Other available versions