將 QuaggaJs 的寬度設置為 100%？

Question

我正在嘗試為移動 Web 應用程序構建條形碼掃描儀。
現在我想設置“相機視口”的寬度以適應我的 div。

因此，在 QuaggaJs 中，您可以像這樣設置直播的大小：

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

我在Angular項目中使用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%;
    }
}