不需要其他插件,只用h5的接口
体验地址:demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>屏幕录制</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
video {
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100vh;
width: 100vw;
}
</style>
</head>
<body>
<h1>点击左侧录制按钮开始</h1>
<button id="get-screen" style="display: block;">开始录制</button>
<button id="stop-screen" style="display: none;">停止录制</button>
<video id="video"></video>
<script>
let recordedBlobs = []
let stream = null;
let mediaRecorder = null;
const preview = false;
const video = document.getElementById('video')
const getScreen = document.getElementById('get-screen');
const stopScreen = document.getElementById('stop-screen');
const options = {
audioBitsPerSecond: 128000,
videoBitsPerSecond: 2500000,
mimeType: 'video/webm'
};
let startTime = 0;
let endTime = 0;
function stopReset() {
recordedBlobs = []
stopScreen.style.display = 'none';
video.style.display = 'none';
getScreen.style.display = 'inline';
}
stopScreen.addEventListener('click', event => {
console.log("结束录制,录制时长:" + (new Date().getTime() - startTime) / 1000 + 's');
stopReset();
});
getScreen.addEventListener('click', event => {
navigator.mediaDevices.getDisplayMedia({ video: true ,audio: true})
.then(stream => {
console.log("开始录制");
startTime = new Date().getTime()
this.stream = stream;
getScreen.style.display = 'none';
stopScreen.style.display = 'inline';
mediaRecorder = new MediaRecorder(stream, options);
mediaRecorder.ondataavailable = event => {
if (event.data.size > 0) {
console.log("结束录制,录制时长:" + (new Date().getTime() - startTime) / 1000 + 's');
recordedBlobs.push(event.data);
download();
stopReset();
}
};
mediaRecorder.start();
if (preview) {
// 是否显示预览
video.srcObject = stream // 将流赋值给video标签 用于播放
video.onloadedmetadata = (e) => video.play()
const recorder = new MediaRecorder(stream) // 用于视频保存
recorder.ondataavailable = e => {
let herf = e.data
download.href = URL.createObjectURL(herf)
}
recorder.start()
stopScreen.onclick = function () {
video.pause()
recorder.stop()
}
}
}, error => console.log(error))
});
function download() {
const blob = new Blob(recordedBlobs, { type: 'video/mp4' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
document.body.appendChild(a);
a.style.display = 'none';
a.href = url;
a.download = new Date() + '.mp4';
a.click();
window.URL.revokeObjectURL(url);
}
</script>
</body>
</html>
preview
是否开启预览,默认关闭
体验地址:demo