react-screen-recorder
Version:
A simple React-friendly screen recorder package using MediaRecorder API
160 lines (138 loc) • 4.74 kB
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>
* {
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-image: url('../../Downloads/pic.jpg');
background-size: cover;
background-position: center;
backdrop-filter: blur(10px);
text-align: center;
color: white;
}
.container {
background: rgba(0, 0, 0, 0.6);
padding: 30px;
border-radius: 15px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
text-align: center;
width: 90%;
max-width: 500px;
}
h1 {
font-size: 28px;
margin-bottom: 20px;
}
button {
padding: 12px 20px;
margin: 10px;
font-size: 16px;
font-weight: bold;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
#recordBtn {
background: #4CAF50;
color: white;
}
.recording {
background: #FF3D00 ;
}
button:hover {
opacity: 0.8;
}
#status {
font-size: 18px;
font-weight: bold;
margin-top: 10px;
color: #ffcc00;
animation: blink 1s infinite;
display: none;
}
@keyframes blink {
50% {
opacity: 0.5;
}
}
video {
width: 100%;
margin-top: 20px;
border-radius: 10px;
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1> Screen Recorder</h1>
<button id="recordBtn">Start Recording</button>
<p id="status">Recording in progress...</p>
<video id="recordedVideo" controls></video>
</div>
<script>
let mediaRecorder;
let recordedScreen = [];
let screenStream;
let isRecording = false;
document.getElementById("recordBtn").addEventListener("click", async () => {
const recordBtn = document.getElementById("recordBtn");
const statusText = document.getElementById("status");
const videoElement = document.getElementById("recordedVideo");
if (!isRecording) {
try {
recordedScreen = [];
screenStream = await navigator.mediaDevices.getDisplayMedia({
video: { mediaSource: "screen" },
audio: { echoCancellation: true },
});
mediaRecorder = new MediaRecorder(screenStream);
mediaRecorder.ondataavailable = (event) => {
if (event.data.size > 0) recordedScreen.push(event.data);
};
mediaRecorder.onstop = () => {
const blob = new Blob(recordedScreen, { type: "video/webm" });
const videoUrl = URL.createObjectURL(blob);
videoElement.src = videoUrl;
videoElement.style.display = "block";
const a = document.createElement("a");
a.href = videoUrl;
a.download = "screen-recording.webm";
document.body.appendChild(a);
a.click();
screenStream.getTracks().forEach(track => track.stop());
};
mediaRecorder.start();
isRecording = true;
recordBtn.innerText = "Stop Recording";
recordBtn.classList.add("recording");
statusText.style.display = "block";
} catch (err) {
alert("Screen recording failed: " + err.message);
}
} else {
// Stop Recording
mediaRecorder.stop();
isRecording = false;
recordBtn.innerText = "Start Recording";
recordBtn.classList.remove("recording");
statusText.style.display = "none";
}
});
</script>
</body>
</html>