1、首先需要安装npm install recordrtc2、在App.vue中作如下修改templatedivbutton clickstartRecording开始录屏/buttonbutton clickstopRecordingv-ifisRecording停止录屏/buttonbutton v-ifvideoBlobclickdownloadVideo下载视频/button/div/templatescript setupimport{ref}fromvue;importRecordRTCfromrecordrtc;constisRecordingref(false);constrecorderref(null);constvideoBlobref(null);conststartRecordingasync(){try{conststreamawaitnavigator.mediaDevices.getDisplayMedia({video:true});recorder.valuenewRecordRTC(stream,{type:video});recorder.value.startRecording();isRecording.valuetrue;}catch(error){console.error(无法获取屏幕媒体流,error);}};constdownloadVideo(){if(videoBlob.value){consturlURL.createObjectURL(videoBlob.value);constlinkdocument.createElement(a);link.hrefurl;link.setAttribute(download,screen-recording.webm);// 可以更改文件类型和名称document.body.appendChild(link);link.click();document.body.removeChild(link);}};conststopRecording(){if(recorder.value){recorder.value.stopRecording((){videoBlob.valuerecorder.value.getBlob();console.log(视频录制完成,videoBlob.value);isRecording.valuefalse;});}};/scriptstyle scoped/style结果展示点击开始录制在弹出的窗口中选择整个屏幕 并选中整个屏幕点击分享点击停止录屏点击下载视频即可在浏览器下载那看到录播的视频