在网页中录制屏幕
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变量了.
<%= htmlWebpackPlugin.options.title %>
-
新建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,
}
}
-
在vue项目中安装recordrtc :
npm install recordrtc -S
-
使用插件和刚刚创建的utils文件:
视频文件格式:
参考:https://github.com/muaz-khan/RecordRTC/issues/147