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
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="/js_webseite/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>