二维码和条形码阅读器 javascript 文档 html5

Question

I want to make an input where it can be automatically filled in after scanning a QR or barcode scanner using a webcam or phone cam.我想在使用网络摄像头或手机摄像头扫描 QR 或条形码扫描仪后自动填写输入内容。

for the script I imagined something like this对于脚本，我想像这样

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

I hope anyone can give me suggestions or feedback for my problem.我希望任何人都可以就我的问题给我建议或反馈。 Thank you谢谢

Answer 1

Before it thank you for JaromandaX, i have found script for barcode scanner on Html5 using webcam.在感谢 JaromandaX 之前，我使用网络摄像头在 Html5 上找到了条码扫描器的脚本。

this is my index.html这是我的索引。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 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样式.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

There are lots of better libraries out there for doing this, but I'd personally recommend QrScanner because of its simplicity and intuitiveness.有很多更好的库可以做到这一点，但我个人推荐QrScanner ，因为它简单直观。 Your live QrCode Scanner would be like this...您的实时二维码扫描仪将是这样的......

scanner.html扫描仪.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>

Then add a little CSS as:然后添加一点 CSS 为：

style.css样式.css

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

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

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

Then add your QrScanner code as:然后将您的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>

Then connect your camera and click start button...然后连接你的相机并点击开始按钮...

二维码和条形码阅读器 javascript 文档 html5

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-12-17 02:59:15

解决方案2
1 2021-02-25 07:34:37

scanner.html扫描仪.html

style.css样式.css

二维码和条形码阅读器 javascript 文档 html5

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-12-17 02:59:15

解决方案2 1 2021-02-25 07:34:37

scanner.html扫描仪.html

style.css样式.css

解决方案1
1 已采纳 2020-12-17 02:59:15

解决方案2
1 2021-02-25 07:34:37