首页 > 解决方案 > 使用 MediaRecorder API 在录制的视频中搜索不起作用

问题描述

我正在尝试使用 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 库,它只能在准备视频文件时在客户端修复视频头?

标签: javascriptscreen-recordingweb-mediarecordermediarecorder-api

解决方案


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

遗憾的是,这个错误目前WontFix被 Chromium 团队标记为。但是,有几个解决方法:

  • 在后端,使用 ffmpeg 修复标头: ffmpeg -i old.webm output.webm

  • 在前端,此答案的解决方法或使用包ts-ebml


推荐阅读