Screen Recorder Tool
Screen Recorder Tool
Ready to Record
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f8ff;
}
.container {
text-align: center;
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
margin-bottom: 20px;
font-size: 24px;
}
video {
width: 100%;
max-width: 600px;
height: 300px;
background-color: #000;
border-radius: 10px;
margin-bottom: 20px;
}
.controls button {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
margin: 10px;
transition: background-color 0.3s ease;
}
.controls button:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
.controls button:hover:enabled {
background-color: #0056b3;
}
.info {
margin-top: 20px;
font-size: 16px;
color: #555;
}
#recordingStatus {
font-weight: bold;
color: #ff4500;
}
const video = document.getElementById('video');
const startRecordingButton = document.getElementById('startRecording');
const stopRecordingButton = document.getElementById('stopRecording');
const downloadRecordingButton = document.getElementById('downloadRecording');
const recordingStatus = document.getElementById('recordingStatus');
let recorder;
let recordedChunks;
// Request access to display media (screen capture)
async function startRecording() {
const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
video.srcObject = stream;
recorder = new RecordRTC(stream, {
type: 'video'
});
recorder.startRecording();
recordingStatus.innerText = "Recording in Progress...";
startRecordingButton.disabled = true;
stopRecordingButton.disabled = false;
}
// Stop recording
function stopRecording() {
recorder.stopRecording(function() {
const blob = recorder.getBlob();
video.src = URL.createObjectURL(blob);
downloadRecordingButton.href = URL.createObjectURL(blob);
downloadRecordingButton.download = 'recording.webm';
recordedChunks = blob;
});
recordingStatus.innerText = "Recording Stopped";
startRecordingButton.disabled = false;
stopRecordingButton.disabled = true;
downloadRecordingButton.disabled = false;
// Stop the media stream
let tracks = video.srcObject.getTracks();
tracks.forEach(track => track.stop());
}
// Add event listeners
startRecordingButton.addEventListener('click', startRecording);
stopRecordingButton.addEventListener('click', stopRecording);
