Hi Apeksha,
Refer below code.
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
Session["CapturedImage"] = "";
return View();
}
public ActionResult Detail()
{
return View();
}
[HttpPost]
public ActionResult Capture()
{
if (Request.InputStream.Length > 0)
{
using (StreamReader reader = new StreamReader(Request.InputStream))
{
string hexString = Server.UrlEncode(reader.ReadToEnd());
string imageName = DateTime.Now.ToString("dd-MM-yy hh-mm-ss");
string imagePath = string.Format("~/Captures/{0}.png", imageName);
System.IO.File.WriteAllBytes(Server.MapPath(imagePath), ConvertHexToBytes(hexString));
Session["CapturedImage"] = VirtualPathUtility.ToAbsolute(imagePath);
}
}
return View();
}
[HttpPost]
public ContentResult GetCapture()
{
string url = Session["CapturedImage"].ToString();
Session["CapturedImage"] = null;
return Content(url);
}
private static byte[] ConvertHexToBytes(string hex)
{
byte[] bytes = new byte[hex.Length / 2];
for (int i = 0; i < hex.Length; i += 2)
{
bytes[i / 2] = Convert.ToByte(hex.Substring(i, 2), 16);
}
return bytes;
}
}
View
Index
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style type="text/css">
body {
font-family: Arial;
font-size: 10pt;
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center"><u>Live Camera</u></td>
</tr>
<tr>
<td><div id="webcam"></div> </td>
</tr>
</table>
<br />
<input type="button" value="Capture" onclick="Capture();" />
<br />
<span id="camStatus"></span>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="~/Webcam_Plugin/jquery.webcam.js"></script>
<script type="text/javascript">
$(function () {
jQuery("#webcam").webcam({
width: 320,
height: 240,
mode: "save",
swffile: '/Webcam_Plugin/jscam.swf',
debug: function (type, status) {
$('#camStatus').append(type + ": " + status + '<br /><br />');
},
onSave: function (data, ab) {
window.location.href = '@Url.Action("Detail", "Home")';
},
onCapture: function () {
webcam.save('/Home/Capture');
}
});
});
function Capture() {
webcam.capture();
}
</script>
</body>
</html>
Detail
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Detail</title>
<script type="text/javascript">
$(function () {
$.ajax({
type: "POST",
url: '/Home/GetCapture',
data: '',
contentType: "application/json; charset=utf-8",
dataType: "text",
success: function (r) {
$("#imgCapture").css("visibility", "visible");
$("#imgCapture").attr("src", r);
},
failure: function (response) {
alert(response.d);
}
});
});
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center"><u>Captured Picture</u></td>
</tr>
<tr>
<td><img id="imgCapture" style="visibility: hidden; width: 320px;height: 240px" /></td>
</tr>
</table>
</body>
</html>
