I want to capture an image from webcam and save on server or send through ajax. And which would be better option from both and why ? Any available information is welcome. Thanks in advance
You can easily do this by following these steps
Step #1
Download Javascript Webcam project from Here
Step #2
Extract solution and add this complete solution with your existing asp.net mvc application using
Step #3
Open basic.html from demo folder replace with this
<!doctype html>
<html lang=en>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8>
<title>WebcamJS Test Page</title>
<style type=text/css>
body { font-family: Helvetica, sans-serif; }
h2, h3 { margin-top:0; }
form { margin-top: 15px; }
form > input { margin-right: 15px; }
#results { float:right; margin:20px; padding:20px; border:1px solid; background:#ccc; }
</style>
</head>
<body>
<div id=results>Your captured image will appear here...</div>
<h1>WebcamJS Test Page</h1>
<h3>Demonstrates simple 320x240 capture & display</h3>
<div id=my_camera></div>
<!-- First, include the Webcam.js JavaScript Library -->
<script type=text/javascript src=../webcam.min.js></script>
<!-- Configure a few settings and attach camera -->
<script language=JavaScript>
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#my_camera' );
</script>
<!-- A button for taking snaps -->
<form>
<input type=button id=takeshot value=Take Snapshot onClick=take_snapshot()>
</form>
<!-- Code to handle taking the snapshot and displaying it locally -->
<script language=JavaScript>
window.onload = function () {
setInterval(function () { take_snapshot() }, 5000);
}
function take_snapshot() {
// take snapshot and get image data
Webcam.snap( function(data_uri) {
// display results in page
document.getElementById('results').innerHTML =
'<h2>Here is your image:</h2>' +
'<img id=base64image src=' + data_uri + '/>';
});
var file = document.getElementById(base64image).src;
var formdata = new FormData();
formdata.append(base64image, file);
$.ajax({
url: http://localhost:26792/home/SaveImage,
type: POST,
data: formdata,
processData: false,
contentType: false
});
}
</script>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/3.2.1 /jquery.min.js></script>
</body>
</html>
Step #4
Replace Home controller with
public class HomeController : Controller
{
public ActionResult Index()
{
string[] allimage = System.IO.Directory.GetFiles(Server.MapPath(~/Content/Images/));
if (allimage.Length>0)
{
List<string> base64text = new List<string>();
foreach (var item in allimage)
{
base64text.Add(System.IO.File.ReadAllText(item.ToString()));
}
ViewBag.Images = base64text;
}
return View();
}
[HttpPost]
public void SaveImage(string base64image)
{
System.IO.File.WriteAllText(Server.MapPath(~/Content/Images/ + DateTime.Now.ToString(yyyyMMdd_hhmmss) + .txt), base64image);
}
}
Finally replace Index.html with
<h2>Capture images</h2>
@foreach (var item in ViewBag.Images)
{
<img src=@item />
}
Note
This code
will capture photo from webcam after every 5 second and save it to server as text file consist of base64 encode then Index action read them and and display as img src.
