0

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?

Giedrius
  • 1,370
  • 3
  • 14
  • 37
  • Are you using [MediaStreamTrack](https://www.w3.org/TR/2022/WD-mediacapture-transform-20220210/) as explain in https://web.dev/mediastreamtrack-insertable-media-processing/ – Morrison Chang Mar 04 '22 at 18:28
  • @MorrisonChang I am not no, that feature only has 65% browser support which is very low for a production app! :/ – Giedrius Mar 07 '22 at 09:31
  • 1
    Unclear if you tried/seen [Get maximum video resolution with getUserMedia](https://stackoverflow.com/q/27420581/295004). – Morrison Chang Mar 07 '22 at 21:52

0 Answers0