There is no way to dynamically set aspect ratio in a PWA

[developdeez]

I wasn't able to get the webcam to look clear in full screen mode in either mobile or desktop. Here's me codepen code:

ReactDOM.render(
          <Webcam
          style={{
            height: '100vh',
            width: '100%',
            objectFit: 'fill',
            position: 'absolute',
          }}
          mirrored
          width={'100%'}
          height={'100vh'}
        />,
  document.getElementById('root')
);

// https://www.npmjs.com/package/react-webcam

I tried adding the aspect ratio constraint and wasnt able to get it right but figured it should be dynamic somehow since many apps are on many types of browsers.

[mozmorris]

@developdeez I think you'd need to use cover as opposed to fill.

Quick demo: https://codepen.io/mozmorris/pen/NWbpdYM?editors=0010

[developdeez]

Thanks @mozmorris