Как играть огромный файл WEBM Локально

Question

Я работаю с Mediarecorder для записи видео. Мне нужно показать местный предварительный просмотр этого видео прямо из браузера. Моя проблема - долгое время записи и видео огромного размера. Поэтому я не могу хранить в памяти капли MediaRecorder, потому что это приведет к давлению браузера на компьютерах с нехваткой памяти (RAM). Таким образом, каждый веб-блоб из onDataAvailable я храню в indexedDB, После окончания записи я запрашиваю все сохраненные данные из indexedDB от getAll транзакция, но у меня все еще та же проблема с памятью. Как я могу воспроизвести этот массив BLOB-объектов, не загружая все данные в память? Как я могу буферизовать эти данные?

Я пытаюсь использовать MediaSource API

Мой метод получения данных от indexedDB:

function getAllData(indexedDB){
    return new Promise(function (resolve, reject) {
           var transaction = indexedDB.transaction(["blobs"], 'readonly');
           var dbResult = transaction.objectStore("blobs").getAll();

           dbResult.onerror = function (error) {
               reject('failed to read from db: ' + error);
           }

           dbResult.onsuccess = function (event) {
               resolve(event.target.result);
           }
       }); 
    }

И при попытке играть MediaSource API:

getAllData().then(function (chunks) {

   var mediaSource = new MediaSource();
   var sourceBuffer;

   var player = document.createElement('video');
   var previewContainer = document.getElementById('preview_container');

   player.width = 300;
   player.height = 200;
   player.autoPlay = false;
   player.controls = true;

   player.src = URL.createObjectURL(mediaSource);

   mediaSource.addEventListener('sourceopen', function (e) {
      sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp8"');

      (function readCunks(index) {
          var fileReader = new FileReader();
          index = index || 0;

          if (index >= chunks.length) {
              return;
          }

          fileReader.onload = function (e) {
              sourceBuffer.appendBuffer(new Uint8Array(e.target.result)); 
              readCunks(++index);
          };

          fileReader.readAsArrayBuffer(chunks[index]);
        })();
    }, false);

    previewContainer.innerHTML = "";
    previewContainer.appendChild(preview.player);
    player.play();
}).catch(function (e) {
     console.log('error on get data from db: ' + e);
});

Но я получаю ошибку "Failed to execute 'appendBuffer' on 'SourceBuffer': This SourceBuffer has been removed from the parent media source."

Обновление: Кроме того, я протестировал этот код на Firefox. Частично сработало... После добавления чанка 100 в sourseBuffer я получил ошибку: QuotaExceededError

Итак, у меня есть два основных вопроса:

1. Как я могу исправить ошибку SourceBuffer и почему это происходит?
2. Это лучший способ хранить и воспроизводить огромные файлы.webm Локально?