The Object Output - React Native Vision Camera

import { Tab, Tabs } from 'fumadocs-ui/components/tabs'

The CameraObjectOutput allows scanning objects (as ScannedObjects) using the platform-native object outputs. This is more efficient than the Barcode Scanner (see "The Barcode Scanner"), but offers less flexibility.

Creating an Object Output

<Tabs items={["<Camera /> (view)", "useCamera(...) (hook)", "CameraSession (imperative)"]} groupId="api-style" persist> <Tab value="<Camera /> (view)">

tsx

function App() {
  const device = useCameraDevice('back')
  // [!code ++:6]
  const objectOutput = useObjectOutput({
    types: ['qr'],
    onObjectsScanned(objects) {
      console.log(`Scanned ${objects.length} objects!`)
    }
  })

  return (
    <Camera
      style={StyleSheet.absoluteFill}
      isActive={true}
      device={device}
      // [!code ++]
      outputs={[objectOutput]}
    />
  )
}

</Tab> <Tab value="useCamera(...) (hook)"> ```tsx function App() { const device = useCameraDevice('back') // [!code ++:6] const objectOutput = useObjectOutput({ types: ['qr'], onObjectsScanned(objects) { console.log(`Scanned ${objects.length} objects!`) } })

const camera = useCamera({ isActive: true, device: device, // [!code ++] outputs: [objectOutput], }) }

</Tab>
<Tab value="CameraSession (imperative)">
```tsx
const session = await VisionCamera.createCameraSession(false)
const device = await getDefaultCameraDevice('back')
// [!code ++:6]
const objectOutput = VisionCamera.createObjectOutput({
  enabledObjectTypes: ['qr']
})
objectOutput.setOnObjectsScannedCallback((objects) => {
  console.log(`Scanned ${objects.length} objects!`)
})

await session.configure([
  {
    input: device,
    outputs: [
      // [!code ++]
      { output: objectOutput, mirrorMode: 'auto' }
    ],
    constraints: []
  }
], {})
await session.start()

</Tab> </Tabs>

See ObjectOutputOptions for a full list of configuration options for the Object Output.

[!WARNING] The CameraObjectOutput is iOS only, since Android does not have a native object output.

Use "The Barcode Scanner" (which uses MLKit) on Android instead.

ScannedObject subclasses

ScannedObject is the base-class of all objects scanned by the CameraObjectOutput.

There are multiple subclasses of ScannedObject, such as ScannedCode (e.g. for QR codes or barcodes) or ScannedFace:

tsx

const objectOutput = useObjectOutput({
  types: ['qr'],
  onObjectsScanned(objects) {
    for (const object of objects) {
      // [!code ++:7]
      if (isScannedCode(object)) {
        console.log(`Code: ${object.value}`)
      } else if (isScannedFace(object)) {
        console.log(`Face: ${object.faceID}`)
      } else {
        console.log(`Unknown Object: ${object.type}`)
      }
    }
  }
})

[!TIP] See "A ScannedObject" for more information about Scanned Objects.