网络摄像头照片，免费

工作原理

1. 授权摄像头：点击「启动摄像头」并在浏览器提示时授予访问权限。
2. 调整选项：选择滤镜，启用镜像模式，并设置计时器以便在触发前就位。
3. 拍摄并下载：点击「拍照」。照片会累积在画廊中，可单独下载或批量下载。

常见问题

我的照片会被发送到网上吗？

不会。所有处理都通过 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. ideal is the practical default; the browser gets as close as possible without rejecting cameras that can't match exactly. exact rejects 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: label is 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' with exact on 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 exact requirements 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.

相关工具