Initial commit: caddy static file server workspace
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
61
caddy/www/qr_code_scanner_zxing.html
Normal file
61
caddy/www/qr_code_scanner_zxing.html
Normal file
@@ -0,0 +1,61 @@
|
||||
<!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>
|
||||
|
||||
Reference in New Issue
Block a user