MediaRecorder.pause（）事件上的“ dataavailable”事件

Question

我从MDN阅读了mediaRecorder文档，在那里我看到MediaRecorder.stop（）事件触发了“ dataavailable”事件。但是我想在MediaRecorder.pause（）事件上使用“ dataavailable”事件的数据，因为我想向用户显示录制视频的预览和大小，以防用户想在录制过程中暂停并查看它。所以我想知道如果可能的话，如果可以，怎么办？

这是我的代码：

    const player = document.getElementById('player');
    const stop = document.getElementById('stop');
    const pause = document.getElementById('pause');
    const resume = document.getElementById('resume');

    const handleSuccess = stream => {
      const options = { mimeType: 'video/webm' };
      const recordedChunks = [];
      const mediaRecorder = new MediaRecorder(stream, options);
      mediaRecorder.start();
      player.src = URL.createObjectURL(new Blob(recordedChunks, { type: 'video/mp4' }));
      player.srcObject = stream;

      pause.addEventListener('click', () => {
        mediaRecorder.pause();
      });

      resume.addEventListener('click', () => {
        mediaRecorder.resume();
      });

      stop.addEventListener('click', () => {
        mediaRecorder.stop();
      });

      mediaRecorder.addEventListener('dataavailable', e => {
        if (e.data.size > 0) {
          recordedChunks.push(e.data);
        }
      });

      mediaRecorder.addEventListener('stop', () => {
        this.setState({
          localVideoUrl: URL.createObjectURL(
            new Blob(recordedChunks, { type: 'video/mp4' }),
          )
        })
        player.pause();
      });

      mediaRecorder.addEventListener('pause', () => {
        this.setState({
          localVideoUrl: URL.createObjectURL(
            new Blob(recordedChunks, { type: 'video/mp4' }),
          ),
        });
        player.pause();
      });

      mediaRecorder.addEventListener('resume', () => {
        player.play();
      });
    };

    navigator.mediaDevices
      .getUserMedia({ audio: true, video: true })
      .then(handleSuccess);