Skip to main content

v1.1.0 — Resolution Control, Mirrored Photos & Browser Fixes

Release Date: April 7, 2026

This release adds three community-requested features from the original react-camera-pro issue tracker — all fully backward compatible.

🎯 Highlights​

Custom Video Constraints (Resolution & Frame Rate)​

You can now control camera resolution, frame rate, and other MediaTrackConstraints directly:

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

The videoConstraints prop accepts a standard MediaTrackConstraints object. Constraints are merged into the getUserMedia call, so you can set ideal, min, max, or exact values for any supported property.

Upstream issue: purple-technology/react-camera-pro#52

Mirrored Photo Capture​

User-facing cameras show a mirrored preview (like a mirror), but takePhoto() previously captured the un-mirrored image. Now you can capture a mirrored photo that matches what the user sees:

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

// Combine with type
const imgData = cameraRef.current.takePhoto({ type: 'imgData', mirror: true });

// Legacy syntax still works (backward compatible)
const photo = cameraRef.current.takePhoto('base64url');

Upstream issue: purple-technology/react-camera-pro#74

Firefox & iOS 15 Safari Fix​

The camera component would crash on Firefox and iOS 15 Safari because getCapabilities() is not available on those browsers. This is now handled gracefully with a console.warn so developers know exactly what happened:

[react-webcam-pro] getCapabilities() not supported for device "iPhone Camera".
Camera will still work, but automatic environment camera detection is skipped for this device.

Upstream issues: purple-technology/react-camera-pro#75, purple-technology/react-camera-pro#77

📦 New Exports​

ExportDescription
TakePhotoOptionsOptions object for takePhoto() — { type?, mirror? }

🎮 Interactive Example App​

The example app has been completely rebuilt with an interactive configuration panel:

  • Facing Mode toggle (user / environment)
  • Aspect Ratio selector (cover, 16:9, 4:3, 1:1, 21:9)
  • Resolution selector (4K, Full HD, HD, VGA, QVGA)
  • Frame Rate slider (5–60 fps)
  • Camera Device dropdown (auto-detect + all available cameras)
  • Mirror Photo toggle
  • Live Code Preview — see the exact JSX props as you configure
  • Download captured photos

👉 Try it live →

📝 Full List of Changes​

Features​

  • ✅ New videoConstraints prop for resolution, frame rate, and other media constraints
  • ✅ New takePhoto({ mirror: true }) option for mirrored photo capture
  • ✅ New TakePhotoOptions type export
  • ✅ Interactive example app with configuration panel

Bug Fixes​

  • 🐛 Fixed crash on Firefox and iOS 15 Safari due to missing getCapabilities() API
  • 🐛 Changed silent error swallowing to console.warn for better developer experience

Tests​

  • 🧪 Added 9 new tests (69 total) covering:
    • videoConstraints passthrough to getUserMedia
    • videoConstraints backward compatibility
    • videoConstraints override behavior
    • Missing getCapabilities() handling (Firefox scenario)
    • Throwing getCapabilities() handling (iOS 15 scenario) with console.warn verification
    • Mirrored photo capture with canvas scale(-1, 1)
    • Options object support for takePhoto()
    • Legacy string argument backward compatibility
  • 🧪 Suppressed expected console.error output in error-handling tests for cleaner test output

🔄 Migration from v1.0.0​

Zero breaking changes. Just update:

npm install react-webcam-pro@latest

All existing code continues to work exactly as before. The new features are entirely additive.

Installation​

npm install react-webcam-pro
yarn add react-webcam-pro
pnpm add react-webcam-pro