mustafaboleken · May 8, 2024 21:08
diff --git a/local-recording b/local-recording
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab Recording</title>
 </head>
 <body>
    <button id="startBtn">Start Recording</button>
    <button id="stopBtn" disabled>Stop Recording</button>

    <script>
        let mediaRecorder;
        let chunks = [];

        document.getElementById('startBtn').addEventListener('click', async () => {
            try {
                // Requesting the user to select a screen or tab to capture with audio.
                const mediaStream = await navigator.mediaDevices.getDisplayMedia({
                    video: true,
                    audio: true,
                    preferCurrentTab: true,
                    monitorTypeSurfaces: "exclude"
                });

                // Setup the MediaRecorder with the stream
                mediaRecorder = new MediaRecorder(mediaStream);

                mediaRecorder.ondataavailable = (e) => {
                    chunks.push(e.data);
                };

                mediaRecorder.onstop = async () => {
                    const blob = new Blob(chunks, { type: 'video/webm' });
                    chunks = [];

                    // Create a download link for the video
                    const url = URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.style.display = 'none';
                    a.href = url;
                    a.download = 'recorded-tab.webm';
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(url);
                    a.remove();

                    // Disable the stop button and re-enable the start button
                    document.getElementById('stopBtn').disabled = true;
                    document.getElementById('startBtn').disabled = false;
                };

                // Start recording
                mediaRecorder.start();
                document.getElementById('startBtn').disabled = true;
                document.getElementById('stopBtn').disabled = false;
            } catch (error) {
                console.error('Error capturing media: ', error);
            }
        });

        document.getElementById('stopBtn').addEventListener('click', () => {
            mediaRecorder.stop();
            mediaRecorder.stream.getTracks().forEach(track => track.stop()); // Stop all tracks to release the media source
        });
    </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>Tab Recording</title>
	</head>
	<body>
	<button id="startBtn">Start Recording</button>
	<button id="stopBtn" disabled>Stop Recording</button>

	<script>
	let mediaRecorder;
	let chunks = [];

	document.getElementById('startBtn').addEventListener('click', async () => {
	try {
	// Requesting the user to select a screen or tab to capture with audio.
	const mediaStream = await navigator.mediaDevices.getDisplayMedia({
	video: true,
	audio: true,
	preferCurrentTab: true,
	monitorTypeSurfaces: "exclude"
	});

	// Setup the MediaRecorder with the stream
	mediaRecorder = new MediaRecorder(mediaStream);

	mediaRecorder.ondataavailable = (e) => {
	chunks.push(e.data);
	};

	mediaRecorder.onstop = async () => {
	const blob = new Blob(chunks, { type: 'video/webm' });
	chunks = [];

	// Create a download link for the video
	const url = URL.createObjectURL(blob);
	const a = document.createElement('a');
	a.style.display = 'none';
	a.href = url;
	a.download = 'recorded-tab.webm';
	document.body.appendChild(a);
	a.click();
	window.URL.revokeObjectURL(url);
	a.remove();

	// Disable the stop button and re-enable the start button
	document.getElementById('stopBtn').disabled = true;
	document.getElementById('startBtn').disabled = false;
	};

	// Start recording
	mediaRecorder.start();
	document.getElementById('startBtn').disabled = true;
	document.getElementById('stopBtn').disabled = false;
	} catch (error) {
	console.error('Error capturing media: ', error);
	}
	});

	document.getElementById('stopBtn').addEventListener('click', () => {
	mediaRecorder.stop();
	mediaRecorder.stream.getTracks().forEach(track => track.stop()); // Stop all tracks to release the media source
	});
	</script>
	</body>
	</html>