html5qrcode

作者：〖掉望发布日期:2025-05-21 浏览:133

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 QR Code Scanner</title>
    <script src="https://cdn.jsdelivr.net/npm/html5-qrcode"></script>
</head>
<body>
    <h1>Scan QR Code</h1>
    <div id="reader" style="width:600px"></div>
    <p id="result"></p>

    <script type="text/javascript">
        function onScanSuccess(decodedText, decodedResult) {
            // Handle on success condition with the decoded text and result
            console.log(`Code matched = ${decodedText}`, decodedResult);
            document.getElementById("result").innerText = `Scanned code = ${decodedText}`;
        }

        function onScanFailure(error) {
            // Handle on scan failure condition
            console.warn(`Code scan error = ${error}`);
        }

        let html5QrcodeScanner = new Html5QrcodeScanner(
            "reader", { fps: 10, qrbox: 250 });
        html5QrcodeScanner.render(onScanSuccess, onScanFailure);
    </script>
</body>
</html>

解释说明：

HTML结构:
- <div id="reader">：用于显示扫描二维码的摄像头视图。
- <p id="result">：用于显示扫描到的二维码内容。
JavaScript代码:
- 引入了 html5-qrcode 库，通过 CDN 方式加载。
- 定义了两个回调函数 onScanSuccess 和 onScanFailure，分别处理扫描成功和失败的情况。
- 创建了一个 Html5QrcodeScanner 实例，并指定其容器 ID (reader) 和配置参数（如帧率和二维码框大小）。
- 调用 render 方法启动扫描器，传入成功和失败的回调函数。
功能:
- 当用户打开页面时，摄像头会被激活并开始扫描二维码。
- 扫描成功后，二维码的内容会显示在页面上，并且会在控制台输出相关信息。
- 如果扫描失败，错误信息会显示在控制台。

上一篇：html5教程

下一篇：html 图片