Universal Camera component for React.
Designed with focus on Android and iOS cameras. Works with standard webcams as well.
Note: WebRTC is only supported on secure connections (HTTPS). You can test and debug from
localhostin Chrome (this doesn't work in Safari).
react-webcam-pro is a community-maintained fork of react-camera-pro by Purple Technology.
The original package has not been actively maintained for over 2 years, leaving many users with unresolved issues — including React 19 compatibility, styled-components warnings, and various bug fixes. Many of us personally needed these updates, so we decided to fork the project, fix the outstanding issues, and continue maintaining it for the community.
A huge thank you to the original creators and contributors of react-camera-pro:
- Martin Urban — Original author
- Purple Technology — Original maintainers
- All the contributors who helped build and improve the original package
- ✅
<CropView />component — WhatsApp-style interactive crop after photo capture - ✅ Drag, resize, pinch — Cross-platform crop interactions (desktop + mobile)
- ✅ Aspect ratio lock — Lock crop to 1:1, 16:9, 4:3, or free-form
- ✅ Circle crop shape — Visual circular crop mask (output still rectangular)
- ✅ Ref-controlled —
cropImage(),resetCrop(),getCropArea()via ref - ✅ Zero new dependencies — Uses native Canvas & Pointer Events APIs
- ✅
videoConstraintsprop — Control resolution, frame rate, and anyMediaTrackConstraints(#52) - ✅ Mirrored photo capture —
takePhoto({ mirror: true })for selfie-correct photos (#74) - ✅ Fixed Firefox & iOS 15 crash —
getCapabilities()handled gracefully with developer warning (#75, #77) - ✅ Interactive example app — Try all props live at react-webcam-pro.vercel.app
- ✅ React 19 support — Works with React 16.8+, 17, 18, and 19
- ✅ styled-components v6 support — Compatible with both v5 and v6
- ✅ Fixed DOM warnings — No more
mirroredandaspectRatioprop warnings (#48) - ✅
errorMessagesis now truly optional (#63) - ✅
classNameandstyleprops — Style the camera container easily (#47) - ✅ Fixed camera switching with
videoSourceDeviceId— Device selection works correctly in environment mode (#62, #69) - ✅ Proper test suite — Jest + React Testing Library
- ✅ Modern toolchain — TypeScript 5, Rollup 4
👉 Full v1.0.0 release notes · All releases →
- 📱 Mobile-friendly camera solution (tested on iOS and Android)
- 📐 Fully responsive video element
- Cover your container or define aspect ratio (16/9, 4/3, 1/1, ...)
- 📸 Take photos as base64 JPEG or ImageData — with the same aspect ratio as the view
- 🪞 Mirror captured photos with
takePhoto({ mirror: true }) - ✂️ WhatsApp-style crop with
<CropView />— drag, resize, aspect ratio lock (new in v1.2.0) - 🎛️ Custom video constraints via
videoConstraintsprop (resolution, fps, etc.) - 🖥️ Works with standard webcams and other video input devices
- 🔄 Switch between user/environment cameras
- 🔦 Torch/flashlight support
- 🔢 Detect number of available cameras
- 🔮 Facing camera is mirrored, environment is not
- ⚡ Controlled via React Ref
- 📝 Written in TypeScript
npm install react-webcam-proPeer dependencies:
react,react-dom, andstyled-components(v5 or v6).
📖 Documentation:amareshsm.github.io/react-webcam-pro
🎮 Try it live:react-webcam-pro.vercel.app
importReact,{useState,useRef}from"react";import{Camera}from"react-webcam-pro";constApp=()=>{constcamera=useRef(null);const[image,setImage]=useState(null);return(<div><Cameraref={camera}/><buttononClick={()=>setImage(camera.current.takePhoto())}>
Take photo
</button><imgsrc={image}alt="Taken photo"/></div>);};exportdefaultApp;| Prop | Type | Default | Description |
|---|---|---|---|
facingMode | 'user' | 'environment' | 'user' | Default camera facing mode |
aspectRatio | 'cover' | number | 'cover' | Aspect ratio of the video (e.g. 16/9, 4/3) |
numberOfCamerasCallback | (numberOfCameras: number) => void | () => null | Called when the number of cameras changes |
videoSourceDeviceId | string | undefined | Specific video device ID to use |
videoConstraints | MediaTrackConstraints | undefined | Custom video constraints (resolution, fps, etc.) (new in v1.1.0) |
errorMessages | object (optional) | See below | Custom error messages |
videoReadyCallback | () => void | () => null | Called when the video feed is ready |
className | string | undefined | CSS class name for the container |
style | React.CSSProperties | undefined | Inline styles for the container |
All fields are optional. Defaults:
{noCameraAccessible: 'No camera device accessible. Please connect your camera or try a different browser.',permissionDenied: 'Permission denied. Please refresh and give camera permission.',switchCamera: 'It is not possible to switch camera to different one because there is only one video device accessible.',canvas: 'Canvas is not supported.',}| Method | Return Type | Description |
|---|---|---|
takePhoto(type?) | string | ImageData | Takes a photo. type is 'base64url' (default) or 'imgData' |
takePhoto(options?) | string | ImageData | Takes a photo with options. Pass { mirror: true } for mirrored capture (new in v1.1.0) |
switchCamera() | 'user' | 'environment' | Switches between front and back camera |
getNumberOfCameras() | number | Returns the number of available cameras |
toggleTorch() | boolean | Toggles the torch/flashlight |
torchSupported | boolean | Whether the torch is supported |
A separate <CropView /> component for WhatsApp-style interactive cropping. Use it after capturing a photo — it's fully independent from <Camera />.
import{Camera,CameraRef,CropView,CropResult}from"react-webcam-pro";constApp=()=>{constcamera=useRef<CameraRef>(null);const[photo,setPhoto]=useState<string|null>(null);const[cropped,setCropped]=useState<string|null>(null);if(cropped)return<imgsrc={cropped}alt="Cropped"/>;if(photo){return(<CropViewimage={photo}cropAspectRatio={1}// square lock (optional)onCropComplete={(result)=>setCropped(result.base64)}onCropCancel={()=>setPhoto(null)}/>);}return(<div><Cameraref={camera}/><buttononClick={()=>setPhoto(camera.current?.takePhoto()asstring)}>
📸 Capture
</button></div>);};| Prop | Type | Default | Description |
|---|---|---|---|
image | string | (required) | Base64 data URL of the image to crop |
cropAspectRatio | number | undefined | Lock crop to an aspect ratio (e.g. 1, 16/9). Free-form if omitted. |
cropShape | 'rect' | 'circle' | 'rect' | Visual crop shape (output is always rectangular) |
minCropSize | number | 0.1 | Minimum crop size as fraction of image (0–1) |
onCropComplete | (result: CropResult) => void | (required) | Called with the cropped image when confirmed |
onCropCancel | () => void | undefined | Called when the user cancels |
labels | { confirm?, cancel?, reset? } | Crop/Cancel/Reset | Custom button labels |
className | string | undefined | CSS class for the container |
style | CSSProperties | undefined | Inline styles for the container |
| Method | Return Type | Description |
|---|---|---|
cropImage() | CropResult | Programmatically trigger crop |
resetCrop() | void | Reset crop area to default |
getCropArea() | CropArea | Get current crop area (fractions 0–1) |
constApp=()=>{constcamera=useRef(null);const[numberOfCameras,setNumberOfCameras]=useState(0);const[image,setImage]=useState(null);return(<><Cameraref={camera}numberOfCamerasCallback={setNumberOfCameras}/><imgsrc={image}alt="Preview"/><buttononClick={()=>setImage(camera.current.takePhoto())}>
📸 Take photo
</button><buttonhidden={numberOfCameras<=1}onClick={()=>camera.current.switchCamera()}>
🔄 Switch camera
</button></>);};<Cameraref={camera}facingMode="environment"/><Cameraref={camera}aspectRatio={16/9}/>Use videoConstraints to request a specific resolution, frame rate, or any other MediaTrackConstraints:
<Cameraref={camera}videoConstraints={{width: {ideal: 1920},height: {ideal: 1080},frameRate: {ideal: 30},}}/>By default, photos are captured unmirrored (correct for environment cameras). Pass { mirror: true } to flip horizontally — useful for selfie cameras:
// With type only (existing API)constphoto=camera.current.takePhoto('base64url');// With options object (new in v1.1.0)constmirroredPhoto=camera.current.takePhoto({mirror: true});constimgData=camera.current.takePhoto({type: 'imgData',mirror: true});<iframesrc="https://example.com/camera" allow="camera;" />Install
react-webcam-pro:npm uninstall react-camera-pro npm install react-webcam-pro
Update imports:
- import { Camera } from "react-camera-pro";+ import { Camera } from "react-webcam-pro";
That's it! The API is fully backward compatible. You can now optionally remove the
errorMessagesprop if you were only passing it to avoid TypeScript errors.
# Install dependencies
npm install
# Run tests
npm test# Run tests in watch mode
npm run test:watch
# Build
npm run build
# Lint
npm run lint
# Type check
npm run typecheckWe're actively working through the open issues inherited from the original react-camera-pro repository. Fixes are being rolled out steadily.
Need something fixed urgently?Create an issue in our repo — it will be taken up on high priority and addressed quickly.
- 🐛 Report a bug:Open an issue
- 💡 Request a feature:Open an issue
- 💬 Discuss:GitHub Discussions
- Original package:
react-camera-proby Purple Technology - Camera template: kasperkamperman.com
- Boilerplate reference: Developing & Publishing React Component Library
MIT — See LICENSE for details.