Open HzdAngga opened 1 year ago
Same for me, but not only with aspect-ratio, but with specifying height and width.
Note that this works on mobile Firefox but not on mobile chrome
@mozmorris
I'm having this same issue, how did you guys handle this
I haven't dealt with it so far, but next thing would be using a different camera library I guess 😞
What library, I think its not a library thing, but something with the constraints
I now fiddled with custom options via the getUserMedia (f.e. i just executed in the browser inspector
navigator.mediaDevices
.getUserMedia({
audio: false,
video: {
aspectRatio: 16 / 9,
height: { ideal: 1920 },
frameRate: { ideal: 60 },
facingMode: 'user',
},
})
.then((mediaStream) => {
const video = document.querySelector('video');
video.srcObject = mediaStream;
video.onloadedMetadata = () => {
video.play();
};
})
.catch((err) => {
console.log(`my error: ${err.name}: `, err);
});
) And indeed it seems like no library issue but a constraints issue. (Maybe some browsers changed some inner mechanic which then lead to this issue)
In the past we had a full-screen camera dialog, which it seems isn't possible anymore.. the constraints which met our requirements are those stated in the example above.
To find constraints that fit to your usecase i recommend you reading through following links and playing around with the options:
I also had the same issue and then realised that it was because the default orientation for desktop was landscape, while mobile was portrait. So in the end I was able to make it work for both platforms by swapping the width and height constraints depending on device type.
For example:
<Webcam
videoConstraints={{
height: isMobile
? { ideal: 1080, max: 2160, min: 720 }
: { ideal: 1920, max: 3840, min: 1280 },
width: isMobile
? { ideal: 1920, max: 3840, min: 1280 }
: { ideal: 1080, max: 2160, min: 720 },
}}
/>
Please follow the general troubleshooting steps first:
Bug reports:
I tried the videoConstraints with
aspect-ratio 9 / 16
in web and responsive simulator in web and it works fine, but when open it in mobile device (android), the resolution of react-webcam video isnt 9 / 16 (back to default resolution of react-webcam). Any ideas how to make it works in mobile device?Features:
Please note by far the quickest way to get a new feature is to file a Pull Request.
We will consider your request but it may be closed if it's something we're not actively planning to work on.