Remove data chunks from Media Recorder Web API output

Question

I have a media stream that captures the tab content and it is passed as an input to the media recorder api like below:

  mediaRecorder = new MediaRecorder(mediaStream);
  mediaRecorder.addEventListener("dataavailable", (blobEvent) => {
    blobData.push(blobEvent.data);
    blobDatatimeStamp.push(Date.now());
  });
  mediaRecorder.addEventListener("error", (err) => {
    console.error("Error while Recording", err);
  });
  mediaRecorder.addEventListener("start", () => {
    console.log("Started Recording");
  });
  mediaRecorder.addEventListener("stop", () => {
    console.log("Stopped Recording");
    processVideoRecording();
  });
  mediaRecorder.addEventListener("pause", () => {
    console.log("pause Recording");
    if(blobData.length > 0) {
      download(blobData);
      isRecordingStarted = false;
    }
    console.log(blobData)
  });

  mediaRecorder.start(200);

I want to filter the chunks i receive in the dataavailable callback based on the timestamp i receive from another event(click event).

All the chunks i receive from media recorder api till the timestamp of another event needs to be filtered. How do i achieve that ? Is there a possibility to do this in browser ?

Clearly, .filter() on the chunks will corrupt the video and renders the blob created from the filtered chunk corrupt post download.

Can this be achieved by using a video decoder that decodes the complete chunk blob and remove the individual chunk data without corrupting it ?

If the above method is not possible, can i possibly buffer the media stream and use it to record the video using any library(mediastream api does not have an access to the readable stream via javascript/typescript) ?