RecordRTC网页录制视频无法播放以及无时长问题

在网页中录制屏幕
RecordRTC
文章后面有在vue2项目中的使用代码,，也可以下载Gitee示例项目运行。

进入RecordRTC演示，第一个下拉框选择Full Screen，点击Start Recorfing开始录制

image.png

谷歌可以选择录制整个屏幕、某个应用窗口或者单个浏览器标签页，火狐只支持录制整个屏幕。其他没试过

停止录制后，点击Save to Disk保存视频，发现视频无法打开。
win10自带电视和电影、迅雷影音以及火狐浏览器都无法打开(仅谷歌浏览器能打开)

解决办法是第二个下拉框选中h264/mkv/vp8/vp8/格式进行录制。

但是问题又来了，视频能播放，但是视频没有时长，无法拖动进度条！！！

解决办法：

使用EBML.js处理视频blob，链接EBML.js

1. 进入EBML.js链接，右键另存为 保存在项目的public目录中。

2. 在public目录下的index.html中引入EBML.js，这样全局就有EBML变量了.

3. 新建ebml.util.js

/**
 * @param {Blob} file - File or Blob object.
 * @param {function} callback - Callback function.
 * @example
 * getSeekableBlob(blob or file, callback);
 * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
 */
export function getSeekableBlob(inputBlob, mediaType, callback) {
  const reader = new EBML.Reader()
  const decoder = new EBML.Decoder()
  const tools = EBML.tools

  const fileReader = new FileReader()
  fileReader.onload = function() {
    const ebmlElms = decoder.decode(this.result)
    ebmlElms.forEach(function(element) {
      reader.read(element)
    })
    reader.stop()
    const refinedMetadataBuf = tools.makeMetadataSeekable(
      reader.metadatas,
      reader.duration,
      reader.cues
    )
    const body = this.result.slice(reader.metadataSize)
    const newBlob = new Blob([refinedMetadataBuf, body], {
      type: mediaType
    })

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

在项目中的.eslintrc.js中的globals属性中声明全局变量EBM，防止eslint报未知变量的错

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', 'eslint:recommended'],
  parserOptions: {
    parser: 'babel-eslint'
  },
  globals: { EBML: true },
  rules: {
    'no-useless-escape': 0,
  }
}

4. 在vue项目中安装recordrtc :

npm install recordrtc -S

5. 使用插件和刚刚创建的utils文件：

参考：https://github.com/muaz-khan/RecordRTC/issues/147

注意：受浏览器安全限制，只有localhost或者https的网站才支持录制屏幕，上线需要部署https