WebRTC video stream to capture selfi

System Community Manager admin
This discussion was created from comments split from: 👋 Start Here!.


  • 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
                .then((stream) => {
                    videoRef.current.srcObject = stream;
                    videoRef.current.style.transform = 'scaleX(-1)';
        useEffect(() => {
        }, []);
        return (
              <div id="video">
                <video className="csc-videoPlayer" ref={videoRef} autoPlay></video>
                <canvas ref={canvasRef}></canvas>
    export default CaptureSelfie;

  • wyatt
    wyatt Dailynista

    hmmm, I don't see any clear reason why your code would not respect the given aspect ratio -- it may be device/browser dependent, but I was able to test a moment ago with Chrome on Android 9 that I'm able to modify the aspectRatio in a getUserMedia call and get back the expected settings for both the user and the environment cameras.

    I actually found this very useful MDN tool to do that test -- it might be worth using it on your mobile browser to see if the constraints your specifying are working as expected there! It also has some information about displaying constraint errors if there are any, which might let you see if e.g. your values run into something like being "over-constrained".