Before a call or a stream, it's worth checking that the right camera and microphone are actually working — not just plugged in. This tool asks your browser for access to a camera and microphone, shows you the live video, and drives a level meter off the real audio input so you can see it respond as you talk. Nothing is recorded or sent anywhere: the stream stays local to your browser and stops the moment you close the tab or click stop.
Waiting for audio…
How to use the webcam test #
- Click Start camera and allow camera and microphone access when your browser asks.
- If you have more than one camera or microphone, pick the one you want to test from the dropdowns — the preview and meter switch over immediately.
- Watch the video preview for framing, focus, and lighting, and watch the meter bar while you talk to confirm your microphone is picking up sound at a reasonable level.
- Check the device info panel to see your camera's live resolution, aspect ratio, and frame rate, plus your microphone's sample rate and channel count.
- Click Take screenshot at any point to capture the current video frame, then Download PNG to save it.
- Click Stop camera when you're done — this releases the camera and microphone so no other app (or tab) is blocked from using them.
What's actually happening in the browser #
The tool calls navigator.mediaDevices.getUserMedia() to request a live camera and microphone stream, then plays the video track straight into a <video> element — there's no server involved, so the video never leaves your machine. The device dropdowns are populated with navigator.mediaDevices.enumerateDevices(), which only returns readable labels once permission has already been granted, which is why the lists fill in right after you click Start camera.
The level meter reads the audio track through the Web Audio API: the stream is piped into an AnalyserNode, which is polled roughly 30 times a second for the current volume. That volume is computed as the root-mean-square of the waveform samples in each poll — a standard way to turn raw audio samples into a single loudness number — then smoothed slightly so the bar doesn't flicker on every tiny fluctuation.
Take screenshot draws whatever the <video> element is currently showing onto a hidden <canvas> at the video's native resolution, using drawImage(). Download PNG then reads that canvas back out as a PNG with canvas.toBlob() and triggers a normal file download — the same technique the image converter uses to get pixels out of a canvas and into a file.
Where the device info comes from
The stats panel reads MediaStreamTrack.getSettings() on the live video and audio tracks, which reports the actual negotiated resolution, aspect ratio, and frame rate your browser settled on with the camera — not just what was requested — plus the microphone's sample rate and channel count. Browsers don't expose anything beyond that: no true hardware model, USB vendor/product ID, or serial number — the device names in the dropdowns above (driver-reported labels) are as close to a "model name" as the web platform gets.
Why a PNG and not a photo mode
PNG is lossless, so a screenshot of a webcam frame — useful for confirming framing, lighting, or that an on-screen overlay lines up correctly — comes out exactly as sharp as the source frame, with no compression artifacts to second-guess. There's no shutter effect or capture delay: the screenshot is just today's canvas frame, captured instantly.
Camera and microphone access
Browsers only grant camera and microphone access over a secure context (HTTPS, or localhost during development) and always ask for explicit permission first. If you deny access or later revoke it in your browser's site settings, the tool shows an error instead of a blank preview rather than failing silently.