Sindbad~EG File Manager

const webcamElement = document.getElementById('webcam');

// const canvasElement = document.getElementById('canvas');

const canvasElement2 = document.getElementById('canvas2');

const snapSoundElement = document.getElementById('snapSound');

//sridhar
const frame = document.getElementById('frame');
// const img1 = document.getElementById('img1');

const img2 = document.getElementById('img2');

// var picture;



const webcam = new Webcam(webcamElement, 'user', canvasElement2, snapSoundElement);




$("#webcam-switch").change(function () {
    if(this.checked){
        $('.md-modal').addClass('md-show');
        webcam.start()
            .then(result =>{
               cameraStarted();
               console.log("webcam started");
            })
            .catch(err => {
                displayError();
            });
    }
    else {        
        cameraStopped();
        webcam.stop();
        console.log("webcam stopped");
    }        
});

$('#cameraFlip').click(function() {
    webcam.flip();
    webcam.start();  
});

$('#closeError').click(function() {
    $("#webcam-switch").prop('checked', false).change();
});

$('#closeSuccess').click(function() {
    $("#webcam-switch").prop('checked', false).change();
});

function displayError(err = ''){
    if(err!=''){
        $("#errorMsg").html(err);
    }
    $("#errorMsg").removeClass("d-none");
}

function cameraStarted(){
    $("#errorMsg").addClass("d-none");
    $('.flash').hide();
    $("#webcam-caption").html("on");
    $("#webcam-control").removeClass("webcam-off");
    $("#webcam-control").addClass("webcam-on");
    $(".webcam-container").removeClass("d-none");
    if( webcam.webcamList.length > 1){
        $("#cameraFlip").removeClass('d-none');
    }
    $("#wpfront-scroll-top-container").addClass("d-none");
    window.scrollTo(0, 0); 
    $('body').css('overflow-y','hidden');
}

function cameraStopped(){
    $("#errorMsg").addClass("d-none");
    $("#wpfront-scroll-top-container").removeClass("d-none");
    $("#webcam-control").removeClass("webcam-on");
    $("#webcam-control").addClass("webcam-off");
    $("#cameraFlip").addClass('d-none');
    $(".webcam-container").addClass("d-none");
    $("#webcam-caption").html("Click to Start Camera");
    $('.md-modal').removeClass('md-show');
    $("#frame").addClass("d-none");
}


$("#take-photo").click(function () {
    beforeTakePhoto();
    let picture = webcam.snap();
    // document.querySelector('#download-photo').href = picture;

    img2.setAttribute(
        'src',picture
    );
    
    // cameraStopped()

    // img2.width = 1000;
    
     img2.onload = function () {
        // var show_canvas =  document.getElementById('canvas')
            $(".canvas").remove()
        html2canvas(frame).then(canvas => {
            // show_canvas
            // var ctx = show_canvas.getContext("2d");
            // ctx.drawImage(canvas, 449, 675);
                canvas.setAttribute("id","canvas");
                canvas.setAttribute("class","canvas");
              document.getElementById("webcam-container").appendChild(canvas);
              var imgData = canvas.toDataURL('image/jpg');
              document.querySelector('#download-photo').href = imgData;
              afterTakePhoto();
        });
      };

    // img2.onload = function () {
    //     var canvas =  document.getElementById('canvas')
    //     // canvas.width = img1.width;
    //     // canvas.height = img1.height;
    //     // canvas.width = frame.width;
    //     // canvas.height = frame.height;
    //     canvas.width = 449;
    //     canvas.height = 675;
        
    //     var canvasContext = canvas.getContext('2d');
    //     canvas.appendChild(frame);
        
    //     var wrh = img2.width / img2.height;
    //     var newWidth = canvas.width;
    //     var newHeight = newWidth / wrh;
    //     if (newHeight > canvas.height) {
    //                 newHeight = canvas.height;
    //         newWidth = newHeight * wrh;
    //     }
    //     var xOffset = newWidth < canvas.width ? ((canvas.width - newWidth) / 2) : 0;
    //     var yOffset = newHeight < canvas.height ? ((canvas.height - newHeight) / 2) : 0;

    //     canvasContext.drawImage(img2, xOffset, yOffset/1.5, newWidth, newHeight);

    //     // canvasContext.drawImage(img1, 0, 0);
         

    //     document.querySelector('#download-photo').href = document.getElementById('canvas').toDataURL()
    //   };

    // window.setTimeout(  
    // function() {  
         
    // },  
    // 5000
    // );
   
});

function beforeTakePhoto(){
    $('.flash')
        .show() 
        .animate({opacity: 0.3}, 500) 
        .fadeOut(500)
        .css({'opacity': 0.7});
    window.scrollTo(0, 0); 
    $('#webcam-control').addClass('d-none');
    $('#cameraControls').addClass('d-none');
    $("#frame").removeClass("d-none");
    $(".loader").show()
}

function afterTakePhoto(){
    webcam.stop();
    // var canvas =  document.getElementById('canvas')
    // canvas.width = img1.width;
    // canvas.height = img1.height;
    // var context = canvas.getContext("2d");
    // context.drawImage(img1, 0, 0);
    // // alert(img2.width);

    // context.drawImage(img2,0
    //     ,canvas.width / 2 - canvas.width / 2);
    $('#canvas').removeClass('d-none');
    $('#take-photo').addClass('d-none');
    $('#exit-app').removeClass('d-none');
    $('#download-photo').removeClass('d-none');
    $('#save-photo').removeClass('d-none');
    $('#resume-camera').removeClass('d-none');
    $('#cameraControls').removeClass('d-none');
    $("#frame").addClass("d-none");
    $(".loader").hide()
}

function removeCapture(){
    $('#canvas').addClass('d-none');
    $('#webcam-control').removeClass('d-none');
    $('#cameraControls').removeClass('d-none');
    $('#take-photo').removeClass('d-none');
    $('#exit-app').addClass('d-none');
    $('#download-photo').addClass('d-none');
    $('#save-photo').addClass('d-none');
    $('#resume-camera').addClass('d-none');
}

$("#resume-camera").click(function () {
    
    webcam.stream()
        .then(facingMode =>{
            removeCapture();
        });
});

$("#exit-app").click(function () {
    removeCapture();
    $("#webcam-switch").prop("checked", false).change();
});