How to change FPS in getusermedia with the 640*480 resolution?

Viewed 2101

I changed the FPS in MediaDevices.getUserMedia() but resolution also got changed. How can I reduce the FPS, while keeping the resolution at 640 × 480?

I tried the code below, but the video is displayed in a different resolution.

var constraints = {
  video: {
    width: 640,
    height: 480,
    frameRate: {
      ideal: 10,
      max: 15
    }
  }
};
1 Answers

Try:

var constraints = {
  video: {
    width: {exact: 640},
    height: {exact: 480},
    frameRate: {
      ideal: 10,
      max: 15
    }
  }
};

Note, though, not all browsers on all platforms downscale to arbitrary dimensions, leaving you picking among discrete native modes instead. Seeing resolution changes is usually a sign of this, because of how fitness distance is calculated. So be prepared with a fallback if this fails.

A better strategy may be to obtain the camera in the resolution you want first, then use applyConstraints to reduce its framerate:

await stream.getVideoTracks()[0].applyConstraints({
  width: {exact: 640},
  height: {exact: 480},
  frameRate: {ideal: 10, max: 15}
]);

That way if it fails you still have a stream.

Related