65 lines
2.1 KiB
HTML
65 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>QR Code Scanner Example</title>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
|
<script src="https://serratus.github.io/quaggaJS/examples/js/quagga.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="interactive" class="viewport"></div>
|
|
<button id="startButton">Start Scanner</button>
|
|
<button id="stopButton">Stop Scanner</button>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
let scannerIsRunning = false;
|
|
|
|
$('#startButton').click(function() {
|
|
if (!scannerIsRunning) {
|
|
startScanner();
|
|
scannerIsRunning = true;
|
|
}
|
|
});
|
|
|
|
$('#stopButton').click(function() {
|
|
if (scannerIsRunning) {
|
|
stopScanner();
|
|
scannerIsRunning = false;
|
|
}
|
|
});
|
|
|
|
function startScanner() {
|
|
Quagga.init({
|
|
inputStream: {
|
|
name: "Live",
|
|
type: "LiveStream",
|
|
target: document.querySelector('#interactive'),
|
|
constraints: {
|
|
facingMode: "environment" // 使用後置鏡頭
|
|
},
|
|
},
|
|
decoder: {
|
|
readers: ["code_128_reader", "ean_reader", "ean_8_reader", "code_39_reader", "code_39_vin_reader", "codabar_reader", "upc_reader", "upc_e_reader", "i2of5_reader", "2of5_reader", "code_93_reader"],
|
|
},
|
|
}, function(err) {
|
|
if (err) {
|
|
console.error(err);
|
|
return;
|
|
}
|
|
Quagga.start();
|
|
});
|
|
|
|
Quagga.onDetected(function(result) {
|
|
console.log('Scanned QR Code:', result.codeResult.code);
|
|
});
|
|
}
|
|
|
|
function stopScanner() {
|
|
Quagga.stop();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|