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工作，我还必须添加视频标签：

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

Answer 3

你检查过你的控制台吗？

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

中的附加“s”

您可以在此处详细了解：https://support.google.com/adwords/answer/2580401?hl=sv

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

Answer 4

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

然后在输入流中包含目标，如下所示： target：document.querySelector（'＃barcode_canvas'）

test_id

Answer 5

添加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中为我工作。

实施quagga扫描条形码

5 个答案: