html5-qrcode实现扫码功能——2024-04-19
<!DOCTYPE html>
<html>
<head>
<title>HTML5 QRCode Example</title>
<script type="text/javascript">
function onScanSuccess(decodedText, decodedResult) {
// Handle on success condition with the decoded data.
console.log(`Code scanned = ${decodedText}`, decodedResult);
// Stop scanning if you do not need to scan another code.
html5Qrcode.stop();
}
function onScanError(error) {
// Handle on error condition with the error.
console.log(`Scan error = ${error}`, error);
}
function startScanning() {
const html5QrCode = new Html5QrcodeScanner(
"qr-reader", { fps: 10, qrbox: 250 }, /* verbose= */ false);
html5QrCode.render(onScanSuccess, onScanError);
}
</script>
</head>
<body>
<header>
<h1>HTML5 QRCode Scanner</h1>
</header>
<article>
<div id="qr-reader"></div>
<button onclick="startScanning()">Start Scanning QR Code</button>
</article>
<script type="text/javascript" src="html5-qrcode.min.js"></script>
</body>
</html>这个代码实例展示了如何使用html5-qrcode库来实现一个基本的二维码扫描器。用户可以通过点击按钮开始扫描，扫描结果会在控制台输出。扫描成功后，扫描器会自动停止。这个例子简洁明了，并且注重于展示核心功能。
评论已关闭