Introduction
This article demonstrates how to capture photo from webcam or inbuild Cam in MVC using WebcamJS library.
Getting Started
As mentioned in the introduction section this demonstration uses WebcamJS which helps capture images or photos from Webcam and computer’s camera as well. Before starting demonstration let’s discuss about WebcamJS .
WebcamJS is standalone JavaScript library which is developed to capture photo from Webcam as well as computer’s camera. The captured photo can be saved in local drive as well as display in web page. It provides live camera view means it provides video streaming continuously and provides mechanism to capture a single photo from the video stream.
The data URI scheme is a uniform resource identifier called URI scheme which provides a way to include data in-line in web pages as it is external resources. This technique allows normally separate elements such as images and style sheets to be fetched in a single Hypertext Transfer Protocol called HTTP request, which may be more efficient than multiple HTTP requests and used by several browser extensions to package images as well as other multimedia contents in a single HTML file for page saving.
Demonstration
This demonstration is conducted with the HTML but can be used in APS.NET as well as ASP.NET MVC. Here it will display video streaming using html element and WebcamJS library then capture a photo from video stream and save it in local drive as well as displays it in web page.
For the continuous video stream, this demonstration takes help of html div element and to display captured photo, it used html img tag. Two HTML button are used to start capturing photo from video streaming and display in the HTML img element, other button is used to clear the img HTML tag that means revert the capture. One a tag is used to same capture photo or image into local drive.
The WebcamJS library is initialized with help of WebcamJS libraries attach method when the page is gets loaded. WebcamJS is initialized and activated by attaching a live camera viewer to a DOM element. The below code initializes webcam and renders the video streaming to html element whose id will pass as parameter.
Webcam.attach( '#html element or DOM element id' );
<script language="JavaScript">
Webcam.set({
width: 300,
height: 300,
image_format: 'jpeg',
jpeg_quality: 90,
constraints: {
width: 300, // { exact: 320 },
height: 300, // { exact: 180 },
facingMode: 'user',
frameRate: 30
}
});
Webcam.attach( '#videoViwer' );
</script>
The Webcam.snap method of WebcamJS library helps capture image from video streaming and renders the image in img tag of HTML. It takes data_uri as parameter, see the below syntax of Webcam.snap method.
Webcam.snap( function(data_uri) {});
Example:-
<script language="JavaScript">
function capturephoto() {
// take snapshot and get image data
Webcam.snap( function(data_uri) {
// display results in page
document.getElementById('PhotoViwer').innerHTML ='<img src="'+data_uri+'"/>';
document.getElementById('savebuttonholder').innerHTML ='<a class="button" href="'+data_uri+'" download="capture.jpg">Save Photo</a>';
} );
}
</script>
<div id="PhotoViwer" style="border:1px solid black;height:300px;background-color: gray;" ></div>
<div id="savebuttonholder" align="center"></div>
<script language="JavaScript">
function resetphoto() {
document.getElementById('PhotoViwer').innerHTML ='';
document.getElementById('savebuttonholder').innerHTML ='';
}
</script>
Code Snippet
<HTML>
<HEAD>
<meta charset="utf-8" />
<TITLE>
Capture Photo from Webcam or inbuild cam in MVC
</TITLE>
<script type="text/javascript" src="webcam.min.js"></script>
<style>
table, th, td {
border: 1px solid black;
}
.button {
appearance: button;
-moz-appearance: button;
-webkit-appearance: button;
text-decoration: none; font: menu; color: ButtonText;
display: inline-block; padding: 2px 8px;
font-size: 15px;
}
</style>
</HEAD>
<BODY>
<table>
<caption>
<b>Demonstration: -Capture Photo from Webcam or inbuild cam in MVC</b>
</caption>
<TR align="center">
<TD>
<b>Live Photo</b>
</TD>
<TD>
<b>Captured Photo</b>
</TD>
</TR>
<TR>
<TD>
<div id="videoViwer" style="border:1px solid black;"></div>
</TD>
<TD height="300" width="300">
<div id="PhotoViwer" style="border:1px solid black;height:300px;background-color: gray;" ></div>
</TD>
</TR>
<TR align="center">
<TD >
<input type=button value="Capture Photo" onClick="capturephoto()" >
</TD>
<TD>
<input type=button value="Reset" onclick="resetphoto()">
</TD>
</TR>
<TR>
<TD colspan="2" height="30">
<div id="savebuttonholder" align="center"></div>
</TD>
</TR>
</table>
</BODY>
<script language="JavaScript">
Webcam.set({
width: 300,
height: 300,
image_format: 'jpeg',
jpeg_quality: 90,
constraints: {
width: 300, // { exact: 320 },
height: 300, // { exact: 180 },
facingMode: 'user',
frameRate: 30
}
});
Webcam.attach( '#videoViwer' );
</script>
<script language="JavaScript">
function capturephoto() {
// take snapshot and get image data
Webcam.snap( function(data_uri) {
// display results in page
document.getElementById('PhotoViwer').innerHTML ='<img src="'+data_uri+'"/>';
document.getElementById('savebuttonholder').innerHTML ='<a class="button" href="'+data_uri+'" download="capture.jpg">Save Photo</a>';
} );
}
</script>
<script language="JavaScript">
function resetphoto() {
document.getElementById('PhotoViwer').innerHTML ='';
document.getElementById('savebuttonholder').innerHTML ='';
}
</script>
</HTML>
Note:-
To demonstrate the code , first create a folder in your local drive name it CameraDemo. Download the WebcamJS library(webcam.min.js) from the link given and save it in the created folder. In the same folder create an html file copy and past the just above code and save it in the HTML file. Open the file in the browser, the demonstration automatically will start.
Thanks
