asp.net-mvc-4jquery-webcam-plugin

JQuery WebCam Result not showing in Firefox


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.

enter image description here

  1. Below image is of Firefox.Live camera result is not showing only. Captured image saved successfully in my Image folder.

enter image description here

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>&nbsp;
                    </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);
    }

Solution

  • I got solution!

    "fade in" class of Model is creating issue in showing WebCam result in firefox browser.