js实现浏览器录屏

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app">
			<button @click="startLp">开始录屏</button>
			<button @click="stopLp">停止录屏</button>
		</div>
	</body>
	<!-- <script src="js/vue.js"></script> -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
	<script>
		var app2 = new Vue({
		  el: '#app',
		  data :{
			  recoder : {},
		  },
		  methods:{
			  startLp(){
				console.log('开始录屏')
				navigator.mediaDevices.getDisplayMedia({video:true,audio:true}).then(stream=>{
					this.recoder = new MediaRecorder(stream)
					var data = []
					this.recoder.ondataavailable = function(e){
						data.push(e.data)
					}
					this.recoder.onstop = function(){
						this.stream.getTracks().forEach(track=>{
							track.stop()
							var blob = new Blob(data)
							var link = document.createElement("a")
							link.href = URL.createObjectURL(blob)
							link.download = new Date().getTime()+".webm"
							document.body.appendChild(link)
							link.click()
							URL.revokeObjectURL(link.href)
							link.remove()
						})
					}
					this.recoder.start()
				})
			  },
			  stopLp(){
			  	console.log('停止录屏')
				  this.recoder.stop()
			  }
		  }
		})
	</script>
</html>
posted @ 2022-12-05 22:08  Codeblackcats  阅读(30)  评论(0)    收藏  举报  来源