open camera Scan QR code

พูดคุย แลกเปลี่ยน ปัญหา การเขียน JavaScript เครื่องมือ AJAX Web 2.0 AJAX Framework Jquery

Moderator: mindphp

Kanyarat Kanthawong
PHP Newbie
PHP Newbie
Posts: 8
Joined: 23/04/2019 12:34 pm

open camera Scan QR code

Post by Kanyarat Kanthawong » 10/06/2019 12:14 pm

เขียนโค้ดแบบนี้ แต่อยากให้มันแสดงในมือถือด้วยเราด้วยจะเขียน โค้ดอะไรเพิ่มได้บ้างค่ะ

Code: Select all

  <script src="./jsQR.js"></script>
   <link href="https://fonts.googleapis.com/css?family=Ropa+Sans" rel="stylesheet">
  
  <style>
    /*body {
      font-family: 'Ropa Sans', sans-serif;
      color: #333;
      max-width: 640px;
      margin: 0 auto;
      position: relative;
    }
*/
    /*#githubLink {
      position: absolute;
      right: 0;
      top: 12px;
      color: #2D99FF;
    }*/

    h1 {
      margin: 10px 0;
      font-size: 40px;
    }

    #loadingMessage {
      text-align: center;
      padding: 40px;
      background-color: #eee;
      width: 100%;
    }

    #canvas {
      width: 300px;
      margin-top: 30px;

    }

    #output {
      margin-top: 20px;
      background: #eee;
      padding: 10px;
      padding-bottom: 0;
    }

    #output div {
      padding-bottom: 10px;
      word-wrap: break-word;
    }

    #noQRFound {
      text-align: center;
    }
    @media only screen and (max-width: 768px) {


      #top img{
          height: 100px;
          width: 100px;
        }

        #top {
          background-image: none !important;
          height: 100px;
          width: 100%;
          background-color: #993333;
        }

      #check{
        border: 2px solid black;

      }
      input[type=submit] {
          width: 50px;
          background-color: #DCDCDC;
          color: black;
          /*padding: 14px 20px;
          margin: 8px 0;*/
          border: none;
          border-radius: 4px;
          cursor: pointer;
      }
    }
  </style>
  <div id="camera">
    <div id="loadingMessage"> Unable to access video stream (please make sure you have a webcam enabled)</div>
    <input type="hidden" name="action" value="camara">
    <center>
    <canvas id="canvas"  hidden></canvas></center>
    <div id="output" hidden style="display: none;">
      <div id="outputMessage">No QR code detected.</div>
      <div hidden><b>Data:</b> <span id="outputData"></span></div>
    </div>
  </div>
  <script>

    var video = document.createElement("video");
    var canvasElement = document.getElementById("canvas");
    var canvas = canvasElement.getContext("2d");
    var loadingMessage = document.getElementById("loadingMessage");
    var outputContainer = document.getElementById("output");
    var outputMessage = document.getElementById("outputMessage");
    var outputData = document.getElementById("outputData");
    var latitude = 0;
    var longitude = 0;

    getLocation();
    function getLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
      } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
      }
    }

    function showPosition(position) {
      latitude = position.coords.latitude;
      longitude = position.coords.longitude;
    }
    function drawLine(begin, end, color) {
      canvas.beginPath();
      canvas.moveTo(begin.x, begin.y);
      canvas.lineTo(end.x, end.y);
      canvas.lineWidth = 4;
      canvas.strokeStyle = color;
      canvas.stroke();
    }

    // Use facingMode: environment to attemt to get the front camera on phones
    navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then(function(stream) {
      video.srcObject = stream;
      video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
      video.play();
      requestAnimationFrame(tick);
    });

    function tick() {
      loadingMessage.innerText = "⌛ Loading video..."
      if (video.readyState === video.HAVE_ENOUGH_DATA) {
        loadingMessage.hidden = true;
        canvasElement.hidden = false;
        outputContainer.hidden = false;

        canvasElement.height = video.videoHeight;
        canvasElement.width = video.videoWidth;
        canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
        var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
        var code = jsQR(imageData.data, imageData.width, imageData.height, {
          inversionAttempts: "dontInvert",
        });
        if (code) {
          drawLine(code.location.topLeftCorner, code.location.topRightCorner, "#FF3B58");
          drawLine(code.location.topRightCorner, code.location.bottomRightCorner, "#FF3B58");
          drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#FF3B58");
          drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#FF3B58");
          outputMessage.hidden = true;
          outputData.parentElement.hidden = false;
          // alert(code.data);
          $.post('checkIn.php',{
            place_id : code.data,
            latitude : latitude,
            longitude : longitude,
          },function(data){
            var result = JSON.parse(data);
            var gps1 = new GPS(result[0].latitude,result[0].longtitude);
            var gps2 = new GPS(result[1].latitude,result[1].longitude);
            
            // if (parseInt(findDistance(gps1, gps2)) < 10) {
              $('#camera').hide();
              startTime();
              $('#check').show();
              $('#check input[name="name"]').val(result[0].name);
              $('#check input[name="id_place"]').val(result[0].id_place);
              $('#check input[name="address"]').val(result[0].address);
            // }
          });
        } else {
          outputMessage.hidden = false;
          outputData.parentElement.hidden = true;
        }
      }
      requestAnimationFrame(tick);
    }

 
  /**
 * code for compute distance of GPS 2 points
 *
 * @author redcorw
 * create  01/12/2013
 * link  http://na5cent.blogspot.com/2011/07/gps-2-javascript.html
 */
var BETWEEN_DEGREE = 15;
var THOUSAND_METER = 1000;

/**
 * define surface distance per 1 degree change
 */
var SURFACE_DISTANCE_PER_ONE_DEGREE = [
   { latitude : 110.574, longitude : 111.320 }, //0  degree
   { latitude : 110.649, longitude : 107.551 }, //15 degree
   { latitude : 110.852, longitude : 96.486 },  //30 degree
   { latitude : 111.132, longitude : 78.847 },  //45 degree
   { latitude : 111.412, longitude : 55.800 },  //60 degree  
   { latitude : 111.618, longitude : 28.902 },  //75 degree
   { latitude : 111.694, longitude : 0.000 }    //90 degree
];

/**
 * define class GPS for keep latitude and longitude
 */
var GPS = function(lat, lnt){
   this.latitude = lat || 0;
   this.longitude = lnt || 0;
}; 

function getSurfaceDistance(gps){
    return SURFACE_DISTANCE_PER_ONE_DEGREE[parseInt(gps.latitude / BETWEEN_DEGREE)]; //depend on latitude
}

function getLatitudeDistance(gps){
   return getSurfaceDistance(gps).latitude * THOUSAND_METER;
}

function getLongitudeDistance(gps){
   return getSurfaceDistance(gps).longitude * THOUSAND_METER;
}
 
function findDistance(gps1, gps2){

   var latitudeDistance1 = getLatitudeDistance(gps1); //a1
   var latitudeDistance2 = getLatitudeDistance(gps2); //a2
 
   var longitudeDistance1 = getLongitudeDistance(gps1); //b1
   var longitudeDistance2 = getLongitudeDistance(gps2); //b2
 
   // (X2 * a2 - X1 * a1) ^ 2
   var power1 = Math.pow((gps2.latitude * latitudeDistance2) - (gps1.latitude * latitudeDistance1), 2);
   // (Y2 * b2 - Y1 * b1) ^ 2$('#check').serialize()$('#check').serialize()
   var power2 = Math.pow((gps2.longitude * longitudeDistance2) - (gps1.longitude * longitudeDistance1), 2);

   return Math.sqrt(power1 + power2);


};

  </script>
  <div id="check" style="display: none;">
    <form id="checkIn">
      <table>
      <tr>
        <td>ชื่อร้าน</td>
        <td>
          <input type="text" name="name" readonly>
          <input type="hidden" name="id_place" readonly>
        </td>
      </tr>
      <tr>
        <td>ที่อยู่</td>
        <td><input type="text" name="address" readonly></td>
      </tr>
      <tr>
        <td>เวลา</td>
        <td id="time"></td>
      </tr>
      <tr>
        <td >หมายเหตุ</td>
        <td><textarea name="description" style="margin: 10px;"></textarea></td>
      </tr>
    </table>
    <input type="button" value="บันทึก" id="save" onclick="myfunction()">
    </form>
  </div>

  <script>

    function myfunction(){
      alert("ตรวจเรียบร้อย");
    }

    function checkTime(i) {
      if (i < 10) {
        i = "0" + i;
      } 
      return i;
    }

    function startTime() {
        var today = new Date();
        var h = today.getHours();
        var m = today.getMinutes();
        var s = today.getSeconds();
        // add a zero in front of numbers<10
        m = checkTime(m);
        s = checkTime(s);
        document.getElementById('time').innerHTML = h + ":" + m + ":" + s;
        t = setTimeout(function () {
            startTime()
        }, 500);
    }

      $('#check input[type="button"]').click(function(){
        $.post('add_checkIn.php',$('#checkIn').serialize(),function(data){
          console.log(data);
        })
      });
    

   
    </script>
    
</body>
</html>

Return to “JavaScript & Jquery Ajax”

Users browsing this forum: No registered users and 4 guests