使用 MediaRecorder API 在录制的视频中搜索不起作用答案

【问题标题】：Seeking is not working in recorded video with MediaRecorder API使用 MediaRecorder API 在录制的视频中搜索不起作用
【发布时间】：2018-11-08 05:48:49
【问题描述】：

我正在尝试使用 MediaRecorder API 构建屏幕录制。

作为建议性媒体记录方法

var chunks = [];
var recorder = new MediaRecorder(stream);

recorder.streams = [stream];

recorder.ondataavailable = function(e) {
    chunks.push(e.data);
};

recorder.onstop = function(){
      var blob = new Blob(chunks, {type: "video/webm"});
      chunks = [];

      var mimeType = 'video/webm';
      var fileExtension = 'webm';

      var file = new File([blob ? blob : ''], getFileName(fileExtension), {
          type: mimeType
      });
};

使用这种方法录制工作正常，但录制的视频搜索不起作用。

我在网上搜索过这个问题，发现视频标题不包含持续时间。

在控制台上打印file 对象时，它包含以下属性，

lastModified : 1527592713006
lastModifiedDate : Tue May 29 2018 16:48:33 GMT+0530 (India Standard Time) 
name : "Recording-May,29 2018 4:48:33 PM.webm"
size : 1971220
type : "video/webm"
webkitRelativePath : ""

可以看到文件对象不包含持续时间属性。

谁能建议任何可用的 JavaScript 库，它只能在准备视频文件时修复客户端的视频头？

【问题讨论】：

根据this bug report，Chrome 中将缺少长度信息。火狐seems to have solved the problem。您能否确认您只是在 Chrome 上遇到问题？

标签： javascript screen-recording web-mediarecorder mediarecorder-api

【解决方案1】：

在https://recordrtc.org/查看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://cdn.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);
}

【讨论】：

完美运行，我不需要使用完整的 RTC 库，只需要 EBML 库和这段代码

【解决方案2】：

这是Chrome 中的一个众所周知的错误。基本上，录制媒体的持续时间不会添加到最终文件的标题中。

遗憾的是，Chromium 团队目前将此错误标记为WontFix。但是，有几个解决方法：

在后端，使用ffmpeg修复headers：ffmpeg -i old.webm output.webm
在前端，this answer 或使用包ts-ebml 的解决方法

【讨论】：