最近需要录屏，类似录屏软件的操作教程，给大家演示一下。上网搜了一下录屏，发现大部分都需要下载安装，而且有收费或者广告。无意中发现了一个使用浏览器在线录屏的网站。出于好奇，研究了一下实现方法，完成了一个小作品，可以拿来分享给大家。您可以点击查看。我找到的在线录屏网址是SOOGIF。需要注册登录才能使用录屏功能，录制完成后不花钱只能获得有限次数的下载机会。因此，我打算自己做一个类似的应用。WebAPI接口为实现该功能主要使用了两个接口：MediaDevices.getDisplayMedia()MediaRecorder()下面具体记录一下实现细节。填充基本页面元素如果您熟悉一些Web前端知识，那么下面的内容对您来说会很熟悉：
此示例向您显示您显示的选定部分的内容。单击“开始捕获”按钮开始。
单击“开始捕获”按钮并选择要捕获的窗口。
开始拍摄停止拍摄开始录制下载
Log:
添加一个简单的样式：#video{border:1pxsolid#999;宽度：98%；最大宽度：860px；}.error{颜色：红色；}.warn{颜色：橙色；}.info{color:darkgreen;}页面大体外观JavaScript处理点击按钮逻辑首先获取页面上的元素，并声明相关变量：conststartElem=document.getElementById("start");conststopElem=document.getElementById("stop");constvideoElem=document.getElementById("video");constlogElem=document.getElementById("log");constrecordBtn=document.getElementById("recordBtn");constdownloadBtn=文档nt.getElementById("downloadBtn");letcaptureStream=null;letmediaRecorder=null;letisRecording=false;letrecordingBlobs=[];处理点击开始捕捉点击的总图：//OptionsforgetDisplayMedia()constdisplayMediaOptions={video:{cursor:"always"},audio:{echoCancellation:true,noiseSuppression:true,sampleRate:44100}};asyncfunctionstartCapture(displayMediaOptions){try{videoElem.srcObject=awaitnavigator.mediaDevices.getDisplayMedia(displayMediaOptions);captureStream=videoElem.srcObjectdumpOptionsInfo();}catch(err){console.error("错误："+err);}}functiondumpOptionsInfo(){constvideoTrack=videoElem.srcObject.getVideoTracks()[0];console.info("轨道设置：");console.info(JSON.stringify(videoTrack.getSettings(),null,2));console.info("跟踪约束：");console.info(JSON.stringify(videoTrack.getConstraints(),null,2));}函数stopCapture(evt){lettracks=videoElem.srcObject.getTracks();tracks.forEach(track=>track.stop());videoElem.srcObject=null;showMsg('Theuserstoppedsharingthescreen');}//为开始和停止按钮设置事件监听器为按钮添加监听器事件startElem.addEventListener("click",function(evt){startCapture();},false);stopElem.addEventListener("点击",function(evt){stopCapture();},false);当你点击开始截屏按钮时，浏览器会弹出类似如下的页面：选择你要录制的浏览器页面或窗口，甚至可以录制整个屏幕当窗口被选中，点击分享按钮时，抓取窗口的数据流会同步到我们页面的video标签进行实时采样：这时候我们就可以录制了，开始录制按钮的逻辑处理如下：functionstartRecording(){constmimeType=getSupportedMimeTypes()[0];constoptions={mimeType};尝试{mediaRecorder=newMediaRecorder(captureStream,options);}catch(e){showMsg(`创建MediaRecorder时出错：${JSON.stringify(e)}`);返回;}recordBtn.textContent='停止录音';isRecording=true;下载Btn.disabled=true;mediaRecorder.onstop=(event)=>{showMsg('录音停止：'+event);};mediaRecorder.ondataavailable=handleDataAvailable;mediaRecorder.start();showMsg('录音开始mediaRecorder:'+mediaRecorder);}functionhandleDataAvailable(event){console.log('handleDataAvailable',event);if(event.data&&event.data.size>0){recordingBlobs.push(event.data);}}functionstopRecord(){isRecording=false;mediaRecorder.stop();下载Btn.disabled=false;recordBtn.textContent="开始录音";recordedBlobs=[]}处理下载按钮逻辑：downloadBtn.addEventListener('click',()=>{constblob=newBlob(recordedBlobs,{type:'video/webm'});consturl=window.URL.createObjectURL(blob);consta=document.createElement('a');a.style.display='none';a.href=url;a.download='screenrecording_'+newDate().getTime()+'.webm';document.body.appendChild(a);a.click();setTimeout(()=>{document.body.removeChild(a);window.URL.revokeObjectURL(url);},100);});到这里，本次录屏的Demo就完成了。录制的文件格式为webm，可以在浏览器中打开。马上要用的朋友也可以直接用我做的版本，UI更好看。传送门完整代码为了避免复制过程出错，粘贴完整代码直接在浏览器运行：Capture此示例向您展示了显示屏所选部分的内容。单击“开始捕获”按钮开始。
单击“开始捕获”按钮，选择要捕获的窗口。
开始捕捉停止捕捉开始录制下载
日志：
