basst314 / ngx-webcam

A simple Angular webcam component / pure & minimal, no flash-fallback
https://basst314.github.io/ngx-webcam/?
MIT License
231 stars 104 forks source link

Can't setup maximum resolution per any device. How to receive avaiable Constraints per device? #66

Open IgorKurkov opened 4 years ago

IgorKurkov commented 4 years ago

Hi! Great package, Im really excited! But I have some troubles with different devices about width and height. First of all, how I can set maximum available supported constraints? I see We can get some data from navigator.mediaDevices.getSupportedConstraints(); but where I need to set them? I get an error in ngx-webcam "some problem". I see you have made interfaces for video options so I can set only

 mediaConstraints = {
  advanced: [
    {width: 720},
    {height: 720},
    //{height: 1024}, <-- not supported on another devices
   // {minHeight: 720} <-- not supported by interface MediaTrackConstraints
  ]
};

I found these options for videoOptions on MDN, but where I can define them?

video: {
    width: { min: 1024, ideal: 1280, max: 1920 },
    height: { min: 776, ideal: 720, max: 1080 }
  }

main goal: 1) webcam view needs to be by the device as full-screen width/height (similar to regular camera view) 2) it needs to streaming/capturing maximum resolution images available on the current device can

can you help me, or just show the way, because I'm stuck here :)

sagar2071995 commented 4 years ago

@IgorKurkov you have to add following lines in your css webcam-container .webcam-wrapper, .webcam-wrapper video { width: 100% !important; height: 100% !important; }

WouterWidgets commented 4 years ago

A bit late, but I got it to work by adding this attribute to the webcam component instance in my template: [videoOptions]="{width: {min: 1280, ideal: 1920}, height: {min: 720, ideal: 1080}}"

IgorKurkov commented 4 years ago

Great! Thank you!!

Nitin1121 commented 4 years ago

Hi guys, Can someone help me to set the webcam view needs to be by the device as full-screen width/height whether it is laptop or mobile . This is my code in the html <webcam [height]="height" [width]="width" [trigger]="triggerObservable" (imageCapture)="handleImage($event)" *ngIf="showWebcam" [allowCameraSwitch]="allowCameraSwitch" [switchCamera]="nextWebcamObservable" [videoOptions]="{width: {min: 1280, ideal: 1920}, height: {min: 720, ideal: 1080}}" (cameraSwitched)="cameraWasSwitched($event)" (initError)="handleInitError($event)">

Can anyone help me in this issue