getDisplayMedia——共享屏幕录制-QUI-Notes

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>共享屏幕录制</title>
	</head>
	<body>
		<video id="myvideo" width="800" height="600"></video>
		<script type="module">
			let myVideo = document.getElementById("myvideo")
			let mediaRecorder;
			// 定义constraints数据类型
			let constraints ={
			  audio: false, // 指定是否请求音轨或者约束轨道属性值的对象
			  video: true, // 指定是否请求视频轨道或者约束轨道属性值的对象
			}
			
			navigator.mediaDevices.getDisplayMedia(constraints).then(handleSuccess).catch(handleError);
			
			function handleSuccess(stream) {
			  // 对音视流进行操作
			  window.stream = stream;
  			  myVideo.srcObject = stream;
  			  myVideo.onloadedmetadata = function(e) {
					 myVideo.play();
			  };
			}
			
			function handleError(error) {
			  console.log('getDisplayMedia error: ', error.message, error.name);
			}
		</script>
	</body>
</html>

嗖一下，答案就来了！

getDisplayMedia——共享屏幕录制

效果展示：