将QuaggaJs的宽度设置为100%？

Question

我正试图为移动网络应用程序构建条形码扫描仪。

现在，我想设置“相机视口”的宽度，以适应我的div。

因此，在QuaggaJs中，可以像这样设置livestream的大小：

Quagga.init({
    inputStream : {
        name : "Live",
        type : "LiveStream",
        target: document.querySelector('#interactive'),
        constraints: {
            width: 200,
            height: 200,
            facing: "environment" // or user
        }
    },

如果你“评论”的宽度和高度，大小将大于我的移动屏幕。

那么，我如何设置视口来填充我的div呢？

HTML (引导)

<div class="container">
  <div id="interactive" class="viewport"></div>
  <div id="interactive" class="viewport col-md-12"></div>
  <div id="interactive" class="viewport" style="width: 100%;"></div>
</div>

Answer 1

您可以使用此属性设置高度和宽度。

var w = window.innerWidth;

var h = window.innerHeight;

innerHeight和innerWidth是屏幕尺寸吗？

Answer 2

我在角项目中使用Quagga，并使用下面的代码处理大小调整：

HTML：

<div id="barcode_scanner"></div>

CSS：

#barcode_scanner {
    &::ng-deep video {
        width: 100%;
    }
     ::ng-deep canvas {
        position: absolute;
        z-index: 1000;
        right: 0;
        width: 100%;
    }
}