The Preview Output
Streaming a Camera feed into a Preview
The CameraPreviewOutput allows streaming a Camera feed into a Preview, which may be connected to a Preview View to display a Camera feed to the user.
Creating a Preview Output
Note
The <Camera /> view already creates a CameraPreviewOutput (+ <NativePreviewView />) for you, automatically.
function App() {
const device = useCameraDevice('back')
const previewOutput = usePreviewOutput()
const camera = useCamera({
isActive: true,
device: device,
outputs: [previewOutput],
})
}const session = await HybridCameraFactory.createCameraSession(false)
const device = await getDefaultCameraDevice('back')
const previewOutput = HybridCameraFactory.createPreviewOutput()
await session.configure([
{
input: device,
outputs: [
{ output: previewOutput, mirrorMode: 'auto' }
],
config: {}
}
], {})
await session.start()Connecting the Preview Output to a View
To display the Camera feed to the user, you must connect the CameraPreviewOutput to a <NativePreviewView />:
function App() {
const previewOutput = usePreviewOutput()
return (
<NativePreviewView
style={StyleSheet.absoluteFill}
previewOutput={previewOutput}
/>
)
}See "Views: <NativePreviewView />" for more information about <NativePreviewView />.