前言：滿滿的干貨故慈，簡單快速高效的實現(xiàn)錄屏錄音的功能板熊。實現(xiàn)需求：在一個管理系統(tǒng)中添加一個錄屏講解功能，有開始錄屏察绷，暫停錄屏干签，停止錄屏，錄屏下載本地拆撼，錄屏上傳到阿里云服務(wù)器等容劳。用得到技術(shù)：vue+recordrtc
這篇文章基本上能滿足所有錄屏的需求喘沿，如果開發(fā)中遇到問題歡迎私信我
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("流停止監(jiān)聽");
// 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;
});
},
/**
* 停止錄制回調(diào)
*/
stopRecording(callback) {
this.recorder.stopRecording(() => {
// 設(shè)置錄屏資料的文件名稱為當前時間，以保證每次錄屏資料名稱的唯一性（當然也可以用隨機數(shù)設(shè)置竭贩，這個可以根據(jù)自己的需要設(shè)置）
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(); //獲取當前小時數(shù)(0-23)
let myminute = mydate.getMinutes(); //獲取當前分鐘數(shù)(0-59)
let mysecond = mydate.getSeconds(); //獲取當前秒數(shù)(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) {
//錄制結(jié)束,文件下載
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);
}
},
//流監(jiān)聽
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);
});
},
注：視頻上傳到阿里云這塊代碼沒有貼蚜印，可以直接去阿里云官方網(wǎng)站粘貼代碼
