How to resize/make it responsive with css?

[sam-lex]

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!

[ericblade]

I must admit I had a ton of problem trying to get the whole thing to work correctly, and in a similar fashion between mobile and desktop browsers. What I ended up with is something "functional", but not at all what I wanted. :-S So I don't have an answer, but I am interested in one. :-D I'm also going to probably be doing some work in the future to try to figure it out, because I really want to just have a small part of the screen on mobile for camera, versus the entire thing.

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

[ericblade]

My Nexus 5 works great with Quagga, although I am going to implement an option in my app to turn on buffering/validation so it will hopefully eliminate the occasional bad scans. Webcams on PCs seem nearly impossible to get a good enough picture for, at least with the 3 that I have here. I've managed to get one successful reading and a couple of falses using the camera built into my laptop, but zero hits using external USB cameras.

[sam-lex]

Good to know that it works great on mobile.
I got it working (somewhat nice) with built-in webcam (FaceTime HD).
I discarded buffering and used this instead: #237 (comment)

[suzukieng]

@sam-lex not sure if this is related, but it might simply be a case of Angular style encapsulation.
I style the video element like so:

  <div id="quagga-scanner">
    <!-- Quagga scanner will be instantiated here -->
  </div>

Quagga.init uses #quagga-scanner as selector. I style the dynamically created children through ng-deep:

    #quagga-scanner {
      position: relative;
      &::ng-deep video {
        width: 100%;
        height: 24vh;
        object-fit: cover;
      }
      ::ng-deep canvas {
        display: none;
      }
    }

But I can't figure out how to make the video the same size as it's parent div.

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

[syn-arch]

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

this is great