ngx-webcam icon indicating copy to clipboard operation
ngx-webcam copied to clipboard

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

Open IgorKurkov opened this issue 4 years ago • 4 comments

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 :)

IgorKurkov avatar Dec 06 '19 11:12 IgorKurkov

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

sagar2071995 avatar Feb 11 '20 11:02 sagar2071995

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}}"

WouterWidgets avatar Aug 01 '20 18:08 WouterWidgets

Great! Thank you!!

IgorKurkov avatar Aug 03 '20 06:08 IgorKurkov

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

Nitin1121 avatar Sep 26 '20 19:09 Nitin1121