MediaRecorder仅记录一帧

问题描述

我正在开发一个react native应用，在那里我正在录制画布并制作5秒的视频文件上传到服务器。一切正常，除了我所有的webm文件只有一帧。这是我的代码。请帮助我了解这里的问题。谢谢！

    initMediaRecorder = () => {
    
    const promise = new Promise((resolve) => {
      const stream = this.selfieCanvas.captureStream(10);
      let mediaRecorder = null;
      let options;
      if (MediaRecorder.isTypeSupported('video/webm; codecs=vp9')) {
        options = { mimeType: 'video/webm; codecs=vp9',videoBitsPerSecond: 2500000 };
      } else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
        options = { mimeType: 'video/webm; codecs=vp8',videoBitsPerSecond: 2500000 };
      } else {
        options = 'video/vp8'; // Chrome 47
      }
      try {
        mediaRecorder = new MediaRecorder(stream,options);
      } catch (e0) {
        resolve(null);
      }

      mediaRecorder.ondataavailable = (event) => {
        console.log(`LOG - Data available ${event.data.size}`);
        this.sendToSaveVideo(event.data);
      };

      resolve(mediaRecorder);
    });

    return promise;
  }

  captureVideo = async (oldMediaRecorder) => {

    this.initMediaRecorder().then((mediaRecorder) => {
      if (oldMediaRecorder !== null && typeof oldMediaRecorder !== 'undefined') {
        // I don't want to stop prevIoUs recorder until I init the next recorder
        oldMediaRecorder.stop();
      }
      if (mediaRecorder !== null) {
        mediaRecorder.start();
      }
      
      this.captureVideoTimer = setTimeout(() => {
        this.captureVideo(mediaRecorder);
      },5000);
      
    });
  }

  sendToSaveVideo = async (eventData) => {
    const blobChunk = [];
    blobChunk.push(eventData);
    const video = new Blob(blobChunk,{ type: 'video/webm' });
    saveBlobToCloud(video); // save the file to cloud
  }```

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）