website·Indexed 34 days ago
https://visioncamera.margelo.com/A high-performance camera library for React Native featuring frame processors, barcode scanning, and advanced camera controls. It provides APIs for managing camera sessions, capturing RAW and HDR photos, recording video, and integrating with Skia for real-time frame rendering. The ecosystem includes specialized packages such as react-native-vision-camera-barcode-scanner, react-native-vision-camera-location, react-native-vision-camera-resizer, and react-native-vision-camera-skia.
A CameraOutput is the base class for all streams a CameraDevice can produce via a CameraSession. VisionCamera provides five core output types:
CameraPhotoOutput: For capturing photos.CameraVideoOutput: For recording video.CameraFrameOutput: For real-time frame processing.CameraDepthFrameOutput: For depth data.CameraPreviewOutput: For the camera viewfinder preview.FrameRenderer is an object capable of rendering Frame objects into a specified target. Common use cases include connecting a FrameRendererView to display frames on screen or implementing a custom video recorder that processes Frame objects.interface FrameRenderer extends HybridObjectCodeScanner is a view component that automatically detects barcodes within a camera feed using the default rear CameraDevice.PhotoFile interface represents a photo captured using the capturePhotoToFile(...) method and written to a file. It provides metadata about the resulting file, including its filesystem path, dimensions, and capture properties.interface PhotoFile {
containerFormat: PhotoContainerFormat;
filePath: string;
height: number;
isMirrored: boolean;
isRawPhoto: boolean;
orientation: CameraOrientation;
timestamp: number;
width: number;
}CameraFrameOutput interface allows for synchronous streaming of Frame objects from the camera, enabling real-time 'Frame Processing'. It can be initialized using either the Hooks API or the Imperative API.// Using Hooks API
const frameOutput = useFrameOutput({
pixelFormat: 'yuv',
onFrame(frame) {
'worklet'
frame.dispose()
}
})
// Using Imperative API
const frameOutput = VisionCamera.createFrameOutput({
targetResolution: CommonResolutions.HD_16_9,
pixelFormat: 'yuv',
enablePreviewSizedOutputBuffers: false,
allowDeferredStart: true,
enablePhysicalBufferRotation: false,
enableCameraMatrixDelivery: false,
dropFramesWhileBusy: true,
})OrientationManager provides the functionality to listen for changes in CameraOrientation, including both device orientation and interface orientation.A NativeThread is a JavaScript handle to a native thread implementation—specifically a DispatchQueue on iOS and an Executor on Android. It is primarily used to create Worklet Runtimes that execute on that specific native thread. This is critical for streaming outputs like CameraFrameOutput to run synchronous JS functions (Frame Processors) on the same thread as the output, eliminating thread hops and synchronization overhead.
Key constraints:
static thread_local caches in C++ when working with NativeThread, as the underlying thread pool may reuse threads.Depth frame is an in-memory buffer allowing GPU and CPU access to individual depth points. It is streamed by a CameraDepthFrameOutput or attached to a Photo (via Photo.depth) if enabled on the CameraPhotoOutput. Depth data may be computed via time-of-flight (true distance) or disparity (triangulation via multiple cameras); disparity-based frames are generally less accurate.TapToFocusGestureController is a specialized GestureController that enables a native 'tap to focus' gesture. When triggered, it invokes the focusTo(...) action of the associated CameraController to focus the camera on the tapped location.FramePlane interface represents a single plane of a planar Frame. It is a HybridObject and can be retrieved using Frame.getPlanes().interface FramePlane extends HybridObjectFramePlane represents a single plane of a planar Frame within the VisionCamera API.LocationManager interface allows developers to stream real-time device location updates and access the last known location. It can be instantiated using createLocationManager() or the useLocationManager() hook. For a higher-level React API that automates permissions and subscriptions, use the useLocation() hook.