<%@ page language="C#" autoeventwireup="true" inherits="WebcamCaptureJS, App_Web_2ogbuyi5" 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" visible ="false">
    </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" visible ="false"/>
    </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");
                $.ajax({
                    type: "POST",
                    url: "CapturePhotoJS.aspx/SaveCapturedImage",
                    //data: '{"data":"' + $("#imgCapture")[0].src + '","StudentId":"' + $('#StudentId').val() + '"}',
                    data: "{data: '" + $("#imgCapture")[0].src + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (r) {

                    }
                });
            });
        });
       
        $("#btnUpload").click(function () {
                       
           
          
        });
    });
   
</script>

