JS MediaRecorder：如何按顺序录制两个视频？

Question

我试图将2个视频合并为一个视频。

方法尝试过：

• 获取视频对象
• 获取画布并捕获流
• 启动记录器
• 播放第一个视频，然后将其绘制在画布上
• 视频结束后，播放下一个视频
• 停止记录器

结果是：  -视频在屏幕上显示良好  -正在录制...但是我只收到最后一个视频。

预期：  -录制的视频包括2个视频。

关于如何使它工作的任何想法吗？

在Chrome中测试过的代码的简短概述：

this.videos = Array.prototype.slice.call(document.querySelectorAll("#recorded-videos video"));
const canvasStream = this.canvas.captureStream();

this.recorder = new MediaRecorder(canvasStream);

renderVideo(this, 0);
this.recorder.start();

function renderVideo(self, index) {
  if (index === self.videos.length) {
    self.recorder.stop();
    return;
  }

  function draw() {
    if (self.video.ended) {
      renderVideo(self, index + 1);
    }
    self.videoContext.drawImage(self.video, 0, 0, 640, 480);

    setTimeout(draw, 10);
  }

  self.video.play();
}