A professional Electron-based screen recording application with webcam overlay, real-time annotations, and video editing capabilities. Available for Windows, macOS, and Linux.
- Download
Screen.Recorder.Setup.x.x.x.exefrom the latest release - Run the installer
- If Windows SmartScreen appears, click "More info" → "Run anyway"
- Follow the installation wizard
- Download the
.dmgfile (Intel or Apple Silicon) - Open the
.dmgand drag Screen Recorder to Applications - On first launch, right-click the app and select "Open"
- Grant Screen Recording and Camera permissions when prompted (System Settings > Privacy & Security)
AppImage:
- Download the
.AppImagefile - Make it executable:
chmod +x Screen-Recorder-*.AppImage - Run it:
./Screen-Recorder-*.AppImage
Debian/Ubuntu (.deb):
- Download the
.debfile - Install:
sudo dpkg -i screen-recorder_*.deb
- Screen & Window Capture - Record entire screen or individual application windows
- Source Selection - Visual picker with thumbnails for screens and windows
- Pause/Resume - Pause recording without stopping, continue when ready
- Real-time Preview - Live preview of selected source before and during recording
| Preset | Resolution | Frame Rate | Bitrate |
|---|---|---|---|
| Low | 720p | 15 fps | 1000 kbps |
| Medium | 1080p | 30 fps | 2500 kbps |
| High | 1080p | 60 fps | 5000 kbps |
| Ultra | 1440p | 60 fps | 8000 kbps |
- System Audio - Capture desktop/application sounds
- Microphone - Record voice with device selection
- Audio Mixing - Combine system audio and microphone in real-time
- Live Webcam Feed - Overlay your webcam during recording
- Shape Options - Circle or square webcam frame
- Position Control - Place in any corner (top-left, top-right, bottom-left, bottom-right)
- Size Adjustment - Configurable overlay size
- Multiple Cameras - Select from available webcam devices
Draw and annotate on screen while recording:
- Pen - Freehand drawing
- Highlighter - Semi-transparent highlighting
- Arrow - Direction indicators
- Rectangle - Box annotations
- Circle - Circular shapes
- Text - Add text labels
- 9 Colors - Red, orange, yellow, green, blue, purple, pink, black, white
- 5 Thickness Levels - 2px to 12px stroke width
- Timeline Scrubber - Navigate through your recording
- Trim Tool - Cut start and end points
- Export - Save edited videos to custom location
- System Tray - Quick access menu for recording controls
- Settings Persistence - Remember your preferences
- MP4 Output - Universal format via FFmpeg conversion
- Dark Theme UI - Modern, eye-friendly interface
- Cross-Platform - Windows, macOS (Intel + Apple Silicon), and Linux
- Framework: Electron 28
- UI: React 18 + TypeScript
- Build: Vite 5
- Styling: Tailwind CSS
- Video Processing: FFmpeg (bundled)
- Packaging: electron-builder (NSIS, DMG, AppImage, deb)
- Node.js 18+
- npm or yarn
# Clone the repository
git clone https://github.com/Wasaanyi/screen_recorder.git
cd screen_recorder
# Install dependencies
npm install
# Start development server
npm run devnpm run dev # Start development with hot-reload
npm run build:app # Build without packaging
npm run build # Full build + Windows installer
npm run package # Package for Windows (after build:app)
npm run package:mac # Package for macOS (Intel + Apple Silicon)
npm run package:linux # Package for Linux (AppImage + deb)
npm run typecheck # TypeScript type checking
npm run generate-icons # Regenerate app icons from SVGscreen-recorder/
├── src/
│ ├── main/ # Main process (Electron)
│ │ ├── index.ts # Entry point
│ │ ├── windows.ts # Window management
│ │ ├── recorder.ts # Recording logic
│ │ ├── ffmpeg.ts # FFmpeg integration
│ │ ├── tray.ts # System tray
│ │ └── ipc-handlers.ts # IPC communication
│ │
│ ├── renderer/ # Renderer processes (React)
│ │ ├── control/ # Main control panel
│ │ ├── overlay/ # Annotation overlay
│ │ ├── webcam/ # Webcam window
│ │ └── editor/ # Video editor
│ │
│ ├── preload/ # Preload scripts
│ └── shared/ # Shared types & constants
│
├── build/ # Build resources (entitlements)
├── scripts/ # Build & icon generation scripts
├── release/ # Build output
└── assets/ # Static assets & icons
- Launch the application
- Select a screen or window from the source picker
- Configure settings (quality, audio, webcam)
- Click Start Recording (or press the record button)
- Click Stop Recording when finished
- Recording is automatically saved to your output folder
- Click the Pen icon to enable annotations
- Select your tool, color, and thickness
- Draw directly on screen while recording
- Click Clear to remove all annotations
- Close the overlay when done
- Click the Camera icon to enable webcam
- Select your camera device if multiple are available
- Choose shape (circle/square) and position
- Webcam appears as overlay in your recording
- After recording, click Open in Editor
- Use the timeline to set trim points
- Click Apply Trim to cut the video
- Click Export to save
- Requires granting Screen Recording permission (System Settings > Privacy & Security > Screen Recording)
- Camera and Microphone permissions are requested on first use
- Supports both Intel (x64) and Apple Silicon (arm64) Macs
- AppImage requires FUSE (installed by default on most distributions)
- Screen capture uses PipeWire/XDG portal on Wayland, X11 capture on X.org
- Some window managers may require a compositor for transparent overlay windows
- System audio capture requires Windows 10+
- App is unsigned (SmartScreen warning on install)
Future enhancements planned:
- Custom keyboard shortcuts
- Cloud upload integration (Google Drive, Dropbox)
- GIF export option
- Watermark support
- Additional video compression options
- Auto-update mechanism
- macOS and Linux support
MIT
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request