实现quagga扫描条码答案

【问题标题】：implementing quagga scanning barcodes实现quagga扫描条码
【发布时间】：2015-04-05 13:21:56
【问题描述】：

我正在使用 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 的应用程序还有其他意见吗？

感谢您的回答！

【问题讨论】：

标签： web barcode scanning quagga

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您检查过您的控制台吗？

使用“直播”（访问相机）需要您拥有经过 SSL 认证的网站。
它表示 https://

中的附加“s”

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

您还应该知道您可以获得免费的 SSL 证书，但您需要有权访问您的服务器。大多数托管服务都可以为您提供帮助。

【讨论】：

【解决方案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 中为我工作。

【讨论】：

从下拉列表中选择条码类型怎么样？

【解决方案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();                     
            });

【讨论】：