1

我正在与Mediarecorder录制视频。我需要直接从浏览器显示该视频的本地预览。我的问题是长时间的录音和大尺寸的视频。所以我不能将 MediaRecorder blob 存储在内存中，因为它会导致浏览器在内存（RAM）低的机器上崩溃。所以来自我的每个 webm blob 都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 文件的最佳方式吗？
4

0 回答 0