When you click record, the video freezes for 1 to 2 seconds

<template>

  <div class="video-recorder">
    <video ref="video" controls crossorigin="anonymous">
      <source src="http://127.0.0.1:8888/test.mp4" type="video/mp4" />
    </video>
    <div class="controls">
      <button @click="startRecording">start</button>
      <button @click="stopRecording">stop</button>
    </div>
    <video v-if="downloadLink" controls :src="downloadLink"></video>
  </div>
</template>

<script>
import RecordRTC from "recordrtc";
export default {
  data() {
    return {
      recorder: null,
      downloadLink: null,
      stream: null,
    };
  },
  methods: {
    async startRecording() {
      this.downloadLink = null;
      const videoElement = this.$refs.video;
      videoElement.play();

      this.stream = await videoElement.captureStream();
      const options = {
        type: 'video',
        mimeType: 'video/webm',
        frameRate: 10
      };
      this.recorder = RecordRTC(this.stream, options);

      this.recorder.startRecording();
    },
    stopRecording() {
      if (this.recorder) {
        this.recorder.stopRecording(
          (() => {
            const blob = this.recorder.getBlob();
            this.downloadLink = URL.createObjectURL(blob);

            if (this.stream) {
              this.stream.getTracks().forEach((track) => track.stop());
            }
          }).bind(this)
        );
      }
    },
  },
};
</script>