实施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的应用程序吗？

感谢您的回答！

- Bart Van der Linden

Answer 1

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

- Eugene

Answer 2

这是一个几个月前的问题，但 Eugene 的答案不完整。对于我来说，要使 QuaggaJS 正常工作，我还需要添加 video 标签：

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

- Raff W

Answer 3

添加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中对我有效。

- anamarquez

---

从下拉列表中选择条形码类型怎么样？ - Eng Soon Cheah

Answer 4

您检查过控制台了吗？

使用“Livestream”（访问相机）需要您拥有一个SSL认证的网站。
这意味着在 https:// 中需要额外的 "s"。

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

您还应该知道，您可以获得免费的SSL证书，但您需要访问您的服务器。大多数托管服务都可以帮助您完成此操作。

- Björn C

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();                     
            }); 

- user5049440