<!doctype html>
<html lang="fr">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="<?=base_url();?>/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="<?=base_url();?>/assets/css/style_boutons.css">

    <title>Agendinf</title>
  </head>
  <body>



<video id="camera"></video>
<canvas id="canvas"></canvas>
<div class="text-center">
<button type="button" name="checkVision" id="checker">SNAP</button>
</div>
<div id="results"></div>
<!-- <input type="checkbox" name="checkVision" id="checker"> -->
<!-- <label for="checkVision">I read tips</label> -->

<form action="startSurvey" method="GET">
  <button type="submit"></button>
</form>

<script type="text/javascript" src="/assets/js/webcam-easy.min.js"></script>

<script type="text/javascript" src="/assets/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="/assets/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="<?=base_url();?>/assets/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var webCamElement = document.getElementById("camera");
  var canvasElement = document.getElementById("canvas");
  const webcam = new Webcam(webCamElement, 'user', canvasElement, null);

  //$('#camera').style.display="none";
  //$('#camera').attr('visibility', 'hidden');
  //$('#camera').attr('display', 'block');

  // $('#camera').css('visibility', 'hidden');

  webcam.start();

  $('#checker').click(function(){
      var picture = webcam.snap();
      // alert($("#cf_url").val()+"/save_snap?test=ok") ;
      $.ajax({
    type: "POST",
    url: $("#cf_url").val()+"/save_snap",
    data: "base64="+encodeURIComponent(picture),
    // processData: false,
    // contentType: "application/x-www-form-urlencoded;charset=UTF-8",
    success: function(msg){
        $("#results").html(msg) ;
    }
});
      // $.ajax({
      //   type:"POST",
      //   url:$("#cf_url").val()+"/save_snap",
      //   processData: false,
      //   contentType: 'application/octet-stream',
      //   data: {
      //     Url: picture
      //   },
      //   success:function(msg){
      //     $("#results").html(msg) ;
      //   }
      // }) ;

      // alert(picture) ;

      // $.post('TestCamera', {param: picture}, function(response){
      //     if (response === 'error'){
      //         alert('Error you should stay in front of camera');
      //     }else{
      //         window.location.replace('QuestionAndAnalyze.jsp'); /* redirect*/
      //     }
      // }); /*END servletCall*/

  }); /*END click*/

});/* END ready*/
</script>
<input type="hidden" name="cf_url" id="cf_url" value="<?=base_url();?>">
</body>
</html>
