How did Expo Camera create a mobile full screen camera view? Trying to do the same with React-webcam and failing

Question

How to make fullscreen mobile camera view like expo-camera but with react-webcam?

Using Expo-Camera/Tailwind, the below code would create a fullscreen camera view on mobile.

// Creates the camera itself, on web, it'd use getUserMedia/Stream API, see https://docs.expo.dev/versions/latest/sdk/camera/#web-support
<Camera type={CameraType.back}>
  // Container for the camera, set to be screen height
  <div className='flex-1 bg-transparent min-h-screen'></div>
</Camera>

Looking at their camera settings, I've done exactly the same but with react-webcam, which should be fullscreen camera view on mobile.

  const videoConstraints = {
    facingMode: { exact: "environment" },
    autoFocus: 'continuous',
    flashMode: 'off',
    whiteBalance: 'continuous',
    zoom: 0,
    focusDepth: 0,
    ratio: '4:3',
  };

  <div className='flex-1 bg-transparent min-h-screen'>
    <Webcam className="flex-1 bg-transparent" videoConstraints={videoConstraints} />
  </div>

However, it's not a full screen camera view, it's like 3/4 filled.

React Webcam View

Expo Camera View

Answer 1

Follow the answer by @Hudhaifah Zahid. Honestly, I don't know why it isn't some default input at this point...

  const size: Size = useWindowSize() // https://usehooks.com/useWindowSize/

  // Default to 4/3 ratio
  const [ratio, setRatio] = useState(0.75)

  // Media constraints for best results
  // Notice the ratio uses the useState? As that updates based on device width/height
  let videoConstraints = {
    facingMode: { exact: "environment" },
    autoFocus: 'continuous',
    flashMode: 'off',
    whiteBalance: 'continuous',
    zoom: 0,
    focusDepth: 0,
    aspectRatio: ratio,
  }

  return (
    <div className="flex bg-transparent min-w-[100vw] min-h-screen">
      <Webcam
        height={size.height}
        width={size.width}
        className="bg-transparent"
        videoConstraints={videoConstraints}
        autoFocus={true}
      />
    </div>
  );