Vue實現(xiàn)錄制屏幕并本地保存功能

更新時間：2022年04月12日 10:34:36 作者：小皮豬

這篇文章主要介紹了Vue實現(xiàn)錄制屏幕功能并本地保存,這里用的是用的是HBuilder?X開發(fā)，結合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下

一、Vue

用的也是之前那篇文章里面的文件

Vue使用Vue調(diào)起攝像頭，進行拍照并能保存到本地

用的是HBuilder X開發(fā)，目錄如下：

三、實現(xiàn)

1.index.html

具體代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="vueapp">
			<div>
				<button @click="btnRecordClicked" :disabled="recording">錄制</button>
				<button @click="btnPauseClicked" :disabled="paused||!recording">暫停</button>
				<button @click="btnResumeClicked" :disabled="!paused||!recording">繼續(xù)</button>
				<button @click="btnStopClicked" :disabled="!recording">停止</button>
				<button :disabled="!currentWebmData" @click="btnPlayClicked">播放</button>
			</div>
			<video controls ref="player"></video>
		</div>
		<script src="app.js"></script>
	</body>
</html>

2.app.js

具體代碼：

new Vue({
	el:"#vueapp",
	data:{
		currentWebmData:0,
		recording:false,
		paused:false
	},
	mounted() {
		this._initApp();
	},
	
	methods:{
		async _initApp(){
			// this._stream=await navigator.mediaDevices.getUserMedia({audio:true,video:false});
			this._stream=await navigator.mediaDevices.getDisplayMedia();
			this._recorder=new MediaRecorder(this._stream,{mimeType:"video/webm;codecs=h264"});
			this._recorder.ondataavailable=this.recorder_dataAvailableHandler.bind(this);
		},
		recorder_dataAvailableHandler(e){
			console.log(e);
			this.currentWebmData=e.data;
		},
		btnRecordClicked(){
			this.recording=true;
			this.paused=false;
			this._recorder.start();
		},
		btnPauseClicked(){
			this.paused=true;
			this._recorder.pause();
		},
		btnResumeClicked(){
			this.paused=false;
			this._recorder.resume();
		},
		btnStopClicked(){
			this.recording=false;
			this._recorder.stop();
		},
		btnPlayClicked(){
			this.$refs.player.src=URL.createObjectURL(this.currentWebmData);}
	}
});

效果：