Web 实现quagga扫描条码

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

---

谢谢你的回答

在标记中包含

这是一个几个月前的问题，但尤金的答案并不完整。对我来说，为了让QuaggaJS发挥作用，我还必须添加视频标签：

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

---

在标记中添加如下div元素：

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

---

你检查过你的控制台了吗

使用“Livestream”（访问摄像头）需要您有一个经过SSL认证的网站。
它表示https中的附加“s”：//

您可以在此处阅读更多信息：

您还应该知道，您可以获得免费的SSL证书，但您需要访问您的服务器。大多数托管服务都可以帮助您实现这一点。

加载项html

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

---

在Vue中适用于我。

从下拉列表中选择条形码类型如何？

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

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