In this article I will explain with an example, how to capture still image / photo / picture from Web Camera (Webcam) using HTML5 and
jQuery in ASP.Net Core (.Net Core 7) Razor Pages.
The images (photos) captured using Web Camera (Webcam) will be saved in folder and displayed in Razor View in ASP.Net Core Razor Pages.
jQuery Webcam Plugin
This article uses
jQuery Webcam plugin is used to capture images (photos) from Web Camera (Webcam).
Index PageModel (Code-Behind)
The PageModel consists of the following Handler methods.
Handler method for handling GET operation
This Handler method is left empty as it is not required.
Handler method for handling File Upload operation
The Handler method is decorated with the following attributes.
ValidateAntiForgeryToken: The ValidateAntiForgeryToken attribute is used to prevent cross-site request forgery attacks.
Inside this Handler 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).
Finally, an EmptyResult (NULL) is returned.
public class IndexModel : PageModel
{
private IWebHostEnvironment Environment;
public IndexModel(IWebHostEnvironment _environment)
{
this.Environment = _environment;
}
public void OnGet()
{
}
[ValidateAntiForgeryToken]
public ActionResult OnPostSaveCapturedImage(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 = Path.Combine(this.Environment.WebRootPath, string.Format("Captures/{0}.jpg", fileName));
System.IO.File.WriteAllBytes(filePath, imageBytes);
return new EmptyResult();
}
}
Razor Page (HTML)
HTML Markup
The HTML of Razor Page consists of following elements:
div – For the displaying the Live Web Camera.
image – For displaying the captured image.
Button – One for capturing the picture using the Web Camera and another one for saving the captured Image in the Folder (Directory).
Inside the Razor Page, the following script files are inherited.
1. jquery.min.js
2. webcam.js
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.
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.
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 Handler method, it is converted into Image file and saved in Folder (Directory).
@page
@model Capture_WebCam_Core_Razor.Pages.IndexModel
@{
}
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
@Html.AntiForgeryToken()
<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>
<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 () {
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");
});
});
});
$("body").on("click", "#btnUpload", function () {
var token = $('input:hiddenname="__RequestVerificationToken"').val();
$.ajax({
type: "POST",
url: "/Index?handler=SaveCapturedImage",
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN", token);
},
data: { data: $("#imgCapture")0.src },
success: function (r) {
}
});
});
</script>
</body>
</html>
Screenshot
![ASP.Net Core Razor Pages Capture Image (Photo) from Web Camera (Webcam) using HTML5 and jQuery]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
