unnitallman/basic_screen_recorder_demo.html Secret

## basic_screen_recorder_demo.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Screen Recorder</title>
    <style>
        #startBtn, #stopBtn, #downloadBtn {
            padding: 10px 20px;
            font-size: 16px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <button id="startBtn">Start Recording</button>
    <button id="stopBtn" disabled>Stop Recording</button>
    <button id="downloadBtn" disabled>Download Video</button>

    <div><video style="width: 600px; height:400px" id="recordedVideo" controls></video></div>

    <script>
        let mediaRecorder;
        let recordedChunks = [];
        let videoURL = "";

        const startBtn = document.getElementById('startBtn');
        const stopBtn = document.getElementById('stopBtn');
        const downloadBtn = document.getElementById('downloadBtn');
        const recordedVideo = document.getElementById('recordedVideo');

        startBtn.addEventListener('click', async () => {
            const stream = await window.navigator.mediaDevices.getDisplayMedia({
                video: true
            });

            let audioStream = await window.navigator.mediaDevices.getUserMedia(
                {audio: { echoCancellation: true, noiseSuppression: true } }
            );

            audioStream.getAudioTracks().forEach(audioTrack =>
              stream.addTrack(audioTrack)
            );

            mediaRecorder = new MediaRecorder(stream);

            mediaRecorder.ondataavailable = event => {
                recordedChunks.push(event.data);
            };

            mediaRecorder.onstop = () => {
                const blob = new Blob(recordedChunks, {
                    type: 'video/webm'
                });
                recordedChunks = [];
                videoURL = URL.createObjectURL(blob);
                recordedVideo.src = videoURL;
            };

            mediaRecorder.start();

            startBtn.disabled = true;
            stopBtn.disabled = false;
            downloadBtn.disabled = true;
        });

        stopBtn.addEventListener('click', () => {
            mediaRecorder.stop();

            startBtn.disabled = false;
            stopBtn.disabled = true;
            downloadBtn.disabled = false;
        });

        downloadBtn.addEventListener('click', () => {
            const a = document.createElement('a');
            a.href = videoURL;
            a.download = 'recorded.webm';
            document.body.appendChild(a);
            a.click();
            setTimeout(() => {
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
            }, 0);
        });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Screen Recorder</title>
	<style>
	#startBtn, #stopBtn, #downloadBtn {
	padding: 10px 20px;
	font-size: 16px;
	margin: 10px;
	}
	</style>
	</head>
	<body>
	<button id="startBtn">Start Recording</button>
	<button id="stopBtn" disabled>Stop Recording</button>
	<button id="downloadBtn" disabled>Download Video</button>

	<div><video style="width: 600px; height:400px" id="recordedVideo" controls></video></div>

	<script>
	let mediaRecorder;
	let recordedChunks = [];
	let videoURL = "";

	const startBtn = document.getElementById('startBtn');
	const stopBtn = document.getElementById('stopBtn');
	const downloadBtn = document.getElementById('downloadBtn');
	const recordedVideo = document.getElementById('recordedVideo');

	startBtn.addEventListener('click', async () => {
	const stream = await window.navigator.mediaDevices.getDisplayMedia({
	video: true
	});

	let audioStream = await window.navigator.mediaDevices.getUserMedia(
	{audio: { echoCancellation: true, noiseSuppression: true } }
	);

	audioStream.getAudioTracks().forEach(audioTrack =>
	stream.addTrack(audioTrack)
	);

	mediaRecorder = new MediaRecorder(stream);

	mediaRecorder.ondataavailable = event => {
	recordedChunks.push(event.data);
	};

	mediaRecorder.onstop = () => {
	const blob = new Blob(recordedChunks, {
	type: 'video/webm'
	});
	recordedChunks = [];
	videoURL = URL.createObjectURL(blob);
	recordedVideo.src = videoURL;
	};

	mediaRecorder.start();

	startBtn.disabled = true;
	stopBtn.disabled = false;
	downloadBtn.disabled = true;
	});

	stopBtn.addEventListener('click', () => {
	mediaRecorder.stop();

	startBtn.disabled = false;
	stopBtn.disabled = true;
	downloadBtn.disabled = false;
	});

	downloadBtn.addEventListener('click', () => {
	const a = document.createElement('a');
	a.href = videoURL;
	a.download = 'recorded.webm';
	document.body.appendChild(a);
	a.click();
	setTimeout(() => {
	document.body.removeChild(a);
	URL.revokeObjectURL(url);
	}, 0);
	});
	</script>
	</body>
	</html>