Захват видео с экрана с использованием записей API MediaStream на всю продолжительность в Firefox, но не в Chrome

Я пытаюсь получить запись экрана браузера, используя API MediaStream в Javascript. Мой текущий метод, который находится в необработанном Javascript, отлично работает для Firefox (он предоставляет мне ~ 10-секундное видео экрана и загружает его), но в Chrome он дает мне видео одного кадра - около полсекунды отснятого материала.

Мой исходный код

    var videoEl = document.querySelector('video');
    var stream = videoEl.srcObject;
    var track = stream.getVideoTracks()[0];

    var finalStream = new MediaStream();
    finalStream.addTrack(track);
    this.recorder = new MediaRecorder(finalStream);

    this.recorder.ondataavailable = function(e) {
      var link = document.createElement('a');
      link.setAttribute('href', window.URL.createObjectURL(e.data));
      link.setAttribute('download', 'video_' + Math.floor((Math.random() * 999999)) + '.mp4');
      link.style.display = 'none';

      document.body.appendChild(link);
      link.click();

      document.body.removeChild(link);
    }

    this.recorder.start();
    setTimeout(() => this.recorder.stop(), 10000);

Я также пытался использовать javascript Blob API, но когда я использую этот метод, Chrome ведет себя как раньше, а Firefox либо правильно записывает в течение 10 секунд, либо выдает TypeError: stream is null

Метод BLOB-объектов

    var videoEl = document.querySelector('video');
    var stream = videoEl.srcObject;
    var track = stream.getVideoTracks()[0];

    var finalStream = new MediaStream();
    finalStream.addTrack(track);
    this.recorder = new MediaRecorder(finalStream);

    var chunks = [];
    this.recorder.ondataavailable = function(e) {
      chunks.push(e.data);
    }

    this.recorder.onstop = function(e) {
      var link = document.createElement('a');
      link.setAttribute('href', window.URL.createObjectURL(new Blob(chunks)));
      link.setAttribute('download', 'video_' + Math.floor((Math.random() * 999999)) + '.mp4');
      link.style.display = 'none';

      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }

    this.recorder.start();
    setTimeout(() => {this.recorder.stop()}, 10000);

Я ожидаю, что он будет записывать около 10 секунд, а затем загружать файл.

Я получаю правильный результат в Firefox, но в Chrome я получаю менее секунды отснятого материала.


person Isabella    schedule 08.04.2019    source источник
comment
Проверьте это.   -  person StackSlave    schedule 08.04.2019
comment
Привет @Kaiido, не могли бы вы объяснить, почему это дубликат моего вопроса? Их вопрос связан с Blob API, который я на самом деле не использую. Спасибо :)   -  person Isabella    schedule 08.04.2019
comment
Их вопрос так же связан с Blob API, как и ваш. Прочитайте принятый ответ. Ваша проблема в том, что вы ожидаете, что обратный вызов ondatavailable сработает один раз, тогда как он будет срабатывать несколько раз только с фрагментами всего видео. Вы должны объединить все эти фрагменты в один большой двоичный объект изнутри события onstop.   -  person Kaiido    schedule 08.04.2019
comment
Давайте продолжим обсуждение в чате.   -  person Kaiido    schedule 08.04.2019