Comments (18)
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!
from ngx-scanner.
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
from ngx-scanner.
Hey guys, thank you for your help and your fast response. It works for me. 👍 Best regards, Jan
from ngx-scanner.
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..
from ngx-scanner.
I'll leave the issue open until we updated the Readme accordingly
from ngx-scanner.
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.
from ngx-scanner.
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!
from ngx-scanner.
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.
from ngx-scanner.
I'm really sorry. When I said I'm a newbie, I'm serious. Could you give me an example of these overrides?
from ngx-scanner.
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?
from ngx-scanner.
This could be achieved through an ngTemplate
as ::ng-deep
is not a solution.
from ngx-scanner.
None of them is a solution, ::ng-deep
is just a lighter hack. Can you talk more about ngTemplate
?
from ngx-scanner.
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
.
from ngx-scanner.
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 @Input
s such as width, height, proportions, etc.
The focus is to customize the zxing-scanner
and maybe some new properties could solve the video size.
from ngx-scanner.
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.
from ngx-scanner.
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.
from ngx-scanner.
Closing as dicussion is now part of #83.
from ngx-scanner.
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.
from ngx-scanner.
Related Issues (20)
- have multiple webcam still get Cameras not found.
- Poor sharpness on iPhone Pro HOT 1
- Property '"autofocusEnabled"' is incompatible with index signature. HOT 2
- Cannot Scan code 93 and Codabar barcodes. No errors in the console as well
- cannot scan UPC_E barcodes
- Cannot read properties of undefined (reading stop)
- [Firefox-android] Permission issue HOT 1
- Please support Angular 17 HOT 1
- Cordova Android app
- Area of intreset feature
- Windows 11, camera shows screen stream instead
- Error reading QR code in Chrome
- when you open a scanner multiple times the CPU usage gets to 100% HOT 3
- Dependency bug
- Add Support for willReadFrequently to Optimize Canvas Readback Performance HOT 2
- ZxingScannerComponent is not releasing all resources - BrowserCodeReader still trying to decode after ngDestroy HOT 3
- ZxingScannerComponen.init method called twice when enable flag is set to true (leak once again) HOT 8
- iPadOS black screen after installation to homescreen, works on safari HOT 4
- Support v0.21.0 zxing library HOT 1
- Upgrade to Angular 18.x HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ngx-scanner.