Screen Recorder Tool
Screen Recorder Tool
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #6a11cb, #2575fc);
color: #fff;
text-align: center;
margin: 0;
padding: 0;
}
.container {
padding: 20px;
max-width: 600px;
margin: 50px auto;
background: rgba(255, 255, 255, 0.1);
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
h1 {
margin-bottom: 20px;
font-size: 24px;
}
.buttons {
margin: 20px 0;
}
.btn {
margin: 10px;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background 0.3s ease;
}
.start {
background: #34d058;
color: white;
}
.start:hover {
background: #28a745;
}
.stop {
background: #d73a49;
color: white;
}
.stop:hover {
background: #b9253a;
}
.download {
background: #0366d6;
color: white;
}
.download:hover {
background: #005cc5;
}
#preview {
margin-top: 20px;
width: 100%;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
const startBtn = document.getElementById('start-btn');
const stopBtn = document.getElementById('stop-btn');
const downloadBtn = document.getElementById('download-btn');
const preview = document.getElementById('preview');
let recorder;
let recordedChunks;
// Start recording
startBtn.addEventListener('click', async () => {
try {
const stream = await navigator.mediaDevices.getDisplayMedia({
video: true,
audio: true,
});
preview.srcObject = stream;
recorder = RecordRTC(stream, {
type: 'video',
});
recorder.startRecording();
recordedChunks = [];
recorder.ondataavailable = (blob) => {
recordedChunks.push(blob);
};
startBtn.disabled = true;
stopBtn.disabled = false;
downloadBtn.disabled = true;
} catch (err) {
console.error('Error accessing display media: ', err);
}
});
// Stop recording
stopBtn.addEventListener('click', () => {
recorder.stopRecording(() => {
const blob = recorder.getBlob();
recordedChunks.push(blob);
// Enable download button
const downloadUrl = URL.createObjectURL(blob);
downloadBtn.href = downloadUrl;
downloadBtn.download = 'recording.webm';
preview.srcObject.getTracks().forEach((track) => track.stop());
startBtn.disabled = false;
stopBtn.disabled = true;
downloadBtn.disabled = false;
});
});
// Download recording
downloadBtn.addEventListener('click', () => {
alert('Recording downloaded successfully!');
});
