React webcam capture

Capture webcam screenshots in React.

`react-webcam-kit` gives React apps a typed webcam component and hooks for capturing still frames as Data URLs, Blobs, canvases, or ImageData.

Capture a photo as a Blob

import { useRef } from 'react';
import { Webcam, type WebcamHandle } from 'react-webcam-kit';

export function PhotoCapture() {
  const webcamRef = useRef<WebcamHandle>(null);

  async function capture() {
    const blob = await webcamRef.current?.getScreenshotBlob({
      format: 'image/jpeg',
      quality: 0.9,
      width: 1280,
    });

    if (!blob) return;
    console.log(new File([blob], 'capture.jpg', { type: blob.type }));
  }

  return (
    <>
      <Webcam ref={webcamRef} audio={false} screenshotFormat="image/jpeg" />
      <button type="button" onClick={() => void capture()}>Capture</button>
    </>
  );
}

Why use this instead of raw canvas code?

• Handles camera start, stop, restart, and unmount cleanup.
• Supports Data URL, Blob, canvas, and ImageData output.
• Normalizes browser camera errors for better UI messages.
• Works with TypeScript and React 18 or React 19.

Camera access requires HTTPS or localhost. Screenshot methods can return `null` if the video is not ready or the browser blocks canvas capture.

Related guides