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();
}