Hi Amol111,

Do you want to open Captured Picture in Ajax modal popup?

Hi Thanks @Dharmendr for reply !!

I want to open Web cam in Ajax modal popup.

In modal popup - 1div for Camera and 2 div for Captured image.

Then Web method save and store image path in Session.

So i can use in a page.

Hi Amol111,

Check this example. Now please take its reference and correct your code.

HTML

<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
<asp:Button ID="btnShow" runat="server" Text="Show Modal Popup" OnClientClick="return ShowModalPopup()" />
<asp:LinkButton ID="lnkDummy" runat="server"></asp:LinkButton>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="mpe" runat="server"
    PopupControlID="pnlPopup" TargetControlID="lnkDummy" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="display: none">
    <div class="header">
        Modal Popup
    </div>
    <div class="body">
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <th align="center"><u>Live Camera</u></th>
                <th align="center"><u>Captured Picture</u></th>
            </tr>
            <tr>
                <td><div id="webcam"></div></td>
                <td><img id="imgCapture" alt="" /></td>
            </tr>
            <tr>
                <td align="center">
                    <input type="button" id="btnCapture" value="Capture" />
                </td>
                <td align="center">
                    <input type="button" id="btnUpload" value="Upload" disabled="disabled" />
                </td>
            </tr>
        </table>
        <br />
        <asp:Button ID="btnHide" runat="server" Text="Hide Modal Popup" OnClientClick="return HideModalPopup()" />
    </div>
</asp:Panel>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="WebCam.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        Webcam.set({
            width: 320,
            height: 240,
            image_format: 'jpeg',
            jpeg_quality: 90
        });
        Webcam.attach('#webcam');
        $("#btnCapture").click(function () {
            Webcam.snap(function (data_uri) {
                $("#imgCapture")[0].src = data_uri;
                $("#btnUpload").removeAttr("disabled");
            });
        });
        $("#btnUpload").click(function () {
            $.ajax({
                type: "POST",
                url: "Default.aspx/SaveCapturedImage",
                data: "{data: '" + $("#imgCapture")[0].src + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) { }
            });
        });
    });

    function ShowModalPopup() {
        $find("mpe").show();
        return false;
    }
    function HideModalPopup() {
        $find("mpe").hide();
        return false;
    }
</script>

Code

C#

[System.Web.Services.WebMethod()]
public static bool SaveCapturedImage(string data)
{
    string fileName = DateTime.Now.ToString("dd-MM-yy hh-mm-ss");
    byte[] imageBytes = Convert.FromBase64String(data.Split(',')[1]);
    //Save the Byte Array as Image File.
    string filePath = HttpContext.Current.Server.MapPath(string.Format("~/Captures/{0}.jpg", fileName));
    HttpContext.Current.Session["Path"] = string.Format("~/Captures/{0}.jpg", fileName);
    System.IO.File.WriteAllBytes(filePath, imageBytes);
    return true;
}

VB.Net

<System.Web.Services.WebMethod()>
Public Shared Function SaveCapturedImage(ByVal data As String) As Boolean
    Dim fileName As String = DateTime.Now.ToString("dd-MM-yy hh-mm-ss")
    Dim imageBytes As Byte() = Convert.FromBase64String(data.Split(","c)(1))
    Dim filePath As String = HttpContext.Current.Server.MapPath(String.Format("~/Captures/{0}.jpg", fileName))
    HttpContext.Current.Session("Path") = String.Format("~/Captures/{0}.jpg", fileName)
    System.IO.File.WriteAllBytes(filePath, imageBytes)
    Return True
End Function