ImageCapture API: Browser Support, Methods, Limitations

What is the ImageCapture API?

The ImageCapture API is a JavaScript interface that takes still photos and grabs live frames from a camera MediaStreamTrack. The W3C Web Real-Time Communications Working Group edits the spec, which exposes the ImageCapture constructor plus takePhoto, grabFrame, getPhotoCapabilities, and getPhotoSettings methods. Pages can also read camera capabilities like zoom, ISO, and white balance.

Which browsers does the ImageCapture API support?

Chromium-based desktop and Android browsers ship the ImageCapture API by default, while Firefox keeps it behind a preference flag and Safari does not support it, so global support sits at about 76% of installed browsers.

What are the key methods of the ImageCapture API?

The ImageCapture API gives a page two ways to pull pixels from a live camera and three ways to inspect or change the camera settings. The headline methods build on a single MediaStreamTrack passed into the constructor.

• new ImageCapture(track): Creates an ImageCapture object bound to a MediaStreamTrack of kind video. The track must come from getUserMedia or another live source, not a video element.
• takePhoto(photoSettings): Returns a Promise that resolves to a full-resolution Blob from a real camera shutter event. The optional photoSettings object accepts fillLightMode, redEyeReduction, imageHeight, imageWidth, and imageOrientation.
• grabFrame: Returns a Promise that resolves to an ImageBitmap snapshot at the live video resolution. It runs faster than takePhoto because it skips the shutter pipeline, so use it for QR scanning, barcode reading, or any preview-grade use case.
• getPhotoCapabilities: Returns a Promise with a PhotoCapabilities object that lists the camera's allowed ranges for redEyeReduction, imageHeight, imageWidth, and fillLightMode. Pair the values with applyConstraints on the track to push or pull the camera into a known state.
• getPhotoSettings: Returns a Promise with the current PhotoSettings object, including the active imageHeight, imageWidth, and fillLightMode. Read it after applyConstraints to confirm the camera honored the request.
• track.applyConstraints: Lives on the underlying MediaStreamTrack and accepts zoom, focusMode, exposureMode, whiteBalanceMode, iso, brightness, contrast, saturation, sharpness, torch, and pointsOfInterest constraints. Most photo-mode camera controls live here, not on the ImageCapture object.

Paste this snippet into the DevTools console of Chrome, Edge, or Opera. Click anywhere on the page and a still photo from the front camera appears below.

// Paste this into a Chrome, Edge, or Opera DevTools console to confirm ImageCapture support and snap a photo.
async function snapPhoto() {
  if (typeof ImageCapture === "undefined") {
    console.log("ImageCapture is not supported in this browser.");
    return;
  }

  const stream = await navigator.mediaDevices.getUserMedia({ video: true });
  const [track] = stream.getVideoTracks();
  const capture = new ImageCapture(track);

  const blob = await capture.takePhoto();
  console.log("Photo captured:", blob.type, blob.size, "bytes");

  const preview = document.createElement("img");
  preview.src = URL.createObjectURL(blob);
  document.body.appendChild(preview);

  track.stop();
}

document.body.addEventListener("click", snapPhoto, { once: true });

How do you enable the ImageCapture API in Firefox?

Firefox ships the ImageCapture API in every desktop and Android build, but the dom.imagecapture.enabled preference is off by default. Flip the preference in about:config to expose the constructor, and only takePhoto and grabFrame will work after that.

• Open about:config: Type about:config into the Firefox address bar and press Enter. Click Accept the Risk and Continue on the warning page.
• Search for the preference: In the search box at the top, paste dom.imagecapture.enabled and look for the boolean entry in the results list.
• Toggle the boolean to true: Click the toggle button on the right of the row. The value flips from false to true and the row turns bold to mark a user-set preference.
• Reload the tab: Press Ctrl plus R, or Cmd plus R on macOS, to reload any page that needs the API. The ImageCapture constructor becomes visible on window after the reload.
• Confirm support in DevTools: Open the Firefox DevTools console and run typeof ImageCapture. The console prints function once the flag is on, and undefined while it is off.

If typeof ImageCapture still prints undefined, the page is loaded over plain http or inside a private window with secure-context restrictions. Reload the page from an https origin or from http://localhost and the constructor shows up.

What are the known issues with the ImageCapture API?

The ImageCapture API ships unevenly across browsers and exposes hardware that misbehaves on the same chip across vendors. The painful edge cases tend to land on Safari, Firefox feature gaps, and camera control quirks.

• Safari and iOS have no ImageCapture: Safari on macOS, iPadOS, and iOS does not support takePhoto or grabFrame. Every iPhone and iPad visitor needs a hidden video plus canvas drawImage fallback.
• Firefox only ships takePhoto and grabFrame: Even with dom.imagecapture.enabled on, getPhotoCapabilities, getPhotoSettings, and the photoSettings argument throw NotSupportedError. Skip the capability calls entirely on Firefox or wrap them in a try-catch.
• Track must be live, not muted: The constructor throws DOMException InvalidStateError if the MediaStreamTrack is ended, muted by the user, or kind audio. Always check track.readyState equals live before you new up an ImageCapture.
• HTTPS or localhost only: ImageCapture depends on getUserMedia, which only resolves on secure contexts. Plain http production pages get a SecurityError on the very first user-media call, before ImageCapture even runs.
• takePhoto can return a video frame: Some Android camera drivers fall back to a grabFrame-style bitmap instead of a true shutter capture. Inspect blob.type and blob.size to spot the fallback, since a real photo is usually larger than 200 KB while a video frame is closer to 30 KB.
• Torch and pan-tilt-zoom are device-gated: torch, pan, tilt, and zoom only work on cameras whose driver advertises them in getCapabilities. iPhone and most laptop webcams skip the entries, so guard every applyConstraints call with the capability check.
• One ImageCapture per track: A single track can back many ImageCapture objects, but only one takePhoto can be in flight at a time. Concurrent calls reject with InvalidStateError, so chain them with await.
• Chrome deprecation watch: The Chromium team has discussed deprecating the API in favor of the newer Image Capture extension on MediaTrackSettings. The constructor still ships in stable Chrome, but plan a migration path if you build new code.

In my experience, the trickiest failure is the Firefox capability gap paired with optimistic feature detection. Code that checks typeof ImageCapture and assumes the full API throws halfway through the photo flow on Firefox, because getPhotoCapabilities is missing while the constructor is present. Feature-detect each method on the prototype, not just the constructor on window, and the cross-browser path stays clean.

Citations

All ImageCapture API version numbers and platform notes in this guide come from these primary sources:

• MDN Web Docs - ImageCapture interface: developer.mozilla.org/en-US/docs/Web/API/ImageCapture
• MDN Web Docs - MediaStream Image Capture API: developer.mozilla.org/en-US/docs/Web/API/MediaStream_Image_Capture_API
• MDN Web Docs - ImageCapture.takePhoto: developer.mozilla.org/en-US/docs/Web/API/ImageCapture/takePhoto
• MDN Web Docs - ImageCapture.grabFrame: developer.mozilla.org/en-US/docs/Web/API/ImageCapture/grabFrame
• W3C - MediaStream Image Capture spec: w3.org/TR/image-capture
• W3C Editor's Draft - mediacapture-image: w3c.github.io/mediacapture-image
• Chrome for Developers - Take photos and control camera settings: developer.chrome.com/blog/imagecapture
• Chrome Image Capture samples: googlechrome.github.io/samples/image-capture
• Chromium - Image Capture module README: chromium.googlesource.com/chromium/src/third_party/blink/renderer/modules/imagecapture
• Bugzilla - Implement ImageCapture API in Firefox: bugzilla.mozilla.org/show_bug.cgi?id=888177
• WebKit - Standards Positions: webkit.org/standards-positions
• GoogleChromeLabs - imagecapture polyfill: github.com/GoogleChromeLabs/imagecapture-polyfill