I'm trying to build a barcode scanner for a mobile web application.
Now i´d like to set the width of the "camera viewport" to fit into my div.

So in QuaggaJs you can set the size of the livestream like this:

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

If you "ment" the width and height the size will be bigger than my mobile screen.
So, how can i set the viewport to just fill my div?

HTML (Bootstrap)

<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>

I'm trying to build a barcode scanner for a mobile web application.
Now i´d like to set the width of the "camera viewport" to fit into my div.

So in QuaggaJs you can set the size of the livestream like this:

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

If you "ment" the width and height the size will be bigger than my mobile screen.
So, how can i set the viewport to just fill my div?

HTML (Bootstrap)

<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>

• javascript
• html

2 Answers 2

You can set height and width whit this properties.

var w = window.innerWidth;

var h = window.innerHeight;

innerHeight and innerWidth are you screen dimensions

I'm using Quagga in Angular project and I handled sizing with code below:

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%;
    }
}