ngx-scanner: Change the size of the preview-element doesn't work

Hello,

I tried to change the css-style as explained in usage but it doesn’t worked for me.

My html file looks like this below:

<zxing-scanner #scanner class="test-class" 
      [scannerEnabled]="scannerEnabled"
      [device]="selectedDevice"
      (camerasFound)="displayCameras($event)"
      (scanSuccess)="handleQrCodeResult($event)"
      [cssClass]="'small-video'"></zxing-scanner>

and I try to change the style like this:

.small-video {
  max-height: 70vh;
  width: 100vw;
  object-fit: contain;
}

Thank you and best regards, Jan

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 18 (13 by maintainers)

Commits related to this issue

#55 Updated Readme for changing the size of the preview element — committed to zxing-js/ngx-scanner by werthdavid 6 years ago

Most upvoted comments

Hi David & Luis, thanks so much for your detail info. I’ll check them out and probably need to learn a lot more about Angular 😃 You people are very helpful and I really appreciate that!

andrewyan on Apr 5, 2018

Hey guys, thank you for your help and your fast response. It works for me. 👍 Best regards, Jan

JanKe0909 on Apr 5, 2018

Have a look at this demo As you can see I made an scss-file that contains a css-class that resizes the video to the desired size. Be aware that /deep/ is used in the example due to angulars view encapsulation an alternative would be to set ViewEncapsulation.None inside the app-component. Or to make it short: when you use /deep/ the style of that css-class is valid not only inside your component but through the whole angular-app

Hint: you can resize the video element via CSS, it won’t change the aspect of the video itself though! That means that if your camera has e.g. a format of 4:3 and you change the size of the element via CSS to 16:9, the element is in fact resized to that size but the video itself will stay in 4:3 format giving you a (white) border

If you have any questions don’t hesitate to ask

werthdavid on Apr 5, 2018

I’ll leave the issue open until we updated the Readme accordingly

werthdavid on Apr 5, 2018

I’m fine with removing the attribute @odahcam but that’s a breaking change so let’s schedule that for an 2.x release. I’d say performance is not a big issue so it’s not that urgent…

werthdavid on Apr 5, 2018