Change getusermedia stream resolution after it is already created

Question

I have a React app that records the user's webcam I'm implementing a feature to allow the user to change the video resolution. When I create the Media Stream for the first time passing a default video's width and height it works fine, however when I change the resolution nothing happens I'm still able to record the webcam but the resolution does not change. The following code is used to get the Media Stream, the width and height variables could be 1280x720 or 640x360. The default value mentioned above is 1280x720 and I can't change it to 640x360 after I the stream is created, if I create the stream using the 640x360 it works though.

const stream = await navigator.mediaDevices.getUserMedia({
        video: {
          width: {
            ideal: width
          },
          height: {
            ideal: height
          },
          frameRate: 25,
          deviceId: { exact: videoInputId || cameraDeviceId },
          aspectRatio: {
            exact: width / height,
          },
        },
        audio: audio,
});
cameraVideoRef.current.srcObject = stream;
setCameraStream(stream);

Answer 1

You need to call getUsermedia() again, with new constraints, to get a new stream object with a new resolution from a browser's camera. For best results close the old stream object first, by stopping all its tracks.