WD - Dev
118 lines
3.8 KiB
PHP
118 lines
3.8 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>QR Code Scanner</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
background: #f5f5f5;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 20px;
|
|
}
|
|
#reader {
|
|
width: 300px;
|
|
max-width: 90vw;
|
|
margin: 20px auto;
|
|
}
|
|
#result {
|
|
margin-top: 20px;
|
|
padding: 10px;
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
|
|
word-break: break-word;
|
|
}
|
|
button {
|
|
padding: 10px 20px;
|
|
background: #fb6340;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
}
|
|
button:hover {
|
|
background: #e0532f;
|
|
}
|
|
</style>
|
|
<!-- Html5 QR Code library -->
|
|
<script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<h2>QR Code Scanner</h2>
|
|
<div id="reader"></div>
|
|
<div id="result">Hasil scan akan muncul di sini</div>
|
|
<div>
|
|
<button id="startBtn">Mulai Scan</button>
|
|
<button id="stopBtn">Hentikan Scan</button>
|
|
</div>
|
|
|
|
<script>
|
|
let html5QrcodeScanner = null;
|
|
const resultDiv = document.getElementById("result");
|
|
const startBtn = document.getElementById("startBtn");
|
|
const stopBtn = document.getElementById("stopBtn");
|
|
|
|
startBtn.addEventListener("click", async () => {
|
|
if (html5QrcodeScanner) {
|
|
// Jika sudah jalan, hentikan dulu
|
|
await html5QrcodeScanner.stop();
|
|
html5QrcodeScanner.clear();
|
|
}
|
|
|
|
html5QrcodeScanner = new Html5Qrcode("reader");
|
|
|
|
Html5Qrcode.getCameras().then(cameras => {
|
|
if(cameras && cameras.length) {
|
|
// Pilih kamera belakang jika ada
|
|
let cameraId = cameras[0].id;
|
|
const backCamera = cameras.find(cam => cam.label.toLowerCase().includes("back"));
|
|
if(backCamera) cameraId = backCamera.id;
|
|
|
|
html5QrcodeScanner.start(
|
|
cameraId,
|
|
{
|
|
fps: 10,
|
|
qrbox: { width: 250, height: 250 }
|
|
},
|
|
qrCodeMessage => {
|
|
console.log("QR Code detected:", qrCodeMessage);
|
|
resultDiv.innerText = `QR Code: ${qrCodeMessage}`;
|
|
},
|
|
errorMessage => {
|
|
console.warn("Scan error:", errorMessage);
|
|
}
|
|
).catch(err => {
|
|
console.error("Start scan error:", err);
|
|
alert("Gagal memulai scan: " + err);
|
|
});
|
|
} else {
|
|
alert("Tidak ada kamera terdeteksi");
|
|
}
|
|
}).catch(err => {
|
|
console.error("Camera error:", err);
|
|
alert("Gagal mendapatkan kamera: " + err);
|
|
});
|
|
});
|
|
|
|
stopBtn.addEventListener("click", async () => {
|
|
if(html5QrcodeScanner) {
|
|
try {
|
|
await html5QrcodeScanner.stop();
|
|
html5QrcodeScanner.clear();
|
|
resultDiv.innerText = "Scan dihentikan";
|
|
} catch (err) {
|
|
console.error("Stop scan error:", err);
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|