Question

我正在与Mediarecorder合作录制视频。我需要直接从浏览器显示此视频的LOCAL预览。我的问题是长时间录制和大型视频。因此，我无法将MediaRecorder blob存储在内存中，因为它会导致浏览器压缩内存较低（RAM）的计算机。因此，来自onDataAvailable的每个webm blob都存储到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

所以我有两个主要问题：

如何修复SourceBuffer错误及其发生的原因？
这是在本地存储和播放巨大.webm文件的最佳方式吗？

如何在本地播放巨大的WEBM文件

0 个答案: