<%@ page language="C#" autoeventwireup="true" inherits="WebcamCaptureJS, App_Web_syx4qq4v" enableEventValidation="false" viewStateEncryptionMode="Never" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title></title>

</head>
    <body>
    <form id="form1" runat="server">
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        Student Id : 
     <input type="text" id="StudentId" name="StudentId">
    </tr>
<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"/></td>
</tr>
<tr>
    <td align="center">
       <%--<asp:Button ID="btnCapture" UseSubmitBehavior="false" CssClass="btn-search btn fas" runat="Server" Text="Capture" onclick="UploadButton_Click" AutoPostBack="true"
                                            Width="250px"  />--%>
        <input type="button" id="btnCapture" value="Capture"/>
    </td>
    <td align="center">
         
        <input type="button" id="btnUpload" value="Upload" disabled="disabled"/>
    </td>
</tr>
</table>
            </form>
</body>
</html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="../../../JavaScript/Webcam_Plugin/WebCam.js"></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 () {
            if ($('#StudentId').val() == '') {
                alert('StudentId can not null');
                return false;
            }
            const urlParams = new URLSearchParams(window.location.search);
            const myParam = urlParams.get('UploadFor');
            $.ajax({
                type: "POST",
                url: "WebcamCaptureJS.aspx/SaveCapturedImage",
                data: '{"data":"' + $("#imgCapture")[0].src + '","StudentId":"' + $('#StudentId').val() + '","Uploadfor":"' + myParam + '"}',
                //data: "{data: '" + $("#imgCapture")[0].src + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {

                    $.ajax({
                        type: "POST",
                        url: "WebcamCaptureJS.aspx/SaveCapturedImageToDataBase",
                        data: '{"StudentId":"' + $('#StudentId').val() + '","Uploadfor":"' + myParam + '"}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (r) {
                            if (r.d == true) {
                                alert('Image Uploaded Successfully');
                                $("#imgCapture")[0].src = '';
                                //$("#imgCapture").remove();
                               // window.close();
                            }
                            else
                            {
                                alert('Id is not valid');
                                //$("#imgCapture").remove();
                                //window.close();
                            }
                        }
                    });
                }
            });
          
        });
    });
   
</script>

