<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Kod Okuyucu</title>
<link rel="stylesheet" href="test.css">
<!-- Include Remix Icons CSS -->
<link href="https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="input-container">
<input type="text" size="16" placeholder="QR Code" class="qrcode-text">
<label class="qrcode-text-btn">
<i class="ri-camera-line icon"></i>
</label>
</div>
<div id="qr-reader" style="display: none;">
<!-- This div will hold the QR scanner area -->
</div>
<p id="result">QR Kodu sonucu burada görünecek.</p>
</div>
<script src="https://unpkg.com/html5-qrcode/minified/html5-qrcode.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="test.js"></script>
</body>
</html>// test.js
function domReady(fn) {
if (
document.readyState === "complete" ||
document.readyState === "interactive"
) {
setTimeout(fn, 1000);
} else {
document.addEventListener("DOMContentLoaded", fn);
}
}
domReady(function () {
let htmlScanner = null; // Initialize scanner variable
// Function to handle QR code scanning success
function onScanSuccess(decodeText, decodeResult) {
alert("QR Code scanned successfully. Content: " + decodeText);
document.getElementById("result").textContent = "QR Code Result: " + decodeText;
}
// Click event handler for the camera icon to toggle scanner visibility
document.querySelector('.qrcode-text-btn').addEventListener('click', function () {
if (!htmlScanner) {
htmlScanner = new Html5QrcodeScanner(
"qr-reader", // div id where scanner will be initialized
{ fps: 10, qrbox: 250 } // options
);
htmlScanner.render(onScanSuccess);
}
const qrReaderDiv = document.getElementById('qr-reader');
if (qrReaderDiv.style.display === 'none') {
qrReaderDiv.style.display = 'block';
// Start camera on display
htmlScanner.start();
} else {
qrReaderDiv.style.display = 'none';
// Stop camera when hidden
htmlScanner.stop();
}
});
});Bir türlü beceremedim , kamera açmaya izin ver bildirimi dahi gelmiyor telefondan deniyorum web'de tarama yaptırabilirsem iyi olucak veriyi yazmasını istiyorum veya kemera uygulaması açıp taratabilir miyim yada qr kodun resmini yükletip resimden tarama yapabilir mi
