Free Screen Recorder Tool Online - Record Screen With Audio
Free Online Screen Recorder
Record your entire screen, browser tabs, application windows,
microphone audio and system sound directly in your browser.
No software installation required.
Recording Controls
▶ Start Recording
⏸ Pause
▶ Resume
⏹ Stop Recording
Live Screen Preview
Tool Features
✅ Full Screen Recording
✅ Browser Tab Recording
✅ Window Recording
✅ System Audio Capture
✅ Microphone Recording
✅ Pause & Resume
✅ HD Recording
✅ No API Key Required
✅ Mobile Responsive
✅ RecordRTC Library
Free Screen Recorder Tool – Complete Guide
This free screen recorder allows users to capture
their computer screen directly from the browser.
Whether you want to create tutorials, educational
videos, software demonstrations, presentations,
gameplay recordings or training content, this
tool provides everything needed for professional
screen recording.
Using the RecordRTC library, recordings are processed
inside the browser without requiring external servers
or API keys. Users can instantly download recorded
files and share them with colleagues, students,
customers or audiences.
The tool supports screen capture, browser tab
recording, microphone recording, system audio
recording and high-quality HD video output.
Modern browsers such as Chrome, Edge and Firefox
offer excellent compatibility for browser-based
recording.
// ================================
// SCREEN RECORDER TOOL
// RecordRTC Powered
// ================================
let recorder;
let screenStream;
let micStream;
let combinedStream;
let recordingSeconds = 0;
let timerInterval;
const startBtn = document.getElementById("startBtn");
const pauseBtn = document.getElementById("pauseBtn");
const resumeBtn = document.getElementById("resumeBtn");
const stopBtn = document.getElementById("stopBtn");
const preview = document.getElementById("preview");
const recordedVideo = document.getElementById("recordedVideo");
const timer = document.getElementById("timer");
const downloadBtn = document.getElementById("downloadBtn");
const recordStatus =
document.getElementById("recordStatus");
const recordLength =
document.getElementById("recordLength");
const fileSize =
document.getElementById("fileSize");
// ================================
// TIMER
// ================================
function startTimer(){
clearInterval(timerInterval);
timerInterval = setInterval(() => {
recordingSeconds++;
let mins =
Math.floor(recordingSeconds / 60);
let secs =
recordingSeconds % 60;
timer.innerText =
String(mins).padStart(2,"0") +
":" +
String(secs).padStart(2,"0");
recordLength.innerText =
recordingSeconds + " sec";
},1000);
}
function stopTimer(){
clearInterval(timerInterval);
}
// ================================
// START RECORDING
// ================================
startBtn.addEventListener("click",
async () => {
try{
recordStatus.innerText =
"Preparing...";
const quality =
document.getElementById("quality").value;
const frameRate =
parseInt(
document.getElementById("frameRate").value
);
const systemAudio =
document.getElementById("recordAudio").checked;
const microphone =
document.getElementById("recordMic").checked;
// Screen Stream
screenStream =
await navigator.mediaDevices
.getDisplayMedia({
video:{
frameRate:frameRate,
width:{
ideal:quality
},
height:{
ideal:quality
}
},
audio:systemAudio
});
// Microphone Stream
if(microphone){
micStream =
await navigator.mediaDevices
.getUserMedia({
audio:true
});
}
// Merge Streams
combinedStream =
new MediaStream();
screenStream
.getVideoTracks()
.forEach(track => {
combinedStream.addTrack(track);
});
if(systemAudio){
screenStream
.getAudioTracks()
.forEach(track => {
combinedStream.addTrack(track);
});
}
if(microphone && micStream){
micStream
.getAudioTracks()
.forEach(track => {
combinedStream.addTrack(track);
});
}
// Live Preview
preview.srcObject =
combinedStream;
// Create Recorder
recorder =
new RecordRTC(
combinedStream,
{
type:"video",
mimeType:"video/webm"
}
);
recorder.startRecording();
recordStatus.innerText =
"Recording";
recordingSeconds = 0;
startTimer();
screenStream
.getVideoTracks()[0]
.onended = function(){
stopRecording();
};
}catch(error){
alert(
"Recording permission denied or unsupported browser."
);
console.error(error);
}
});
// ================================
// PAUSE
// ================================
pauseBtn.addEventListener("click",
() => {
if(recorder){
recorder.pauseRecording();
recordStatus.innerText =
"Paused";
}
});
// ================================
// RESUME
// ================================
resumeBtn.addEventListener("click",
() => {
if(recorder){
recorder.resumeRecording();
recordStatus.innerText =
"Recording";
}
});
// ================================
// STOP
// ================================
stopBtn.addEventListener("click",
() => {
stopRecording();
});
// ================================
// STOP FUNCTION
// ================================
function stopRecording(){
if(!recorder)
return;
recorder.stopRecording(
function(){
let blob =
recorder.getBlob();
let url =
URL.createObjectURL(blob);
recordedVideo.src =
url;
downloadBtn.href =
url;
downloadBtn.download =
"screen-recording.webm";
const sizeMB =
(blob.size /
1024 /
1024)
.toFixed(2);
fileSize.innerText =
sizeMB + " MB";
recordStatus.innerText =
"Completed";
});
stopTimer();
if(screenStream){
screenStream
.getTracks()
.forEach(track =>
track.stop());
}
if(micStream){
micStream
.getTracks()
.forEach(track =>
track.stop());
}
}
// ================================
// KEYBOARD SHORTCUTS
// ================================
document.addEventListener(
"keydown",
function(e){
if(
e.ctrlKey &&
e.key === "s"
){
e.preventDefault();
startBtn.click();
}
if(
e.ctrlKey &&
e.key === "e"
){
e.preventDefault();
stopBtn.click();
}
}
);
// ================================
// AUTO CLEANUP
// ================================
window.addEventListener(
"beforeunload",
() => {
if(screenStream){
screenStream
.getTracks()
.forEach(track =>
track.stop());
}
if(micStream){
micStream
.getTracks()
.forEach(track =>
track.stop());
}
}
);
/* ==========================
RESET
========================== */
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;
}
html{
scroll-behavior:smooth;
}
body{
background:linear-gradient(
135deg,
#0f172a,
#1e293b,
#312e81,
#0f766e
);
background-size:400% 400%;
animation:bgMove 15s ease infinite;
color:#fff;
min-height:100vh;
padding:20px;
}
@keyframes bgMove{
0%{
background-position:0% 50%;
}
50%{
background-position:100% 50%;
}
100%{
background-position:0% 50%;
}
}
/* ==========================
HEADER
========================== */
.header{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
margin-bottom:30px;
flex-wrap:wrap;
}
.logo-area h1{
font-size:2rem;
font-weight:800;
margin-bottom:8px;
}
.logo-area p{
color:#cbd5e1;
font-size:15px;
}
.home-btn{
display:inline-block;
padding:12px 20px;
border-radius:12px;
background:linear-gradient(
135deg,
#ff9800,
#ff5722
);
text-decoration:none;
font-weight:700;
color:white;
transition:.3s;
box-shadow:0 5px 15px rgba(0,0,0,.3);
}
.home-btn:hover{
transform:translateY(-3px);
}
/* ==========================
CONTAINER
========================== */
.container{
max-width:1300px;
margin:auto;
}
/* ==========================
CARD STYLE
========================== */
.hero-card,
.recorder-card,
.preview-card,
.result-card,
.features-card,
.stats-card,
.article-section{
background:rgba(255,255,255,.08);
backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,.1);
border-radius:25px;
padding:25px;
margin-bottom:25px;
box-shadow:
0 10px 30px rgba(0,0,0,.25);
}
.hero-card{
text-align:center;
}
.hero-card h2{
font-size:2rem;
margin-bottom:15px;
}
.hero-card p{
line-height:1.8;
color:#e2e8f0;
}
/* ==========================
OPTIONS
========================== */
.options-grid{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(240px,1fr));
gap:20px;
margin-top:25px;
}
.option-box{
background:rgba(255,255,255,.07);
padding:18px;
border-radius:18px;
}
.option-box label{
display:block;
margin-bottom:10px;
font-weight:600;
}
.option-box input[type="checkbox"]{
margin-right:10px;
transform:scale(1.2);
cursor:pointer;
}
.option-box select{
width:100%;
padding:12px;
border:none;
outline:none;
border-radius:12px;
font-size:15px;
background:#fff;
color:#111827;
}
/* ==========================
TIMER
========================== */
.timer-box{
text-align:center;
margin:30px 0;
}
.timer-title{
display:block;
font-size:18px;
margin-bottom:10px;
}
#timer{
font-size:42px;
font-weight:800;
color:#4ade80;
text-shadow:
0 0 15px rgba(74,222,128,.7);
}
/* ==========================
BUTTONS
========================== */
.button-grid{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-top:20px;
}
.button-grid button{
border:none;
cursor:pointer;
padding:16px;
font-size:17px;
font-weight:700;
border-radius:15px;
color:white;
transition:.3s;
}
.button-grid button:hover{
transform:translateY(-3px);
}
.start-btn{
background:linear-gradient(
135deg,
#22c55e,
#16a34a
);
}
.pause-btn{
background:linear-gradient(
135deg,
#f59e0b,
#ea580c
);
}
.resume-btn{
background:linear-gradient(
135deg,
#3b82f6,
#2563eb
);
}
.stop-btn{
background:linear-gradient(
135deg,
#ef4444,
#dc2626
);
}
/* ==========================
VIDEO PLAYER
========================== */
video{
width:100%;
border-radius:20px;
margin-top:15px;
background:black;
min-height:350px;
border:3px solid rgba(255,255,255,.1);
}
.preview-card h3,
.result-card h3{
margin-bottom:15px;
}
/* ==========================
DOWNLOAD BUTTON
========================== */
.download-area{
text-align:center;
margin-top:20px;
}
.download-btn{
display:inline-block;
padding:15px 30px;
background:linear-gradient(
135deg,
#06b6d4,
#2563eb
);
border-radius:15px;
color:white;
text-decoration:none;
font-weight:700;
font-size:16px;
transition:.3s;
}
.download-btn:hover{
transform:translateY(-3px);
}
/* ==========================
FEATURES
========================== */
.features-card h2{
text-align:center;
margin-bottom:25px;
}
.features-grid{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));
gap:18px;
}
.feature-item{
background:rgba(255,255,255,.08);
padding:18px;
border-radius:15px;
font-weight:600;
transition:.3s;
}
.feature-item:hover{
transform:translateY(-5px);
background:rgba(255,255,255,.15);
}
/* ==========================
STATS
========================== */
.stats-card h2{
text-align:center;
margin-bottom:20px;
}
.stats-grid{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}
.stat-box{
background:rgba(255,255,255,.08);
padding:25px;
border-radius:18px;
text-align:center;
}
.stat-box h3{
font-size:2rem;
margin-bottom:10px;
color:#38bdf8;
}
/* ==========================
ARTICLE SECTION
========================== */
.article-section{
line-height:1.9;
}
.article-section h2{
margin-bottom:20px;
text-align:center;
}
.article-section p{
margin-bottom:18px;
color:#e5e7eb;
font-size:16px;
}
/* ==========================
SCROLLBAR
========================== */
::-webkit-scrollbar{
width:10px;
}
::-webkit-scrollbar-track{
background:#111827;
}
::-webkit-scrollbar-thumb{
background:#4f46e5;
border-radius:50px;
}
/* ==========================
LOADING EFFECTS
========================== */
.hero-card,
.recorder-card,
.preview-card,
.result-card,
.features-card,
.stats-card,
.article-section{
animation:fadeUp .7s ease;
}
@keyframes fadeUp{
from{
opacity:0;
transform:translateY(25px);
}
to{
opacity:1;
transform:translateY(0);
}
}
/* ==========================
MOBILE
========================== */
@media(max-width:991px){
.header{
flex-direction:column;
text-align:center;
}
.logo-area h1{
font-size:1.7rem;
}
.hero-card h2{
font-size:1.7rem;
}
#timer{
font-size:34px;
}
video{
min-height:280px;
}
}
@media(max-width:768px){
body{
padding:15px;
}
.hero-card,
.recorder-card,
.preview-card,
.result-card,
.features-card,
.stats-card,
.article-section{
padding:20px;
}
.button-grid{
grid-template-columns:1fr;
}
.options-grid{
grid-template-columns:1fr;
}
.stats-grid{
grid-template-columns:1fr;
}
.features-grid{
grid-template-columns:1fr;
}
video{
min-height:220px;
}
}
@media(max-width:480px){
.logo-area h1{
font-size:1.4rem;
}
.hero-card h2{
font-size:1.4rem;
}
#timer{
font-size:28px;
}
.button-grid button{
font-size:15px;
padding:14px;
}
.home-btn{
width:100%;
text-align:center;
}
}
No comments:
Post a Comment