react-native-vision-camera

A CameraOutput is the base class for all data streams a CameraDevice can provide through a CameraSession. VisionCamera provides five core output types:

• CameraPhotoOutput: For capturing still photos.
• CameraVideoOutput: For capturing video.
• CameraFrameOutput: For accessing raw video frames.
• CameraDepthFrameOutput: For accessing depth data.
• CameraPreviewOutput: For displaying the camera preview.

A NativeBuffer is a JavaScript object that provides access to the underlying native GPU-backed buffer of a Frame. It is designed to allow interoperability with third-party native libraries without requiring additional native dependencies.

A NativeBuffer consists of:

• pointer: A bigint representing a pointer to a native C++ instance (with a +1 retain count).
• release(): A function that must be called to release the buffer's reference.

CRITICAL: You must call release() once you are finished using the NativeBuffer. Failure to do so will result in memory leaks and will stall the Camera pipeline.

Camera devices are categorized into Physical and Virtual types.

Physical Device Types

• 'ultra-wide-angle': A camera with an ultra-wide field of view (e.g., 0.5x).
• 'wide-angle': A standard wide field of view (e.g., 1x).
• 'telephoto': A narrow field of view for large zooms (e.g., 3x or 5x).

Virtual Devices

Virtual devices (like a 'triple' camera) consist of multiple physical devices. They allow for seamless switching between physical lenses to provide a smooth zoom experience.

A Frame provides orientation and isMirrored metadata to describe its intended presentation relative to the output's configuration. The camera pipeline does not physically rotate or mirror buffers because it is computationally expensive; instead, consumers should apply rotation/mirroring logic themselves (e.g., using GPU-based matrix transformations in Skia).

If you require buffers that are already correctly rotated and mirrored, enable enablePhysicalBufferRotation in your FrameOutputOptions. When this is enabled, orientation will always be 'up' and isMirrored will always be false.

VisionCamera Skia requires the following peer dependencies to function. You must install them following their respective official guides:

1. VisionCamera Core
2. react-native-reanimated
3. react-native-worklets (part of the react-native-reanimated repository)

A CameraSession can be interrupted by system events like incoming FaceTime calls or thermal throttling (see InterruptionReason). You can listen for these events using the following methods depending on your API style:

// <Camera /> view
<Camera
  isActive={true}
  device="back"
  onInterruptionStarted={(reason) => console.log(`Interrupted: ${reason}`)}
  onInterruptionEnded={() => console.log(`Interruption ended`)}
/>

// useCamera() hook
const camera = useCamera({
  isActive: true,
  device: 'back',
  onInterruptionStarted(reason) {
    console.log(`Interrupted: ${reason}`)
  },
  onInterruptionEnded() {
    console.log(`Interruption ended`)
  }
})

// CameraSession (imperative)
session.addOnInterruptionStartedListener((reason) => {
  console.log(`Interrupted: ${reason}`)
})
session.addOnInterruptionEndedListener(() => {
  console.log(`Interruption ended`)
})

A CameraSession connects camera inputs to outputs and manages the camera lifecycle. You can create a session using the <Camera /> view, the useCamera() hook, or by manually creating a CameraSession instance for imperative control.

// 1. Using the <Camera /> view
<Camera
  style={StyleSheet.absoluteFill}
  isActive={true}
  device="back"
/>

// 2. Using the useCamera() hook
const camera = useCamera({
  isActive: true,
  device: 'back',
})

// 3. Using CameraSession (imperative)
const device = ...
const isMultiCam = false
const session = await VisionCamera.createCameraSession(isMultiCam)
await session.configure([
  {
    input: device,
    outputs: [],
    constraints: []
  }
], {})
await session.start()

To capture a video, you must follow these steps:

1. Prepare the Recorder: Use videoOutput.createRecorder() to create a Recorder instance.
2. Start Recording: Call recorder.startRecording(onFinished, onError).
3. Stop Recording: Call recorder.stopRecording() to end the session.

Warning: Do not re-use a Recorder instance. To start a new video recording, you must create a new Recorder via createRecorder().