cannot access before initialization

Ich bin relativ neu Ich möchte einer Qr-Code Scanner programmieren der ein Passwort aus dem Qr-Code liest. irgendwie funktionieren var und let nicht. Bei let steht in der Konsole "cannot access "position" before initialization" und bei var ist jeder Qr-Code richtig

Der hier verwendete Code

<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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!