basst314/ngx-webcam

Working with Portrait/Landscape Mode in mobile devices

blairjanis opened this issue · 1 comments

The description states that the package supports portrait and landscape modes but I've been unable to find documentation on how it is supported. With some pretty intense testing and experimenting I have been able to figure out how to get the camera to get the camera into portrait mode. It's kind of confusing but if I do the following with video options it seems to work ... sort of.

public videoOptions: MediaTrackConstraints = { width: {min: 480, max: 480}, height: { min: 270, max: 270} };

In a desktop browser, this shows the video in landscape mode. But on an iOS device, it shows it in portrait mode if the device is in portrait mode and landscape if in landscape mode. While that seems to be the solution, those numbers are made up. I need to be able to account for actual device resolution. I'm working through this by checking the resolution before setting the videoOptions. That's sort of working. But now I'm struggling handling dynamic updating of the camera resolution/videoOptions and the size of the video element in the DOM when the user switches from landscape to portrait and vice versa.

In an ideal world I would want to be able to set both the camera and video elements to fill the browser window to the edges on a mobile device in either landscape or portrait mode but it seems there may be some constraints on that.

Any guidance on the above would be greatly appreciated!

After a ton of research I learned that the best way to capture an image on mobile is to use <input type="file" accept="image/*">. Mobile devices use whatever default behavior is needed to control the size of the camera and other behaviors such as choosing an existing image or taking a photo. So while I'm still using ngx-webcam for some other use cases I don't need it for this one.