Camera Test

A camera test checks whether a browser can access a webcam, external USB camera, or built-in laptop camera and display a live preview. Run it before video meetings, online classes, interviews, livestreams, recordings, or any situation where the wrong camera, blocked permission, black preview, low resolution, or poor lighting would cause trouble. The tool uses browser camera permission, shows the actual stream the page can open, and can capture a local snapshot for visual inspection. It helps verify device selection, resolution, frame rate, aspect ratio, and basic image quality without uploading video frames. It cannot fix driver failures or hardware faults; if no stream appears, system privacy settings, other apps using the camera, cables, and drivers should be checked.

The camera test tool is built on the W3C Media Capture and Streams specification, using navigator.mediaDevices.getUserMedia(constraints) to access the camera. The constraints parameter is a JSON-like object specifying ideal, exact, min, and max values for resolution (width, height), frame rate, facing mode, and device ID. The browser's constraint solver negotiates these against the UVC (USB Video Class) descriptors reported by the camera firmware; when an exact constraint cannot be met, the call rejects with an OverconstrainedError — this is the mechanism behind the resolution support checker, which probes each resolution with { exact } constraints and marks failures. Once the stream is acquired, the video track exposes getSettings() (the actual applied values after negotiation), getCapabilities() (the hardware's full supported ranges), and getConstraints() (what was originally requested). The applied resolution, frame rate, aspect ratio, and facing mode are read from getSettings() and displayed. The live preview renders by setting the video element's srcObject to the MediaStream; the browser's media pipeline handles decoding, colorspace conversion, and GPU-accelerated rendering without JavaScript pixel manipulation. For still captures, CanvasRenderingContext2D.drawImage(videoElement, 0, 0) snapshots the current decoded video frame onto a hidden canvas, and toDataURL('image/png') serializes it as a PNG data URL. enumerateDevices() lists all available media input devices — note that device labels are empty strings until the user has granted camera permission at least once, a fingerprinting-prevention measure. Calling track.stop() releases the camera hardware and turns off the indicator light; setting videoElement.srcObject = null detaches the rendering pipeline. getUserMedia requires a secure context (HTTPS or localhost) and triggers a per-origin permission prompt; the camera indicator light is enforced at the OS level and cannot be bypassed by the page.

• Constraint negotiation: The browser solver matches ideal/exact/min/max values against UVC hardware descriptors — { exact } probes fail with OverconstrainedError when the sensor cannot deliver the requested resolution, which is how the resolution support grid is populated.
• Track introspection: getSettings() returns the actually applied resolution, frame rate, aspect ratio, and facingMode after negotiation — these may differ from the requested ideal values when USB bandwidth or sensor capabilities are constrained.
• enumerateDevices privacy: Device labels are empty strings until getUserMedia permission is granted at least once per origin — a spec-mandated anti-fingerprinting measure that also means the device selector shows generic names on first visit.
• Canvas still capture: drawImage() copies the decoded video frame from the GPU compositor into a 2D pixel buffer without re-encoding; toDataURL('image/png') then serializes it as a lossless PNG — the frame never leaves the browser's memory.
• Facing mode: The VideoFacingModeEnum is read from track.getSettings().facingMode ('user' for front, 'environment' for rear, 'left'/'right' for external) — not all desktop USB cameras report orientation, so the field may show 'unknown'.
• Stream lifecycle: track.stop() releases the camera hardware and turns off the OS-level indicator light; srcObject = null detaches the rendering pipeline — both are needed to fully release the device so other applications can acquire it.
• Security model: getUserMedia requires a secure context (HTTPS or localhost), triggers a per-origin permission dialog, and the camera indicator is enforced at the OS/kernel level — the page cannot circumvent any of these three gates.