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

[JanKe0909]

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

[odahcam]

Please change the size of the zxing-scanner element, the elements inside the component should not be entirely customizable to avoid some extra issues, so we bounded the preview-video size to the zxing-scanner element size.

We will update the docs ASAP to avoid this to happen again.

[andrewyan]

Hi, I’m a newbie to all these. I guess I’ve the same problem where the preview videos are always larger than the phone screen. Can someone put a simple example here how it can be shrinked to fit the screen? Many thanks!

[odahcam]

You will loose the video proportions and the quality if you shrink the video. You can change the preview element size via CSS, there's only some existing styles you'll gotta overide. It just shouldn't be that way, but you can do that with some extra effort. Just do what @JanKe0909 did and add the required CSS overides so your styles are aplied to the element.

[andrewyan]

I'm really sorry. When I said I'm a newbie, I'm serious. Could you give me an example of these overrides?

[werthdavid]

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

[odahcam]

As long as /deep/ is deprecated, I would like to suggest a change:

zxing-scanner::ng-deep video {
    /* ... */
}

In Angular you can use the ::ng-deep filter instead. 😁

Working example:
https://stackblitz.com/edit/zxing-ngx-scanner-layout-shvqdr?file=app%2Fapp.component.scss

Also, now that we have this built in feature, I would like to ask if it isn't time to remove the cssClass attribute. It could increase a little performance and maintainability, also docs about this could help new guys to find easier answers. What you think David? Maybe a new issue for discussion?

[andrewyan]

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!

[JanKe0909]

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

[werthdavid]

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]

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

[csutorasr]

This could be achieved through an ngTemplate as ::ng-deep is not a solution.

[odahcam]

None of them is a solution, ::ng-deep is just a lighter hack. Can you talk more about ngTemplate?

[csutorasr]

Here is the solution.

The video element and the template should be a ref. This way you can still control the video element, but with the template a css from the component is applied to the video element without ngDeep.

[odahcam]

Yeah, this is a clean solution, but can be difficult for newbies (to use or implement).

This is not something meant to be changed, so I'm starting to think about sizing @Inputs such as width, height, proportions, etc.

The focus is to customize the zxing-scanner and maybe some new properties could solve the video size.

[csutorasr]

This one could solve all the problems. What about showing the current way, and add the Input properties; or you can choose to add a template, that can work the way I posted. A simple *ngIf="!templateRef; else templateRef" could work on video container element.

[odahcam]

In that case, I prefer to create some zxing-scanner-directive you can put in a <video> tag than creating this kinda stuff, the directive is gonna easier to handle by both sides.

[odahcam]

Closing as dicussion is now part of #83.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.