A browser-based screen recording application with video trimming, sharing, and analytics features.
- Record your screen with microphone audio
- High-quality .webm output
- Simple start/stop controls
- Real-time recording status
- Trim videos to your desired length
- Visual time sliders for precise control
- Preview trimmed result before saving
- Download or share trimmed videos
- Upload videos and get shareable links
- Public viewing pages with embedded player
- Copy links to clipboard with one click
- Track video view counts
- Monitor average watch percentage
- See engagement metrics
- Persistent data across sessions
- Start the Application
npm install
npm run dev- Open your browser to http://localhost:3000
- Click "Start Recording" on the home page
- Select which screen or window to share
- Allow microphone access (optional)
- Click "Stop Recording" when finished
- Preview your recording
- After recording, click "Trim Video"
- Use the sliders to select start and end times
- The video preview updates as you adjust
- Click "Trim Video" to process
- Download or upload your trimmed video
- Click "Upload & Share" after recording
- Wait for the upload to complete
- Copy the generated share link
- Share the link with anyone
- Videos are publicly accessible via the link
- Open any shared video link
- Analytics are displayed below the video:
- Total Views: Number of times played
- Avg Watch %: Average completion percentage
- Engagement: Total milestone hits (25%, 50%, 75%, 100%)
- Analytics update in real-time as people watch
- Next.js 15 - React framework
- TypeScript - Type safety
- Tailwind CSS - Styling
- MediaRecorder API - Screen recording
- File-based Storage - Videos and analytics
- ✅ Chrome / Edge (Recommended)
- ✅ Firefox
⚠️ Safari (Limited MediaRecorder support)
Videos are stored locally in:
public/uploads/- Video filesdata/videos.json- Video metadatadata/analytics.json- Analytics data
MIT