I am using jquery webcam plugin in a MVC4 page. The plugin is here: http://www.xarg.org/project/jquery-webcam-plugin/.
1.It is properly working in Chrome and IE.Image shown under "Live Camera" label is showing live camera result.Which is not displaying in firefox.
Here my code of .cshtml page
<div class="modal-dialog" style="width: 560px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" tabindex="-1">
<img src="~/Content/images/btn_close.png" alt=""></button>
<h4 class="modal-title" id="myModalLabel">Capture Image</h4>
</div>
<div class="padLeftRight15">
<div id="lblSKLCreateErrorMessage" class="alert alert-danger" style="display: none"></div>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" id="Profile-CaptureImage-form">
<table border="0">
<tr>
<td align="center">
<u>Live Camera</u>
</td>
<td></td>
<td align="center">
<u>Captured Picture</u>
</td>
</tr>
<tr>
<td>
<div id="webcam">
</div>
</td>
<td>
</td>
<td>
<img id="imgCapture" style="visibility: hidden" width="250" height="200" />
</td>
</tr>
<tr>
<td>
<input type="button" id="btnCapture" value="Capture" onclick="Capture();" />
</td>
<td></td>
<td>
<input type="button" id="btnSave" value="Save Image" style="visibility: hidden" data-dismiss="modal" onclick="SaveImage();" />
</td>
</tr>
</table>
<br />
<br />
<span id="camStatus"></span>
</form>
</div>
</div>
$(document).ready(function () {
LoadImage();
});
function Capture() {
webcam.capture();
return false;
}
function LoadImage() {
jQuery("#webcam").webcam({
width: 250,
height: 240,
mode: "save",
swffile: "@Url.Content("~/Scripts/Webcam_Plugin/jscam.swf")",
debug: function (type, status) {
$('#camStatus').append(type + ": " + status + '<br /><br />');
},
onSave: function (data) {
$.ajax({
type: "POST",
url: "@(Url.Action("GetCapturedImage", "Registration", new { ProfileCode = Model.ProfileCode }))",
data: '',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
$('#btnSave').css("visibility", "visible");
$('#imgCapture').css("visibility", "visible");
$('#imgCapture').attr("src", r + "?ts=" + Date.now());
},
failure: function (response) {
alert(response.d);
}
});
},
onCapture: function () {
webcam.save("@(Url.Action("CaptureImage", "Registration", new { ProfileCode = Model.ProfileCode }))");
}
});
}
function SaveImage() {
$('#btnUploadProfilePhoto').val("");
$('#preview').attr("src", '@(RMSApp.Common.ProjectConfiguration.ProfileImagePath + Model.ProfileCode + ".png?ts=123")' + Date.now());
$('#hdnImagePath').val('@(Model.ProfileCode + ".png")');
$("#CaptureImageModel").html('');
}
Here is code of controller
public ActionResult CaptureImage(string ProfileCode)
{
Profile obj = new Profile();
obj.ProfileCode = ProfileCode;
if (Request.InputStream.Length > 0)
{
using (StreamReader reader = new StreamReader(Request.InputStream))
{
string hexString = Server.UrlEncode(reader.ReadToEnd());
string imageName = ProfileCode.Trim();
//string imageName = FirstName.Trim() + "_" + (string.IsNullOrEmpty(MiddleName) ? "" : MiddleName.Trim().Substring(0, 1) + "_") + (string.IsNullOrEmpty(LastName) ? "" : LastName.Trim());
string imagePath = string.Format("~/Documents/ProfileImages/{0}.png", imageName);
string directoryName = Server.MapPath("~/" + ProjectConfiguration.ProfileImageFolder);
if (!Directory.Exists(directoryName))
Directory.CreateDirectory(directoryName);
if (!string.IsNullOrEmpty(imagePath))
{
string existingImage = Path.Combine(directoryName, imagePath);
if (System.IO.File.Exists(existingImage))
System.IO.File.Delete(existingImage);
System.IO.File.WriteAllBytes(Server.MapPath(imagePath), ConvertHexToBytes(hexString));
}
}
}
return PartialView("CaptureImage",obj);
}
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;
}
public JsonResult GetCapturedImage(string ProfileCode)
{
string imagePath = string.Format(System.Configuration.ConfigurationManager.AppSettings["ProfileImages"] + ProfileCode +".png");
return Json(imagePath);
}
I got solution!
"fade in" class of Model is creating issue in showing WebCam result in firefox browser.