Record.html


<!DOCTYPE html>
<html>
<head>
<title>视频录制</title>
<meta charset="UTF-8">
</head>
<body>

<video class="video" width="600px" controls=""></video>

<button class="record-btn">record</button>

<script>
	let btn = document.querySelector(".record-btn");

	btn.addEventListener("click", async function () {
		let stream = await navigator.mediaDevices.getDisplayMedia({
			video: true
		});

		// 需要更好的浏览器支持
		const 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 url = URL.createObjectURL(blob);

			let video = document.querySelector("video");
			video.src = url;

			let a = document.createElement('a');
			a.href = url;
			a.download = 'video.webm';
			a.click()
		});


		// 必须手动启动
		mediaRecorder.start()
	})

</script>

</body>
</html>