react-camera-pro

The Camera component exposes a set of imperative methods through a ref. These methods allow you to interact with the camera hardware and capture images directly.

Available methods and properties:

• takePhoto(type?: 'base64url' | 'imgData'): Captures a photo. Returns a string (if type is 'base64url') or ImageData (if type is 'imgData').
• switchCamera(): Toggles between the available facing modes. Returns the new FacingMode ('user' or 'environment').
• getNumberOfCameras(): Returns the total number of cameras detected.
• toggleTorch(): Toggles the device's flashlight/torch. Returns a boolean indicating the new state.
• torchSupported: A boolean property indicating if the current device supports a torch.

import { useRef } from 'react';
import { Camera } from 'react-camera-pro';

// Note: The type of the ref is CameraType
const cameraRef = useRef<any>(null);

const handleCapture = () => {
  if (cameraRef.current) {
    const photo = cameraRef.current.takePhoto('base64url');
    console.log(photo); // string
  }
};

const handleSwitch = () => {
  if (cameraRef.current) {
    const newMode = cameraRef.current.switchCamera();
    console.log("New mode:", newMode);
  }
};

<Camera ref={cameraRef} />

The Camera component accepts several props to control its behavior, camera selection, and error messaging.

Key props include:

• facingMode: Specifies whether to use the 'user' (front) or 'environment' (back) camera.
• aspectRatio: Sets the video aspect ratio. Can be 'cover' or a numeric ratio like 16/9 or 4/3.
• videoSourceDeviceId: A specific device ID to use for the video source.
• errorMessages: An object containing custom strings for different error states:
  • noCameraAccessible
  • permissionDenied
  • switchCamera
  • canvas
• videoReadyCallback: A function called when the video stream is ready.
• numberOfCamerasCallback: A function called with the total number of available cameras.

<Camera 
  facingMode="environment" 
  aspectRatio={16/9} 
  errorMessages={{
    noCameraAccessible: "No camera found",
    permissionDenied: "Please allow camera access",
    switchCamera: "Could not switch camera",
    canvas: "Canvas error"
  }}
  videoReadyCallback={() => console.log("Camera is ready!")}
/>

The Camera component exposes an imperative API via ref. You can use this ref to trigger actions like taking photos, switching cameras, or toggling the flashlight.

Available Methods:

• takePhoto(type?: 'base64url' | 'imgData'): Captures a frame from the current video stream.
  • If type is 'imgData', it returns an ImageData object.
  • If type is 'base64url' (or omitted), it returns a Base64 encoded JPEG data URL.
  • Throws an error if no camera is accessible or if the canvas is not supported.
• switchCamera(): Toggles between the 'user' and 'environment' facing modes. Returns the new FacingMode.
• getNumberOfCameras(): Returns the current number of available video input devices.
• toggleTorch(): Toggles the camera's flashlight (torch) on or off. Returns the new boolean state.
• torchSupported: A boolean property on the ref indicating if the current device/stream supports the torch feature.

import { useRef } from 'react';
import { Camera } from 'react-camera-pro';

// Note: The ref type is 'unknown' in the source, 
// but you can cast it to access the methods below.
const cameraRef = useRef<any>(null);

const handleCapture = () => {
  const photo = cameraRef.current.takePhoto('base64url');
  console.log(photo);
};

const handleSwitch = () => {
  cameraRef.current.switchCamera();
};

const handleTorch = () => {
  if (cameraRef.current.torchSupported) {
    cameraRef.current.toggleTorch();
  }
};

return (
  <Camera ref={cameraRef} />
);

The Camera component accepts several props to control its behavior, appearance, and callbacks.

• facingMode: Sets the preferred camera direction. Defaults to 'user'. Valid values are typically 'user' or 'environment'.
• aspectRatio: Controls how the camera view fills its container. Defaults to 'cover'.
• videoSourceDeviceId: An optional specific device ID to use for the video stream.
• numberOfCamerasCallback: A callback function that receives the total number of available video input devices whenever it changes.
• videoReadyCallback: A callback function triggered when the video stream has successfully loaded data.
• errorMessages: An object allowing you to override default error strings for:
  • noCameraAccessible
  • permissionDenied
  • switchCamera
  • canvas

<Camera 
  facingMode="environment" 
  aspectRatio="contain" 
  numberOfCamerasCallback={(count) => console.log(count)} 
  videoReadyCallback={() => console.log('Video is ready!')}
/>