index.html

<!DOCTYPE html>

<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="shortcut icon" href="https://static.parastorage.com/client/pfavico.ico" type="image/x-icon">
    <title>Milo Booth</title>
    <link href="./miloBooth_files/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="./miloBooth_files/styles.css" rel="stylesheet" type="text/css">
    <title>instamedia VBooth</title>
    <style>
        #main-container {
          max-width: 480px;
          position: relative;
          height: 90vh;
          overflow: hidden; 
        }

        section, #welcome-screen, #live-screen, #result-screen, #data-screen, #thankyou-screen {
          position: absolute;
          top: 0;
          height: 95vh;
        }
    </style>
  </head>
  
  <body>
    <div id="main-container">
      <section id="welcome-screen">
        <div class="top-container">
          <img src="./miloBooth_files/milo1.jpg" class="img-fluid" alt="" >
        </div>
        <div class="bottom-container">
          <button id="letsgo-btn" type="button" class="btn btn-light btn-lg btn-block">LET'S GO</button>
        </div>
      </section>

      <section id="live-screen">
        <div class="text-center">
          <div id="camera-wrapper">
            <canvas id="camera-canvas"></canvas>
            <video id="camera-video" autoplay playsinline></video>
            <img id="image-overlay" src="./miloBooth_files/miloFrame.png" class="img-fluid">
          </div>
          <input id="image-picker" type="file" accept="image/*" capture>
          <div class="bottom-container">
            <button id="camera-trigger-btn" type="button" class="btn btn-light btn-lg btn-block">TAKE A PHOTO</button>
          </div>
        </div>
      </section>

      <section id="result-screen">
        <div class="text-center"> 
            <img src="//:0/" alt="" id="camera-image">
            <div class="bottom-container center">
                <button id="retake-btn" type="button" class="btn btn-light btn-lg w-50" >RETAKE</button>
                <button id="likeit-btn" type="button" class="btn btn-light btn-lg w-50" >I LIKE IT</button>
            </div>
        </div>
      </section>

      <section id="data-screen">
        <div class="container text-center">
          <div class="row">
            <div class="col-12">
              <img src="./miloBooth_files/milo-logo-round.png
" class="img-fluid" alt=""/>
              <p>Enter your details</p>
              <form id="data-form" novalidate="">
                  <div class="form-group">
                    <input type="text" class="form-control" id="fullname" 
                    placeholder="Full name" name="fullname" required>
                  </div>
                  <div class="form-group">
                    <input type="email" class="form-control" id="emailaddress" 
                    placeholder="Email address" name="emailaddress" required>
                  </div>
                  <div class="form-group">
                    <input type="number" class="form-control" id="mobilenumber" 
                    placeholder="Mobile number" name="mobilenumber" required>
                  </div>
                  <div class="form-group">
                    <input type="hidden" id="eventid" name="eventid" value="14801">
                  </div>
                </form>
              </div>
          </div>
        </div>
        <div class="bottom-container">
          <button id="done-btn" type="submit" class="btn btn-light btn-lg btn-block">SEND IT</button>
        </div>
      </section>
      
      <section id="thankyou-screen">
          <div class="container text-center">
              <div class="row">
                  <div class>
                      <img src="./miloBooth_files/milo-logo-round.png" class="img-fluid" alt=""/>
                      <h1 style="color:#FFFFFF; font-weight: bold; font-size: 6vw;"><br><br>THANK YOU</h1>
                      <p style="color:#FFFFFF; margin: 0px 75px;">Your picture will be sent via email, feel free to share it over social media! Take care and stay safe! 
                      </p>
                  </div>
              </div>
          </div>
          <div class="bottom-container">
              <h7 style="color:#FFFFFF; position:relative; bottom: 20px">Find out more on: <br></h7>
              <button type="button" class="btn btn-light btn-lg btn-block" onclick=
            "window.location.href='https://www.facebook.com/MiloMalaysia';">FACEBOOK</button>
              <button type="button" class="btn btn-light btn-lg btn-block" onclick=
            "window.location.href='https://www.instagram.com/milo_malaysia/';">INSTAGRAM</button>
              <button type="button" class="btn btn-light btn-lg btn-block" onclick=
            "window.location.href='https://www.milo.com.my/';">HOMEPAGE</button>
          </div>
      </section>
    </div>
    
    <script src="./miloBooth_files/jquery.min.js" type="text/javascript"></script>
    <script src="./miloBooth_files/popper.min.js" type="text/javascript"></script>
    <script src="./miloBooth_files/bootstrap.min.js" type="text/javascript"></script>
    <script>
      var constraints = {
        video: {
          facingMode: "user", 
          width: {
            ideal: 1920
          }, 
          height: {
            ideal: 1080
          }
        },
        audio: false
      };

      const cameraVideo = document.querySelector("#camera-video"); 
      const cameraCanvas = document.querySelector("#camera-canvas"); 
      const cameraImage = document.querySelector("#camera-image"); 
      const imagePicker = document.querySelector("#image-picker"); 

      var isMedia = false; 
      
      $("#letsgo-btn").click(function () {
        function hasGetUserMedia() {
          return !!(navigator.mediaDevices && 
          navigator.mediaDevices.getUserMedia); 
        }
        
        isMedia = hasGetUserMedia(); 

        if (isMedia) {
          navigator.mediaDevices
          .getUserMedia(constraints)
          .then(function(stream) {
            $("#welcome-screen").hide(); 
            $("#live-screen").show(); 
            track = stream.getTracks()[0]; 
            cameraVideo.srcObject = stream; 
          })
          .catch(function (error) {
            alert("Oops. Something is broken. ", error); 
          });
        } else {
          //alert("getUserMedia() is not supported by your browser"); 
          $("#image-picker").trigger("click");
        }
      });

      $("#camera-trigger-btn").click(function() {
        imageProcessing(cameraVideo, cameraVideo.videoHeight, cameraVideo.videoWidth); 
        $("#live-screen").hide(); 
        $("#result-screen").show(); 
      }); 

      $("#retake-btn").click(function() {
        if (isMedia) {
          $("#result-screen").hide(); 
          $("#live-screen").show(); 
        } else {
          $("#image-picker").trigger("click"); 
        }
      });

      $("#likeit-btn").click(function() {
        if (isMedia) {
          track.stop(); 
        }

        $("#result-screen").hide(); 
        $("#data-screen").show(); 
      });

      $('#done-btn').on('click', function(event) {

        var userData = {}; 
        userData.EventID = $("#eventid").val(); 

        if($("#fullname").val() === "") {
          $("#fullname").addClass('is-invalid'); 
          alert("Name and email address are compulsory!"); 
          return false; 
        } else {
          $("#fullname").removeClass('is-invalid'); 
          userData.FullName = $("#fullname").val(); 
        }

        if ($("#emailaddress").val() === "") {
          $("#emailaddress").addClass('is-invalid'); 
          alert("Name and email address are compulsory!"); 
          return false; 
        } else {
          $("#emailaddress").removeClass('is-invalid'); 
          userData.EmailAddr = $("#emailaddress").val(); 
        }

        userData.MobileNo = $("#mobilenumber").val(); 
        userData.ExtraData = cameraImage.src.replace(/^data:image\/(png|jpg|webp|jpeg);base64,/, "");
        
        $("#done-btn").text("PLEASE WAIT..."); 
        userData2 = JSON.stringify(userData);

        $.ajax({
          url: "sendData.php", 
          type: "POST", 
          data: {"userData2": userData2}, 
          error: function(err) {
            console.error(err); 
          }, 
          success: function(data) {
            if(data.path != "") {
              // $("#done-btn").text("THANK YOU"); 
              $("#data-form")[0].reset(); 
              $("#data-screen").hide(); 
              $("#thankyou-screen").show(); 
            }
          },
          complete: function() {
          }
        });
      }); 

      $(document).ready(function () {
        var w = window.innerWidth; 
        if (w > 480)
          w = 480;
        var requiredHeight = w / 2 * 3; 
        $("#camera-wrapper").css('height', requiredHeight + 'px');
        $("#camera-canvas").css('height', requiredHeight + 'px');
        $("#camera-video").css('height', requiredHeight + 'px');
        $("#image-overlay").css('height', requiredHeight + 'px');

        img.onload = function () {
          imageProcessing(img, img.height, img.width); 
          $("#welcome-screen").hide(); 
          $("#result-screen").show(); 
        }; 

        imagePicker.onchange = function(evt) {
          var files = evt.target.files; 
          var file = files[0]; 
          if (file.type.match('image.*')) {
            var reader = new FileReader(); 

            reader.readAsDataURL(file); 
            reader.onload = function (evt) {
              if (evt.target.readyState == FileReader.DONE) {
                img.src = evt.target.result; 
              }
            }
          } else {
            alert("not an image"); 
          }
        };
      }); 

      var img = new Image(); 

      function imageProcessing(im, h, w) {
          cameraCanvas.width=1000;
          cameraCanvas.height=1500; 

          var overlay = document.getElementById("image-overlay"); 
          var ctx = cameraCanvas.getContext("2d"); 

          var rh = cameraCanvas.height / h; 
          var rw = cameraCanvas.width / w; 
          
          if (rh > rw) {
              var nw = Math.round(w * rh); 
              var nh = cameraCanvas.height; 
              var x = (nw - cameraCanvas.width) / 2; 
              var y = 0; 
              
              ctx.drawImage(im, -x, y, nw, nh); 
          } else {
              var nw = cameraCanvas.width; 
              var nh = Math.round(h*rw); 
              var x = 0; 
              var y = (nh - cameraCanvas.height) / 2; 

              ctx.drawImage(im, x, -y, nw, nh); 
          }

          ctx.save(); 
          ctx.translate(cameraCanvas.width, 0); 
          ctx.scale(-1, 1); 
          ctx.restore(); 
          ctx.drawImage(overlay, 0, 0, 1000, 1500); 
          cameraImage.src = cameraCanvas.toDataURL("image/jpeg"); 
      }
      
    
    </script>
  </body>

</html>