Free Screen Recorder Tool for Everyone
🎥 Free Browser Screen Recorder – Record Screen, Voice & Camera
🌟 Introduction
Screen recording is no longer just for developers or professionals. Teachers, students, content creators, and even children often need a simple and free way to record their screen or camera without installing heavy software.
In this article, you’ll learn how to use a 100% free browser-based Screen Recorder Tool that works directly in your browser — no downloads, no sign-up, and no tracking.
The tool is lightweight, beginner-friendly, and built using modern Web APIs supported by most browsers.
✅ Key Features
✔ Record full screen or browser tabs
✔ Record screen with microphone voice
✔ Record camera with microphone
✔ Live video preview
✔ Download recordings instantly
✔ No installation required
✔ Works on HTTPS or localhost
🧠 How This Screen Recorder Works
This tool uses the Media recorder API, a modern browser feature that allows capturing video and audio streams directly from the browser.
The recorder supports three modes:
- Screen only
- Screen + voice
- Camera + voice
All recording happens locally in your browser, so your data never leaves your device.
🪜 How to Use the Tool
- Open the tool using HTTPS or localhost
- Choose what you want to record:
- Screen
- Screen + Voice
- Camera + Voice
- Click START
- Click STOP when finished
- Click SAVE VIDEO to download
👉 The video is saved in WebM format, supported by all modern browsers.
⚙️ Project File Structure
index.html → Main HTML page
script.js → Recording logic
style.css → Basic styling
🛠️ Complete Working Code
📄 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Easy Screen Recorder</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
<h1>🎥 Easy Screen Recorder</h1>
<label>
<input type="radio" name="mode" value="screen" checked>
Screen
</label><br>
<label>
<input type="radio" name="mode" value="screen-audio">
Screen + Voice
</label><br>
<label>
<input type="radio" name="mode" value="camera">
Camera + Voice
</label>
<button id="start">START</button>
<button id="stop" disabled>STOP</button>
<button id="save" disabled>SAVE VIDEO</button>
<video id="video" controls></video>
</div>
<script src="script.js"></script>
</body>
</html>
📄 script.js
let recorder, stream;
let chunks = [];
let recordedBlob;
const start = document.getElementById('start');
const stop = document.getElementById('stop');
const save = document.getElementById('save');
const video = document.getElementById('video');
async function getStream(mode) {
if (mode === 'screen') {
return navigator.mediaDevices.getDisplayMedia({ video: true });
}
if (mode === 'screen-audio') {
const screen = await navigator.mediaDevices.getDisplayMedia({ video: true });
const audio = await navigator.mediaDevices.getUserMedia({ audio: true });
return new MediaStream([
...screen.getVideoTracks(),
...audio.getAudioTracks()
]);
}
if (mode === 'camera') {
return navigator.mediaDevices.getUserMedia({
video: true,
audio: true
});
}
}
start.onclick = async () => {
chunks = [];
recordedBlob = null;
try {
const mode = document.querySelector('input[name=mode]:checked').value;
stream = await getStream(mode);
video.srcObject = stream;
recorder = new MediaRecorder(stream);
recorder.ondataavailable = e => chunks.push(e.data);
recorder.onstop = () => {
recordedBlob = new Blob(chunks, { type: 'video/webm' });
video.srcObject = null;
video.src = URL.createObjectURL(recordedBlob);
save.disabled = false;
stream.getTracks().forEach(t => t.stop());
};
recorder.start();
start.disabled = true;
stop.disabled = false;
} catch (err) {
alert('Recording permission denied or unsupported browser.');
}
};
stop.onclick = () => {
recorder.stop();
start.disabled = false;
stop.disabled = true;
};
save.onclick = () => {
if (!recordedBlob) return;
const a = document.createElement('a');
a.href = URL.createObjectURL(recordedBlob);
a.download = 'recording.webm';
a.click();
};
🎨 style.css
body {
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #d1fae5;
font-family: "Times New Roman", serif;
}
.box {
background: #fff;
padding: 20px;
border-radius: 16px;
max-width: 500px;
width: 95%;
text-align: center;
}
button {
width: 100%;
margin-top: 10px;
padding: 12px;
font-size: 16px;
cursor: pointer;
}
video {
width: 100%;
margin-top: 10px;
background: #000;
}
⚠️ Important Browser Security Note
Screen recording only works on HTTPS or localhost.
This is enforced by browsers to protect user privacy.
✅ Works:
https://yourwebsite.comhttp://localhost
❌ Does NOT work:
file://http://(non-secure)
🌍 Browser Compatibility
✔ Google Chrome
✔ Microsoft Edge
✔ Brave
✔ Firefox
⚠ Limited support on Safari due to Media recorder restrictions.
🔗 Official Reference
Mozilla Developer Network – Media recorder API
👉 https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder
🍬 Conclusion
This Easy Screen Recorder Tool proves that powerful features don’t need complex software. With just HTML, CSS, and JavaScript, you can build a fully functional screen recorder that runs entirely in the browser.
It’s perfect for:
- Online teaching
- Demo videos
- Student projects
- Quick tutorials
- Beginner coding practice
The code is clean, tested, and easy to extend.
Post a Comment