Context: Trying to open camera in iOS(iPhone) app’s WebView using mediaStream APIs, but it is opening camera in full screen mode rather than in the expected fixed width, height.

WebView is loading opening React Application through secured(https) URL.

Question/Query: Can someone please help identify/suggest what might be the issue here?

PS: Please let me know in case any more information is required from my side.

WebView Configuration instance has following attribute set to True
allowsInlineMediaPlayback = true

const videoEl = useRef() as MutableRefObject<HTMLVideoElement>;
const canvasEl = useRef() as MutableRefObject<HTMLCanvasElement>;

<video
    // controls
    autoPlay
    playsInline
    muted
    loop
    preload="auto"
    width={window.screen.width.toString()}
    height={(window.screen.height * 0.5).toString()}
    ref={videoEl} />
<canvas
    style={{ opacity: 0 }}
    ref={canvasEl} />```

Callback code below to load video on launch of Component(useEffect() hook):

const stream = await navigator.mediaDevices.getUserMedia(constraints);
video.srcObject = stream;
video.onloadedmetadata = () => {
    const { clientLeft, clientTop } = video
    canvas.style.position = 'absolute';
    canvas.style.left = clientLeft.toString();
    canvas.style.top = clientTop.toString();
    canvas.setAttribute('width', window.screen.width.toString());
    canvas.setAttribute('height', (window.screen.height * 0.5).toString());
    video.play();
}