Screen Recorder Tool
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
text-align: center;
padding: 20px;
}
.container {
max-width: 600px;
margin: auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
h1 {
color: #333;
}
video {
width: 100%;
border-radius: 10px;
margin-top: 10px;
background: black;
}
.buttons {
margin-top: 20px;
}
button {
padding: 10px 15px;
margin: 5px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
#start {
background-color: #4CAF50;
color: white;
}
#start:hover {
background-color: #45a049;
}
#stop {
background-color: #f44336;
color: white;
}
#stop:hover {
background-color: #d32f2f;
}
a#download {
display: inline-block;
padding: 10px 15px;
background: #2196F3;
color: white;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
}
a#download:hover {
background: #1976D2;
}
let recorder;
let stream;
let recordedChunks = [];
const startButton = document.getElementById("start");
const stopButton = document.getElementById("stop");
const downloadLink = document.getElementById("download");
const videoPreview = document.getElementById("preview");
startButton.addEventListener("click", async () => {
try {
stream = await navigator.mediaDevices.getDisplayMedia({
video: { mediaSource: "screen" },
audio: true
});
videoPreview.srcObject = stream;
recorder = new RecordRTC(stream, {
type: 'video',
mimeType: 'video/webm',
disableLogs: true
});
recorder.startRecording();
startButton.disabled = true;
stopButton.disabled = false;
} catch (error) {
console.error("Error accessing screen: ", error);
}
});
stopButton.addEventListener("click", () => {
recorder.stopRecording(() => {
let blob = recorder.getBlob();
let url = URL.createObjectURL(blob);
downloadLink.href = url;
downloadLink.download = "screen-recording.webm";
downloadLink.style.display = "inline-block";
stopButton.disabled = true;
startButton.disabled = false;
videoPreview.srcObject = null;
stream.getTracks().forEach(track => track.stop());
});
});
