如何用相机在js中构建条形码阅读器？

Question

我是 js 和 jquery 的初学者，所以我需要你的帮助。感谢我手机上的摄像头，我想在 js 中构建一个条形码阅读器。 目前我这样做：

  <video id="video" width="640" height="480" autoplay></video>
    <button id="snap">Snap Photo</button>
    <canvas id="canvas" width="640" height="480"></canvas>
     <script type="text/javascript">
     // Grab elements, create settings, etc.
     var video = document.getElementById('video');

     // Get access to the camera!
     if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
       // Not adding `{ audio: true }` since we only want video now
     navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
      video.src = window.URL.createObjectURL(stream);
      video.play();
  });
  // Elements for taking the snapshot
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  var video = document.getElementById('video');

  // Trigger photo take
  document.getElementById("scan").addEventListener("click", function() {
	context.drawImage(video, 0, 0, 640, 480);
  });
}

但它不起作用所以我很迷茫x） 提前感谢您的帮助！ （对不起我的英语：D）

Answer 1

您可以使用zbar C/C++ 库，并使用Emscripten 将其转换为WebAssembly（所有主流浏览器都支持）。

Emscripten 是一个基于 LLVM/Clang 的编译器，可将 C 和 C++ 源代码编译为 WebAssembly，主要用于在 Web 浏览器中执行。

这是我刚刚发布的一个示例应用：

• https://github.com/maslick/koder

• https://qr.maslick.tech

Answer 2

为什么不使用一些库，例如。

• QuaggaJS
• Some other reader