WebRTC video stream to capture selfi

Hi,

I am trying to use WebRTC video stream to capture selfi. Main intension to use on mobile web browsers. I tried defining aspectRatio : 9/16 which mostly works for mobile screen size.

On desktop using mobile simulator it works fine with 9/16 ratio but when test on actual Android or iOS device web browser it does not work and device show full wide screen video. Seems device does not respect the given aspectRatio.

import React, { useEffect, useRef, useState } from 'react';

const videoConstraint = {
    audio: false,
    video: {
        facingMode: 'user',
        aspectRatio: { exact: 9 / 16 },
        frameRate: { min: 10, ideal: 30, max: 60 },
        resizeMode: 'none', 
    },
};

const CaptureSelfie = () => {
    const videoRef = useRef<HTMLVideoElement>();
    const canvasRef = useRef<HTMLCanvasElement>();
    
    const startVideoStream = async () => {
        await navigator.mediaDevices
            .getUserMedia(videoConstraint)
            .then((stream) => {
                videoRef.current.srcObject = stream;
                videoRef.current.style.transform = 'scaleX(-1)';
            })
            .catch(console.error);
    };
    
    useEffect(() => {
      startVideoStream();
    }, []);


    return (
        <React.Fragment>
          <div id="video">
            <video className="csc-videoPlayer" ref={videoRef} autoPlay></video>
            <canvas ref={canvasRef}></canvas>
          </div>  
        </React.Fragment>
    );
};

export default CaptureSelfie;