In this article I will explain with an example, how to switch between front and back camera in Web Camera (Webcam) in ASP.Net MVC.
The images (photos) captured using Web Camera (Webcam) will be saved in folder and displayed in View in ASP.Net MVC.
jQuery Webcam Plugin
This article uses
jQuery Webcam plugin is used to capture images (photos) from Web Camera (Webcam).
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).
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()
{
return View();
}
[HttpPost]
public ContentResult SaveCapture(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 = Server.MapPath(string.Format("~/Captures/{0}.jpg", fileName));
System.IO.File.WriteAllBytes(filePath, imageBytes);
return Content("true");
}
}
View
HTML Markup
The View consists of:
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).
Inside the View, 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 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 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
SaveCapture Action method, it is converted into Image file and saved in Folder (Directory).
Applying the jQuery Webcam 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.
@{
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="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>
<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: "/Home/SaveCapture",
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>
</body>
</html>
Screenshot
![Capture Image (Photo) from Web Camera (Webcam) in ASP.Net MVC]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
