屏幕录制web
//屏幕录制
async screen(name) {
let stream;
await navigator.mediaDevices
.getDisplayMedia({
video: true,
})
.then((e) => {
stream = e;
console.log("录制开启成功");
})
.catch((error) => {
this.$message({
message: webrtcError[error.name] || error.name + error.message,
type: "warning",
});
});
// 需要更好的浏览器支持
const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")
? "video/webm; codecs=vp9"
: "video/webm";
let mediaRecorder = new MediaRecorder(stream, {
mimeType: mime,
});
let chunks = [];
mediaRecorder.addEventListener("dataavailable", function (e) {
chunks.push(e.data); //点击停止录制
console.log(chunks, 'chunks');
});
var that = this
mediaRecorder.addEventListener("stop", function () {
let blob = new Blob(chunks, {
type: 'video/webm'
});
let url = URL.createObjectURL(blob); //生成视频地址
console.log('停止录制调用url', url);
that.objVideo.paths = url
if (url) {
addVideo(that.objVideo).then(({ data: res }) => {
console.log(res, 'ressssssssssssssssssssssssssssssssss123123123');
})
}
console.log('停止录制调用');
// let a = document.createElement("a");
// a.href = url;
// a.download = name + ".mp4";
// a.click();
});
// 必须手动启动
mediaRecorder.start();
},