admin管理员组

文章数量:1626246

getDisplayMedia

MediaRecorder

下载的视频格式一般播放器放不了！【vlc播放，或者使用ffmpeg转下码】

index.html文件如下：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Screen Record</title>
	<style>
		#video {
			border: 1px solid #999;
			width: 98%;
			max-width: 860px;
		}

		.error {
			color: red;
		}

		.warn {
			color: orange;
		}

		.info {
			color: darkgreen;
		}
	</style>
</head>

<body>
	<p> Start Capture  ->  Stop Capture -> download</p>
	<p>
		<button id="start">Start Capture</button>&nbsp;
		<button id="stop">Stop Capture</button>&nbsp;
		<button onclick="download()">download</button>
	</p>
	<video id="video" autoplay></video>
	<br>
	<strong>Log:</strong>
	<br>
	<pre id="log"></pre>
</body>
<script>
	let recordedBlobs
	let recorder
	const videoElem = document.getElementById("video");
	const logElem = document.getElementById("log");
	const startElem = document.getElementById("start");
	const stopElem = document.getElementById("stop");
	// Options for getDisplayMedia()
	const displayMediaOptions = {
		video: {
			cursor: "never"
		},
		audio: true
	};
	
	// Set event listeners for the start and stop buttons
	startElem.addEventListener("click", function (evt) {
		startCapture();
	}, false);
	
	stopElem.addEventListener("click", function (evt) {
		stopCapture();
	}, false);

	async function startCapture() {
		logElem.innerHTML = "";

		try {
			const stream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
			videoElem.srcObject = stream;
			const chunks = [];
			
			recorder = new MediaRecorder(stream, { mimeType: "video/webm; codecs=vp9" });
			
			recorder.start();
			
			recorder.onstop = event => {
				recordedBlobs = new Blob(chunks, {
					type: 'video/mp4',
					codecs: 'h264'
				});
			}
			
			recorder.ondataavailable = event => {
				chunks.push(event.data);
			};

		} catch (err) {
			console.error("Error: " + err);
		}
	}

	function stopCapture() {
		recorder.stop();
		console.info(videoElem.srcObject)
		let tracks = videoElem.srcObject.getTracks();
		console.info(tracks)
		tracks.forEach(track => track.stop());
		videoElem.srcObject = null;
		
	}

	function download() {
        stopCapture();
		const url = URL.createObjectURL(recordedBlobs);
		const a = document.createElement('a');
		document.body.appendChild(a);
		a.style.display = 'none';
		a.href = url;
		a.download = 'test.mp4';
		a.click();
		window.URL.revokeObjectURL(url);
	}
	
</script>

</html>

本文标签： 浏览器chrome

版权声明：本文标题：chrome浏览器录屏 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1728949254a1181387.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。