JavaScript在chrome浏览器实现录屏功能

最新推荐文章于 2024-10-10 08:30:00 发布

_freely

最新推荐文章于 2024-10-10 08:30:00 发布

阅读量1.6k

点赞数

分类专栏： js 文章标签： html5 javascript chrome

本文链接：https://blog.csdn.net/hbjiankely/article/details/121549743

版权

js 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

js实现录屏功能

代码实现

	<video class="video" controls width="600px"></video>
	<button class="record-btn">record button</button>
	<a class="download">下载</a>
<script>
	let btn = document.querySelector('.record-btn');
	btn.addEventListener('click', async function() {
	let stream = await navigator.mediaDevices.getDisplayMedia({
		video: true
	})
	let mime = MediaRecorder.isTypeSupported('video/webm; codecs=vp9') ? 'video/webm; codecs=vp9' : 'video/webm';
	let mediaRecorder = new MediaRecorder(stream, {
		mimeType: mime
	})
	let chunks = [];
	mediaRecorder.addEventListener('dataavailable', function(e) {
		chunks.push(e.data);
	})
	mediaRecorder.addEventListener('stop', function() {
		let blob = new Blob(chunks, {
			type: chunks[0].type
		})
		let video = document.querySelector('video');
		let url = URL.createObjectURL(blob);
		video.src = url;
		// 下载
		let a = document.createElement('a')
		a.href = url
		a.download = 'video.webm'
		a.click()
	})

	mediaRecorder.start()
})