页面代码

<button @click="startRecording">开始录制桌面</button>
<button @click="stopRecording" :disabled="!isRecording">结束录制</button>

js代码

// 录制桌面 保存到本地
methods：{async startRecording() {try {// 请求访问桌面屏幕const displayStream = await navigator.mediaDevices.getDisplayMedia({video: true,audio: true});// 初始化MediaRecorderthis.mediaRecorder = new MediaRecorder(displayStream, {mimeType: 'video/webm; codecs=vp8'});// 数据可读取时的回调this.mediaRecorder.ondataavailable = (event) => {if (event.data && event.data.size > 0) {this.recordedChunks.push(event.data);}};// 开始录制this.mediaRecorder.start();this.isRecording = true;console.log('开始录制...');} catch (error) {console.error('无法开始录制:', error);}},async stopRecording() {if (this.mediaRecorder && this.mediaRecorder.state === 'recording') {this.mediaRecorder.stop();this.isRecording = false;console.log('录制结束');// 将录制的数据块转换为Blobconst recordedBlob = new Blob(this.recordedChunks, {type: 'video/mp4'});// 保存到本地this.saveAsFile(recordedBlob, 'recorded-desktop-video.mp4');}},saveAsFile(blob, fileName) {// 创建隐藏的下载链接const url = window.URL.createObjectURL(blob);const a = document.createElement('a');a.style.display = 'none';a.href = url;a.download = fileName;// 触发点击下载document.body.appendChild(a);a.click();// 清理setTimeout(() => {document.body.removeChild(a);window.URL.revokeObjectURL(url);}, 100);},
}