前言：满满的干货，简单快速高效的实现录屏录音的功能。实现需求：在一个管理系统中添加一个录屏讲解功能，有开始录屏，暂停录屏，停止录屏，录屏下载本地，录屏上传到阿里云服务器等。用得到技术：vue+recordrtc
这篇文章基本上能满足所有录屏的需求，如果开发中遇到问题欢迎私信我
recordrtc 安装
npm install recordrtc --save
使用
import RecordRTC from 'recordrtc';
代码
//开始录制
startR() {
this.startRecording((start) => {
this.start = start;
});
},
startRecording(callback) {
if (this.startTxt === '开始录制') {
this.captureScreen((screenStream) => {
this.addStreamStopListener(screenStream, () => {
console.log("流停止监听");
// this.$emit("streamStop", {})
this.stopR();
});
this.isPause = true
this.startTxt = '停止录制'
var options = {
type: 'video',
mimeType: 'video/mp4',
disableLogs: false,
getNativeBlob: false, // enable it for longer recordings
ignoreMutedMedia: false
};
this.recorder = RecordRTC(screenStream, options);
this.recorder.startRecording();
this.recorder.screen = screenStream;
this.videoStart = true;
callback(true);
});
} else if (this.startTxt === '停止录制') {
this.stopR()
}
},
/**
* 停止录制
*/
stopR() {
this.startTxt = '开始录制'
this.isPause = false
this.stopRecording((start) => {
this.start = start;
});
},
/**
* 停止录制回调
*/
stopRecording(callback) {
this.recorder.stopRecording(() => {
// 设置录屏资料的文件名称为当前时间，以保证每次录屏资料名称的唯一性（当然也可以用随机数设置，这个可以根据自己的需要设置）
let mydate = new Date()
let myyear = mydate.getFullYear(); //获取完整的年份(4位,1970-????)
let mymonth = mydate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
let mytoday = mydate.getDate(); //获取当前日(1-31)
let myhour = mydate.getHours(); //获取当前小时数(0-23)
let myminute = mydate.getMinutes(); //获取当前分钟数(0-59)
let mysecond = mydate.getSeconds(); //获取当前秒数(0-59)
this.fileName = `${myyear}` + `${mymonth}` + `${mytoday}` + `${myhour}` + `${myminute}` + `${mysecond}`
const url = URL.createObjectURL(this.recorder.getBlob());
this.aTag = document.createElement("a");
let videoFile = new File([this.recorder.getBlob()], this.fileName + ".mp4", {
type: 'video/mp4'
})
let downloadUrl = URL.createObjectURL(videoFile);
document.body.appendChild(this.aTag);
this.aTag.style.display = "none";
this.aTag.href = url;
this.videoFile = videoFile
this.viewFn()
// this.uploadHttp({ file: this.videoFile })
this.previewVideo = downloadUrl
// 停止录屏时同时下载到本地
// this.aTag .download = this.fileName + ".mp4";
// this.aTag .click();
this.recorder.screen.stop();
this.recorder.destroy();
this.recorder = null;
this.videoStart = false;
this.$message({
message: '录屏停止',
type: 'success'
})
callback(false);
});
},
pauseFn() {
if (this.pauseTxt === "暂停") {
this.$message({
message: '录屏已暂停',
type: 'success'
})
this.recorder.pauseRecording()
this.pauseTxt = "恢复录制"
} else if (this.pauseTxt === "恢复录制") {
this.$message({
message: '录屏已恢复',
type: 'success'
})
this.recorder.resumeRecording()
this.pauseTxt = "暂停"
}
},
//初始化录制
captureScreen(callback) {
if (navigator.getDisplayMedia) {
//录制结束,文件下载
navigator.getDisplayMedia({
video: true, audio: true
}).then(screenStream => {
navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then((mic) => {
screenStream.addTrack(mic.getTracks()[0]);
callback(screenStream);
});
}).catch(function (error) {
console.log('error', error);
});
} else if (navigator.mediaDevices.getDisplayMedia) {
navigator.mediaDevices.getDisplayMedia({
video: true, audio: true
}).then(screenStream => {
navigator.mediaDevices.getUserMedia({ audio: true }).then((mic) => {
screenStream.addTrack(mic.getTracks()[0]);
callback(screenStream);
});
}).catch(function (error) {
console.log('error', error);
});
} else {
var error = 'getDisplayMedia API are not supported in this browser.';
console.log('error', error);
alert(error);
}
},
//流监听
addStreamStopListener(stream, callback) {
stream.addEventListener('ended', function () {
callback();
callback = function () { };
}, false);
stream.addEventListener('inactive', function () {
callback();
callback = function () { };
}, false);
stream.getTracks().forEach(function (track) {
track.addEventListener('ended', function () {
callback();
callback = function () { };
}, false);
track.addEventListener('inactive', function () {
callback();
callback = function () { };
}, false);
});
},
注：视频上传到阿里云这块代码没有贴，可以直接去阿里云官方网站粘贴代码
