Comments (11)
If you want to make it "responsive full screen", then this will work for you.
Not sure about custom responsive solutions, you could tweak it by doing the calculations yourself if it's not too complicated.
export class TakePictureComponent implements OnInit {
private width: number;
private height: number;
@HostListener('window:resize', ['$event'])
onResize(event?: Event) {
const win = !!event ? (event.target as Window) : window;
this.width = win.innerWidth;
this.height = win.innerHeight;
}
constructor() {
this.onResize();
}
// ...
}
<div class="wrapper" (window:resize)="onResize($event)">
<!-- Webcam -->
<webcam [trigger]="triggerObservable"
[width]="width"
[height]="height"
(imageCapture)="onImageCapture($event)">
</webcam>
<!-- Controls -->
</div>
.wrapper {
display: flex;
background: #383838;
height: 100vh;
align-items: center;
justify-content: center;
// inexplicable/unknown extra space is rendered, causing scrollbars to show up
overflow: hidden;
}
from ngx-webcam.
Hi @sam-lex,
Thanks for sharing your solution. I will try to enhance the library by providing better resizeability out-of-the-box soon.
I will leave this issue open to keep you posted!
Cheers!
from ngx-webcam.
Is this workaround still valid? i'm trying to change component size according to an user event (i need to change from 16:9 aspect ratio to 1:1) but everytime i try to change the size, the video tag always set itself to maximum visible space with the aspect ratio setted in first instance reagrdless of any value i try to set
from ngx-webcam.
Do you mean by putting the webcam component in a container with predefined size, or do you mean the user should be able to resize the webcam component at runtime?
from ngx-webcam.
Well, i think the width and height should be responsive so anyone can just resize the container at runtime or not. :) Bec, I did some hook just to make it responsive.
Setting a fix size would be also nice.
from ngx-webcam.
it is possible to set width and height like this:
<webcam [width]="320" [height]="240"></webcam>
from ngx-webcam.
@rickdroio We're you able to get your camera to resize using the code you used above?
I tried it and it did not work for me.
from ngx-webcam.
Closing this issue, current resizing capabilities should be sufficient for now
from ngx-webcam.
how can we set the width for maximum screen
from ngx-webcam.
We cant get the camera width & height to entire screen size by using the above mentioned code...We cant able to modify its dimension by using css it doesnt get applied ...can someone suggest any ways to get it fullscreen
from ngx-webcam.
How to set focus distance? Any sample code will be appreciated.
from ngx-webcam.
Related Issues (20)
- After unsubscribe, seems camera is still active HOT 3
- Portrait mode HOT 2
- Camera view finder does not show up in ios HOT 1
- Can't set default camera to rear camera HOT 1
- It's possible to zoom in this plugin?
- No source names in Firefox
- Is it possible to ignore wide angle camaras? HOT 1
- Video Record Not available!
- Camera does not stop even after component is destroyed HOT 5
- Error while try to flip between camera on android device on Firefox browser HOT 1
- Angular 16 support
- Green screen HOT 1
- Angular Not Recognizing Webcam Element
- Uncaught (in promise) DOMException: The play() request was interrupted by a new load request
- Full width and height camera HOT 2
- Angular 14.2.8: Cannot find module '@angular/core' or its corresponding type declarations HOT 1
- Camera switch issues and black screen
- Camera Not Working on Samsung Phone HOT 1
- Camera configuration - Im the only one not finding any examples or docs? HOT 1
- Is project live or on the pause?
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-webcam.