Mjukis Mjukis - 1 month ago 24
HTML Question

Set width of QuaggaJs to 100%?

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

Answer

You can set height and width whit this properties.

var w = window.innerWidth;

var h = window.innerHeight;

innerHeight and innerWidth are you screen dimensions

Comments