Skip to main content

Why react-webcam-pro?

The short version​

react-camera-pro is a popular React camera component — but it has not been actively maintained for over 2 years. Meanwhile, dozens of issues have piled up: React 19 crashes, Firefox/iOS bugs, missing features, and DOM warnings that can't be suppressed.

react-webcam-pro is the community-maintained replacement. It is a drop-in replacement — just change the import. Everything else stays the same.

react-camera-pro vs react-webcam-pro​

react-camera-proreact-webcam-pro
Actively maintained❌ Last release: 2022✅ Active
React 19❌ Crashes✅ Fully supported
React 18⚠️ Works with warnings✅ Fully supported
styled-components v6❌ DOM warnings✅ Fixed (#48)
videoConstraints prop❌ Not available✅ Added in v1.1.0
Mirror photo capture❌ Not available✅ Added in v1.1.0
Firefox support❌ Crashes on getCapabilities()✅ Fixed in v1.1.0
iOS 15 Safari❌ Crashes on getCapabilities()✅ Fixed in v1.1.0
errorMessages optional❌ Required (TypeScript error)✅ Truly optional (#63)
className / style props❌ Not available✅ Added (#47)
videoSourceDeviceId❌ Ignored in environment mode✅ Fixed (#62, #69)
TypeScript versionTypeScript 3.7TypeScript 5
BundlerRollup 1Rollup 4
Test suite❌ No tests✅ 69 tests
CameraRef type❌ Only CameraType✅ Both exported

How to switch (30 seconds)​

npm uninstall react-camera-pro
npm install react-webcam-pro

Then update your imports:

- import { Camera, CameraType } from 'react-camera-pro';
+ import { Camera, CameraType } from 'react-webcam-pro';

That's it. No other code changes needed. See the full Migration Guide for details.

Issues fixed from react-camera-pro​

Every issue below is a real open (or closed-without-fix) issue from the original react-camera-pro repo that react-webcam-pro has resolved:

🐛 Crashes & Breakages​

  • #70 — React 19 crash — The component would crash on React 19 due to styled-components v5 incompatibility. Fixed.
  • #75, #77 — Firefox / iOS 15 crash — getCapabilities() is not available in Firefox or iOS 15 Safari. The component would throw an uncaught error. Fixed: wrapped in try/catch with typeof check, emits a console.warn instead.
  • #62, #69 — videoSourceDeviceId ignored — In environment mode, the explicit device ID was silently overridden by auto-detection. Fixed: device ID always takes priority.

⚠️ Developer Experience​

  • #48 — DOM warnings — mirrored and aspectRatio were forwarded to DOM elements, causing React to warn about unknown props. Fixed using styled-components transient props ($mirrored, $aspectRatio).
  • #63 — errorMessages TypeScript error — The prop was typed as required, meaning TypeScript would error if you didn't pass it, even though defaults exist. Fixed: now properly optional.

✨ Missing Features​

  • #52 — videoConstraints prop — No way to control resolution, frame rate, or other MediaTrackConstraints. Added: videoConstraints?: MediaTrackConstraints prop, merged into getUserMedia.
  • #74 — Mirror photo capture — takePhoto() always returned the unmirrored image, even when the user-facing camera preview was mirrored. Added: takePhoto({ mirror: true }).
  • #47 — className / style props — No way to style the camera container from outside the component. Added: both props are now supported.

New features you get for free​

These don't exist at all in react-camera-pro:

videoConstraints prop (v1.1.0)​

Control camera resolution, frame rate, and any MediaTrackConstraints directly:

<Camera
  ref={camera}
  videoConstraints={{
    width: { ideal: 1920 },
    height: { ideal: 1080 },
    frameRate: { ideal: 30 },
  }}
/>

→ Full documentation

Mirror photo capture (v1.1.0)​

Capture photos that match the mirrored preview the user sees:

// New options object
const photo = camera.current.takePhoto({ mirror: true });

// Old string syntax still works
const photo = camera.current.takePhoto('base64url');

→ Full documentation

TypeScript improvements​

// Recommended (new)
import { Camera, CameraRef, TakePhotoOptions } from 'react-webcam-pro';
const camera = useRef<CameraRef>(null);

// Old API still works
import { Camera, CameraType } from 'react-webcam-pro';
const camera = useRef<CameraType>(null);

Frequently Asked Questions​

Is this a breaking change from react-camera-pro?​

No. react-webcam-pro is 100% backward compatible. Every prop, method, and export from react-camera-pro works exactly the same way. The only change required is the import path.

Will react-camera-pro ever be updated?​

The original repo has had no release since 2022 and multiple PRs sitting unreviewed for over a year. react-webcam-pro exists precisely because we can't wait for that.

I found a bug. Where do I report it?​

Open an issue on our repo. We respond quickly.

I need a feature urgently. Can you add it?​

Yes — open an issue with your use case. Community-requested features are our top priority.

Still not convinced?​