qr code scanner

            
               <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QR Scanner Demo</title>  
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<style>
  body {
      color: #333;
      max-width: 640px;
      margin: 0 auto;
      position: relative;
      padding:20px;
    }

    #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;
      display:none;
    }

    #canvas {
      width: 100%;
    }

    #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: 630px){
button{
width:90%;
margin:0 auto;
}

}

button{
  padding: 10px 20px;
  font-size: 16px;
  background-color: #2196F3;
  color:white;
  border-radius: 8px;
  margin: 20px 0 0 0;
  cursor:pointer;
  border-width: 0px;
}

button:hover{
  background-color:#086ab8;
}
button:focus {outline:0;}

</style>

<script src="https://cozmo.github.io/jsQR/jsQR.js"></script>
</head>
<body>
  <h1>QR Scanner</h1>
  
<div id="loadingMessage">ðŸŽ¥ Sie benÃ¶tigen eine Berechtigung, um auf Ihren Kamerar zuzugreifen</div> 
  <canvas id="canvas" hidden></canvas>
  <div id="output" hidden>
  <!--
    <div id="outputMessage">scannen ... </div>
    -->
    <div hidden><b>Daten:</b> <span id="outputData"></span></div>
  </div>
<!--
<button  onclick="scanQR()">Starten</button> 
-->
<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 capched = false;
      
       
    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();
    }

function scanQR(){
  capched=false;
    navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then(function(stream) {
      video.srcObject = stream;
      video.setAttribute("playsinline", true);
      video.play();
      requestAnimationFrame(tick);
      
    });
}

    function tick() {
      
      loadingMessage.innerText = "Video wird geladen..."
      if (video.readyState === video.HAVE_ENOUGH_DATA) {
        loadingMessage.hidden = true;
        canvasElement.hidden = false;
        outputContainer.hidden = false;
        
        canvasElement.style.display='block';

        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) {
            
          if (!capched){
                
          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;
          outputData.innerText = code.data;
       //location.href=code.data;
       if(code.data.indexOf('12345')!=-1){
       alert('code richtig')
       }else{
       alert('code falsch')
       }
          capched=true;
            
          }
         
            video.srcObject.getTracks().forEach((track) => {
        //        track.stop();
            });
            
          canvasElement.style.display='none';
          video.hidden = true;
            
        } else {
            
            if (!capched){
      //      outputMessage.hidden = false;
            outputData.parentElement.hidden = true;
            }
        }
      }
      
      if (!capched){
      requestAnimationFrame(tick);
      }
    }
      function stopWebCam(){  
          
          video.srcObject.getVideoTracks()[0].stop();
          
          
          /*
          
          window.localStream.getVideoTracks()[0].stop();
          
          if (window.localStream!='undefined'){
          window.localStream.getTracks().forEach((track) => {
              track.stop();
          });
          
              */
              
         setTimeout('video.remove()',500);
          
         
              
          return;
          
          
          
      var MediaStream = window.MediaStream;

      if (typeof MediaStream === 'undefined' && typeof webkitMediaStream !== 'undefined') {
          MediaStream = webkitMediaStream;
      }
      if (typeof MediaStream !== 'undefined' && !('stop' in MediaStream.prototype)) {
          MediaStream.prototype.stop = function() {
              this.getTracks().forEach(function(track) {
                  track.stop();
              });
          };
      } 
          
      }
      scanQR()
</script>
</body>
</html>
External Javascript and CSS
