Webcam Mirror

Webcam Mirror - Virtual Mirror for Makeup & Hair Check

A comprehensive online webcam mirror tool that turns your camera into a virtual mirror. Perfect for checking makeup, hair, outfit coordination, and overall appearance. Features include mirror flip, zoom control, brightness adjustment, contrast enhancement, saturation tweaks, and various filters. Take photos and save them for reference.

How does the webcam mirror work?

The webcam mirror uses your device's camera and displays the feed on screen with mirror transformation:

1. Click 'Start Mirror' to activate your camera
2. The video feed is displayed on a canvas element
3. Canvas transform scale(-1, 1) flips the image horizontally
4. Real-time rendering at 60fps for smooth mirror experience
5. All processing happens in your browser - no video uploaded

The mirror effect makes it feel like looking at a real mirror, which is more intuitive for checking appearance, applying makeup, or adjusting hair.

Technical implementation:
- getUserMedia API for camera access
- Canvas 2D context for rendering
- requestAnimationFrame for smooth updates
- CSS filters for effects

Why is the mirror flipped by default?

The mirror is flipped (mirrored) by default because:

Natural Experience:
- Mirrors in real life show a reversed image
- When you move right, your reflection moves right
- More intuitive for personal grooming and appearance checks
- Easier to apply makeup or adjust hair

How it works:
- Canvas transform: scale(-1, 1) flips the image horizontally
- Your right side appears on the right of the screen
- Matches the experience of looking in a real mirror

Unflipped view:
- Click 'Flip Mirror' to toggle the mirrored effect
- Shows how others see you (true camera view)
- Useful for checking how you look on video calls
- Text and logos appear correct (not reversed)

Most people prefer the mirrored view for personal use, but you can switch anytime!

What can I use the webcam mirror for?

The webcam mirror is versatile for many personal care tasks:

Makeup Application:
- Check makeup application and blending
- Verify lipstick application
- Ensure even foundation coverage
- Perfect eyeliner and mascara
- Test different makeup looks

Hair Styling:
- Check hairstyle from all angles
- Verify hair parting and styling
- Spot flyaways or messy sections
- Test different hairstyles
- Check hair color and highlights

Outfit & Accessories:
- Coordinate outfit pieces
- Check jewelry and accessories
- Verify clothing fit and style
- Test color combinations
- Ensure professional appearance

Grooming:
- Check facial hair grooming
- Verify clean appearance
- Inspect teeth and smile
- General hygiene checks

Video Call Prep:
- Check appearance before important calls
- Test lighting and background
- Verify camera angle
- Practice expressions and posture

Creative Uses:
- Practice makeup tutorials
- Test costume makeup
- Create content for social media
- Self-portrait reference for artists

How do I use the zoom feature?

The zoom feature helps you focus on specific areas:

How to zoom:
1. Use the Zoom slider (100% - 300%)
2. Higher values = closer view
3. Zoom updates in real-time

Use cases:
- 100-150%: Full face and upper body view
- 150-200%: Focus on face for makeup
- 200-300%: Detailed view for eyes, lips, or brows

Tips:
- Zoom in for detailed work (eyeliner, lipstick)
- Zoom out to see overall appearance
- Combine with good lighting for best results
- Adjust position to keep face centered

Note: Higher zoom may show more pixels/grain, which is normal for digital zoom. For best quality, move closer to your camera instead of using extreme zoom.

What do the brightness, contrast, and saturation controls do?

These controls adjust the mirror display to improve visibility:

Brightness (50-200%):
- Makes image lighter or darker
- Increase if room is too dark
- Decrease if image is washed out
- 100% = normal brightness
- Useful for compensating poor lighting

Contrast (50-200%):
- Adjusts difference between light and dark areas
- Increase for more vivid, dramatic look
- Decrease for softer, flatter look
- 100% = normal contrast
- Helps details stand out

Saturation (0-200%):
- Controls color intensity
- 0% = black and white (grayscale)
- 100% = normal colors
- 200% = vibrant, intense colors
- Useful for checking makeup color matching

Blur (0-10px):
- Softens image with Gaussian blur
- Can hide imperfections
- Creates soft-focus effect
- 0px = sharp image

These controls DON'T change your actual appearance - they only adjust how the mirror displays the image. Use them to compensate for poor lighting or to see details better.

What are the filter effects?

Filters apply special effects to the mirror:

None:
- Normal color mirror
- No special effects applied
- True-to-life colors

Grayscale:
- Black and white mirror
- Removes all color
- Classic vintage look
- Helps focus on lighting and contrast
- Useful for checking makeup intensity without color distraction

Sepia:
- Warm, brownish tone
- Vintage photograph effect
- Nostalgic aesthetic
- Warmer than grayscale

Invert:
- Reverses all colors
- Dark becomes light, light becomes dark
- Artistic effect
- Can reveal details hidden in similar tones

Filters are purely visual effects and don't affect photos you take (unless active when capturing). They're fun for creative looks or practical for focusing on specific aspects like contrast or detail.

How do I take and save photos?

The photo feature captures your current mirror view:

Taking a photo:
1. Adjust mirror settings (zoom, brightness, filters) as desired
2. Click 'Take Photo' button
3. Current frame is captured instantly
4. Photo appears in preview below mirror

What's captured:
- Exact current view from mirror
- All active filters and adjustments
- Current zoom level
- Mirror flip state (mirrored or unflipped)

Saving the photo:
1. Review the captured photo
2. Click 'Download' button
3. Photo saves as PNG file
4. Filename includes timestamp (mirror-2024-01-15-143022.png)

Uses for saved photos:
- Compare makeup looks over time
- Share with friends for outfit advice
- Reference for hairstylist or makeup artist
- Before/after comparisons
- Document skincare progress
- Create makeup tutorials

Tip: Take multiple photos from different angles or with different settings to compare later.

Is my video private and secure?

Yes, your privacy is completely protected:

Local Processing:
- All video processing happens in your browser
- Nothing is uploaded to any server
- Video feed never leaves your device
- No recording unless you take a photo
- No storage of video data

What happens to your camera feed:
1. Camera → Your browser memory (temporarily)
2. Rendered to canvas in real-time
3. Displayed on your screen
4. Discarded immediately (not saved)

When you take a photo:
- Only captured when you click 'Take Photo'
- Saved only if you click 'Download'
- Stored locally on your device
- Never uploaded anywhere
- You have complete control

Browser permissions:
- You must grant camera access
- You can revoke access anytime
- Tool only runs when page is open
- Camera stops when you close page or stop mirror
- We never request the camera until you click 'Start Mirror' (no prompt on page load)

No tracking:
- No analytics on your usage
- No logging of when you use mirror
- No data collection of any kind
- 100% client-side application

You can verify this by:
- Using with internet disconnected (works offline after page load)
- Checking browser developer tools (no network requests for video)
- Reviewing open-source code if available

Which browsers and devices support this webcam test?

The tool uses the standard getUserMedia (WebRTC) API, which is supported by all modern browsers:

Supported:
- Chrome / Edge / Brave (desktop & Android)
- Firefox (desktop & Android)
- Safari (macOS 11+ and iOS/iPadOS 14.3+)
- Opera and most Chromium-based browsers

Secure context required:
- getUserMedia only works on HTTPS pages (or localhost). On a plain http:// page the browser hides navigator.mediaDevices entirely, so the tool will show a 'requires HTTPS' message instead of a camera.

iOS Safari notes:
- Camera works only inside Safari (and apps using SFSafariViewController); some in-app browsers block it
- The video element must be inline (we set playsinline) or iOS would force fullscreen playback
- iOS may label the front camera 'user' and the back camera 'environment'

Why are camera names hidden at first?
- For privacy, browsers return empty device labels from enumerateDevices() until you grant camera permission. That is why the dropdown shows generic 'Camera 1 / Camera 2' before you start, and real model names only appear after you click 'Start Mirror' and approve access.

The camera won't start - how do I fix permission and 'in use' errors?

Common camera problems and fixes:

Permission denied (NotAllowedError):
- You (or your browser) blocked camera access
- Click the camera/lock icon in the address bar → Site settings → set Camera to 'Allow', then reload
- On macOS also check System Settings → Privacy & Security → Camera
- On Windows check Settings → Privacy → Camera

Camera in use / black screen (NotReadableError):
- Another app already holds the camera (Zoom, Teams, OBS, Skype, FaceTime)
- Close those apps or other browser tabs using the camera, then retry
- A reboot clears a stuck camera driver on Windows

No camera detected (NotFoundError):
- Check the cable / USB connection for external webcams
- Confirm the device appears in your OS device manager
- Try a different USB port

Wrong or constrained settings (OverconstrainedError):
- The selected resolution isn't supported by that camera; pick a lower preset (e.g. 720p)

Still stuck:
- Try a different browser to isolate a browser vs. hardware issue
- A camera that fails in every app likely needs a driver reinstall or repair

What is the Camera Info panel - requested vs. actual resolution?

The Camera Info panel turns this from a vanity mirror into a real diagnostic instrument. After you start the camera it reads the live MediaStreamTrack with getSettings() and getCapabilities():

Requested vs. delivered:
- The resolution dropdown sends a width/height 'ideal' hint to the browser
- The browser is free to give you something close but different (a 1080p request often returns 1280×720 on a 720p sensor)
- 'Actual Resolution' shows what the camera truly delivered via getSettings().width/height - not what you asked for

What each field means:
- Actual Resolution: real pixel dimensions of the stream
- Frame Rate: negotiated frames per second (e.g. 30 fps)
- Aspect Ratio: width ÷ height (1.778 = 16:9, 1.333 = 4:3)
- Device: the camera's real label (after permission)
- Facing Mode: 'user' (front) or 'environment' (rear) on phones
- Capabilities: the maximum resolution, fps, zoom and torch the hardware reports via getCapabilities()

Export for QA records:
- Click 'Export Info (JSON)' to download the full report, or 'Copy' to copy it
- Repair techs can attach this verifiable record to a ticket to prove a replaced or repaired webcam delivers its rated resolution and frame rate

Key Features

• Live Camera Info panel: actual resolution, frame rate, facing mode and capabilities via getSettings()
• Export the camera diagnostic report as JSON for QA / repair records
• Requests camera access only on Start (no permission prompt on page load)
• Real-time webcam mirror with 60fps rendering
• Canvas transform scale(-1, 1) for mirror flip
• Mirror flip toggle (mirrored/unflipped view)
• Multiple camera selection support
• Resolution options (HD 720p, Full HD 1080p, SD 480p)
• Zoom control (100-300%)
• Brightness adjustment (50-200%)
• Contrast adjustment (50-200%)
• Saturation control (0-200%)
• Blur effect (0-10px)
• Filter effects (Grayscale, Sepia, Invert)
• One-click filter reset
• Fullscreen mode for immersive experience
• Photo capture with current settings
• Download photos as PNG
• Timestamp in filenames
• Real-time preview updates
• Smooth 60fps animation
• Responsive design for all screen sizes
• Dark mode interface support
• 100% client-side processing
• No video upload or storage
• Complete privacy and security
• Works offline after initial load
• No registration required