I am building a PWA that heavily focuses on image capture and need to access device's camera at a high resolution.

I have tried using navigator.mediaDevices.getUserMedia with a variety of constraints, however, it seems that only very low constraints can be met (e.g. my Android camera can capture something around 2000x3000+ px resolution, but the stream only supports up to ~320/480p). It also sort of ignores the aspect ratio and making the stream vertical full screen really scales and stretches the image.

With <input type="file" accept="image/*" capture="environment"/> I get much better results as it opens the native camera app. With that I am able to get a very high resolution image of 2000x3000+ px. However, with that I cannot customize nor process the stream (i.e. add an overlay, try detecting QR codes etc.).

Is there anything I'm missing? I would need to get a camera stream with resolution to at least match the full screen resolution of the device, however, I cannot find how to enforce that (using min in the constraints width and height throws an error that constraints couldn't be met).

Perhaps there is a library that wraps the getUserMedia functionality with a simple interface to provide full screen camera stream?