Camera Mirror Test

Introduction

The DeviceHub Camera Mirror Test helps you compare mirrored self-view against a natural, unflipped camera preview so you understand which orientation you are actually seeing before a presentation, recording, or exam. Meeting applications frequently flip your own tile horizontally so raising your right hand feels like looking in a bathroom mirror, while participants on the other end often receive the unmirrored image that preserves true left-right relationships. Recording tools, exam proctoring software, and some browser capture APIs default the opposite way, which confuses speakers who rehearse with a mirrored preview then appear reversed on playback or in exported files. This free browser tool starts a live getUserMedia stream and lets you toggle a CSS-based horizontal mirror instantly without installing software or creating an account. Presenters practicing gestures, teachers checking whiteboard readability, makeup and lighting technicians, and anyone who needs legible text behind them benefit from knowing exactly which mode is active. Understanding mirror semantics prevents the common mistake of assuming what you see in self-view is what the audience sees on their screens. Streamers rehearsing on-camera pointing gestures use this page to align self-view comfort with how OBS or browser recorders capture the unmirrored MediaStreamTrack bitstream.

What this tool does

The page opens your selected camera through getUserMedia, renders a live HTMLVideoElement preview, and offers an explicit mirrored versus natural orientation control that you can flip at any time during an active stream. Mirrored mode applies a horizontal flip transform to the on-page preview container; it does not rewrite the underlying MediaStream bitstream or call applyConstraints on the track. That behavior mirrors how many conferencing UIs implement self-view comfort without changing what is encoded and transmitted to remote participants. You can switch videoinput devices if enumerateDevices lists multiple cameras and stop the stream when finished testing. Status text clarifies which mode is active so you are not guessing from muscle memory alone after switching between apps with different defaults. The tool's scope is orientation clarity and user education, not resolution measurement, FPS estimation, or permission diagnostics, those live in sibling camera tools on DeviceHub. Status copy clarifies that remote participants in typical meeting apps often receive the natural orientation even when your local tile appears mirrored for rehearsal comfort.

When to use it

Use this test when you are unsure whether a platform mirrors self-view only or the entire outbound feed, when practicing hand gestures and pointing for a talk or tutorial, when checking whether a whiteboard, poster, or slide behind you remains readable on camera, and when configuring OBS, browser recorders, or exam software that default to unmirrored capture. Makeup artists and lighting technicians often prefer mirrored preview because it matches a physical mirror; product demos that show logos or serial numbers need natural orientation so text does not appear backward in recordings. Run it after switching between phone front cameras, which native camera apps often mirror by default, and laptop webcams that typically do not. If your only question is whether the camera produces any image at all, use the Webcam Test first; come here when left-right semantics, rehearsal comfort, or readable background text matters for your session. Sign-language interpreters verifying hand orientation before a webinar benefit from rehearsing in the same mirrored or natural mode their platform will show to viewers.

How it works

navigator.mediaDevices.getUserMedia supplies a video MediaStream that is attached to a video element via srcObject assignment on the preview panel. Mirror state is implemented with a CSS transform such as scaleX(-1) on the preview wrapper element, which flips presentation pixels on the compositor without mutating encoded frames inside the MediaStreamTrack or invoking applyConstraints. Because the flip is purely presentational, screenshots of the page may look mirrored while a raw track forwarded to another peer through WebRTC might remain unflipped, exactly the dual behavior users notice in Zoom-style self-view versus remote participant view. MediaStreamTrack.getSettings() still reports unflipped capture dimensions and facingMode regardless of mirror toggle state, so resolution and aspect-ratio diagnostics remain unaffected. Stopping the test calls track.stop() on all video tracks to release hardware for other apps. The Permissions API governs whether getUserMedia can run at all; mirror toggling requires no additional permission beyond the initial camera grant. Secure HTTPS context is required for the capture pipeline in modern browsers, consistent with all DeviceHub camera diagnostics that rely on mediaDevices APIs. Because mirror toggling never calls applyConstraints, MediaStreamTrack.getSettings() dimensions stay constant while only the CSS presentation layer flips horizontally on the preview wrapper.

Step-by-step instructions

1. Open the Camera Mirror Test page on DeviceHub and click Start to invoke navigator.mediaDevices.getUserMedia, then allow camera permission when the browser presents the standard site access dialog for video capture on this origin.
2. Wait until the HTMLVideoElement preview shows continuous motion from your selected videoinput device, confirming the MediaStreamTrack is live and decoding before you evaluate orientation changes through the mirror toggle.
3. Hold up your right hand in natural unmirrored mode and observe which side of the screen your hand appears on, establishing a baseline for left-right mapping in the feed as encoded by the camera pipeline.
4. Enable mirrored mode using the on-page control and repeat the gesture, confirming the preview now behaves like a bathroom mirror where raising your right hand appears on the right side of the self-view image.
5. Place readable printed text, a whiteboard marker line, or a phone screen with words behind you and note which mode keeps letters legible without appearing reversed for your specific recording, rehearsal, or exam proctoring goal.
6. Click Stop when you finish comparing orientations so track.stop() releases the camera hardware, the OS indicator light turns off, and conferencing applications can access the sensor without NotReadableError conflicts.

Common problems

People often assume the flipped self-view tile in meeting apps is what remote participants see, when in many products only local preview is mirrored while outbound encoding stays in natural orientation. If text looks wrong in exported recordings, you likely rehearsed in mirrored mode while the recorder captured unmirrored frames, or the reverse orientation mismatch between tools. Virtual camera filters and OS studio effects may apply their own horizontal flip on top of the page CSS transform, doubling or canceling the effect unexpectedly on some machines. Some mobile browsers remember last-used facingMode from getUserMedia constraints but do not persist mirror preference across sites or browser sessions. If the toggle appears to do nothing, restart the stream after ensuring only one active preview element binds the MediaStream, because duplicate elements can show inconsistent transform inheritance from parent containers. Meeting apps with separate mirror-my-video toggles may still differ from this page, use DeviceHub to learn concepts, then align the vendor setting to your recording goal.

Privacy explanation

Preview frames remain entirely inside your browser during mirror comparison without transmission to DeviceHub servers. DeviceHub does not upload, transcode, or store your mirrored or natural video on remote infrastructure at any stage of the test you initiate locally. Camera access through getUserMedia is used only for the orientation comparison displayed in your tab. Stop the stream to turn off the camera indicator and release the sensor for other applications. Revoke permission for this origin through browser site settings whenever you prefer not to retain grant after finishing. Mirror state exists only in page CSS during your session and is not written to localStorage or synced across devices. No mirror preference is stored server-side; toggling orientation affects only the current preview session until you stop tracks or leave the page entirely.