react-webcam icon indicating copy to clipboard operation
react-webcam copied to clipboard

Unable to set video constraints with height < width on iOS Safari

Open Amethystix opened this issue 1 year ago • 0 comments

Currently, on iOS safari, I am trying to use a webcam input that allows a user to take photos of documents. To do this, I need the camera to be able to be in a landscape aspect ratio.

Codepen: https://codepen.io/Amethystix/pen/KKBVqOa

Note that it works fine on desktop. Aspect ratio is as expected, size as expected.

On iOS safari however, it refuses to allow a height less than width when environment facing. I forced it to the right size with the object-fit property, but then when the screenshot is taken, the resulting image is stretched.

Note: to get around this, I am also adding object-fit to the resulting image. However the taken image itself does not match the aspect ratio I want, so I still see this as an issue.

Amethystix avatar Dec 27 '22 21:12 Amethystix