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 on the web page. It provides a live camera view that means it provides video streaming continuously and provides a mechanism to capture a single photo from the video stream.
In technically, the WebcamJS takes help of HTML element like div to display video streaming and the total communication happens between html element and Webcam with the help of data_uri scheme.
The data URI scheme is a uniform resource identifier called the 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 the video stream and save it in local drive as well as displays it in a web page.
For the continuous video stream, this demonstration takes the help of an HTML div element and to display captured photos, it used an HTML IMG tag. Two HTML buttons are used to start capturing photos from video streaming and display in the HTML IMG element, the 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>
JavaScript code for Capturing Video Stream from Webcam
In the above code snippet, the Webcam.set the method creates a frame having width 300px and height 300px and the webcam library will render video streaming in the same size as well with having quality 90 percent. The Webcam will render each frame of video streaming in the jpeg format.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>
In the above code the javascript capturephoto method called to the Webcam.snap method to capture image from video streaming. Inside the Webcam.snap method two lines of code is there which render img tag in to PhotoViewer div tag (the code of div tag is given below) and set path of img tag, an a tag to download captured image.
<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>
JavaScript code for Capturing photo from video streaming
Above code removed the img tag and a tag from the container to revert the captured image. These above are the core concept which helps capturing photo from attached camera, see the below code to get the hole idea of the concept.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.
 |
Capture photos from a webcam in MVC |
Thanks