let canvasDom = document.getElementById('main').children[0].children[0] ;//获取到渲染echarts的canvas元素
var video$ = document.querySelector('video');
// var stream = canvasDom.captureStream(60);
const recording = this.record(canvasDom, 10000)
//
recording.then(url => video$.setAttribute('src', url) )
// download it
var link$ = document.createElement('a')
link$.setAttribute('download','recordingVideo')
recording.then(url => {
link$.setAttribute('href', url)
link$.click()
})
},
record(canvas, time) {
var recordedChunks = [];
return new Promise(function (res, rej) {
var stream = canvas.captureStream(25 /*fps*/);
var mediaRecorder = new MediaRecorder(stream, {
mimeType: "video/webm; codecs=vp9"
});
//ondataavailable will fire in interval of `time || 4000 ms`
mediaRecorder.start(time || 4000);
mediaRecorder.ondataavailable = function (event) {
recordedChunks.push(event.data);
// after stop `dataavilable` event run one more time
if (mediaRecorder.state === 'recording') {
mediaRecorder.stop();
}
}
mediaRecorder.onstop = function (event) {
var blob = new Blob(recordedChunks, {type: "video/webm" });
var url = URL.createObjectURL(blob);
res(url);
}
})
思路:
canvas的captureStream属性将其动点捕捉转换为视频帧, 声明一个recordedChunks 视频池, 将帧放入池 MediaRecorder用录制对象去监听并实现帧入流并根据录制的状态去回调接下来的操作
注意: 转载请标明出处,有问题可以直接私聊我