【问题标题】：Qr & Barcode Reader javascript documentation for html5用于 html5 的二维码和条形码阅读器 javascript 文档
【发布时间】：2020-12-16 06:18:21
【问题描述】：

我想在使用网络摄像头或手机摄像头扫描二维码或条形码扫描仪后自动填写的地方进行输入。

对于我想像这样的脚本

<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>

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

【问题讨论】：

您的脚本无效...为什么在标记中= 周围有空格？ HTML 也不是这样的
对于条形码...搜索zxing或quagga ...非常简单的库使用
这只是伪代码，哦，好吧。我会试试的，谢谢。

标签： javascript html5-video qr-code webcam barcode-scanner

【解决方案1】：

在此之前感谢 JaromandaX，我使用网络摄像头在 Html5 上找到了条码扫描器的脚本。

这是我的 index.html

<!DOCTYPE html>
<html>
  <head>
    <title>QR Code Scanner</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    <link rel="stylesheet" href="style.css" />
    <script src="https://rawgit.com/sitepoint-editors/jsqrcode/master/src/qr_packed.js"></script>
  </head>

  <body>
    <div id="container">
      <h1>QR Code Scanner</h1>

      <a id="btn-scan-qr">
        <img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/07/1499401426qr_icon.svg">
      <a/>

      <canvas hidden="" id="qr-canvas"></canvas>

      <div id="qr-result" hidden="">
        <b>Data:</b> <span id="outputData"></span>
      </div>
    </div>

    <script src="qrCodeScanner.js"></script>
  </body>
</html>

qsCodeScanner.js

//const qrcode = window.qrcode;

const video = document.createElement("video");
const canvasElement = document.getElementById("qr-canvas");
const canvas = canvasElement.getContext("2d");

const qrResult = document.getElementById("qr-result");
const outputData = document.getElementById("outputData");
const btnScanQR = document.getElementById("btn-scan-qr");

let scanning = false;

qrcode.callback = res => {
  if (res) {
    outputData.innerText = res;
    scanning = false;

    video.srcObject.getTracks().forEach(track => {
      track.stop();
    });

    qrResult.hidden = false;
    canvasElement.hidden = true;
    btnScanQR.hidden = false;
  }
};

btnScanQR.onclick = () => {
  navigator.mediaDevices
    .getUserMedia({ video: { facingMode: "environment" } })
    .then(function(stream) {
      scanning = true;
      qrResult.hidden = true;
      btnScanQR.hidden = true;
      canvasElement.hidden = false;
      video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
      video.srcObject = stream;
      video.play();
      tick();
      scan();
    });
};

function tick() {
  canvasElement.height = video.videoHeight;
  canvasElement.width = video.videoWidth;
  canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);

  scanning && requestAnimationFrame(tick);
}

function scan() {
  try {
    qrcode.decode();
  } catch (e) {
    setTimeout(scan, 300);
  }
}

style.css

html {
  height: 100%;
}

body {
  font-family: sans-serif;
  padding: 0 10px;
  height: 100%;
  background: black;
  margin: 0;
}

h1 {
  color: white;
  margin: 0;
  padding: 15px;
}

#container {
  text-align: center;
  margin: 0;
}

#qr-canvas {
  margin: auto;
  width: calc(100% - 20px);
  max-width: 400px;
}

#btn-scan-qr {
  cursor: pointer;
}

#btn-scan-qr img {
  height: 10em;
  padding: 15px;
  margin: 15px;
  background: white;
}

#qr-result {
  font-size: 1.2em;
  margin: 20px auto;
  padding: 20px;
  max-width: 700px;
  background-color: white;
}

【讨论】：

【解决方案2】：

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

scanner.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 为：

style.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>

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

【讨论】：