Chrome seekbar issue when recording a video and playing it via RecordRTC

Question

I am using RecordRTC to record and play the video in my webpage however after recording the video and trying to play it back on Chrome or Edge, the seekbar is at the end and eventually after sometime it goes back to the time it is playing at.

      async startRecording() {
    try {
      this.recordRTC = RecordRTC(this.mediaStream, {type: 'video'});
      this.recordRTC.startRecording();
    } catch (error) {
      alert('Access for microphone and webcam not granted');
    }
  }

 stopRecording() {
    this.recordRTC.stopRecording(() => {
      this.stopStream();
      const blob = this.recordRTC.getBlob();
      this.videoURL = URL.createObjectURL(blob);
      this.recordedVideoElement.nativeElement.src = this.videoURL;
    });
  }

 async startRecording() {
    try {
      this.recordRTC = RecordRTC(this.mediaStream, {type: 'video'});
      this.recordRTC.startRecording();
    } catch (error) {
      alert('Access for microphone and webcam not granted');
    }
  }

<video #recordedVideo>
            <source [src]="this.videoURL">
          </video>

However on Firefox there is no such issue, am I doing something wrong or do I need to process the video in some form? Any help is appreciated.