//开始录屏
startLp(){
console.log('开始录屏')
// 获取video节点
const video = document.getElementById("videoFlv");
// 存储视频流
const videoData = [];
// 浏览器兼容Chrome和firefox
video.captureStream = video.captureStream || video.mozCaptureStream;
// 生成MediaRecorder对象
this.mediaRecorder = new MediaRecorder(video.captureStream());
this.mediaRecorder.start();
// 当 MediaRecorder 将媒体数据传递到您的应用程序以供使用时,将触发该事件
this.mediaRecorder.ondataavailable = (e) => {
console.log(e)
// 添加视频流
videoData.push(e.data);
};
// 录制结束回调
this.mediaRecorder.onstop = (e) => {
const blob = new Blob(videoData, { type: 'video/mp4;codecs=vp8,opus' });
const videoUrl = window.URL.createObjectURL(blob);
open(videoUrl)
}
},
//停止录屏
stopLp(){
console.log('停止录屏')
this.mediaRecorder.stop();
}
参考:
https://blog.csdn.net/qq_36958916/article/details/108529705
https://www.jianshu.com/p/d0d6c61dfafd
https://www.jianshu.com/p/ad7dfd50880e?utm_campaign=maleskine…&utm_content=note&utm_medium=seo_notes
https://jimmy.blog.csdn.net/article/details/118282882文章来源:https://www.toymoban.com/news/detail-536807.html
https://blog.csdn.net/lan123456_/article/details/128324851文章来源地址https://www.toymoban.com/news/detail-536807.html
到了这里,关于js 使用MediaRecorder 录制video,生成视频的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!