[Solved] Capture Image from webcam not working in content page with master page

Below code was copied from your website to capture image from a webcam but cannot save into a folder or database when the content page is with master page.

Please help

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="Edit_Photo.aspx.vb" Inherits="Top_High_Schools.Edit_Photo" %>

<%@ Register Assembly="DevExpress.Web.v19.1" Namespace="DevExpress.Web" TagPrefix="dx" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.js"></script>
    <script src="WebCam.js"></script>
    <script type="text/javascript">
        function ShowImagePreview(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#<%=ImgPrv.ClientID%>').prop('src', e.target.result)
                        .width(150)
                        .height(150);
                };
                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>
    <script src="webcamjs/webcam.min.js"></script>
    <script src="webcamjs/webcam.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h4 class="h4 mb-0 text-gray-800">Update Student Photo</h4>
        <a href="StudentList.aspx" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i
            class="fa fa-list fa-sm text-white-50"></i>Student List</a>
    </div>

    <!-- Input rows -->
    <!--Row with two equal columns-->
    <div class="row">
        <div class="col-md-8">

            <!-- Horizontal Form -->
            <div class="card card-info">
                <div class="card-header">
                    <h5 class="card-title">Student Form</h5>
                </div>
                <!-- /.card-header -->
                <!-- form start -->

                <div class="card-body">
                    <div class="form-group row">
                        <div class="col-sm-10">
                            <label for="inputEmail3">Student</label>
                            <dx:ASPxComboBox ID="ddlStudent" runat="server" ValueType="System.String" CssClass="form-control" NullText=" - Select -" AutoPostBack="True" requide="true"></dx:ASPxComboBox>
                            <asp:TextBox runat="server" ID="txtid" Visible="false"></asp:TextBox>
                            <asp:TextBox runat="server" ID="txtstudcode" Visible="false"></asp:TextBox>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-md-6">
            <!-- Horizontal Form -->
            <div class="card card-info">
                <div class="card-header">
                    <h5 class="card-title">Upload Leaner's Photo</h5>
                </div>
                <!-- /.card-header -->
                <!-- form start -->
                <div class="card-body">
                    <fieldset style="width: 150px;">
                        <div style="text-align: center;">
                            <asp:Image ID="ImgPrv" Height="250" Width="250" runat="server" /><br />
                            <asp:FileUpload ID="flupImage" runat="server" onchange="ShowImagePreview(this);" />
                        </div>
                    </fieldset>
                </div>
                <!-- /.card-body -->
                <div class="card-footer">
                </div>
                <!-- /.card-footer -->
            </div>
            <!-- /.card -->
        </div>
        <div class="col-md-6">
            <!-- Horizontal Form -->
            <div class="card card-info">
                <div class="card-header">
                    <h5 class="card-title">Snap & Save Leaner's Photo</h5>
                </div>
                <!-- /.card-header -->
                <!-- form start -->
                <div class="card-body">
                    <fieldset style="width: 150px;">
                        <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" /></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>
                    </fieldset>
                </div>
                <!-- /.card-body -->
                <div class="card-footer">
                    <asp:Button ID="btnsave" runat="server" Text="Save" class="btn btn-primary" />
                    <asp:Button ID="btncancel" runat="server" Text="Cancel" class="btn btn-success float-right" />
                </div>
                <!-- /.card-footer -->
            </div>
            <!-- /.card -->
        </div>
        <asp:TextBox ID="txtusers" runat="server" Visible="false"></asp:TextBox>
        <asp:TextBox ID="txttimer" runat="server" Visible="false"></asp:TextBox>
        <asp:TextBox ID="txtlocation" runat="server" Visible="false"></asp:TextBox>
    </div>
    <br />
    <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: "/Edit_Photo.aspx/SaveCapturedImage",
                    data: "{data: '" + $("#imgCapture")[0].src + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (r) { }
                });
            });
        });
    </script>
</asp:Content>

Public Shared Function SaveCapturedImage(ByVal data As String) As Boolean
    Dim fileName As String = DateTime.Now.ToString("dd-MM-yy hh-mm-ss")
    'Convert Base64 Encoded string to Byte Array.
    Dim imageBytes() As Byte = Convert.FromBase64String(data.Split(",")(1))

    'Save the Byte Array as Image File.
    Dim filePath As String = HttpContext.Current.Server.MapPath(String.Format("~/Captures/{0}.jpg", fileName))
    File.WriteAllBytes(filePath, imageBytes)
    Return True
End Function