Record Screen is a free and open-source online screen recording tool. It allows users to capture and share their screens effortlessly without requiring any software installation. With its user-friendly interface and high-quality output, it's ideal for tutorials, presentations, and more.
Try it live at: https://recordscreen.me
- No Installation Required: Works directly in your browser.
- User-Friendly: Simple controls to start, stop, and download recordings.
- High-Quality Output: Outputs crisp and clear screen recordings.
- Privacy-Friendly: No data is uploaded or stored on the server.
- Free Forever: Enjoy all features without any cost.
- Click Start Recording to begin capturing your screen.
- Use the Stop Recording button to end the recording.
- Save your recording by clicking Download.
-
Frontend:
- HTML for structure
- CSS for styling
- JavaScript for recording functionality
-
Browser Support:
- Requires a modern browser that supports
navigator.mediaDevices.getDisplayMedia.
- Requires a modern browser that supports
Follow these steps to run the project locally:
Ensure you have a modern browser installed.
-
Clone this repository:
git clone https://github.com/asma019/Record-Screen.git cd Record-Screen -
Open the
index.htmlfile in your browser to use the application.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Free Record Screen - Capture and Share Your Screen</title>
<meta name="description" content="Record your screen for free with our online screen recorder. Capture and share your screen easily.">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header>
<h1>Free Record Screen</h1>
</header>
<div class="video-container">
<video id="recording" controls></video>
<div class="controls">
<button id="start" class="record-btn">Start Recording</button>
<button id="stop" class="record-btn" disabled>Stop Recording</button>
<button id="download" class="download-btn" disabled>Download</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>body {
font-family: 'Roboto', Arial, sans-serif;
background-color: #f8f8f8;
margin: 0;
padding: 0;
color: #333;
}
.container {
max-width: 800px;
margin: 50px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}let mediaRecorder;
let screenStream;
let recordedChunks = [];
const startButton = document.getElementById('start');
const stopButton = document.getElementById('stop');
const downloadButton = document.getElementById('download');
const videoElement = document.getElementById('recording');
startButton.addEventListener('click', startRecording);
stopButton.addEventListener('click', stopRecording);
downloadButton.addEventListener('click', downloadRecording);
function startRecording() {
startButton.disabled = true;
stopButton.disabled = false;
recordedChunks = [];
navigator.mediaDevices.getDisplayMedia({ video: true, audio: true })
.then(stream => {
screenStream = stream;
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = e => recordedChunks.push(e.data);
mediaRecorder.onstop = () => {
const blob = new Blob(recordedChunks, { type: 'video/webm' });
videoElement.src = URL.createObjectURL(blob);
stopButton.disabled = true;
downloadButton.disabled = false;
screenStream.getTracks().forEach(track => track.stop());
};
mediaRecorder.start();
})
.catch(console.error);
}
function stopRecording() {
mediaRecorder.stop();
}
function downloadRecording() {
const blob = new Blob(recordedChunks, { type: 'video/webm' });
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = `recordscreen-${new Date().toISOString()}.webm`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}This project is licensed under the MIT License. See the /LICENSE file for details.
We welcome contributions! Please follow these steps:
- Fork the repository.
- Create a new branch (
git checkout -b feature/YourFeature). - Commit your changes (
git commit -m 'Add feature'). - Push to the branch (
git push origin feature/YourFeature). - Open a pull request.
For questions or feedback, email us at support@recordscreen.me.
Start recording your screen today with Record Screen!