Html code for a camera scanner

Solution
Below code defines the code for a camera scanner which scans e way bills from a warehouse
<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
    integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <script src="https://unpkg.com/html5-qrcode@2.0.9/dist/html5-qrcode.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@ericblade/quagga2/dist/quagga.min.js"></script>
  <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
  <style>

  </style>


</head>

<body>

  <div id="qr-reader" style="width: 100%;"></div>
  
<style>
#qr-reader div span a { pointer-events: none;}
#qr-canvas {
  width:500px !important;
  height:150px !important;
}
</style>

  <script>
    // to set the QR or barcode scanning canvas width
    const config = { fps: 10, qrbox: { width: 500, height: 250 } };

    //* IF YOU WANT TO FOLLOW THE CAMERA SELECTION AND PERMISSION GIVING STEPS *//
    // function onScanSuccess(decodedText, decodedResult) {
    //   console.log(`Code scanned = ${decodedText}`, decodedResult);
    //
    //   var id = `${decodedText}`;
    //   id = id.replace(/,/g, "COMMA_VALUE");
    //   id = id.replace(/#/g, "HASH_VALUE");
    //   id = id.replace(/&/g, "AMP_VALUE");
    //   console.log("waybillId", id);
    //   var queryString = window.location.search;
    //
    //   var urlParams = new URLSearchParams(queryString);
    //
    //   var page = urlParams.get('page')
    //   console.log("page", page);
    //   var codeDetected = decodedResult;
    //
    //   var dataStringify = JSON.stringify(codeDetected);
    //
    //   if (codeDetected != null || codeDetected != "null" || codeDetected != "" || codeDetected != undefined || codeDetected != "undefined") {
    //     window.returnValue = true;
    //     if (Number(page) == 1){
    //       sendBack('waybillId', id)
    //     }
    //     if (Number(page) == 2){
    //       var el=window.opener.document.getElementById("custpage_barcodeid");
    //       el.value = id;
    //       el.dispatchEvent(new Event('change'));
    //     }
    //
    //     setTimeout("window.close()", 100);
    //   }
    // }
    // var html5QrcodeScanner = new Html5QrcodeScanner(
    //   "qr-reader", { fps: 10, qrbox: 250 });
    // html5QrcodeScanner.render(onScanSuccess);
    // var html5QrcodeScanner = new Html5QrcodeScanner(
    //   "qr-reader", config);
    // html5QrcodeScanner.render(onScanSuccess);

    function sendBack(para, id) {
      console.log('para',id)
      var paraArr= window.opener.location.href.match(/([^?=&]+)(=([^&]*))/g)
      console.log('paraArr',paraArr)
      var url = window.opener.location.protocol + '//' + window.opener.location.host + window.opener.location.pathname
      console.log('url-1',url)
      for (var i = 0; i < paraArr.length; i++) {
        if (paraArr[i].indexOf(para) == -1){
          if(i>0)
          url = url+'&' + paraArr[i]
          else
          url = url+'?' + paraArr[i]
        }
      }
      url = url + "&" + para + "=" + id;
      console.log('url',url)
      window.opener.location.href = url;
    }
    //* IF YOU WANT TO SKIP THE CAMERA SELECTION AND PERMISSION GIVING STEPS - TO DIRECTLY OPEN THE CAMERA *//
    const qrCodeSuccessCallback = (decodedText, decodedResult) => {
      /* handle success */
      html5QrCode.stop().then((ignore) => {
        // QR Code scanning is stopped.
      }).catch((err) => {
        // Stop failed, handle it.
      });
      console.log(`Code scanned = ${decodedText}`, decodedResult);

      var id = `${decodedText}`;
      id = id.replace(/,/g, "COMMA_VALUE");
      id = id.replace(/#/g, "HASH_VALUE");
      id = id.replace(/&/g, "AMP_VALUE");
      console.log("waybillId", id);
      var queryString = window.location.search;

      var urlParams = new URLSearchParams(queryString);

      var page = urlParams.get('page')
      console.log("page", page);
      var codeDetected = decodedResult;

      var dataStringify = JSON.stringify(codeDetected);

      if (codeDetected != null || codeDetected != "null" || codeDetected != "" || codeDetected != undefined || codeDetected != "undefined") {
        window.returnValue = true;
        if (Number(page) == 1){
          sendBack('waybillId', id)
        }
        if (Number(page) == 2){
          var el=window.opener.document.getElementById("custpage_barcodeid");
          el.value = id;
          el.dispatchEvent(new Event('change'));
        }

        setTimeout("window.close()", 100);
      }
    };
    var html5QrCode = new Html5Qrcode("qr-reader");
    // If you want to prefer back camera
    html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback);

  </script>


</body>

</html>
Leave a comment Cancel reply
