62 lines
1.6 KiB
HTML
62 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-TW">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>QR Code Scanner</title>
|
||
<script src="https://cdn.jsdelivr.net/npm/@zxing/library@latest"></script>
|
||
<style>
|
||
video {
|
||
border: 1px solid black;
|
||
width: 100%;
|
||
max-width: 640px;
|
||
}
|
||
#result {
|
||
font-size: 18px;
|
||
margin-top: 20px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>QR Code Scanner</h1>
|
||
<video id="video" autoplay></video>
|
||
<div id="result">請將 QR Code 對準攝影機。</div>
|
||
|
||
<script>
|
||
async function startCamera() {
|
||
const videoElement = document.getElementById('video');
|
||
const resultDiv = document.getElementById('result');
|
||
|
||
try {
|
||
// 啟用攝影機
|
||
const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } });
|
||
videoElement.srcObject = stream;
|
||
|
||
const codeReader = new ZXing.BrowserQRCodeReader();
|
||
console.log('ZXing 初始化完成');
|
||
|
||
// 掃描 QR Code
|
||
setInterval(async () => {
|
||
try {
|
||
const result = await codeReader.decodeFromVideoElement(videoElement);
|
||
if (result) {
|
||
resultDiv.textContent = `識別到的 QR Code：${result.text}`;
|
||
}
|
||
} catch (e) {
|
||
resultDiv.textContent = '未識別到 QR Code，請重試。';
|
||
}
|
||
}, 1000);
|
||
|
||
} catch (error) {
|
||
console.error('攝影機啟動失敗：', error);
|
||
resultDiv.textContent = '無法啟動攝影機，請檢查裝置權限。';
|
||
}
|
||
}
|
||
|
||
// 啟動
|
||
startCamera();
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|