A modern, professional web-based screen and voice recording application with advanced features, beautiful animations, and an intuitive user interface.
- Screen Recording: Capture your entire screen or specific applications
- Voice Recording: High-quality audio recording with noise suppression
- Dual Audio Support: Record system audio, microphone, or both simultaneously
- Fixed Control Panel: Always accessible recording controls at the bottom
- Animated Landing Page: Beautiful animations and floating elements
- Responsive Design: Works perfectly on desktop, tablet, and mobile
- Professional Design: Modern gradient backgrounds and smooth transitions
- Real-time Transcription: Automatic speech-to-text in multiple languages
- Multiple Export Formats: Download as video (WebM) or transcription (Word)
- Recording Timer: Live recording duration display
- Pause/Resume: Full control over recording sessions
- High-Quality Output: Optimized video and audio settings
- English (US)
- Arabic (Saudi Arabia)
- Spanish (Spain)
- French (France)
- German (Germany)
- Italian (Italy)
- Portuguese (Brazil)
- Russian (Russia)
- Japanese (Japan)
- Korean (Korea)
- Chinese (Simplified)
- Modern web browser (Chrome, Firefox, Safari, Edge)
- Microphone and camera permissions (for voice recording)
- Screen sharing permissions (for screen recording)
- Clone or download the repository
- Open
index.htmlin your web browser - Grant necessary permissions when prompted
- Start recording!
- Select "Screen" mode from the control panel
- Choose your audio source (System, Microphone, or Both)
- Click "Start Screen Recording"
- Select the screen or application to record
- Click "Stop" when finished
- Download your recording
- Select "Voice" mode from the control panel
- Choose your audio source
- Click "Start Voice Recording"
- Speak clearly into your microphone
- Click "Stop" when finished
- Download your audio file
- Real-time transcription appears during recording
- Download transcription as a Word document
- Supports multiple languages for accurate transcription
The control panel stays at the bottom of the screen for easy access during recording sessions. It includes:
- Recording mode selection (Screen/Voice)
- Audio source selection
- Language selection for transcription
- Recording controls (Start, Stop, Pause, Resume)
- Download options
- Live recording timer
- System Audio: Captures sounds from your computer
- Microphone: Records your voice with noise suppression
- Both: Combines system audio and microphone
- Gradient backgrounds and modern typography
- Smooth animations and hover effects
- Responsive grid layouts
- Professional color scheme
- Interactive elements with visual feedback
- HTML5: Semantic markup and structure
- CSS3: Modern styling with Flexbox and Grid
- JavaScript (ES6+): Advanced functionality and APIs
- Web APIs: MediaRecorder, SpeechRecognition, getUserMedia
- FontAwesome: Professional icons
- Google Fonts: Inter font family
- Chrome 66+
- Firefox 60+
- Safari 14+
- Edge 79+
- Video: WebM with VP9 codec
- Audio: WebM with Opus codec
- Transcription: Word document (.doc)
- Floating shapes in hero section
- Smooth scroll animations
- Hover effects on cards and buttons
- Recording status indicators
- Loading and transition animations
- Primary: Indigo (#6366f1)
- Secondary: Purple (#8b5cf6)
- Success: Green (#10b981)
- Warning: Orange (#f59e0b)
- Error: Red (#ef4444)
- Neutral: Gray scale
- Font: Inter (Google Fonts)
- Weights: 300, 400, 500, 600, 700
- Hierarchy: Clear heading and body text structure
The application is fully responsive and optimized for:
- Desktop: Full feature set with side-by-side layouts
- Tablet: Adapted layouts with touch-friendly controls
- Mobile: Stacked layouts with hamburger navigation
- Local Processing: All recording and transcription happens locally
- No Uploads: Your data never leaves your device
- Secure: No external dependencies for core functionality
- Permission-Based: Only requests necessary permissions
- Optimized Code: Efficient JavaScript and CSS
- Lazy Loading: Images and animations load as needed
- Minimal Dependencies: Lightweight and fast loading
- Caching: Browser caching for better performance
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
This project is open source and available under the MIT License.
If you encounter any issues or have questions:
- Check the browser console for error messages
- Ensure you have granted necessary permissions
- Try refreshing the page
- Contact us through the contact form
- Cloud storage integration
- Video editing capabilities
- Advanced audio filters
- Custom branding options
- Team collaboration features
- API for third-party integrations
ProScreen Recorder - Making professional recording simple and beautiful! 🎬✨