How to use MediaRecorder() to record mobile resolution on Desktop

Question

I want to record the same resolution on mobile as on Desktop. When I initiate MediaRecorder() on Desktop it has landscape dimensions with different resolution compared to when it is initiated on same browser but on mobile device.

How can I have same resolution on Desktop as on mobile, I want mobile resolution to be default resolution, portrait mode only.

      navigator.mediaDevices.getUserMedia({audio: true, video: true   })
      .then((mediaStreamObj) => {
      
         // Create a new MediaRecorder instance
         const medRec = new MediaRecorder(mediaStreamObj);
         window.mediaStream = mediaStreamObj;
         window.mediaRecorder = medRec;
         medRec.start();
         
         //when recorded data is available then push into chunkArr array
         medRec.ondataavailable = (e) => {
          chunksArr.push(e.data);
        };
         
         //stop the video recording
         medRec.onstop = () => {

             window.blobFile = new Blob(chunksArr, { type:"video/mp4;codecs=h264" });
             chunksArr= [];
             
             // create video element and store the media which is recorded
             const recMediaFile = document.createElement("video");
             recMediaFile.setAttribute("id", "vid-recorder2");
             recMediaFile.controls = true;
             const RecUrl = URL.createObjectURL(window.blobFile);
             recMediaFile.src = RecUrl;
             document.getElementById(`vid-recorder`).replaceWith(recMediaFile);
            
      };
      startTimer();
      startBtn.disabled = true;
      endBtn.disabled = false;
   });

Answer 1

You request the resolution of your input video stream by giving a constraints object to .getUserMedia(). The constraints object can contain video track constraints like these.

If you're trying for a portrait-mode resolution you might try something like this:

const constraints = {
  audio: true,
  video: {
    width: { ideal: 480 },
    height: { ideal:  640 }
}
stream = await navigator.mediaDevices.getUserMedia(constraints)

But, this is important, you cannot tell getUserMedia the exact dimensions or aspect ratio of the video stream it delivers. What it actually generates depends on the camera hardware it has available. If you give it something like, for example,

   video: {
     width:  { min: 144, ideal: 640, max: 1920 },
     height: { min: 176, ideal: 480, max: 1080 }
   }

it will either reject your request or give you back something the camera hardware can handle. That is, on a typical desktop / laptop machine, unlikely to have a portrait mode aspect ratio.

And it will vary between make and model of machine and browser. It's a hint.

That's all a long way of saying You (probably) Can't Do That™.