React front/back camera

Switch front and back cameras in React.

Mobile browsers are sensitive to strict camera constraints. `react-webcam-kit` exposes `switchFacingMode()` for front and back camera flows using safer ideal constraints.

Mobile camera switcher

import { useWebcam } from 'react-webcam-kit';

export function MobileCamera() {
  const camera = useWebcam({
    audio: false,
    videoConstraints: {
      facingMode: { ideal: 'user' },
    },
  });

  return (
    <>
      <video ref={camera.videoRef} autoPlay playsInline muted />
      <button onClick={() => void camera.switchFacingMode('environment')}>
        Back camera
      </button>
      <button onClick={() => void camera.switchFacingMode('user')}>
        Front camera
      </button>
    </>
  );
}

When to use `switchDevice()`

Use `switchDevice(deviceId)` after the user chooses a camera from `useDevices()`. Use `switchFacingMode('user')` or `switchFacingMode('environment')` when the app only needs front or back camera intent.

Use `playsInline` on mobile preview video elements. Without it, some mobile browsers may force fullscreen video behavior.

Related guides