A powerful <Camera> component.

Read the VisionCamera documentation for more information.

The <Camera> component's most important properties are:

  • device: Specifies the CameraDevice to use. Get a CameraDevice by using the useCameraDevice | useCameraDevice(..) hook, or manually by using the CameraDevices.getAvailableCameraDevices | CameraDevices.getAvailableCameraDevices() function.
  • isActive: A boolean value that specifies whether the Camera should actively stream video frames or not. This can be compared to a Video component, where isActive specifies whether the video is paused or not. If you fully unmount the <Camera> component instead of using isActive={false}, the Camera will take a bit longer to start again.

Example

function App() {
const device = useCameraDevice('back')

if (device == null) return <NoCameraErrorView />
return (
<Camera
style={StyleSheet.absoluteFill}
device={device}
isActive={true}
/>
)
}

Component

Hierarchy (view full)

Constructors

Properties

context: unknown

If using the new style context, re-declare this in your class to be the React.ContextType of your static contextType. Should be used with type annotation or static contextType.

Example

static contextType = MyContext
// For TS pre-3.7:
context!: React.ContextType<typeof MyContext>
// For TS 3.7 and above:
declare context: React.ContextType<typeof MyContext>

See

React Docs

displayName: string
getBitRateMultiplier: any
isNativeViewMounted: any
lastFrameProcessor: any
lastUIRotation: any
maybeUpdateUIRotation: any
onAverageFpsChanged: any
onCodeScanned: any
onError: any
onInitialized: any
onOutputOrientationChanged: any
onPreviewOrientationChanged: any
onPreviewStarted: any
onPreviewStopped: any
onShutter: any
onStarted: any
onStopped: any
onViewReady: any
ref: any
refs: {
    [key: string]: ReactInstance;
}

Type declaration

Deprecated

See

Legacy React Docs

rotationHelper: any
setFrameProcessor: any
unsetFrameProcessor: any
contextType?: Context<any>

If set, this.context will be set at runtime to the current value of the given Context.

Example

type MyContext = number
const Ctx = React.createContext<MyContext>(0)

class Foo extends React.Component {
static contextType = Ctx
context!: React.ContextType<typeof Ctx>
render () {
return <>My context's value: {this.context}</>;
}
}

See

https://react.dev/reference/react/Component#static-contexttype

displayName: string

Accessors

  • get handle(): any
  • Returns any

Methods

  • Cancel the current video recording. The temporary video file will be deleted, and the startRecording's onRecordingError callback will be invoked with a capture/recording-canceled error.

    Returns Promise<void>

    Throws

    CameraCaptureError When any kind of error occured while canceling the video recording. Use the code property to get the actual error

    Example

    await camera.current.startRecording({
    onRecordingFinished: (video) => console.log(video),
    onRecordingError: (error) => {
    if (error.code === 'capture/recording-canceled') {
    // recording was canceled.
    } else {
    console.error(error)
    }
    },
    })
    setTimeout(async () => {
    await camera.current.cancelRecording()
    }, 5000)
  • Catches exceptions generated in descendant components. Unhandled exceptions will cause the entire component tree to unmount.

    Parameters

    Returns void

  • Called immediately after a component is mounted. Setting state here will trigger re-rendering.

    Returns void

  • Internal

    Returns void

  • Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as cancelled network requests, or cleaning up any DOM elements created in componentDidMount.

    Returns void

  • Focus the camera to a specific point in the coordinate system.

    Parameters

    • point: Point

      The point to focus to. This should be relative to the Camera view's coordinate system and is expressed in points.

      • (0, 0) means top left.
      • (CameraView.width, CameraView.height) means bottom right.

      Make sure the value doesn't exceed the CameraView's dimensions.

    Returns Promise<void>

    Throws

    CameraRuntimeError When any kind of error occured while focussing. Use the code property to get the actual error

    Example

    await camera.current.focus({
    x: tapEvent.x,
    y: tapEvent.y
    })
  • Parameters

    • Optional callback: (() => void)
        • (): void
        • Returns void

    Returns void

  • Runs before React applies the result of render to the document, and returns an object to be given to componentDidUpdate. Useful for saving things such as scroll position before render causes changes to it.

    Note: the presence of this method prevents any of the deprecated lifecycle events from running.

    Parameters

    Returns any

  • Pauses the current video recording.

    Returns Promise<void>

    Throws

    CameraCaptureError When any kind of error occured while pausing the video recording. Use the code property to get the actual error

    Example

    // Start
    await camera.current.startRecording({
    onRecordingFinished: (video) => console.log(video),
    onRecordingError: (error) => console.error(error),
    })
    await timeout(1000)
    // Pause
    await camera.current.pauseRecording()
    await timeout(500)
    // Resume
    await camera.current.resumeRecording()
    await timeout(2000)
    // Stop
    await camera.current.stopRecording()
  • Resumes a currently paused video recording.

    Returns Promise<void>

    Throws

    CameraCaptureError When any kind of error occured while resuming the video recording. Use the code property to get the actual error

    Example

    // Start
    await camera.current.startRecording({
    onRecordingFinished: (video) => console.log(video),
    onRecordingError: (error) => console.error(error),
    })
    await timeout(1000)
    // Pause
    await camera.current.pauseRecording()
    await timeout(500)
    // Resume
    await camera.current.resumeRecording()
    await timeout(2000)
    // Stop
    await camera.current.stopRecording()
  • Called to determine whether the change in props and state should trigger a re-render.

    Component always returns true. PureComponent implements a shallow comparison on props and state and returns true if any props or states have changed.

    If false is returned, Component.render, componentWillUpdate and componentDidUpdate will not be called.

    Parameters

    Returns boolean

  • Start a new video recording.

    Parameters

    Returns void

    Throws

    CameraCaptureError When any kind of error occured while starting the video recording. Use the code property to get the actual error

    Example

    camera.current.startRecording({
    onRecordingFinished: (video) => console.log(video),
    onRecordingError: (error) => console.error(error),
    })
    setTimeout(() => {
    camera.current.stopRecording()
    }, 5000)
  • Stop the current video recording.

    Returns Promise<void>

    Throws

    CameraCaptureError When any kind of error occured while stopping the video recording. Use the code property to get the actual error

    Example

    await camera.current.startRecording({
    onRecordingFinished: (video) => console.log(video),
    onRecordingError: (error) => console.error(error),
    })
    setTimeout(async () => {
    await camera.current.stopRecording()
    }, 5000)
  • Take a single photo and write it's content to a temporary file.

    Parameters

    Returns Promise<PhotoFile>

    Throws

    CameraCaptureError When any kind of error occured while capturing the photo. Use the code property to get the actual error

    Example

    const photo = await camera.current.takePhoto({
    flash: 'on',
    enableAutoRedEyeReduction: true
    })
  • Captures a snapshot of the Camera view and write it's content to a temporary file.

    • On iOS, takeSnapshot waits for a Frame from the video pipeline and therefore requires video to be enabled.
    • On Android, takeSnapshot performs a GPU view screenshot from the preview view.

    Parameters

    Returns Promise<PhotoFile>

    Throws

    CameraCaptureError When any kind of error occured while capturing the photo. Use the code property to get the actual error

    Example

    const snapshot = await camera.current.takeSnapshot({
    quality: 100
    })
  • Adds a listener that gets called everytime the Camera Devices change, for example when an external Camera Device (USB or continuity Camera) gets plugged in or plugged out.

    If you use Hooks, use the useCameraDevices() hook instead.

    Parameters

    • listener: ((newDevices) => void)
        • (newDevices): void
        • Parameters

          Returns void

    Returns EmitterSubscription

  • Get a list of all available camera devices on the current phone.

    If you use Hooks, use the useCameraDevices(..) hook instead.

    • For Camera Devices attached to the phone, it is safe to assume that this will never change.
    • For external Camera Devices (USB cameras, Mac continuity cameras, etc.) the available Camera Devices could change over time when the external Camera device gets plugged in or plugged out, so use addCameraDevicesChangedListener(...) to listen for such changes.

    Returns CameraDevice[]

    Example

    const devices = Camera.getAvailableCameraDevices()
    const backCameras = devices.filter((d) => d.position === "back")
    const frontCameras = devices.filter((d) => d.position === "front")
  • Gets the current Camera Permission Status. Check this before mounting the Camera to ensure the user has permitted the app to use the camera.

    To actually prompt the user for camera permission, use requestCameraPermission().

    Returns CameraPermissionStatus

  • Gets the current Location Permission Status. Check this before enabling the location={...} property to make sure the the user has permitted the app to use the location.

    To actually prompt the user for location permission, use requestLocationPermission().

    Note: This method will throw a system/location-not-enabled error if the Location APIs are not enabled at build-time. See the "GPS Location Tags" documentation for more information.

    Returns CameraPermissionStatus

  • Gets the current Microphone-Recording Permission Status. Check this before enabling the audio={...} property to make sure the user has permitted the app to use the microphone.

    To actually prompt the user for microphone permission, use requestMicrophonePermission().

    Returns CameraPermissionStatus

  • Shows a "request permission" alert to the user, and resolves with the new camera permission status.

    If the user has previously blocked the app from using the camera, the alert will not be shown and "denied" will be returned.

    Returns Promise<CameraPermissionRequestResult>

    Throws

    CameraRuntimeError When any kind of error occured while requesting permission. Use the code property to get the actual error

  • Shows a "request permission" alert to the user, and resolves with the new location permission status.

    If the user has previously blocked the app from using the location, the alert will not be shown and "denied" will be returned.

    Returns Promise<CameraPermissionRequestResult>

    Throws

    CameraRuntimeError When any kind of error occured while requesting permission. Use the code property to get the actual error

  • Shows a "request permission" alert to the user, and resolves with the new microphone permission status.

    If the user has previously blocked the app from using the microphone, the alert will not be shown and "denied" will be returned.

    Returns Promise<CameraPermissionRequestResult>

    Throws

    CameraRuntimeError When any kind of error occured while requesting permission. Use the code property to get the actual error