chrome浏览器录屏

阅读：评论：0

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 = ElementById("video");
	const logElem = ElementById("log");
	const startElem = ElementById("start");
	const stopElem = ElementById("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 = DisplayMedia(displayMediaOptions);
			videoElem.srcObject = stream;
			const chunks = [];
			
			recorder = new MediaRecorder(stream, { mimeType: "video/webm; codecs=vp9" });
			
			recorder.start();
			
			stop = event => {
				recordedBlobs = new Blob(chunks, {
					type: 'video/mp4',
					codecs: 'h264'
				});
			}
			
			dataavailable = event => {
				chunks.push(event.data);
			};

		} catch (err) {
			("Error: " + err);
		}
	}

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

	function download() {
        stopCapture();
		const url = ateObjectURL(recordedBlobs);
		const a = ateElement('a');
		document.body.appendChild(a);
		a.style.display = 'none';
		a.href = url;
		a.download = 'test.mp4';
		a.click();
		vokeObjectURL(url);
	}
	
</script>

</html>

本文发布于:2025-03-21 23:19:00，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/1742570352582910.html

上一篇：cocoscreator 浏览器调试技巧

下一篇：iOS加载webView时失败，而某些浏览器中可以打开

标签：浏览器 chrome

留言与评论（共有 0 条评论）