Customizable size

[lexcaraig]

It would be great if we can customize the size of the camera. Like responsive of onDemand.

[basst314]

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?

[lexcaraig]

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.

[rickdroio]

it is possible to set width and height like this:

<webcam [width]="320" [height]="240"></webcam>

[brayanmcz]

@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.

[sam-lex]

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

[basst314]

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!

[basst314]

Closing this issue, current resizing capabilities should be sufficient for now

[vamsikrishna18]

how can we set the width for maximum screen

[Nitin1121]

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

[sayedgt]

How to set focus distance? Any sample code will be appreciated.

[ILDEMONICO]

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