GetDisplayMediaREC —— 共享屏幕录屏-QUI-Notes

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>共享屏幕录制</title>
		<style type="text/css">
				.box222{overflow: hidden;width: 100%;}
				video{width: 400px;float: left;height: 300px;}
				.button{padding: 8px 15px;border: 1px solid #333;border-radius: 8px;display: inline-block;}
		</style>
	</head>
<body>
		<video id="myvideo" controls></video>
		<video id="recording"  controls></video>
		<div class="box222">
			<div id="startButton" class="button">开始录制</div>
			<div id="stopButton" class="button">停止录制</div>
		</div>
<script type="text/javascript">
	//视频盒子
	let myVideo = document.getElementById("myvideo")
	let recording = document.getElementById("recording")
	//控制按钮
	let startButton = document.getElementById("startButton")
	let stopButton = document.getElementById("stopButton")
	//录制流列表
	let dataChunks =[] //[Blob, Blob]
	let recorder
	//开始录制
	startButton.onclick = function(){
		getUserMedia(myVideo)
	}
	
	//拿到 共享流 媒体流
	function getUserMedia(myVideo) {
		console.log(`Requesting  video stream`)
		//设置媒体参数
		const constraints = {
			video: true,
			audio: true
		};
		navigator.mediaDevices.getDisplayMedia(constraints)
			.then(stream => {
				if(myVideo) {
					//播放获取到的媒体流
					myVideo.srcObject = stream
					myVideo.onloadedmetadata = function(e) {
						myVideo.play()
					}
					//将当前媒体流记录下来
					myVideo.captureStream = myVideo.captureStream || myVideo.mozCaptureStream
					startRecording(myVideo.captureStream())
				}
			}).catch(error => {
				console.error(error)
			});
	}

	// 开始录制
	function startRecording(stream, lengthInMS) {
		recorder = new MediaRecorder(stream);
		//有效数据时将流保存起来
		recorder.ondataavailable = (event) => {
			let data = event.data;
			dataChunks.push(data);
		};
		//每秒记录一个Blob数据
		recorder.start(1000);
		console.log(recorder.state + " start to recording .....");
	}
	
	stopButton.onclick = function(){
		//清除预览数据
		myVideo.srcObject.getTracks().forEach((track) => track.stop());
		//停止录制
		recorder.stop();
		//录制媒体流转video格式
		console.log(dataChunks)
		let recordedBlob = new Blob(dataChunks, { type: "video/webm" });
		recording.src = URL.createObjectURL(recordedBlob);
	}
</script>
	</body>
</html>
嗖一下，答案就来了！

GetDisplayMediaREC —— 共享屏幕录屏

效果展示：
