时间戳

首页 > 解决方案 > 用于 html5 的二维码和条形码阅读器 javascript 文档

javascript - 用于 html5 的二维码和条形码阅读器 javascript 文档

问题描述

我想在使用网络摄像头或手机摄像头扫描 QR 或条形码扫描仪后自动填写输入内容。

对于脚本，我想像这样

<video autoplay = "true" id = "video-webcam">
</video>

<input type = "text" id = "scanresult">

<script>
external or internal script for scan qr or barcode. save result in variable = result

html DOM getElementById ('scanresult'). value (result);
</script>

我希望任何人都可以就我的问题给我建议或反馈。谢谢

标签： javascripthtml5-videoqr-codewebcambarcode-scanner

解决方案

有很多更好的库可以做到这一点，但我个人推荐 QrScanner，因为它简单直观。您的实时二维码扫描仪将是这样的......

扫描仪.html

<div id="holder">
    <h3>Scan QR Code from Camera</h3>
    <div class="make">
        <video id="scan"></video>
    </div>
    <div>
        <input type = "text" id = "scanresult"><br>
        <button id="start">Start</button>
        <button id="stop">Stop</button>
    </div>
</div>

然后添加一点 CSS 为：

样式.css

#holder{
    width: 30%;
    margin:auto;
}

#holder .make {
    width: 99%;
    height: 30vh;
    margin-bottom: 15px;
    text-align: center;
}

video {
    width: 99%;
    margin:auto;
}

然后将您的QrScanner代码添加为：

<script type="module">
       import QrScanner from "/path/to/qr-scanner.min.js";
       QrScanner.WORKER_PATH = "/path/to/qr-scanner-worker.min.js";

       // Scanner Object
       const scanner    = new QrScanner(
                              document.getElementById("scan"), 
                              function(result){
                                   document.getElementById("scanresult").value = result;
                              } 
                           );
       
       document.getElementById("start").onclick = e => scanner.start();
       document.getElementById("stop").onclick = e => scanner.stop();

</script>

然后连接你的相机并点击开始按钮...

推荐阅读