React getUserMedia hook

Use getUserMedia safely in React.

`useWebcam()` wraps browser camera lifecycle work: requesting streams, attaching a video ref, tracking permission state, switching devices, capturing screenshots, and stopping tracks.

Custom camera controls

import { useWebcam } from 'react-webcam-kit';

export function CameraControls() {
  const camera = useWebcam({
    audio: false,
    startOnMount: false,
    onError(error) {
      console.error(error.type, error.message);
    },
  });

  return (
    <>
      <video ref={camera.videoRef} autoPlay playsInline muted />
      <button onClick={() => void camera.start()}>Start</button>
      <button onClick={camera.stop}>Stop</button>
      <button onClick={() => console.log(camera.getScreenshot())}>Capture</button>
      <p>Status: {camera.status}</p>
      <p>Permission: {camera.permission}</p>
    </>
  );
}

What the hook handles

• Secure browser checks and normalized camera errors.
• Preflight permission UI with `useCameraPermissions()`.
• Media stream start, stop, restart, and unmount cleanup.
• Exact camera device switching after device selection.
• Front/back facing-mode switching for mobile camera flows.
• Data URL, Blob, canvas, and ImageData capture helpers.

Camera access requires HTTPS or localhost. In SSR frameworks, render camera UI on the client.

Related guides