chrome浏览器录屏

最新推荐文章于 2024-05-16 19:31:11 发布

Z网球

最新推荐文章于 2024-05-16 19:31:11 发布

阅读量1.8k

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq1036548849/article/details/105359942

版权

html 专栏收录该内容

16 篇文章 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 = 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>

Z网球

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
chrome浏览器录屏

getDisplayMediaMediaRecorder下载的视频格式一般播放器放不了！【vlc播放，或者使用ffmpeg转下码】index.html文件如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" c...
复制链接

扫一扫