JS MediaRecorder: как записать два видео по очереди? - PullRequest
Новая
       22

JS MediaRecorder: как записать два видео по очереди?

0 голосов
/ 25 октября 2018

Я пытаюсь объединить 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();
}
...