Change MediaRecorder frame rate

#StandWithUkraine

Today, 20th March 2023, Ukraine is still bravely fighting for democratic values, human rights and peace in whole world. Russians ruthlessly kill all civilians in Ukraine including childs and destroy their cities. We are uniting against Putin’s invasion and violence, in support of the people in Ukraine. You can help by donating to Ukrainian's army.

MediaRecorder frame rate for WebRtc MediaStream recording API

The only one possible way to change frame rate in video produced by MediaRecorder is to define video constraints when you call getUserMedia or getDisplayMedia.

MediaRecorder itself can't control actual frame rate, it just records at same frame rate that provides MediaStream.

Important Note from MediaRecorder docs at MDN:

Video resolution, frame rate and similar settings are specified as constraints when calling getUserMedia(), not here in the MediaRecorder API.

Example code:

 const webcamStream = await navigator.mediaDevices.getUserMedia({
  video: {
    frameRate: {
      min: 24,  // very important to define min value here
      ideal: 24,
      max: 25,
    },
  },
});

Dec 12, 2021

by Ivan Borshchov

Did it help you?

Yes !

	const webcamStream = await navigator.mediaDevices.getUserMedia({
	video: {
	frameRate: {
	min: 24, // very important to define min value here
	ideal: 24,
	max: 25,
	},
	},
	});