这个demo的代码来自简书
/*
* @Author: Shawbs
* @LastEditors: Shawbs
* @Date: 2020-07-03 11:01:22
* @LastEditTime: 2020-07-29 17:38:46
*/
/**
*自动录屏模块*录制桌面
*
* @class Recorder
*/
class Recorder {
constructor(path) {
// this.mediaOutputPath = path;
this.recorder = null
}
/**
*开始录制
*
* @memberof Recorder
*/
startRecord (){
navigator.mediaDevices.getDisplayMedia({video:true, audio:true}).then(Mediastream => {
this.createRecorder(Mediastream);
}).catch(err => {
this.getUserMediaError(err);
})
}
/**
*获取媒体源失败
*
* @memberof Recorder
*/
getUserMediaError(err){
console.log('mediaError',err);
}
/**
*开始视频录制
*
* @memberof Recorder
*/
createRecorder(stream){
console.log('start record');
this.recorder = new MediaRecorder(stream);
this.recorder.start();
var chunks = [];
this.recorder.onstop = event => {
let blob = new Blob(chunks, { type: 'video/mp4' });
this.saveMedia(blob);
}
this.recorder.ondataavailable = event => {
chunks.push(event.data);
};
}
/**
*数据转换并保存成MP4
*
* @memberof Recorder
*/
saveMedia(blob){
let url = window.URL.createObjectURL(blob);
console.log(url,blob)
var video = document.createElement('video')
video.src = url
video.width = 320
video.height = 240
video.controls = true
document.body.appendChild(video)
var a = document.createElement('a');
a.innerHTML = "下载视频"
a.download = "录屏";
a.href = url;
//a.click()
document.body.appendChild(a);
}
/**
*停止录制视频
*
* @memberof Recorder
*/
stopRecord(){
this.recorder.stop();
}
}
<!--
* @Author: Shawbs
* @LastEditors: Shawbs
* @Date: 2020-07-03 11:00:07
* @LastEditTime: 2020-07-03 11:10:20
-->
<html>
<head>
<meta charset="utf-8">
<title>JS教程(https://www.jianshu.com/u/0099dbb879da)</title>
</head>
<body>
<video id= "video" width="320" height="240" controls autoplay src="https://www.runoob.com/try/demo_source/movie.mp4">
<object data="movie.mp4" width="320" height="240">
<embed width="320" height="240" src="movie.swf">
</object>
</video>
<button type="button" onclick="recordScreen()">Start</button>
<button type="button" onclick="stop()">stop</button>
<script src='js/luping.js'></script>
<script>
var recorder = new Recorder();
function recordScreen(){
recorder.startRecord();
}
function stop(){
recorder.stopRecord();
}
</script>
</body>
</html>
代码已经发到codepen了 https://codepen.io/shawbs/pen...
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
