web - 实现quagga扫描条码

Question

我正在使用 Quagga.js 使用 HTML5 和 javascript 制作在线扫描应用程序。

我需要让网络摄像头工作以搜索条形码并导入 quagga.js ：

在 quagga 的网页上，您会找到一个名为 Quagga.init 的方法。初始化网络摄像头视图。我在脚本标签中输入了这段代码：

Quagga.init({
    inputStream : {
      name : "Live",
      type : "LiveStream"
    },
    decoder : {
      readers : ["code_128_reader"]
    }
  }, function() {
      console.log("Initialization finished. Ready to start");
      Quagga.start();
  });

但是什么也没发生。我需要做什么才能让这个网络摄像头正常工作？对于创建用于扫描条形码的基于 Web 的应用程序还有其他意见吗？

谢谢你的回答！

Answer 1

包含<div id="interactive" class="viewport"></div>在您的标记中。

Answer 2

这是几个月前的问题，但尤金的回答并不完整。对我来说，为了让 QuaggaJS 工作，我还必须添加 video 标签：

<div id="interactive" class="viewport">
    <video autoplay="true" preload="auto"></video>
</div>

Answer 3

你检查过你的控制台吗？

使用“Livestream”（访问相机）需要您拥有经过 SSL 认证的网站。
这意味着 https:// 中的附加“s”

您可以在此处阅读更多信息：https: //support.google.com/adwords/answer/2580401?hl=sv

您还应该知道您可以获得免费的 SSL 证书，但您需要有权访问您的服务器。大多数托管服务可以帮助您解决这个问题。

Answer 4

在html中添加

<div id="barcode-scanner" class="size"> </div>  

添加 JavaScript

 Quagga.init({           
        inputStream : {
            name : "Live",
            type : "LiveStream",
            target: document.querySelector('#barcode-scanner'), 
             constraints: {
                width: 520,
                height: 400,                  
                facingMode: "user"  //"environment" for back camera, "user" front camera
                }               
        },                         
        decoder : {
            readers : ["code_128_reader","code_39_reader"]
        }

    }, function(err) {
        if (err) {
            esto.error = err;
            console.log(err);
                return
        }

        Quagga.start();

        Quagga.onDetected(function(result) {                              
                var last_code = result.codeResult.code;                   
                    console.log("last_code "); 
             });
    });

在 Vue 中为我工作。

Answer 5

在标记中添加这样的 div 元素：

<div id="barcode_canvas"></div>

然后在输入流中包含目标，如下所示： target: document.querySelector('#barcode_canvas')

          Quagga.init({
              inputStream : {
                name : 'Live',
                type : 'LiveStream',
                target: document.querySelector('#barcode_canvas')
              },
              decoder : {
                readers : ['ean_reader']
              }
            }, function(err) {
                if (err) {
                    console.log(err);
                    return
                }
                console.log('Initialization finished. Ready to start');
                Quagga.start();                     
            });