Javascript 无法使用EBML.js-mediarecorder API-Chrome从mediarecorder创建可查找的视频块

使用media recorder，我可以在azure上上传和附加视频块。但是，使用以下代码下载时，无法查看组合视频-

var chunks =[];
var mediaRecorder = new MediaRecorder(stream, 'video/x-matroska;codecs=vp8,opus');
mediaRecorder.ondataavailable = function(event) {
  if(event.data && event.data.size > 0) {
       chunks.push(event.data);
       appendBlockToAzure(chunks);
    }
};
mediaRecorder.start(10000);

我尝试使用EBML.js，如果我使用以下代码，那么我会得到可查找的视频文件。这种方法需要在最后处理文件。因此，最终文件的大小可能为1GB，这将需要很长时间才能上载

var chunks =[];
var mediaRecorder = new MediaRecorder(stream, 'video/x-matroska;codecs=vp8,opus');
mediaRecorder.ondataavailable = function(event) {
   if(event.data && event.data.size > 0) {
        chunks.push(event.data);
        if(mediaRecorder.state == "inactive") { //if media recorder is stopped
            var combined = new Blob(chunks, { type: event.data.type });
            getSeekableBlob(combined, function (seekableBlob) {
                   saveCombinedVideoToAzure(seekableBlob);  
            });
        }
    }
 };
mediaRecorder.start(10000);

这就是我想同时上传到azure的原因。如果我使用以下代码，那么它会记录未知标记警告，然后记录长度错误。此外，视频文件不可播放

var seekablechunks =[];
var mediaRecorder = new MediaRecorder(stream, 'video/x-matroska;codecs=vp8,opus');
mediaRecorder.ondataavailable = function(event) {
   if(event.data && event.data.size > 0) {
        getSeekableBlob(event.data, function (seekableBlob) {
             seekablechunks.push(seekableBlob);
             saveCombinedVideoToAzure(seekablechunks);  
        });
   }
 };
mediaRecorder.start(10000);

函数“getSeekableBlob”：

function getSeekableBlob(inputBlob, callback) {
  // EBML.js copyrights goes to: https://github.com/legokichi/ts-ebml
  if(typeof EBML === 'undefined') {
      throw new Error('Please link: https://www.webrtc- experiment.com/EBML.js');
  }

  var reader = new EBML.Reader();
  var decoder = new EBML.Decoder();
  var tools = EBML.tools;

  var fileReader = new FileReader();
  fileReader.onload = function (e) {
      var ebmlElms = decoder.decode(this.result);
      ebmlElms.forEach(function (element) {
          reader.read(element);
      });
      reader.stop();
      var refinedMetadataBuf = tools.makeMetadataSeekable(reader.metadatas, reader.duration, reader.cues);
      var body = this.result.slice(reader.metadataSize);

      var newBlob = new Blob([refinedMetadataBuf, body], {
          type: 'video/webm'
      });

      callback(newBlob);
  };
  fileReader.readAsArrayBuffer(inputBlob);
}

---

是否有办法获取可查找的blob并将其上载到azure？

对于一个开放式媒体流源（例如MediaRecorder），创建一个包含这些blob的文件是一个挑战。SeekHead元素中的Seek元素包含到文件中元素的字节偏移量

MediaRecorder不会像您所发现的那样创建段或SeekHead元素。要做到这一点，它需要能够看到未来，知道未来压缩视频和音频元素将在文件中有多大

处理此问题的一个好方法可能是在服务器上对上载的文件进行后期处理。当文件完全上载时，您可以使用在服务器上以流式方式执行此操作

我认为，在浏览器中创建Javascript软件是可能的，它可以转换MediaRecorder发出的数据流，因此可以在运行中查看。为了使您的流可搜索，您需要每隔一段时间插入SeekHead元素。您需要缓冲流的几秒钟，然后在每个缓冲区中找到集群元素，然后编写一个SeekHead元素，指向其中的一些。（Chrome的MediaRecorder从视频关键帧开始输出集群。）如果你成功地做到了这一点，你将对Matroska/webm了解很多