h5提供了录制电脑屏幕的api,navigator.mediaDevices.getDisplayMedia,可以将屏幕录制下来,数据传给MediaRecorder对象转换成二进制数据存放在blob中,最后再通过blob生成url赋给video标签的src属性即可播放录制的屏幕
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<video id='local'></video>
<video width='400' height='400' id="deskVideo" controls></video>
<button>点击</button>
<button>录制桌面</button>
<button>录制</button>
<script>
var deskVideo=document.getElementById('deskVideo')
var btn=document.getElementsByTagName('button')
var localStream=''
btn[2].onclick=function(){
var blob=new Blob(buffer);
var url=window.URL.createObjectURL(blob);
deskVideo.src=url;
deskVideo.play()
}
btn[0].onclick=function(){
navigator.mediaDevices.getDisplayMedia({video:true}).then(stream=>{
localStream=stream;
},err=>{console.log(err)})
}
var buffer;
function handleDataAvailable(e){
if(e && e.data && e.data.size > 0){buffer.push(e.data);}}
function startRecord(){
buffer = [];
var options = {mimeType: 'video/webm;codecs=vp8'}
if(!MediaRecorder.isTypeSupported(options.mimeType))
{console.error(`${options.mimeType} is not supported!`);
return;}
try
{mediaRecorder = new MediaRecorder(localStream, options);}
catch{
return;
}
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start(10);
}
btn[1].onclick=startRecord
</script>
</body>
</html>