Free Online Webcam and Screen Recorder Tool

Technical Specification: Browser-Based Webcam & Screen Recorder

Overview

A single-file, client-side application designed to capture webcam input or screen activity using the native MediaRecorder API. The application operates entirely within the user's browser, ensuring privacy by keeping all media processing local.

Core Functionality

• Dual Capture Modes: Toggle between 'Screen Record' (entire screen, window, or tab) and 'Webcam Record' (via user-facing camera).
• Control Workflow: Start, Pause, Resume, and Stop recording controls.
• Preview Player: An integrated HTML5 video player to review the captured content before downloading.
• Instant Download: A generated download link for the resulting WebM video file.
• Settings Panel: Selectable quality presets (e.g., 720p, 1080p) and frame rate toggles (30fps/60fps).
• Visual Indicators: Real-time recording timer and a prominent 'Recording' status indicator.

User Interface Layout

• Header: Simple, clear descriptive title.
• Main Tool Area: A large, centered canvas/video element that acts as the viewfinder during recording and the playback player after recording.
• Control Bar: A row of persistent buttons below the viewport (Start, Pause, Stop) with distinct, intuitive iconography (using SVG for sharpness without external assets).
• Sidebar/Settings: A collapsible section for input source selection and quality settings.
• No Dark Mode/No Footer: The design must remain strictly light-mode with high-contrast, professional styling. No footer section is to be included.

Design & Styling

• Palette: Clean professional aesthetic. Use a palette of crisp whites, light greys, and a singular primary accent color (e.g., deep blue) for actionable buttons. Recording status should be highlighted with a soft red.
• Typography: System-native sans-serif fonts for readability and speed.
• Micro-interactions: Smooth CSS transitions for button hover states, recording status pulse animations, and container resizing.

Technical Constraints & Requirements

• Single File: All CSS, HTML, and JavaScript must be contained within a single index.html file. Do not use external libraries (jQuery, React, Vue, etc.) or external CSS frameworks.
• Responsiveness: Use CSS Flexbox/Grid to ensure the layout adapts to different screen sizes, ensuring the video container is always optimized for the device viewport.
• Sandbox Compatibility: The application must be fully functional when embedded within an <iframe> with minimal permissions (camera/microphone/display-capture).
• Browser APIs: Utilize navigator.mediaDevices.getUserMedia for webcam and navigator.mediaDevices.getDisplayMedia for screen capture.