Cam Mobile View Orientation

[zarakhaliq]

Please follow the general troubleshooting steps first:

• [ ] Is your app running over HTTPS? (please provide the URL if possible)
• [ ] Have you tried running the demo (https://codepen.io/mozmorris/pen/JLZdoP) on your device?
• [ ] Checked the latest "Can I use" compatbility table? (https://caniuse.com/stream)

Bug reports:

1)The camera works well when viewed on a computer or laptop, however on my phone the camera is in landscape mode rather than portrait. The camera covers half the screen and the top and bottom of the screen is white. I tried playing around with the heights and width but no success. Here is my code:

const videoConstraints = { facingMode: "user", width: 250, height: 400, } return (

2)Is there a way the camera can change orientation from landscape to portrait with rotation of phone?

[mozmorris]

@zarakhaliq take a look at this example: https://codepen.io/mozmorris/pen/GRpEQwK

Re: orientation, you would need to detect this in your code and update the constraints. Take a look at https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation

[mozmorris]

It's worth pointing out that constraints capabilities vary across devices. My suggestion would be to read the constraints guide on MDN and do some testing across devices. Best of luck.

[zarakhaliq]

@zarakhaliq take a look at this example: https://codepen.io/mozmorris/pen/GRpEQwK

Re: orientation, you would need to detect this in your code and update the constraints. Take a look at https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation

Thanks, I will try to update the constraints and test on different devices. I'll update over here to maybe help anyone else who is having the same problem.

[mozmorris]

That would be very welcome 👍

[NahidAhmed07]

@zarakhaliq
Have you found any solution to this?