Record the Screen

This program demonstrates how to record the screen in JavaScript. To begin, press the Start button to begin recording. You will then be prompted to select a screen to record. After selecting the screen, the recording will begin with a small preview video showing. To stop recording, press the Stop button (Do not click Stop Share at the bottom of the screen). To download the recorded video, click the download link and the video will be saved to your downloads folder.

ScreenRecorder.html

<!DOCTYPE html>
<html>
	<head>
		<title>XoaX.net's Javascript</title>
		<style>
			video {
				width: 480px;
				height: 480px;
				margin: 10px 0px;
				display = 'none';
			}
		</style>
	</head>
	<body>
		<div style="width:480px;">
			<fieldset>
    		<legend>Recording</legend>
				<button id="idToggle">Start</button>
				<p id="idStatus">Stopped</p>
				<a id="idDownload">Download Video</a>
			</fieldset>
			<video id="idVideo" autoplay muted></video>
		</div>
		<script type="text/javascript">
		
		const kqVideo = document.getElementById('idVideo');
		const kqButton = document.getElementById('idToggle');
		const kqStatus = document.getElementById('idStatus');
		const kqDownload = document.getElementById('idDownload');
		
		let gqMediaRecorder;
		let gqaRecordedChunks = [];
		var kqStream = null;

		const kpfnInitialize = async () => {
			kqButton.onclick = ButtonStart;
			kqButton.textContent = 'Start';
			kqStatus.textContent = 'Stopped';
			kqVideo.style.display = 'none';
		}
		
		function ButtonStop() {
			kqButton.textContent = 'Start';
			kqStatus.textContent = 'Stopped';
			kqVideo.style.display = 'none';
			gqMediaRecorder.stop();
			kqStream.getTracks().forEach(track => track.stop());
			kqButton.onclick = ButtonStart;
		}
		async function ButtonStart() {
			kqButton.textContent = 'Stop';
			kqStatus.textContent = 'Started';
			kqStream = await navigator.mediaDevices.getDisplayMedia({ video: true});
			kqVideo.srcObject = kqStream;
			kqVideo.style.display = 'block';
			gqMediaRecorder = new MediaRecorder(kqStream);
			gqMediaRecorder.ondataavailable = e => gqaRecordedChunks.push(e.data);
			kqButton.onclick = ButtonStop;
			gqMediaRecorder.onstop = () => {
				const kqBlob = new Blob(gqaRecordedChunks, {type: 'video/webm'});
				kqVideo.src = URL.createObjectURL(kqBlob);
				kqDownload.href = kqVideo.src;
				kqDownload.download = 'recording.webm';
				kqDownload.style.display = 'block';
				gqaRecordedChunks = [];
			}
			gqMediaRecorder.start();
		}

		kpfnInitialize();

		</script>
	</body>
</html>

Core JavaScript

Record the Screen

ScreenRecorder.html

Output