How To Set Portrait Or Full Height To A Video Element

user_8012192 0
Viewed 85

I have a project to capture an ID card with a camera and there's an additional guideline for that ID card, so I have to call a custom camera from my Angular.

When I use input with the capture attribute:

<input
  #inputCamera
  type="file"
  capture="environment"
  [accept]="state.model.allowedExtension"
  (change)="handleChange($event)"
  hidden
/>

I can't custom it to look like this:

enter image description here

So, I decide to make my own with thirdparty. But the problem is that video element always in landscape position, so it will looks like this:

enter image description here

So, how to make it full portrait position from that video element? Because I've been try with css but it's only working on style, when I try to capture an image, it still landscape position.

angular html javascript
1 Answers

have you tried passing constraints to getUserMedia?

navigator.mediaDevices.getUserMedia({
  video: { width: 720, height: 1280 }
})
.then(function(stream) {
  /* use the stream */
})
.catch(function(err) {
  /* handle the error */
});
user_44615760
Related