How to resize/make it responsive with css?

I’ve follow this video tutorial: https://www.youtube.com/watch?v=qzbHxlQAa5o, but can’t get the css to work.

html:

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

.ts

private _initQuagga() {
  Quagga.init({
    inputStream: {
      name: 'Live',
      type: 'LiveStream',
      target: document.querySelector('#barcode-scanner')
    },
    decoder: {
      readers: ['code_128_reader']
    }
  }, (err) => {
    if (err) {
      this.logger.error('Err. on initializing Quagga:', err);
      return;
    }
    this.logger.debug('Quagga initialized.');
  });
}

.scss

#barcode-scanner video, canvas {
  width: 100%;
  height: auto;
}

#barcode-scanner video.drawingBuffer, canvas.drawingBuffer {
  display: none;
}

The css just doesn’t do anything on the video/canvas, even with !important it changes nothing.
I also tried downgrading to 0.11.6 which is the same version as the video, but still can’t get it to work.
Setting the video’s width from Chrome’s inspector works perfectly though.

Btw, there’s also a canvas floating to the right taking a massive blank space which can’t be hidden with css, how to fix this?

More infos: Angular: 5.2.0 quagga: 0.12.1

Thank you very much!

[sam-lex]

I got it working, seems to be extremely ugly though:

<div id="barcode-scanner">
  <video src=""></video>
  <canvas class="drawingBuffer"></canvas>
</div>

I just tested to see if my css would change the canvas element that I created myself, outside of the barcode-scanner div. It did, but it also prevented the canvas of the scanner being created automatically (LOL).

So next thing I did, was to put the canvas and a video tag inside the barcode-scanner div. And that worked.

Reading barcodes with the webcam is quite unreliable and hard… lightning, distance between the barcode and webcam, etc… all affects reading. Even with a buffer, it still reads wrong most of the time. I haven’t tweaked the settings yet, so there might still be hope on getting better and faster readings. Right now takes me about 30-40 seconds to read 20 samples.

Not sure about mobile, after about 30 minutes fiddling my android’s chrome settings, I couldn’t find how to allow permissions for the camera. Probably need to serve the app through https or sth.

A better option for mobile, would be cordova-plugin-barcodescanner currently discontinued 😞

[corneliusjugal]

do this where #scanner-container is the id you your div.this works fine. #scanner-container > video { width: 100%; height: 100%; }

#scanner-container > canvas.drawing, canvas.drawingBuffer { position: absolute; left: 0; top: 0; }