vuePC 录制桌面 并下载到本地

页面代码

<video ref="video" controls></video>
<button @click="startRecording">开始录制</button>
<button @click="stopRecording">停止录制</button>

js代码

data(
{
    return{
       recording: false,
		stream: null,
		recorder: null,
		currentWebmData: null,
		downloadUrl:null,
    }
}


// 录制桌面 保存到本地
			async startRecording() {
				this.recording = true;
				this.stream = await navigator.mediaDevices.getDisplayMedia({
					video: true
				});
				this.recorder = new MediaRecorder(this.stream);
				const recordedChunks = []; // 用于收集所有的视频数据块
				this.recorder.ondataavailable = e => {
					recordedChunks.push(e.data);
				};
				this.recorder.onstop = async () => {
					// 确保所有数据块收集完毕后再调用保存方法
					const completeBlob = new Blob(recordedChunks, {
						type: 'video/webm'
					});
					await this.saveToLocal(completeBlob);
				};
				this.recorder.start();
			},
			async stopRecording() {
				this.recorder.stop();
				this.recording = false;
			},
			async saveToLocal(blob) {
				this.downloadUrl = URL.createObjectURL(blob);
				// this.$refs.video.src = this.downloadUrl;
				// 假设有一个用户确认下载的交互，这里应该放在用户确认之后
				// 比如：用户点击了"保存到本地"按钮
				// 下面的代码应移到那个交互的回调中
				// URL.revokeObjectURL(downloadUrl);
				this.downloadVideo()
			},
			downloadVideo() {
				if (this.downloadUrl) {
					const link = document.createElement('a');
					link.href = this.downloadUrl;
					link.download = '录屏.webm'; // 设定下载文件名
					document.body.appendChild(link);
					link.click();
					document.body.removeChild(link);
					// 用户点击下载后，安全地释放URL资源
					URL.revokeObjectURL(this.downloadUrl);
					this.downloadUrl = null; // 重置变量，避免重复使用
				}
			},