📹 Screen Recorder

A simple lite web screen recording application with real-time preview, time limits, and microphone control. Built with React (frontend) and FastAPI (backend).

✨ Features

• 🎥 Screen Recording - Capture your entire screen, specific window, or browser tab
• 📱 Real-time Preview - Floating preview window (like smartphone camera apps) showing exactly what you're recording
• ⏱️ Time Limits - Preset durations: 10s, 30s, 1min, 2min, 5min, or Unlimited
• 🎤 Microphone Control - Toggle microphone on/off before recording
• 💾 Save & Download - Save recordings as WebM files or download locally
• 🎨 Modern UI - Beautiful gradient design with smooth animations
• 📊 Progress Tracking - Visual timer and progress bar during recording
• 🔄 Auto-stop - Recording stops automatically when time limit is reached

📋 Prerequisites

• Node.js (v14 or higher)
• npm (v6 or higher)
• Python (v3.8 or higher)
• pip (Python package manager)

🛠️ Installation

Clone the repository

git clone https://github.com/yourusername/screen-recorder.git
cd screen-recorder

Backend Setup (Python/FastAPI)

# Navigate to backend directory
cd backend

# Create virtual environment
python -m venv venv

# Activate virtual environment
# On Windows:
venv\Scripts\activate
# On Mac/Linux:
source venv/bin/activate

# Install dependencies
pip install -r requirements.txt

# Run the server
python main.py

The backend will run on http://localhost:8000

Frontend Setup (React)

# Open a new terminal and navigate to frontend directory
cd frontend

# Install dependencies
npm install

# Start the development server
npm start

The frontend will run on http://localhost:3000

📁 Project Structure

screen-recorder/
├── backend/
│   ├── main.py              # FastAPI server
│   ├── requirements.txt     # Python dependencies
│   └── recordings/          # Saved recordings folder (auto-created)
│
├── frontend/
│   ├── public/
│   │   └── index.html       # HTML template
│   ├── src/
│   │   ├── App.js           # Main React component
│   │   ├── App.css          # Styling
│   │   ├── index.js         # React entry point
│   │   └── index.css        # Global styles
│   └── package.json         # Node dependencies
│
└── README.md

🎯 How It Works

Recording Process

1. Permission Request: When you click "Start Recording", the browser asks for permission to capture your screen/audio
2. Screen Capture: The app uses navigator.mediaDevices.getDisplayMedia() to capture screen content
3. Audio Capture: Optional microphone capture using getUserMedia()
4. Stream Combination: Screen video and microphone audio are combined into a single MediaStream
5. Recording: The MediaRecorder API records the stream in WebM format
6. Real-time Preview: The same stream is displayed in a floating preview window
7. Time Management: If a time limit is set, a timer tracks duration and auto-stops recording
8. Save: Recorded chunks are combined into a Blob and sent to the backend or downloaded locally

Key Components

Frontend (React)

• State Management: Uses React hooks (useState, useRef, useEffect)
• MediaRecorder API: Handles recording functionality
• Stream Management: Manages screen and audio streams
• Floating Preview: Minimizable picture-in-picture style preview

Backend (FastAPI)

• POST /save-recording: Receives video blobs and saves to disk
• GET /download/{filename}: Serves recorded files
• GET /recordings: Lists all saved recordings
• CORS Enabled: Allows frontend to communicate with backend

🎮 Usage Guide

1. Select Recording Duration

Click on any time limit button:

• 10s - 10 seconds
• 30s - 30 seconds
• 1 min - 60 seconds
• 2 min - 120 seconds
• 5 min - 300 seconds
• Ilimitado - Unlimited (manual stop)

2. Configure Microphone

• Toggle the microphone button to enable/disable audio recording
• Green = Microphone ON
• Red = Microphone OFF

3. Start Recording

• Click "Iniciar Grabación" (Start Recording)
• Select the screen/window/tab you want to record
• Click "Share" or "Allow"

4. During Recording

• Floating Preview Window: Shows exactly what's being recorded
• Timer Display: Shows remaining time (if limit set)
• Progress Bar: Visual indicator of recording progress
• Recording Indicator: Red blinking dot shows recording is active
• Minimize Preview: Click "−" to minimize preview to a small circle

5. Stop Recording

• Auto-stop: Recording stops automatically when time limit is reached
• Manual stop: Click "Detener Grabación" (Stop Recording)
• Or close the screen sharing popup

6. Save Recording

• After stopping, a preview of your recording appears
• Click "Guardar Grabación" (Save Recording) to save to backend
• Or click "Descargar WebM" to download locally

🔧 API Endpoints

Method	Endpoint	Description
POST	/save-recording	Save video recording
GET	/download/{filename}	Download specific recording
GET	/recordings	List all recordings

🚢 Deployment

Deploy to GitHub Pages (Frontend only)

cd frontend
npm install gh-pages --save-dev

Add to package.json:

{
  "homepage": "https://yourusername.github.io/screen-recorder",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }
}

Deploy:

npm run deploy

Deploy Backend to Railway (Free)

1. Push backend to GitHub repository
2. Sign up at railway.app
3. Click "New Project" → "Deploy from GitHub repo"
4. Select your backend repository
5. Railway auto-detects FastAPI and deploys

🛠️ Troubleshooting

"Error: No se pudo acceder a la pantalla"

• Ensure you're using HTTPS or localhost
• Check browser permissions for screen capture
• Try using Chrome, Edge, or Firefox (Safari has limitations)

Preview not showing

• Check browser console for errors
• Ensure camera/microphone permissions are granted
• Try refreshing the page

Recording not saving

• Verify backend server is running on port 8000
• Check network tab for CORS errors
• Ensure recordings folder has write permissions

Microphone not working

• Check if microphone permission is granted
• Try toggling the microphone button off and on
• Check system audio settings

🎨 Technologies Used

Frontend

• React 18 - UI Framework
• MediaRecorder API - Recording functionality
• getDisplayMedia - Screen capture
• CSS3 - Animations and styling

Backend

• FastAPI - Web framework
• Uvicorn - ASGI server
• aiofiles - Async file operations

📝 Browser Support

Browser	Screen Capture	Audio Recording	Preview
Chrome	✅	✅	✅
Edge	✅	✅	✅
Firefox	✅	✅	✅
Safari	⚠️ Limited	✅	⚠️ Limited

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit changes (git commit -m 'Add AmazingFeature')
4. Push to branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details

🙏 Acknowledgments

• MediaRecorder API documentation
• FastAPI framework
• React community

🎯 Quick Start Commands

# Start Backend
cd backend
python -m venv venv
source venv/bin/activate  # or venv\Scripts\activate on Windows
pip install -r requirements.txt
python main.py

# Start Frontend (in another terminal)
cd frontend
npm install
npm start

# Open browser at http://localhost:3000

🎥 Demo Video

grabacion.1.webm

Made with ❤️ using React and FastAPI