    <div class="card-body pt-3">

        <h4 class="card-title text-center">Upload Selfie from Webcam</h4>
        <p class="card-title-desc" style="margin-bottom: 10px;">To ensure you receive your content, we require a front facing photo of you </p>
        <p class="card-title-desc" style="margin-bottom: 0px;">- Front Face Photo </p>
        <p class="card-title-desc" style="margin-bottom: 0px;">- No Sun-glasses </p>
        <p class="card-title-desc" style="margin-bottom: 0px;">- No Mask </p>
        <p class="card-title-desc" style="margin-bottom: 12px;">- No Blur </p>

        <div class="row">
            <div class="col-md-12">
                <div id="my_camera" style="width: 100%;"></div>
                <div id="results" style="width: 100%; display: none;"></div>
            </div>            
        </div>

        <input type="hidden" name="photo" id="photo" value="">

        <div id="alert"></div>

        <div class="text-center mt-4" id="capture_div">
            <button type="button" class="btn btn-primary waves-effect waves-light" onclick="return capture();" style="width: 100%;">Take</button>
        </div>

        <div class="text-center mt-4" style="display: none;" id="submit_div">
            <button type="button" class="btn btn-primary waves-effect waves-light" onclick="return recapture();" style="width: 100%;">Take Another</button>
            <button type="button" class="btn btn-primary waves-effect waves-light" id="submit_btn" onclick="return upload_func();" style="width: 100%; margin-left: 5px;">Submit</button>
            <button type="button" class="btn btn-primary waves-effect waves-light" id="loading_btn" style="width: 100%; display: none; margin-left: 5px;">
                <i class="bx bx-loader bx-spin font-size-16 align-middle mr-2"></i> Uploading
            </button>
        </div>

        <div class="mt-3 text-center">
            <p>Remember ? <a href="<?php echo base_url('login');?>" class="font-weight-medium text-primary"> Login</a> </p>
            <p>© <script>document.write(new Date().getFullYear());</script> makeabl
        </div>
    </div>

    <script src="<?php echo base_url();?>assets/js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="<?php echo base_url();?>assets/js/webcam.min.js"></script>
    <script>
        var capture_image;
        var video = document.querySelector("#videoElement");

        if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ video: true })
            .then(function (stream) {
            video.srcObject = stream;
            })
            .catch(function (err0r) {
                console.log("Something went wrong!");
            });
        }

        function stop(e) {
            var stream = video.srcObject;
            var tracks = stream.getTracks();
    
            for (var i = 0; i < tracks.length; i++) {
                var track = tracks[i];
                track.stop();
            }
    
            video.srcObject = null;
        }

        Webcam.set({
            width: 320,
            height: 240,
            image_format: 'jpeg',
            jpeg_quality: 90
        });
        Webcam.attach( '#my_camera' );

        // TAKE A SNAPSHOT.
        capture = function () {
            Webcam.freeze();
            Webcam.snap(function (data_uri) {
                document.getElementById('results').innerHTML = 
                        '<img id="imageprev" src="'+data_uri+'"/>';
                capture_image = data_uri;
            });
            
            // Play Audio
            var audio = new Audio('<?php echo base_url("assets/shutter.mp3")?>');
            audio.play();

            $("#my_camera").hide();
            $("#results").show();
            $("#capture_div").hide();
            $("#submit_div").css("display", "flex");
        }

        function recapture(){
            // cancel preview freeze and return to live camera feed
			Webcam.unfreeze();

            $("#my_camera").show();
            $("#results").hide();
            $("#capture_div").show();
            $("#submit_div").hide();
        }

        function upload_func() {         
            $("#photo").val(capture_image);
            var image = document.getElementById('photo');
            if(image.value == ""){
                alert("Please capture your photo");
                return false;
            }
            
            $("#submit_btn").hide();
            $("#loading_btn").show();

            $.ajax({
                url : 'https://mymakeabl.com/api/faceregister',
                type : 'POST',
                data : {
                    id: '<?php echo $id;?>',
                    photo : image.value
                },
                success : function(msg){
                    var shtml = '';
                    if(msg.result == "success"){
                        shtml += '<div class="alert alert-success fade in alert-dismissible show" style="margin-top:18px;">';
                        shtml += '    <button type="button" class="close" data-dismiss="alert" aria-label="Close">';
                        shtml += '        <span aria-hidden="true" style="font-size:20px">×</span>';
                        shtml += '    </button>';
                        shtml += '    <strong>Success!</strong> Successfully registered!';
                        shtml += '</div>';
                        
                        $.ajax({
                            url: "<?php echo base_url();?>AuthController/reglogin",
                            type : 'POST',
                            data : {
                                guest_id: '<?php echo $id;?>',
                                face_url: msg.face_url
                            },
                            success : function(msg){
                                if(msg == "success")
                                    document.location.href = "<?php echo base_url('login');?>";
                            }
                        });
                    }else{
                        shtml += '<div class="alert alert-danger fade in alert-dismissible show">';
                        shtml += '   <button type="button" class="close" data-dismiss="alert" aria-label="Close">';
                        shtml += '      <span aria-hidden="true" style="font-size:20px">×</span>';
                        shtml += '   </button>';
                        shtml += '   <strong>Failed!</strong> '+msg.result;
                        shtml += '</div>';
                    }

                    $("#alert").html(shtml);
                }
            });
        }
    </script>