StreamLine - Advanced Web Screen Recorder

StreamLine is a powerful, browser-based screen recording application built with modern Web APIs. It allows users to capture their screen, camera, and microphone simultaneously with a premium, user-friendly interface.

🚀 Key Features

• 🖥️ High-Quality Screen Recording: Capture your entire screen, specific windows, or browser tabs in HD.
• 🎤 Dual Audio Capture: Smartly mixes System Audio and Microphone Input, allowing you to record standard commentary over gameplay or tutorials.
• 📸 Draggable Camera Bubble: A distinctive "Talking Head" circle that overlays your screen. You can drag it anywhere on the page.
• 🏎️ Floating Control Widget (PiP): Uses the advanced Document Picture-in-Picture API to pop out the controls.
  • Always-on-Top: Controls stay visible over other apps.
  • Confidence Monitor: Shows a live miniature preview of exactly what is being recorded (Screen + Camera layer).
  • Mirrored View: Keep an eye on your status from both the main window and the floating widget.
• ⏯️ Pause & Resume: Seamlessly pause your recording and resume later without splitting the video file.Smart timer adjusts automatically.
• ⏱️ Built-in Stopwatch: Live duration tracking that respects pause times.
• 🎨 Premium UI: A sleek, dark-themed interface with glassmorphism effects and smooth animations.

🛠️ Technology Stack

Built with 100% Vanilla JavaScript and native Web APIs – no libraries or backend required.

• Video Capture: navigator.mediaDevices.getDisplayMedia
• Audio Mixing: AudioContext (merges separate System and Mic streams)
• Recording Core: MediaRecorder API (WebM format)
• Floating Window: documentPictureInPicture API
• Styling: Modern CSS3 (Variables, Flexbox, Glassmorphism)

🚦 How to Run

Since this project uses permission-based APIs (Camera, Mic), it must be served over HTTPS or localhost. Opening the index.html file directly implies file:// protocol, which often blocks camera access.

1. Clone the repository
2. Start a local server inside the project folder:
   • Python 3: python -m http.server 8000
   • Node.js: npx serve .
   • VS Code: Use "Live Server" extension.
3. Open your browser to http://localhost:8000.

⚠️ Browser Compatibility

• Google Chrome / Edge (Recommended): Best support for all features, including the Document Picture-in-Picture API.
• Firefox / Safari: Basic recording works, but advanced PiP features may be limited or unavailable.

📝 Usage Guide

1. Setup: Toggle "Microphone" and "Camera Bubble" switches as needed.
2. Start: Click Start Recording.
3. Select Screen: Choose "Entire Screen" (required for full UI capture) or a specific window.
4. Pop Out: Click "Pop Out Controls" to detach the control panel. This window will float over your other apps and show you a preview of your recording.
5. Record: Perform your demo or tutorial. You can Pause anytime.
6. Stop: Click Stop to finish. The video will automatically download as a .webm file.

---

Created for the Advanced Agentic Coding Project.