मुफ़्त वेबकैम फ़ोटो बूथ
अपने ब्राउज़र में सीधे अपने वेबकैम से फ़ोटो लें। फ़िल्टर, टाइमर लागू करें और अपने शॉट्स को स्थानीय रूप से सहेजें।
यह कैसे काम करता है
- कैमरा अनुमति दें: "कैमरा शुरू करें" पर क्लिक करें और जब ब्राउज़र पूछे तो अनुमति दें।
- विकल्प समायोजित करें: फ़िल्टर चुनें, मिरर मोड सक्षम करें और यदि आप खुद को तैयार करना चाहते हैं तो टाइमर सेट करें।
- कैप्चर करें और डाउनलोड करें: "फ़ोटो लें" पर क्लिक करें। तस्वीरें गैलरी में जमा होती हैं, डाउनलोड के लिए तैयार।
अक्सर पूछे जाने वाले प्रश्न
क्या मेरी तस्वीरें ऑनलाइन भेजी जाती हैं?
नहीं। सारा प्रसंस्करण MediaDevices API के माध्यम से आपके ब्राउज़र में होता है; छवियाँ कभी आपके डिवाइस से नहीं जातीं।
कैमरा शुरू क्यों नहीं हो रहा?
जाँचें कि आपने ब्राउज़र सेटिंग्स में कैमरा एक्सेस अनुमति दी है, कि साइट HTTPS पर परोसी गई है (आवश्यक) और कि कोई अन्य ऐप कैमरा का उपयोग नहीं कर रहा।
क्या मैं कई वेबकैम के बीच चुन सकता हूँ?
हाँ। यदि कई कैमरे कनेक्ट हैं, तो "कैमरा" पिकर उन सभी को सूचीबद्ध करता है: अंतर्निहित वेबकैम, बाहरी USB वेबकैम, वर्चुअल कैमरा।
How browser webcams actually work
Browser camera access is governed by the W3C Media Capture and Streams specification. The entry point is navigator.mediaDevices.getUserMedia(): a function the page calls with a constraints object describing the kind of stream it wants. The browser shows the permission prompt; if you allow it, the function resolves with a MediaStream object containing one or more video tracks. The page binds that stream to a <video> element via video.srcObject = stream, the live feed shows on screen, and capturing a frame is then a matter of drawing the video onto an HTML5 <canvas> at the moment the user clicks Take Photo. The canvas is exported via canvas.toBlob('image/jpeg'), which becomes the downloadable JPG. No frame ever leaves your device, the entire pipeline is in your browser's process.
The promise-based getUserMedia shipped unprefixed in Chrome 53 (September 2016) and Firefox 36 (February 2015). Safari was the holdout: webcam access from web pages didn't reach iOS until iOS 11 (September 2017), and the modern stable target is iOS 14.5 or later. By 2026 the API is essentially universal, caniuse puts global support above 97%.
Why HTTPS is mandatory
getUserMedia is gated to "secure contexts", HTTPS, localhost on desktop, or file:// in Firefox. HTTP-served pages cannot access the camera at all; the call rejects with a NotAllowedError. This is the single most common deployment-time bug for self-hosted variants of this kind of tool, and it's enforced by every modern browser uniformly. Mobile is even stricter: there's no localhost exemption on a phone, so testing camera tools on a local dev server requires a tunnelling tool like ngrok or a reverse proxy with TLS.
Constraints, how to ask for the right camera
The constraints object is the most complex part of the API. The common knobs:
- width / height: accept a literal number or an object with
min,ideal,max,exact.idealis the practical default; the browser gets as close as possible without rejecting cameras that can't match exactly.exactrejects if the hardware can't deliver. - facingMode:
'user'for the front-facing (selfie) camera or'environment'for the rear. On laptops with only one camera the constraint is silently ignored; on phones it's the cleanest way to pick the right lens without enumerating devices. - frameRate: most webcams cap at 30 fps; some external USB cameras hit 60.
- deviceId: for picking a specific device after enumerating with
navigator.mediaDevices.enumerateDevices(). Crucial nuance:labelis an empty string until the user has granted at least one camera permission this session, so a "pick your camera" dropdown that runs before any permission grant will show unlabeled IDs. The Camera dropdown above sidesteps this by populating only after Start Camera succeeds.
The camera light is your trust signal
On a Mac with a webcam from 2008 or later, the green LED next to the camera is wired to the same power rail as the sensor. macOS and the firmware enforce that the LED is on whenever the sensor is powered, Apple has designed this so even kernel-level malware cannot turn off the LED while the camera is recording. iOS implements the orange dot indicator at the top of the screen since iOS 14 (released September 2020), drawn by a system process that the app cannot suppress. Windows webcams use a similar approach on most modern devices, though enforcement is less universal, a few old USB webcams from 2010 had software-controlled LEDs. Linux varies by hardware.
The takeaway: trust the LED, not the website. A pure-browser tool like this one can sincerely promise nothing leaves your device, and the camera light gives you independent confirmation that the camera is actually off when the page says it is. The most common bug in webcam tools is forgetting to call stream.getTracks().forEach(t => t.stop()) on close, symptom: the camera light stays on after the user thinks they've shut it down. The Stop Camera button on this page calls that explicitly.
When you'd reach for a browser webcam tool
- Quick profile pictures for Slack, Discord, GitHub, social media, without installing a separate webcam app.
- Passport / ID-style photos taken at home for online forms (driver's licence renewal, visa applications). The browser-based privacy story matters here precisely because uploading a face photo to a third-party service is uncomfortable.
- Video conferencing previews: checking lighting, framing, and how a virtual background looks before joining a Zoom or Teams call.
- School and remote-work attendance: when a teacher or employer asks for a quick selfie to confirm presence.
- Reference shots for art and design: a hand pose, an object photo for a 3D model, a self-portrait sketch.
- Lightweight photo booth at events: running a laptop with a captive page so guests can take selfies without an app install.
- Mockups and prototyping: designers building flows that include a "take a selfie" step want a quick test page.
- Educational demos: teachers showing students how the modern web Camera API works.
The differentiator versus Photo Booth on macOS or the Camera app on Windows is that nothing is installed and nothing is uploaded, useful on locked-down work computers and shared kiosks where you can't install software.
Filters: what the CSS filter property gives you
The HTML5 canvas can apply CSS filter syntax through the ctx.filter property. The filters available above use the same primitives that any CSS rule can apply: grayscale(1) (full desaturation, equivalent to a luminance projection), sepia(1) (warm brown tone mimicking aged photographs), invert(1) (colour-negative), blur(5px) (Gaussian blur), brightness(1.4) (multiplies pixel intensity), and contrast(1.4) (pivots around mid-grey). They've been hardware-accelerated in every browser since Chrome 53 / Firefox 35 / Safari 9.1.
A subtle but important detail: CSS filters applied to the <video> element do not propagate to the canvas. To bake the filter into the saved JPG, the same filter has to be set on ctx.filter before drawImage. This page does that, so the on-screen preview matches the saved file pixel-for-pixel.
Common errors and what they mean
If Start Camera fails, the rejection comes back as a DOMException with one of these names:
- NotAllowedError: you (or a previous session) denied the permission, or the page isn't on HTTPS. Look at the address bar's site-permissions menu and make sure Camera is set to Allow or Ask.
- NotFoundError: no matching device. Most often happens when requesting
facingMode: 'environment'withexacton a desktop with no rear camera. - NotReadableError: hardware is in use by another app. Zoom, Teams, OBS or another browser tab has the camera open. Close them and retry.
- OverconstrainedError: the constraints couldn't be satisfied. Drop
exactrequirements or relax the resolution. - TypeError: the constraints object was empty. The call must request at least one of audio or video.
More questions
Why is my image upside-down or sideways?
Some Android cameras report misleading rotation in their EXIF metadata. The browser usually applies the rotation automatically before the video frame reaches the canvas, but older Samsung Internet versions and some embedded WebViews skip the step. If captures come out sideways, try rotating your device 90° before capture, or use the Rotate Image tool afterwards.
Why does the dropdown show "Camera 1, Camera 2" instead of names?
Because the browser hasn't yet been granted camera permission. enumerateDevices() returns labels (e.g. "FaceTime HD Camera") only after the user has approved camera access at least once in the current session, until then, only opaque IDs are returned. Click Start Camera once, allow access, and the dropdown will refresh with proper names.
Will the camera light stay on after I close the page?
No. The Stop Camera button explicitly stops every track in the stream, and modern browsers also stop tracks when the tab is hidden or the page unloads. If you ever see the camera LED stay on after closing a tab, it's a bug worth flagging, most often it means the page didn't call the cleanup function. On this tool, clicking Stop Camera or closing the tab releases the hardware immediately.
Can I record video, not just stills?
Not on this tool, it's a still-photo capture only. Recording video requires the MediaRecorder API and produces files in WebM, MP4 or MKV depending on the browser. Recording also has its own privacy implications (you're storing larger amounts of identifiable footage) so it's a separate use case worth treating with its own dedicated tool.
Does anything get sent to a server?
No. The video stream is delivered directly from the operating system to the browser; the canvas capture and JPG export happen via JavaScript locally; the gallery lives in browser memory and is downloaded straight to your device. Nothing about your camera, your face, or your photos leaves the page.