how do i create a replay buffer using mediaRecorder in browser?

var buffer=[]
const startDisplay = () => {
//set interval to 60fps
  mainStream.drawImage(video, 0, 0, canvas.width, canvas.height);
  mediaRec.requestData();
};

const initializeRecorder = (stream) => {
  //stream is the window capture
  mediaRec = new window.MediaRecorder(stream);
  mediaRec.ondataavailable = processBuffer;

  mediaRec.start(5000);
};
const processBuffer = (data) => {
  buffer.push(data.data);
  if (buffer.length >= 60*5) {
    buffer= buffer.slice(60);
  }
};
const saveRec = async () => {
  let blob = new Blob(
    buffer.slice(0, buffer.length - (buffer.length % 60) + 7),
    {
      type: "video/webm; codecs=vp9",
    }
  );
  window.open(URL.createObjectURL(blob), "parent");

};

works only for first 5 seconds then doesn't display(unless the first 7 frames are not there) this 7 frames are Blob(size:0,type:"video/webm; codecs=vp9") i want to create a sort of variable buffer to record it may sometimes be 5 secs or 10 depending on the extending of moments