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>