无法使用eml .js - mediarecorder API - Chrome从mediarecorder创建可搜索的

Question

使用媒体记录器，我可以在azure上上传和附加视频blobs。但合并的视频是无法搜索下载与以下代码-

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);
}

是否有一种方法可以获得可搜索的blobs并将它们上传到azure?

Answer 1

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

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

处理这个问题的一个好方法可能是在服务器上对上传的文件进行后处理。当文件完全上传后，您可以在服务器上使用ts-ebml以流方式完成此操作。

这是可能的，我想，在你的浏览器中创建Javascript软件，可以转换由MediaRecorder发出的数据流，所以它是可搜索的，在飞行。为了使流可搜索，您需要经常插入SeekHead元素。您将缓冲流的多秒时间，然后在每个缓冲区中定位Cluster元素，然后写入指向其中一些元素的SeekHead元素。(Chrome的MediaRecorder输出集群开始与视频关键帧。)如果你成功地做到了这一点，你就会对Matroska/webm有很多了解。

Answer 2

突然，我们的Face on camera web-cam recorder组件停止保存webm blob。

在控制台中，在reader.read(element)期间有关于{EBML_ID: "55b0", type: "unknown", ...}的警告，然后未捕获(在承诺中)错误:未找到未知的架构条目;在EBMLEncoder.js"attools.makeMetadataSeekable(...)call.

忽略来自解码器的未知元素解决了这个问题:

...
var ebmlElms = decoder.decode(this.result);
ebmlElms.forEach(function (element) {
if (element.type !== 'unknown') {
reader.read(element);
}
});
reader.stop();
...

ts-ebml npm package https://github.com/legokichi/ts-ebml/issues/33的相关问题与类似的解决方案