use-device-camera

A React hook for easy camera device integration, providing access to media streams, device enumeration, track capabilities, and image capture.

see demo: https://josephmg.github.io/use-device-camera/

Installation

npm install use-device-camera

Usage

1. Wrap your app with CameraProvider

First, wrap your component tree with CameraProvider. This manages the media stream and permissions.

import { CameraProvider } from 'use-device-camera';

function App() {
  return (
    <CameraProvider
      initOnMount={true}
      defaultConstraints={{ video: true, audio: false }}
      onPermissionError={(err) => console.error('Permission failed:', err)}
    >
      <MyCameraComponent />
    </CameraProvider>
  );
}

2. Access the Camera Stream

Use the useCamera hook to access the current MediaStream, list of devices, and permission states.

import { useEffect, useRef } from 'react';
import { useCamera } from 'use-device-camera';

function MyCameraComponent() {
  const videoRef = useRef<HTMLVideoElement>(null);
  const { stream, devices, loadDevices } = useCamera();

  useEffect(() => {
    if (videoRef.current && stream) {
      videoRef.current.srcObject = stream;
    }
  }, [stream]);

  return (
    <div>
      <video ref={videoRef} autoPlay playsInline muted />
      <button onClick={loadDevices}>Refresh Devices</button>
      <ul>
        {devices.map((device) => (
          <li key={device.deviceId}>{device.label}</li>
        ))}
      </ul>
    </div>
  );
}

3. Control Media Track (Zoom, Focus, etc.)

Use useMediaTrack to access the underlying video track and apply constraints.

import { useMediaTrack } from 'use-device-camera';

function Controls() {
  const { applyConstraints, capabilities, settings } = useMediaTrack();

  const handleZoom = (event) => {
    applyConstraints({ advanced: [{ zoom: Number(event.target.value) }] });
  };

  if (!capabilities?.zoom) return null;

  return (
    <input
      type="range"
      min={capabilities.zoom.min}
      max={capabilities.zoom.max}
      step={capabilities.zoom.step}
      onChange={handleZoom}
    />
  );
}

4. Capture Images

Use useImageCapture to take high-resolution photos.

import { useImageCapture } from 'use-device-camera';

function Snapshot() {
  const { takePhoto } = useImageCapture();

  const handleCapture = async () => {
    const blob = await takePhoto();
    if (blob) {
      const url = URL.createObjectURL(blob);
      window.open(url);
    }
  };

  return <button onClick={handleCapture}>Take Photo</button>;
}

API

<CameraProvider />

Prop	Type	Default	Description
initOnMount	boolean	true	Request camera access automatically on mount.
defaultConstraints	MediaStreamConstraints	{ video: true, audio: true }	Initial constraints for getUserMedia.
onPermissionError	(err: unknown) => void	undefined	Callback for permission errors.

useCamera()

Returns:

Property/Function	Type/Return Type
stream	MediaStream | null
devices	MediaDeviceInfo[]
requestPermission(constraints?)	Promise<MediaStream | null>
loadDevices()	Promise<MediaDeviceInfo[]>
cameraPermissionState	PermissionState
audioPermissionState	PermissionState

useMediaTrack()

Returns:

Property/Function	Type/Return Type
trackManager	MediaStreamTrack | undefined
applyConstraints(constraints)	Promise<void>
settings	MediaTrackSettings
capabilities	MediaTrackCapabilities

useImageCapture()

Returns:

Property/Function	Type/Return Type
imageCaptureManager	ImageCapture | undefined
takePhoto(settings?)	Promise<Blob | null>
photoSettings	PhotoSettings
photoCapabilities	PhotoCapabilities

License

MIT