二维码和条码 Reader javascript html5 的文档

Question

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

我想的剧本是这样的

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

我希望有人能给我建议或反馈我的问题。谢谢

Answer 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;
}

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

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

二维码和条码 Reader javascript html5 的文档

Qr & Barcode Reader javascript documentation for html5

javascript

webcam

qr-code

barcode-scanner

html5-video

scanner.html

style.css