A powerful, professional-grade screen recorder for the web. Built entirely with vanilla JavaScript, featuring a modern desktop-like interface, robust audio recording, and seamless responsiveness across all devices.
Perfect for content creators, developers, educators, and anyone who needs to capture screen recordings with professional quality.
- Multiple Resolutions: 720p HD • 1080p Full HD • 1440p 2K • 2160p 4K
- Flexible Frame Rates: 30 FPS • 60 FPS • 120 FPS (ultra-smooth)
- High Quality Codec: VP9/VP8 with automatic fallback
- Optimized Bitrate: 5 Mbps video + 128 Kbps audio (adjustable)
- Cursor Options: Show or hide mouse cursor during recording
- 4 Audio Source Options:
- No Audio (screen-only)
- Speaker/System Audio Only
- Microphone Only
- Both Microphone & Speaker (mixed)
- Audio Enhancement:
- Echo Cancellation - Removes feedback
- Noise Suppression - Filters background noise
- Auto Gain Control - Maintains consistent levels
- Proper Audio Mixing: Multiple audio sources combined seamlessly
- Cross-Platform Support: Works reliably on Chrome, Firefox, Edge, Opera
- Play/Pause/Stop: Full control during recording
- Real-Time Timer: Live H:MM:SS format display
- Countdown Timer: 3, 5, or 10-second pre-recording countdown
- Video Preview: Built-in player with playback controls
- Keyboard Shortcuts:
- Space - Start/Pause recording
- S - Stop recording
- Auto Download: Optional automatic saving on recording complete
- Smart Naming: Timestamped filenames (format:
Recording_YYYY-MM-DD_HH-MM-SS.webm) - Recording Preview: Inline video player with metadata
- Recording Details: View duration, file size, and format info
- One-Click Download: Download any time after recording
- Native Titlebar: Status indicator and app name
- Sidebar Settings: All controls organized in collapsible panel
- Clean Layout: Main recording area with prominent timer
- Light/Dark Themes: Toggle with persistent preference
- Status Indicators: Real-time recording/paused/ready status
- Modern Design: Professional appearance inspired by native apps
- Zero Dependencies: Pure vanilla JavaScript - no frameworks or libraries
- Privacy First: 100% local processing - nothing uploaded to servers
- Smooth Performance: Optimized rendering and memory management
- Persistent Settings: All preferences saved to browser storage
- Error Handling: User-friendly error messages for troubleshooting
- Memory Efficient: Proper stream cleanup prevents memory leaks
No installation needed! Simply:
-
Download or Clone
git clone https://github.com/yourusername/ScreenFlow.git # or download as ZIP -
Open in Browser
- Navigate to the downloaded folder
- Open
index.htmlin Chrome, Firefox, Edge, or Opera - Grant screen recording and microphone permissions when prompted
-
Start Recording
- Click "Start" or press Space
- Select screen/window to capture
- Begin recording!
That's it! No setup, build process, or server required.
The sidebar contains all recording settings:
- Audio Source: Choose speaker, mic, or both
- Video Quality: Select 720p to 4K
- Frame Rate: Pick 30, 60, or 120 FPS
- Audio Enhancement: Enable echo cancellation
- Auto Download: Toggle automatic saving
- Countdown Timer: Set pre-recording delay
- Click the "Start" button
- Or press Space on your keyboard
- Select the screen/window to capture from system dialog
- Optional countdown will display if configured
While recording:
- Press Space to pause/resume
- Press S to stop recording
- Watch the live timer count up
- Status indicator shows recording state
After recording stops:
- Video preview appears automatically
- View duration, file size, and format
- Click "Download" to save
- Or enable auto-download in settings
| Option | Best For | Details |
|---|---|---|
| No Audio | Screen-only captures | Records video only, no sound |
| Speaker Only | Games, music, apps | Captures system audio output |
| Microphone Only | Narration, tutorials | Records your voice/commentary |
| Mic + Speaker | Professional tutorials | Mixes both sources together |
Audio Enhancement (when enabled):
- ✅ Echo Cancellation
- ✅ Noise Suppression (filters background noise)
- ✅ Auto Gain Control (maintains volume levels)
| Resolution | Dimensions | File Size | Best For |
|---|---|---|---|
| 720p HD | 1280 × 720 | ~50 MB/min | Web sharing, screencasts |
| 1080p Full HD | 1920 × 1080 | ~80 MB/min | Professional content, tutorials |
| 1440p 2K | 2560 × 1440 | ~120 MB/min | High-quality archives |
| 2160p 4K | 3840 × 2160 | ~200 MB/min | Premium production, cinema |
- 30 FPS - Presentations, webinars, slow content
- 60 FPS - General use, animations, normal gameplay
- 120 FPS - Fast-paced games, sports, smooth motion
| Setting | Options | Purpose |
|---|---|---|
| Show Cursor | On / Off | Include mouse pointer in recording |
| Auto Download | On / Off | Automatically save completed recordings |
| Countdown | None / 3s / 5s / 10s | Delay before recording starts |
Perfect for:
✅ Tutorial & Educational Content - Screen + narration with proper audio mixing
✅ Software Demonstrations - Showcase features and workflows
✅ Gameplay Recording - 60-120 FPS smooth captures
✅ Presentation Recording - Slide shows with audio commentary
✅ Bug Documentation - Quick issue reproduction videos
✅ Online Training - Professional-quality educational material
✅ Video Content Creation - YouTube, TikTok, social media
✅ Conference Talks - Record presentations and Q&A
✅ Webinar Recording - Screen + multiple audio sources
✅ Software Comparison - Side-by-side feature demos
ScreenFlow works perfectly on all screen sizes:
| Device | Width | Layout | Notes |
|---|---|---|---|
| Desktop | 1024px+ | Sidebar + Main Panel | Full UI with all controls visible |
| Laptop | 768-1024px | Stacked (Sidebar Top) | Settings panel collapses nicely |
| Tablet | 480-768px | Optimized Touch UI | Touch-friendly buttons and controls |
| Mobile | <480px | Minimalist Interface | Essential controls only - fully functional |
All layouts maintain full functionality regardless of screen size.
| Browser | Support | Notes |
|---|---|---|
| Chrome | ✅ Full | All features - primary browser |
| Chromium (Edge) | ✅ Full | All features supported |
| Firefox | ✅ Full | All features supported |
| Opera | ✅ Full | All features supported |
| Safari | Basic recording (audio limited) |
Requirements:
- HTTPS connection (except for localhost)
- Screen sharing permission
- Microphone permission (if using audio)
- Modern browser with MediaRecorder API support
- Container: WebM (Matroska-based)
- Video Codec: VP9 (primary) → VP8 (fallback) → WebM (fallback)
- Video Bitrate: 5 Mbps (high quality)
- Resolution: User-selectable (720p to 4K)
- Frame Rate: User-selectable (30, 60, 120 FPS)
- Sample Rate: 48 kHz (browser default)
- Channels: Stereo
- Bitrate: 128 Kbps
- Codec: Opus (WebM container)
- Echo Cancellation: Browser-provided AEC (WebRTC)
- Noise Suppression: Browser-provided noise suppression
- Auto Gain Control: Browser-provided AGC
- Stream Mixing: JavaScript Web Audio API
- Memory Efficient: Minimal RAM usage during recording
- CPU Optimization: Hardware-accelerated encoding
- Real-Time: Live timer and status updates
- Smooth: No UI lag even during high-quality recording
- Settings: Recording preferences (audio, quality, framerate, etc.)
- Theme: Light/dark mode preference
- Nothing Else: Recordings are temporary in browser memory
✅ 100% Private - All processing happens locally
✅ Zero Cloud Upload - Nothing leaves your device
✅ No Tracking - No analytics or telemetry
✅ No Ads - No advertisements
✅ Your Data - You own all recordings
✅ No Accounts - Works completely offline
Solution:
- Refresh the page
- Click "Allow" when browser asks for permissions
- Check browser privacy settings allow screen recording
- For HTTPS: Ensure secure connection
Check:
- Verify "Audio Source" setting in sidebar (not set to "No Audio")
- Check system settings - microphone/speaker enabled
- Test audio in another app first
- Some apps block audio capture - try another app
- Safari has limited audio support
Reduce by:
- Lower resolution: 4K → 1080p
- Lower framerate: 120 FPS → 60 FPS
- Note: File sizes vary by system and recording content
Improve by:
- Enable "Audio Enhancement" in settings
- Move microphone closer
- Check system volume levels
- Close background noise sources
- Disable other audio apps
Try:
- Close resource-heavy applications
- Lower video quality or framerate
- Check browser hardware acceleration is enabled
- Restart browser
- Free up system RAM
| Key | Action | When |
|---|---|---|
| Space | Start / Pause | Anytime |
| S | Stop Recording | During recording |
These shortcuts provide quick control without reaching for the mouse.
# Push to GitHub
git add .
git commit -m "Deploy ScreenFlow"
git push origin main
# Enable in GitHub Settings:
# Settings → Pages → Source: main → SaveYour app will be at: https://yourusername.github.io/ScreenFlow
- Push code to GitHub
- Connect repo to Vercel
- Auto-deploys on every push
- Drag & drop
index.htmlto Netlify - Or connect GitHub repo
- Instant deployment
Simply upload index.html to web server root directory.
ScreenFlow/
├── index.html # Complete app in single file
├── README.md # This file
└── LICENSE # MIT License
That's it! Single HTML file containing all HTML, CSS, and JavaScript.
- No External Requests: Entire app runs locally
- No Third-Party Libraries: Zero external dependencies
- No Tracking Code: No analytics or telemetry
- No Ads: No advertising networks
- Open Source: Full code transparency
- User Control: Complete control over recording process
MIT License - Use freely for personal and commercial projects.
See LICENSE file for details.
We welcome improvements! To contribute:
- Report Bugs: Open an issue on GitHub
- Suggest Features: Describe your ideas with examples
- Submit Code: Fork, modify, and create pull request
- Share Feedback: Tell us how you use ScreenFlow
- Built With: Pure vanilla JavaScript - no frameworks
- Inspired By: Professional desktop recording tools like OBS, Camtasia
- For: Content creators, developers, educators, and everyone who needs to record their screen
Q: Is it free?
A: Yes, completely free and open-source.
Q: Do I need an account?
A: No, works completely offline - no account needed.
Q: Is my data safe?
A: Yes, everything stays on your device - nothing uploaded.
Q: Does it work on mobile?
A: Mobile support is limited due to browser restrictions, but works on desktop/laptop tablets.
Q: Can I edit recordings?
A: Not in ScreenFlow, but you can use VLC, FFmpeg, or Adobe Premiere after download.
Q: How do I improve audio quality?
A: Enable "Audio Enhancement", use a better microphone, reduce background noise.
Potential future features:
- Drawing/annotation tools during recording
- Remote file upload (cloud storage)
- Video editing tools
- Multiple monitor support
- Watermark customization
- Batch processing
- Streaming to social platforms
- Plugin system
- ✅ Fixed complete audio recording system
- ✅ Proper microphone + speaker mixing
- ✅ New desktop app interface with titlebar
- ✅ Responsive sidebar settings panel
- ✅ Professional status indicators
- ✅ Stream resource cleanup
- ✅ Cross-browser optimization
- Basic screen recording
- Multiple quality options
- Audio source selection
- Light/dark theme
Made with ❤️ for creators, developers, and educators
⭐ Star on GitHub • 💬 Report Issue • 💡 Suggest Feature
Start recording your screen professionally today! 🎬