# A Barcode Source: Guides URL: https://visioncamera.margelo.com/docs/a-barcode The [`Barcode`](/api/react-native-vision-camera-barcode-scanner/hybrid-objects/Barcode) is a machine-readable code, like a [`'code-128'`](/api/react-native-vision-camera-barcode-scanner/type-aliases/BarcodeFormat) Barcode, or a [`'qr-code'`](/api/react-native-vision-camera-barcode-scanner/type-aliases/BarcodeFormat) scanned by [the Barcode Scanner](barcode-scanner) - either via the [``](/api/react-native-vision-camera-barcode-scanner/views/CodeScanner) view, the Barcode Scanner [`CameraOutput`](/api/react-native-vision-camera/hybrid-objects/CameraOutput), or the [`BarcodeScanner`](/api/react-native-vision-camera-barcode-scanner/hybrid-objects/BarcodeScanner) directly from a Frame Processor. ### Barcode Formats [#barcode-formats] There are different standardized Barcode Formats, which are represented as [`BarcodeFormat`](/api/react-native-vision-camera-barcode-scanner/type-aliases/BarcodeFormat). Typically, you should configure your Barcode Scanner pipeline to only detect the [`BarcodeFormat`](/api/react-native-vision-camera-barcode-scanner/type-aliases/BarcodeFormat)s that are relevant to your use-case, not [`'all-formats'`](/api/react-native-vision-camera-barcode-scanner/type-aliases/BarcodeFormat). Access a [`Barcode`](/api/react-native-vision-camera-barcode-scanner/hybrid-objects/Barcode)'s format via [`format`](/api/react-native-vision-camera-barcode-scanner/hybrid-objects/Barcode#format): ```ts const barcode = ... console.log(barcode.format) // "qr-code" ``` ### Barcode Value [#barcode-value] #### Value Type [#value-type] A [`Barcode`](/api/react-native-vision-camera-barcode-scanner/hybrid-objects/Barcode) can contain different types of values, like [`'url'`](/api/react-native-vision-camera-barcode-scanner/type-aliases/BarcodeValueType), [`'text'`](/api/react-native-vision-camera-barcode-scanner/type-aliases/BarcodeValueType), [`'wifi'`](/api/react-native-vision-camera-barcode-scanner/type-aliases/BarcodeValueType), or more (see [`BarcodeValueType`](/api/react-native-vision-camera-barcode-scanner/type-aliases/BarcodeValueType)). To get a [`Barcode`](/api/react-native-vision-camera-barcode-scanner/hybrid-objects/Barcode)'s value type, use [`valueType`](/api/react-native-vision-camera-barcode-scanner/hybrid-objects/Barcode#valuetype): ```ts const barcode = ... console.log(barcode.valueType) // "url" ``` #### Raw Value [#raw-value] If a [`Barcode`](/api/react-native-vision-camera-barcode-scanner/hybrid-objects/Barcode)'s value can be decoded to a string, it can be accessed via [`rawValue`](/api/react-native-vision-camera-barcode-scanner/hybrid-objects/Barcode#rawvalue): ```ts const barcode = ... console.log(barcode.rawValue) // "https://margelo.com" ``` #### Raw Bytes [#raw-bytes] You can also get the [`Barcode`](/api/react-native-vision-camera-barcode-scanner/hybrid-objects/Barcode)'s value as a raw `ArrayBuffer`: ```ts const barcode = ... const buffer = barcode.rawBytes const data = new Uint8Array(buffer) console.log(data) // [104, 116, 116, 112, ...] ``` #### Display Value [#display-value] Some [`Barcode`](/api/react-native-vision-camera-barcode-scanner/hybrid-objects/Barcode)s are encoded with non-human-friendly values, like [`'wifi'`](/api/react-native-vision-camera-barcode-scanner/type-aliases/BarcodeValueType). In this case you can use [`displayValue`](/api/react-native-vision-camera-barcode-scanner/hybrid-objects/Barcode#displayvalue) to get a human-friendly representation of the code: ```ts const barcode = ... console.log(barcode.rawValue) // "WIFI:T:WPA;S:MyNetwork;P:password;;" console.log(barcode.displayValue) // "MyNetwork" ``` #### Corner Points and Bounding Box [#corner-points-and-bounding-box] A [`Barcode`](/api/react-native-vision-camera-barcode-scanner/hybrid-objects/Barcode)'s precise location in the Frame's coordinate system can be accessed via [`boundingBox`](/api/react-native-vision-camera-barcode-scanner/hybrid-objects/Barcode#boundingbox) (a rectangle covering the barcode), or [`cornerPoints`](/api/react-native-vision-camera-barcode-scanner/hybrid-objects/Barcode#cornerpoints) (points for each corner): ```ts const barcode = ... console.log(barcode.boundingBox) // { left: 0.421, right: 0.278, top: 0.345, bottom: 0.597 } console.log(barcode.cornerPoints) // [{ x: 0.421, y: 0.345 }, ...] ``` #### Converting Barcode coordinates to View coordinates [#converting-barcode-coordinates-to-view-coordinates] These coordinates are always relative to the [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) this code was detected in. To convert the coordinates to Preview View coordinates, first convert them to Camera coordinates using [`Frame.convertFramePointToCameraPoint(...)`](/api/react-native-vision-camera/hybrid-objects/Frame#convertframepointtocamerapoint), and then [`PreviewView.convertCameraPointToViewPoint(...)`](/api/react-native-vision-camera/interfaces/PreviewViewMethods#convertcamerapointtoviewpoint): ```ts const barcode = ... const frame = ... const preview = ... for (const barcodePoint of barcode.cornerPoints) { const cameraPoint = frame.convertFramePointToCameraPoint(barcodePoint) const viewPoint = preview.convertCameraPointToViewPoint(cameraPoint) console.log(viewPoint) } ``` > Tip > > > See ["Coordinate Systems"](coordinate-systems) for more information about Camera and Preview coordinate systems. --- # A Depth Frame Source: Guides URL: https://visioncamera.margelo.com/docs/a-depth-frame A [`Depth`](/api/react-native-vision-camera/hybrid-objects/Depth) frame is an in-memory buffer allowing GPU- and CPU-access to individual depth points. It is typically streamed in realtime by a [`CameraDepthFrameOutput`](/api/react-native-vision-camera/hybrid-objects/CameraDepthFrameOutput), or attached to a [`Photo`](/api/react-native-vision-camera/hybrid-objects/Photo) (see [`Photo.depth`](/api/react-native-vision-camera/hybrid-objects/Photo#depth)) if enabled on the [`CameraPhotoOutput`](/api/react-native-vision-camera/hybrid-objects/CameraPhotoOutput). See ["The Depth Output"](depth-output) for more information about streaming [`Depth`](/api/react-native-vision-camera/hybrid-objects/Depth) frames. ### Native Plugins [#native-plugins] Similarly to ["A Frame"](a-frame), you would typically process [`Depth`](/api/react-native-vision-camera/hybrid-objects/Depth) frames in ["Native Frame Processor Plugins"](native-frame-processor-plugins) to avoid touching depth data in JS. ### `orientation` and `isMirrored` [#orientation-and-ismirrored] The [`Depth`](/api/react-native-vision-camera/hybrid-objects/Depth)'s [`orientation`](/api/react-native-vision-camera/hybrid-objects/Depth#orientation) describes its orientation relative to the output's [`outputOrientation`](/api/react-native-vision-camera/hybrid-objects/CameraDepthFrameOutput#outputorientation). Similarly, [`isMirrored`](/api/react-native-vision-camera/hybrid-objects/Depth#ismirrored) describes if the [`Depth`](/api/react-native-vision-camera/hybrid-objects/Depth) is considered to be mirrored, relative to the output's [`mirrorMode`](/api/react-native-vision-camera/interfaces/CameraOutputConfiguration#mirrormode). Consider both [`orientation`](/api/react-native-vision-camera/hybrid-objects/Depth#orientation) and [`isMirrored`](/api/react-native-vision-camera/hybrid-objects/Depth#ismirrored) as a "recipe" to get the Depth's intended presentation. #### Why a Frame isn't rotated/mirrored automatically [#why-a-frame-isnt-rotatedmirrored-automatically] The Camera pipeline does not physically rotate or mirror buffers automatically, as this is computationally expensive. Instead, it is much more efficient to pass [`orientation`](/api/react-native-vision-camera/hybrid-objects/Depth#orientation) and [`isMirrored`](/api/react-native-vision-camera/hybrid-objects/Depth#ismirrored) along as metadata so consumers can apply rotation/mirroring logic themselves. > Tip > > > If you need your buffers to be correctly rotated and mirrored already, enable [`enablePhysicalBufferRotation`](/api/react-native-vision-camera/interfaces/DepthFrameOutputOptions#enablephysicalbufferrotation), which results in [`orientation`](/api/react-native-vision-camera/hybrid-objects/Depth#orientation) always being [`'up'`](/api/react-native-vision-camera/type-aliases/CameraOrientation) and [`isMirrored`](/api/react-native-vision-camera/hybrid-objects/Depth#ismirrored) always being `false`, indicating no rotation or mirroring is necessary to get the Depth's intended presentation. ### Understanding Depth Formats [#understanding-depth-formats] A [`Depth`](/api/react-native-vision-camera/hybrid-objects/Depth) frame has a GPU-backed buffer that contains its depth data. Its data layout is described by the [`Depth`](/api/react-native-vision-camera/hybrid-objects/Depth)'s [`pixelFormat`](/api/react-native-vision-camera/hybrid-objects/Depth#pixelformat). ```ts const depth = ... console.log(depth.pixelFormat) // 'depth-16-bit' ``` #### Disparity vs Depth [#disparity-vs-depth] Some [`Depth`](/api/react-native-vision-camera/hybrid-objects/Depth) frames are not computed via time-of-flight (true distance measuring), but instead via disparity - which computes distance by triangulating pixel shift using multiple physical Camera devices. Those [`Depth`](/api/react-native-vision-camera/hybrid-objects/Depth) frames should be considered less accurate, but can still be used just like true depth frames. ### Accessing Depth Data in JS [#accessing-depth-data-in-js] A [`Depth`](/api/react-native-vision-camera/hybrid-objects/Depth) frame exposes its native, GPU-backed depth data buffer via [`getDepthData()`](/api/react-native-vision-camera/hybrid-objects/Depth#getdepthdata), which provides zero-copy access into the Depth's actual buffer: ```ts const depth = ... // [!code ++] const buffer = depth.getDepthData() ``` > Warning > > > The `buffer` is only valid as long as the [`Depth`](/api/react-native-vision-camera/hybrid-objects/Depth) frame is valid (see [`Depth.isValid`](/api/react-native-vision-camera/hybrid-objects/Depth#isvalid)). > > Once the [`Depth`](/api/react-native-vision-camera/hybrid-objects/Depth) frame is disposed (see [`dispose()`](https://nitro.margelo.com/docs/hybrid-objects)), the `buffer` must no longer be used. #### Interpreting Depth Data [#interpreting-depth-data] The Depth Data's layout depends on the [`Depth`](/api/react-native-vision-camera/hybrid-objects/Depth)'s [`pixelFormat`](/api/react-native-vision-camera/hybrid-objects/Depth#pixelformat). For example, in [`'depth-16-bit'`](/api/react-native-vision-camera/type-aliases/DepthPixelFormat), pixels are laid out in 16-bit floats - one float per "pixel". ```ts const depth = ... const buffer = depth.getDepthData() if (depth.pixelFormat === 'depth-16') { const pixels = new Float16Array(buffer) // [!code ++] const distanceToFirstPixel = pixels[0] console.log(`Distance to first pixel:`, distanceToFirstPixel) } ``` > Tip > > > Typically, a single 16-bit float in [`'depth-16-bit'`](/api/react-native-vision-camera/type-aliases/DepthPixelFormat) data represents a distance in meters. #### Converting between Depth Formats [#converting-between-depth-formats] You can convert [`Depth`](/api/react-native-vision-camera/hybrid-objects/Depth) to a different [`DepthPixelFormat`](/api/react-native-vision-camera/type-aliases/DepthPixelFormat) by using [`Depth.convert(...)`](/api/react-native-vision-camera/hybrid-objects/Depth#convert). For example, if we need [`'depth-32-bit'`](/api/react-native-vision-camera/type-aliases/DepthPixelFormat), we can convert to it (if available): ```ts let depth = ... if (depth.pixelFormat !== 'depth-32-bit') { if (!depth.availableDepthPixelFormats.includes('depth-32-bit')) { throw new Error(`Depth frame does not support converting to depth-32-bit!`) } // [!code ++] depth = depth.convert('depth-32-bit') } console.log(depth.pixelFormat) // 'depth-32-bit' ``` --- # A Frame Source: Guides URL: https://visioncamera.margelo.com/docs/a-frame A [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) is an in-memory buffer allowing GPU- and CPU-access to individual pixels. It is typically streamed in realtime by a [`CameraFrameOutput`](/api/react-native-vision-camera/hybrid-objects/CameraFrameOutput). See ["The Frame Output"](frame-output) for more information about streaming [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame)s. ### Native Plugins [#native-plugins] Typically, you pass a [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) to ["Native Frame Processor Plugins"](native-frame-processor-plugins) to avoid touching pixels from JS. A ["Native Frame Processor Plugin"](native-frame-processor-plugins) is simply a [Nitro Module](https://nitro.margelo.com) that uses the [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) type from [`react-native-vision-camera`](/api/react-native-vision-camera) to run some kind of processing using native Swift/Kotlin/C++ code. For example, the [`BarcodeScanner`](/api/react-native-vision-camera-barcode-scanner/hybrid-objects/BarcodeScanner) (from [`react-native-vision-camera-barcode-scanner`](/api/react-native-vision-camera-barcode-scanner)) is a native plugin to scan barcodes in a [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame). See ["Native Frame Processor Plugins"](native-frame-processor-plugins) for more information. ```ts const codeScanner = useBarcodeScanner({ barcodeFormats: ['all-formats'] }) const frameOutput = useFrameOutput({ onFrame(frame) { 'worklet' // [!code ++] const barcodes = codeScanner.scanCodes(frame) console.log(`Scanned ${barcodes.length} barcodes!`) frame.dispose() } }) ``` ### `orientation` and `isMirrored` [#orientation-and-ismirrored] The [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame)'s [`orientation`](/api/react-native-vision-camera/hybrid-objects/Frame#orientation) describes its orientation relative to the output's [`outputOrientation`](/api/react-native-vision-camera/hybrid-objects/CameraFrameOutput#outputorientation). Similarly, [`isMirrored`](/api/react-native-vision-camera/hybrid-objects/Frame#ismirrored) describes if the [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) is considered to be mirrored, relative to the output's [`mirrorMode`](/api/react-native-vision-camera/interfaces/CameraOutputConfiguration#mirrormode). Consider both [`orientation`](/api/react-native-vision-camera/hybrid-objects/Frame#orientation) and [`isMirrored`](/api/react-native-vision-camera/hybrid-objects/Frame#ismirrored) as a "recipe" to get the Frame's intended presentation. #### Why a Frame isn't rotated/mirrored automatically [#why-a-frame-isnt-rotatedmirrored-automatically] The Camera pipeline does not physically rotate or mirror buffers automatically, as this is computationally expensive. Instead, it is much more efficient to pass [`orientation`](/api/react-native-vision-camera/hybrid-objects/Frame#orientation) and [`isMirrored`](/api/react-native-vision-camera/hybrid-objects/Frame#ismirrored) along as metadata so consumers can apply rotation/mirroring logic themselves - for example, [react-native-vision-camera-skia](/api/react-native-vision-camera-skia) transforms a [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) using matrix rotations and mirroring - this runs on the GPU at rendering-level, avoiding expensive buffer modifications entirely. > Tip > > > If you need your buffers to be correctly rotated and mirrored already, enable [`enablePhysicalBufferRotation`](/api/react-native-vision-camera/interfaces/FrameOutputOptions#enablephysicalbufferrotation), which results in [`orientation`](/api/react-native-vision-camera/hybrid-objects/Frame#orientation) always being [`'up'`](/api/react-native-vision-camera/type-aliases/CameraOrientation) and [`isMirrored`](/api/react-native-vision-camera/hybrid-objects/Frame#ismirrored) always being `false`, indicating no rotation or mirroring is necessary to get the Frame's intended presentation. Most Frame Processing libraries allow setting orientation and mirror settings as flags, for example, [MLKit](https://developers.google.com/ml-kit) uses `UIImageOrientation`: ```swift let frame = ... let mlImage = MLImage(sampleBuffer: frame.sampleBuffer) switch frame.orientation { case .up: // [!code ++] mlImage.orientation = frame.isMirrored ? .portrait : .portraitMirrored case .down: // ... } ``` > Tip > > > See ["Orientation"](orientation) for more information about orientation. ### Understanding Pixel Formats [#understanding-pixel-formats] A [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) has a GPU-backed buffer that contains its pixels - their layout is described by the [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame)'s [`pixelFormat`](/api/react-native-vision-camera/hybrid-objects/Frame#pixelformat). ```ts const frame = ... console.log(frame.pixelFormat) // 'yuv-420-8-bit-full' ``` While the most commonly known [`PixelFormat`](/api/react-native-vision-camera/type-aliases/PixelFormat) is RGB (often [`'rgb-bgra-8-bit'`](/api/react-native-vision-camera/type-aliases/VideoPixelFormat)), it is not natively produced by the Camera, which means it requires expensive conversion causing higher latency, more bandwidth, and overall slower performance. The Camera's native pixel format is typically YUV (often [`'yuv-420-8-bit-full'`](/api/react-native-vision-camera/type-aliases/VideoPixelFormat)) or a vendor-specific variation of it ([`'private'`](/api/react-native-vision-camera/type-aliases/PixelFormat)), which uses \~50% less memory than RGB and requires little to no conversion overhead. > Note > > > See ["Frame Output: Choosing a Pixel Format"](frame-output#choosing-a-pixel-format) for more information about configuring the Pixel Format a [`CameraFrameOutput`](/api/react-native-vision-camera/hybrid-objects/CameraFrameOutput) streams in. > Note > > > See ["Pixel Formats Map: Inspecting a Pixel Format"](pixel-formats-map#inspecting-a-pixel-format) for more information about Pixel Formats and their native counterparts. ### Accessing Pixels in JS [#accessing-pixels-in-js] A [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) exposes its native, GPU-backed pixel buffer via [`getPixelBuffer()`](/api/react-native-vision-camera/hybrid-objects/Frame#getpixelbuffer), which provides zero-copy access into the Frame's actual buffer: ```ts const frame = ... // [!code ++] const buffer = frame.getPixelBuffer() ``` > Warning > > > The `buffer` is only valid as long as the [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) is valid (see [`Frame.isValid`](/api/react-native-vision-camera/hybrid-objects/Frame#isvalid)). > > Once the [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) is disposed (see [`dispose()`](https://nitro.margelo.com/docs/hybrid-objects)), the `buffer` must no longer be used. #### Interpreting Pixels [#interpreting-pixels] The Pixel Buffer's layout depends on the [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame)'s [`pixelFormat`](/api/react-native-vision-camera/hybrid-objects/Frame#pixelformat). For example, in [`'rgb-bgra-8-bit'`](/api/react-native-vision-camera/type-aliases/VideoPixelFormat), pixels are laid out in 8-bit Uints, in the order of \[B, G, R, A]. ```ts const frame = ... const buffer = frame.getPixelBuffer() const pixels = new Uint8Array(buffer) if (frame.pixelFormat === 'rgb-bgra-8-bit') { // [!code ++] const firstPixel = { r: pixels[2], g: pixels[1], b: pixels[0] } console.log(`First Pixel:`, firstPixel) } ``` #### Planar Frames [#planar-frames] Some [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame)s are **planar**, which means they don't have a contiguous buffer of pixel data but instead use two or more separate buffers for their pixel data. * On iOS, YUV Frames are often stored as two planar buffers in memory, one buffer for the `Y` plane, and one buffer for the interleaved `UV` plane. * On Android, YUV Frames are often three planar buffers - one `Y`, one `U` and one `V` plane. To get the individual [`FramePlane`](/api/react-native-vision-camera/hybrid-objects/FramePlane)s, use [`Frame.getPlanes()`](/api/react-native-vision-camera/hybrid-objects/Frame#getplanes): ```ts const frame = ... // [!code ++] if (frame.isPlanar) { // [!code ++] const planes = frame.getPlanes() if (planes.length === 2) { // Y + UV const yBuffer = planes[0].getPixelBuffer() const uvBuffer = planes[1].getPixelBuffer() const yPixels = new Uint8Array(yBuffer) const uvPixels = new Uint8Array(uvBuffer) const firstPixel = { y: yPixels[0], u: uvPixels[0], v: uvPixels[0] } } } else { // regular pixel buffer access } ``` > Note > > > If [`Frame.isPlanar`](/api/react-native-vision-camera/hybrid-objects/Frame#isplanar) is `false`, [`Frame.getPlanes()`](/api/react-native-vision-camera/hybrid-objects/Frame#getplanes) may return an empty array. ### Is a Frame still valid? [#is-a-frame-still-valid] A [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) is a large GPU-buffer of raw pixel data. A 4k RGB Frame is roughly \~34MB in memory, so if a [`CameraFrameOutput`](/api/react-native-vision-camera/hybrid-objects/CameraFrameOutput) streams at 60 FPS, it uses over 2GB/s of bandwidth. Typically the pipeline uses ring-buffers and avoids any copies to ensure it can run in realtime. To let the pipeline know that a buffer can be re-used, you need to dispose a [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) once you are done with it, ideally as quickly as possible: ```ts const frameOutput = useFrameOutput({ onFrame(frame) { 'worklet' try { // ..any processing } finally { // [!code ++] frame.dispose() } } }) ``` After a [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) has been disposed, it is no longer valid ([`Frame.isValid`](/api/react-native-vision-camera/hybrid-objects/Frame#isvalid) == `false`). Any Pixel Buffers or [`FramePlane`](/api/react-native-vision-camera/hybrid-objects/FramePlane)s are also no longer valid and must not be used anymore. --- # A Frame's NativeBuffer Source: Guides URL: https://visioncamera.margelo.com/docs/a-frames-nativebuffer A [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) is an in-memory instance, wrapping the native GPU-backed buffer. To allow better interop with third party libraries without adding native dependencies, a [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) exposes its underlying [`NativeBuffer`](/api/react-native-vision-camera/interfaces/NativeBuffer). ### What is a NativeBuffer [#what-is-a-nativebuffer] A [`NativeBuffer`](/api/react-native-vision-camera/interfaces/NativeBuffer) is a simple JS-object holding a [`pointer`](/api/react-native-vision-camera/interfaces/NativeBuffer#pointer) with a +1 retain count, and a [`release()`](/api/react-native-vision-camera/interfaces/NativeBuffer#release) function. After you are done using the [`NativeBuffer`](/api/react-native-vision-camera/interfaces/NativeBuffer), **you must release it again** via [`release()`](/api/react-native-vision-camera/interfaces/NativeBuffer#release), otherwise you'll leak memory and stall the Camera pipeline. ### How to implement NativeBuffer [#how-to-implement-nativebuffer] A native library can implement the "NativeBuffer contract" simply by agreeing to the same standard; a `pointer` is a `bigint` pointing to a native C++ instance, and `release()` is a function you must call to release your reference of the NativeBuffer again. The native C++ instance is assumed to have a ref-count of +1, meaning lifetime is guaranteed. [`pointer`](/api/react-native-vision-camera/interfaces/NativeBuffer#pointer) is a `bigint` (`uint64_t`/`uintptr`), which corresponds to the following platform types: | iOS | Android | | --------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | | [`CVPixelBufferRef`](https://developer.apple.com/documentation/corevideo/cvpixelbuffer) | [`AHardwareBuffer*`](https://developer.android.com/ndk/reference/group/a-hardware-buffer) | See [@Shopify/react-native-skia](https://github.com/Shopify/react-native-skia)'s implementation of `NativeBuffer` for reference: [`JsiSkImageFactory.h`](https://github.com/Shopify/react-native-skia/blob/2552fc7edcb0a37b4ad1b9734a2c82bf97f06352/packages/skia/cpp/api/JsiSkImageFactory.h#L44-L56) ### Getting a Frame's NativeBuffer [#getting-a-frames-nativebuffer] To get a [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame)'s underlying [`NativeBuffer`](/api/react-native-vision-camera/interfaces/NativeBuffer), use [`getNativeBuffer()`](/api/react-native-vision-camera/hybrid-objects/Frame#getnativebuffer): ```ts const frame = ... const nativeBuffer = frame.getNativeBuffer() // ...processing... nativeBuffer.release() frame.dispose() ``` --- # A Photo Source: Guides URL: https://visioncamera.margelo.com/docs/a-photo A [`Photo`](/api/react-native-vision-camera/hybrid-objects/Photo) is a RAW- or processed in-memory buffer, captured by a [`CameraPhotoOutput`](/api/react-native-vision-camera/hybrid-objects/CameraPhotoOutput). See ["The Photo Output"](photo-output) for more information about capturing [`Photo`](/api/react-native-vision-camera/hybrid-objects/Photo)s. ### Displaying a Photo [#displaying-a-photo] A [`Photo`](/api/react-native-vision-camera/hybrid-objects/Photo) holds an in-memory buffer of its pixels, and can be converted to an [`Image`](https://github.com/mrousavy/react-native-nitro-image) (from [react-native-nitro-image](https://github.com/mrousavy/react-native-nitro-image)) entirely in-memory by using [`toImageAsync()`](/api/react-native-vision-camera/hybrid-objects/Photo#toimageasync): ```ts const photo = ... const image = await photo.toImageAsync() photo.dispose() ``` The `image` can then be displayed in a [``](https://github.com/mrousavy/react-native-nitro-image) view: ```tsx import { NitroImage } from 'react-native-nitro-image' function App() { const image = ... return ( ) } ``` ### Dispose when no longer used [#dispose-when-no-longer-used] As with all in-memory objects holding large native memory ([`Photo`](/api/react-native-vision-camera/hybrid-objects/Photo), [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame), [`Image`](https://github.com/mrousavy/react-native-nitro-image) or more) make sure to `dispose()` the [`Photo`](/api/react-native-vision-camera/hybrid-objects/Photo) once you are no longer using it, as otherwise the JS Runtime might not immediately delete it, possibly exhausting system resources or even stalling the Camera preventing further captures. ```ts const photo = ... photo.dispose() ``` ### Saving to a File [#saving-to-a-file] To save a [`Photo`](/api/react-native-vision-camera/hybrid-objects/Photo) to an image file, use [`saveToTemporaryFileAsync()`](/api/react-native-vision-camera/hybrid-objects/Photo#savetotemporaryfileasync) or [`saveToFileAsync(...)`](/api/react-native-vision-camera/hybrid-objects/Photo#savetofileasync): ```ts const photo = ... const path = await photo.saveToTemporaryFileAsync() ``` Photo file paths are plain filesystem paths, not `file://` URLs. If another library expects a URI, prepend `file://` at the call site. #### Saving to the Camera Roll [#saving-to-the-camera-roll] After a [`Photo`](/api/react-native-vision-camera/hybrid-objects/Photo) has been saved to a file, you can save it to the user's Camera Roll using a library like [@react-native-camera-roll/camera-roll](https://github.com/react-native-cameraroll/react-native-cameraroll) or [expo-media-library](https://docs.expo.dev/versions/latest/sdk/media-library/). ### Container Formats [#container-formats] [`Photo`](/api/react-native-vision-camera/hybrid-objects/Photo)s can be captured in different container formats (see [`PhotoContainerFormat`](/api/react-native-vision-camera/type-aliases/PhotoContainerFormat)), which adjusts the capture pipeline's processing steps accordingly - for example, [`'dcm'`](/api/react-native-vision-camera/type-aliases/PhotoContainerFormat) is a RAW format and applies almost no processing in a capture pipeline, whereas [`'jpeg'`](/api/react-native-vision-camera/type-aliases/PhotoContainerFormat) or [`'heic'`](/api/react-native-vision-camera/type-aliases/PhotoContainerFormat) are processed formats and apply color-grading, compression, multi-capture-fusion, HDR, and other processing steps in the capture pipeline. You can inspect a [`Photo`](/api/react-native-vision-camera/hybrid-objects/Photo)'s [`PhotoContainerFormat`](/api/react-native-vision-camera/type-aliases/PhotoContainerFormat) via the [`containerFormat`](/api/react-native-vision-camera/hybrid-objects/Photo#containerformat) property: ```ts console.log(photo.containerFormat) // 'jpeg' ``` ### Accessing a Photo's Pixel Buffer [#accessing-a-photos-pixel-buffer] Some [`Photo`](/api/react-native-vision-camera/hybrid-objects/Photo)s allow accessing their pixel buffer directly in-memory, without decoding. On iOS, this is often only available on RAW photos ([`containerFormat`](/api/react-native-vision-camera/hybrid-objects/Photo#containerformat) == [`'dcm'`](/api/react-native-vision-camera/type-aliases/PhotoContainerFormat)), while on Android this is available on all Photos. ```ts if (photo.hasPixelBuffer) { const pixelBuffer = photo.getPixelBuffer() const rgba = new Uint8Array(pixelBuffer) // process pixels } ``` A Photo's Pixel Buffer does not contain any container metadata (JPEG/HEIC headers), or EXIF flags - it's purely pixels. #### Accessing the Pixel Buffer via NitroImage [#accessing-the-pixel-buffer-via-nitroimage] Since a [`Photo`](/api/react-native-vision-camera/hybrid-objects/Photo) can be converted to an [`Image`](https://github.com/mrousavy/react-native-nitro-image) (from [react-native-nitro-image](https://github.com/mrousavy/react-native-nitro-image)), it is also a common pattern to access pixels via the [react-native-nitro-image](https://github.com/mrousavy/react-native-nitro-image) APIs; ```ts const photo = ... const image = await photo.toImageAsync() const pixelBuffer = await image.toRawPixelData() ``` > Note > > > It is worth noting that converting to an [`Image`](https://github.com/mrousavy/react-native-nitro-image) performs an encoding pass, and reading the Pixel Buffer requires a decoding pass. > > > > [Accessing a Photo's Pixel Buffer](#accessing-a-photos-pixel-buffer) directly does not require any encoding/decoding passes. ### Accessing a Photo's Encoded Image Data [#accessing-a-photos-encoded-image-data] The [`Photo`](/api/react-native-vision-camera/hybrid-objects/Photo) also provides access to its Encoded Image Data - which is what would be written to a File if it was saved - including container metadata and EXIF flags. You can get the Encoded Image Data via [`getFileDataAsync()`](/api/react-native-vision-camera/hybrid-objects/Photo#getfiledataasync), for example to write this to a network stream entirely in-memory; ```ts const photo = ... const encodedData = await photo.getFileDataAsync() // Upload to backend: await fetch('https://my-backend.com/upload', { method: 'POST', headers: { 'Content-Type': 'image/jpeg' }, body: Buffer.from(encodedData) }) ``` #### Skia Images [#skia-images] A [`Photo`](/api/react-native-vision-camera/hybrid-objects/Photo) can also be imported into [@shopify/react-native-skia](https://github.com/shopify/react-native-skia) using the Encoded Image Data APIs, which allows you to apply shaders or custom drawing/rendering commands to it: ```ts const photo = ... const encodedData = await photo.getFileDataAsync() // Convert Photo to SkImage: const bytes = new Uint8Array(buffer) const data = Skia.Data.fromBytes(bytes) const image = Skia.Image.MakeImageFromEncoded(data) // Render SkImage in SkCanvas now ``` --- # A ScannedObject Source: Guides URL: https://visioncamera.margelo.com/docs/a-scannedobject A [`ScannedObject`](/api/react-native-vision-camera/hybrid-objects/ScannedObject) is any kind of object (like a machine readable code or a human face) scanned by a [`CameraObjectOutput`](/api/react-native-vision-camera/hybrid-objects/CameraObjectOutput). ### ScannedObject subclasses [#scannedobject-subclasses] [`ScannedObject`](/api/react-native-vision-camera/hybrid-objects/ScannedObject) is the base-class of all objects scanned by the [`CameraObjectOutput`](/api/react-native-vision-camera/hybrid-objects/CameraObjectOutput). There are multiple subclasses of [`ScannedObject`](/api/react-native-vision-camera/hybrid-objects/ScannedObject), such as [`ScannedCode`](/api/react-native-vision-camera/hybrid-objects/ScannedCode) (e.g. for QR codes or barcodes) or [`ScannedFace`](/api/react-native-vision-camera/hybrid-objects/ScannedFace): ```ts const scannedObject = ... // [!code ++] if (isScannedCode(scannedObject)) { console.log(`Code: ${scannedObject.value}`) // [!code ++] } else if (isScannedFace(scannedObject)) { console.log(`Face: ${scannedObject.faceID}`) } else { console.log(`Any Object: ${scannedObject.type}`) } ``` ### Coordinate System Conversions [#coordinate-system-conversions] A [`ScannedObject`](/api/react-native-vision-camera/hybrid-objects/ScannedObject)'s [`boundingBox`](/api/react-native-vision-camera/hybrid-objects/ScannedObject#boundingbox) describes its location in the Camera's coordinate system - which ranges from `0.0` to `1.0`. Additionally, a [`ScannedCode`](/api/react-native-vision-camera/hybrid-objects/ScannedCode) exposes [`cornerPoints`](/api/react-native-vision-camera/hybrid-objects/ScannedCode#cornerpoints), and a [`ScannedFace`](/api/react-native-vision-camera/hybrid-objects/ScannedFace) exposes [`rollAngle`](/api/react-native-vision-camera/hybrid-objects/ScannedFace#rollangle) and [`yawAngle`](/api/react-native-vision-camera/hybrid-objects/ScannedFace#yawangle), which are also relative to the Camera's coordinate system. You can convert all [`ScannedObject`](/api/react-native-vision-camera/hybrid-objects/ScannedObject)'s coordinates to a Preview View coordinate system using [`convertScannedObjectCoordinatesToViewCoordinates(...)`](/api/react-native-vision-camera/interfaces/PreviewViewMethods#convertscannedobjectcoordinatestoviewcoordinates): ```tsx function App() { const camera = useRef(null) const objectOutput = useObjectOutput({ types: ['qr'], onObjectsScanned(objects) { for (const object of objects) { // [!code ++:2] const converted = camera.current .convertScannedObjectCoordinatesToViewCoordinates(object) } } }) return ( ) } ``` ```tsx function App() { const preview = useRef(null) const objectOutput = useObjectOutput({ types: ['qr'], onObjectsScanned(objects) { for (const object of objects) { // [!code ++:2] const converted = preview.current .convertScannedObjectCoordinatesToViewCoordinates(object) } } }) return ( { preview.current = r })} {...props} /> ) } ``` --- # Async Frame Processing Source: Guides URL: https://visioncamera.margelo.com/docs/async-frame-processing Frame Processors run fully synchronously, on the Camera Thread. If your Frame Processor cannot keep up with the Camera's frame rate, you can move your processing logic to an asynchronous runner instead. ### The Async Runner [#the-async-runner] To create an [`AsyncRunner`](/api/react-native-vision-camera/interfaces/AsyncRunner) use [`useAsyncRunner()`](/api/react-native-vision-camera/functions/useAsyncRunner): ```ts const asyncRunner = useAsyncRunner() ``` ```ts const asyncRunner = createAsyncRunner() ``` > Dependency > > > The [`AsyncRunner`](/api/react-native-vision-camera/interfaces/AsyncRunner) requires [react-native-vision-camera-worklets](/api/react-native-vision-camera-worklets) (and [react-native-worklets](https://docs.swmansion.com/react-native-worklets/docs/)) to be installed. Then, schedule work on the [`AsyncRunner`](/api/react-native-vision-camera/interfaces/AsyncRunner)'s Thread: ```ts const asyncRunner = useAsyncRunner() const frameOutput = useFrameOutput({ onFrame(frame) { 'worklet' // [!code ++:6] const wasHandled = asyncRunner.runAsync(() => { 'worklet' doSomeHeavyProcessing(frame) // Async task finished - dispose the Frame now. frame.dispose() }) if (!wasHandled) { // `asyncRunner` is busy - drop this Frame! frame.dispose() } } }) ``` If the [`AsyncRunner`](/api/react-native-vision-camera/interfaces/AsyncRunner) is currently busy, it will immediately return `false` and not schedule the work. In this case, you must drop the [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) inside your [`onFrame(...)`](/api/react-native-vision-camera/interfaces/UseFrameOutputProps#onframe) callback via `dispose()`. If the [`AsyncRunner`](/api/react-native-vision-camera/interfaces/AsyncRunner) can pick up the work, it will return `true` and you can dispose the [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) later, inside the async method's body. --- # Barcode Scanner vs Object Output Source: Guides URL: https://visioncamera.margelo.com/docs/barcode-scanner-vs-object-output Both [the Barcode Scanner](barcode-scanner) and [the Object Output](object-output) allow scanning codes in the Camera. While they are similar, there are a few subtle differences between the two. ### Implementation detail [#implementation-detail] [The Object Output](object-output) is a native Camera feature built into iOS via [`AVCaptureMetadataOutput`](https://developer.apple.com/documentation/avfoundation/avcapturemetadataoutput), which has very little overhead and is used throughout the OS - even in the stock Camera app. Since Android does not have a native Object Output, [the Object Output](object-output) is **iOS only**. [The Barcode Scanner](barcode-scanner) on the other hand is a custom Frame Processing pipeline using [MLKit](https://developers.google.com/ml-kit), which is a third-party dependency and contains the \~2.4MB ML Model - see [MLKit: Barcode scanning](https://developers.google.com/ml-kit/vision/barcode-scanning) for more information. It works on both iOS and Android. #### Platform Agnostic [#platform-agnostic] Since [the Barcode Scanner](barcode-scanner) uses the same MLKit implementation on iOS and Android, the scanned codes are platform-agnostic. In previous versions of VisionCamera, there were some codes readable on iOS but not on Android (like `'upc-a'` vs `'ean-13'`) - this is solved by using [the Barcode Scanner](barcode-scanner) on iOS too. ### Different Object/Code Types [#different-objectcode-types] [The Object Output](object-output) supports scanning more than just Barcodes - it allows detecting Faces ([`'face'`](/api/react-native-vision-camera/type-aliases/ScannedObjectType)), Bodies ([`'human-body'`](/api/react-native-vision-camera/type-aliases/ScannedObjectType), [`'dog-body'`](/api/react-native-vision-camera/type-aliases/ScannedObjectType) or [`'cat-body'`](/api/react-native-vision-camera/type-aliases/ScannedObjectType)) and more. [The Barcode Scanner](barcode-scanner) is optimized for machine-readable codes like [`'qr-code'`](/api/react-native-vision-camera-barcode-scanner/type-aliases/BarcodeFormat) or [`'code-128'`](/api/react-native-vision-camera-barcode-scanner/type-aliases/BarcodeFormat). ### Custom Decoding [#custom-decoding] [The Barcode Scanner](barcode-scanner) allows reading the code's value both as a raw string as well as a raw `ArrayBuffer`. Additionally, it provides a human-friendly display value, useful for codes that are not human-friendly like [`'wifi'`](/api/react-native-vision-camera-barcode-scanner/type-aliases/BarcodeFormat). ### Usage in a Frame Processor [#usage-in-a-frame-processor] [The Barcode Scanner](barcode-scanner) can be imperatively called inside a Frame Processor (see ["The Frame Output"](frame-output)), which offers more flexibility for customization. --- # The Barcode Scanner Source: Guides URL: https://visioncamera.margelo.com/docs/barcode-scanner The Barcode Scanner allows detecting machine readable codes (like Barcodes or QR codes) using [MLKit](https://developers.google.com/ml-kit). It ships a simple [``](/api/react-native-vision-camera-barcode-scanner/views/CodeScanner) view, a Barcode Scanner Frame Processor Plugin, a Barcode Scanner [`CameraOutput`](/api/react-native-vision-camera/hybrid-objects/CameraOutput), and still image scanning for [`Image`](https://github.com/mrousavy/react-native-nitro-image) instances via the [react-native-vision-camera-barcode-scanner](/api/react-native-vision-camera-barcode-scanner) library. Unlike [the Object Output](object-output) (which is iOS-only), the Barcode Scanner works on both iOS and Android. > Dependency > > > The Barcode Scanner requires [react-native-vision-camera-barcode-scanner](/api/react-native-vision-camera-barcode-scanner) to be installed. > Tip > > > If you only need a one-shot native QR/Barcode scanner, use [react-native-data-scanner](https://github.com/mrousavy/react-native-data-scanner) instead. > > See ["VisionCamera vs Data Scanner"](visioncamera-vs-data-scanner) for more information. ### Using the Barcode Scanner [#using-the-barcode-scanner] The [``](/api/react-native-vision-camera-barcode-scanner/views/CodeScanner) view is a simple view component to scan Barcodes: ```tsx function App() { const isFocused = useIsFocused() return ( { console.log(`Scanned ${barcodes.length} barcodes!`) }} onError={(error) => { console.error(`Error scanning barcodes:`, error) }} /> ) } ``` For more control around the [``](/api/react-native-vision-camera/views/Camera) or [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession), you can also create a Barcode Scanner [`CameraOutput`](/api/react-native-vision-camera/hybrid-objects/CameraOutput) via [`useBarcodeScannerOutput(...)`](/api/react-native-vision-camera-barcode-scanner/functions/useBarcodeScannerOutput), which can then be attached to a session: ```tsx function App() { // [!code ++:9] const barcodeOutput = useBarcodeScannerOutput({ barcodeFormats: ['all-formats'], onBarcodeScanned(barcodes) { console.log(`Scanned ${barcodes.length} barcodes!`) }, onError(error) { console.error(`Failed to scan barcodes!`, error) } }) return ( ) } ``` For full control over scanning and coordinate system conversions, create a [`BarcodeScanner`](/api/react-native-vision-camera-barcode-scanner/hybrid-objects/BarcodeScanner) directly via [`useBarcodeScanner(...)`](/api/react-native-vision-camera-barcode-scanner/functions/useBarcodeScanner), which can then be used inside a Frame Processor (see ["The Frame Output"](frame-output)) to scan Barcodes in a [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame): ```tsx function App() { // [!code ++:3] const barcodeScanner = useBarcodeScanner({ barcodeFormats: ['all-formats'], }) const frameOutput = useFrameOutput({ onFrame(frame) { 'worklet' // [!code ++] const barcodes = barcodeScanner.scanCodes(frame) console.log(`Detected ${barcodes.length} barcodes!`) frame.dispose() } }) return ( ) } ``` To scan objects in a still [`Image`](https://github.com/mrousavy/react-native-nitro-image), create a [`BarcodeScanner`](/api/react-native-vision-camera-barcode-scanner/hybrid-objects/BarcodeScanner) and use [`scanCodesInImageAsync(...)`](/api/react-native-vision-camera-barcode-scanner/hybrid-objects/BarcodeScanner#scancodesinimageasync): ```ts import { loadImage } from 'react-native-nitro-image' import { createBarcodeScanner } from 'react-native-vision-camera-barcode-scanner' async function scanBarcodeImage() { const image = await loadImage({ url: 'https://example.com/barcode.png' }) const barcodeScanner = createBarcodeScanner({ barcodeFormats: ['all-formats'], }) try { const barcodes = await barcodeScanner.scanCodesInImageAsync(image) console.log(`Detected ${barcodes.length} barcodes!`) } finally { image.dispose() barcodeScanner.dispose() } } ``` ### Configuring Barcode Formats [#configuring-barcode-formats] The examples above are configured to detect **all** [`BarcodeFormat`](/api/react-native-vision-camera-barcode-scanner/type-aliases/BarcodeFormat)s. To improve performance, you should narrow [`barcodeFormats`](/api/react-native-vision-camera-barcode-scanner/interfaces/BarcodeScannerOptions#barcodeformats) down to only the formats you need - for example [`'code-128'`](/api/react-native-vision-camera-barcode-scanner/type-aliases/BarcodeFormat) - which is a common Barcode Format, or [`'qr-code'`](/api/react-native-vision-camera-barcode-scanner/type-aliases/BarcodeFormat) for square QR codes. ### Test it [#test-it] To verify your [``](/api/react-native-vision-camera-barcode-scanner/views/CodeScanner) works, try scanning this example [`'code-128'`](/api/react-native-vision-camera-barcode-scanner/type-aliases/BarcodeFormat) Barcode: An example Barcode 128 > Tip > > > See ["A Barcode"](a-barcode) for more information about a [`Barcode`](/api/react-native-vision-camera-barcode-scanner/hybrid-objects/Barcode). --- # Camera Controller Source: Guides URL: https://visioncamera.margelo.com/docs/camera-controller A [`CameraController`](/api/react-native-vision-camera/hybrid-objects/CameraController) controls an active [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession)'s properties, like [zoom](zooming), [exposure](exposure-bias) or [focus](tap-to-focus). ### Get a CameraController [#get-a-cameracontroller] The [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession)'s [`configure(...)`](/api/react-native-vision-camera/hybrid-objects/CameraSession#configure) method returns one [`CameraController`](/api/react-native-vision-camera/hybrid-objects/CameraController) per configured [`CameraSessionConnection`](/api/react-native-vision-camera/interfaces/CameraSessionConnection) - which, in single-camera Sessions is always one or zero. The [``](/api/react-native-vision-camera/views/Camera) view exposes its [`CameraController`](/api/react-native-vision-camera/hybrid-objects/CameraController) under its [`CameraRef`](/api/react-native-vision-camera/interfaces/CameraRef): ```tsx function App() { // [!code ++] const camera = useRef(null) return ( { // Now the `controller` is set on the ref const controller = camera.current.controller }} /> ) } ``` The [`useCamera(...)`](/api/react-native-vision-camera/functions/useCamera) hook returns a [`CameraController`](/api/react-native-vision-camera/hybrid-objects/CameraController): ```tsx function App() { // [!code ++:4] const camera = useCamera({ isActive: true, device: 'back', }) } ``` The [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession) returns all [`CameraController`](/api/react-native-vision-camera/hybrid-objects/CameraController)s in [`configure(...)`](/api/react-native-vision-camera/hybrid-objects/CameraSession#configure): ```tsx const device = ... const session = ... // [!code ++:8] const controllers = await session.configure([ { input: device, outputs: [], constraints: [] } ], {}) ``` ### Probe for feature availability [#probe-for-feature-availability] Since Camera hardware varies between vendors, always make sure to probe for available features - for example, to use exposure bias (see ["Exposure Bias"](exposure-bias)) make sure the [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice) supports it: ```ts const controller = ... if (controller.device.supportsExposureBias) { const targetExposure = 5 const clampedExposure = Math.min(targetExposure, controller.device.maxExposureBias) await controller.setExposureBias(clampedExposure) } ``` > Note > > > See [`CameraController`](/api/react-native-vision-camera/hybrid-objects/CameraController) for a full list of available features. --- # Camera Extensions Source: Guides URL: https://visioncamera.margelo.com/docs/camera-extensions Some [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice)s support vendor-specific [`CameraExtension`](/api/react-native-vision-camera/hybrid-objects/CameraExtension)s - such extensions provide application-level access to custom pipelines like [`'hdr'`](/api/react-native-vision-camera/type-aliases/CameraExtensionType), [`'night'`](/api/react-native-vision-camera/type-aliases/CameraExtensionType), [`'bokeh'`](/api/react-native-vision-camera/type-aliases/CameraExtensionType) or [`'face-retouch.'`](/api/react-native-vision-camera/type-aliases/CameraExtensionType). ### Getting available Extensions [#getting-available-extensions] To get all available [`CameraExtension`](/api/react-native-vision-camera/hybrid-objects/CameraExtension)s, use [`useCameraDeviceExtensions(...)`](/api/react-native-vision-camera/functions/useCameraDeviceExtensions) or [`CameraDeviceFactory.getSupportedExtensions(...)`](/api/react-native-vision-camera/hybrid-objects/CameraDeviceFactory#getsupportedextensions): ```ts const device = ... const extensions = useCameraDeviceExtensions(device) ``` ```ts const device = ... const deviceFactory = await VisionCamera.createDeviceFactory() const extensions = await deviceFactory.getSupportedExtensions(device) ``` ### Enabling an Extension [#enabling-an-extension] To enable a [`CameraExtension`](/api/react-native-vision-camera/hybrid-objects/CameraExtension), configure the [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession) connection: ```tsx function App() { const device = ... const extensions = useCameraDeviceExtensions(device) const extension = extensions.find((e) => e.type === 'night') return ( ) } ``` ```tsx function App() { const device = ... const extensions = useCameraDeviceExtensions(device) const extension = extensions.find((e) => e.type === 'night') const camera = useCamera({ isActive: true, device: device, // [!code ++] cameraExtension: extension }) } ``` ```tsx const device = ... const session = ... const deviceFactory = await VisionCamera.createDeviceFactory() const extensions = await deviceFactory.getSupportedExtensions(device) const extension = extensions.find((e) => e.type === 'night') const controllers = await session.configure([ { input: device, outputs: [], constraints: { // [!code ++] cameraExtension: extension } } ], {}) ``` ### Limitations [#limitations] Camera Extensions switch the camera into a vendor-defined processing mode. In this mode the capture pipeline is no longer fully controlled by the app, but by the device's built-in ISP and proprietary algorithms - which limits available Camera features - such as HDR videos, RAW capture or Frame Streaming. #### No Video HDR [#no-video-hdr] [`CameraExtension`](/api/react-native-vision-camera/hybrid-objects/CameraExtension)s only work in SDR video sessions. Make sure no [`{ videoDynamicRange: ... }`](/api/react-native-vision-camera/interfaces/VideoDynamicRangeConstraint) constraint is set (or its [`videoDynamicRange`](/api/react-native-vision-camera/interfaces/VideoDynamicRangeConstraint#videodynamicrange) is an SDR Dynamic Range) to disable [Video HDR](video-hdr). #### No RAW Photo Capture [#no-raw-photo-capture] [`CameraExtension`](/api/react-native-vision-camera/hybrid-objects/CameraExtension)s don't work with RAW capture. Make sure you are not using a [`CameraPhotoOutput`](/api/react-native-vision-camera/hybrid-objects/CameraPhotoOutput) configured to capture RAW/[`'dng'`](/api/react-native-vision-camera/type-aliases/PhotoContainerFormat), but instead capture in a native or processed format. #### Not every Camera Extension supports Frame Streaming [#not-every-camera-extension-supports-frame-streaming] Some [`CameraExtension`](/api/react-native-vision-camera/hybrid-objects/CameraExtension)s don't support Frame Streaming (see ["The Frame Output"](frame-output)) while they are enabled. To find out if a [`CameraExtension`](/api/react-native-vision-camera/hybrid-objects/CameraExtension) works with Frame Streaming, check [`supportsFrameStreaming`](/api/react-native-vision-camera/hybrid-objects/CameraExtension#supportsframestreaming): ```tsx function App() { const device = ... const frameOutput = ... const extensions = useCameraDeviceExtensions(device) const extension = extensions.find((e) => { // [!code ++] return e.supportsFrameStreaming && e.type === 'night' }) return ( ) } ``` --- # Camera Outputs Source: Guides URL: https://visioncamera.margelo.com/docs/camera-outputs A [`CameraOutput`](/api/react-native-vision-camera/hybrid-objects/CameraOutput) is the base-class for all outputs a [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice) can stream to using a [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession). VisionCamera provides 5 core outputs: * [`CameraPhotoOutput`](/api/react-native-vision-camera/hybrid-objects/CameraPhotoOutput): See ["The Photo Output"](photo-output) * [`CameraVideoOutput`](/api/react-native-vision-camera/hybrid-objects/CameraVideoOutput): See ["The Video Output"](video-output) * [`CameraFrameOutput`](/api/react-native-vision-camera/hybrid-objects/CameraFrameOutput): See ["The Frame Output"](frame-output) * [`CameraDepthFrameOutput`](/api/react-native-vision-camera/hybrid-objects/CameraDepthFrameOutput): See ["The Depth Output"](depth-output) * [`CameraPreviewOutput`](/api/react-native-vision-camera/hybrid-objects/CameraPreviewOutput): See ["The Preview Output"](preview-output) ### Connecting a CameraOutput to a CameraSession [#connecting-a-cameraoutput-to-a-camerasession] To connect a [`CameraOutput`](/api/react-native-vision-camera/hybrid-objects/CameraOutput) to a [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession), simply add it in the output connections array: ```tsx function App() { const photoOutput = ... const videoOutput = ... return ( ) } ``` ```tsx function App() { const photoOutput = ... const videoOutput = ... const camera = useCamera({ isActive: true, device: "back", // [!code ++] outputs: [photoOutput, videoOutput], }) } ``` ```tsx const session = await VisionCamera.createCameraSession(false) const photoOutput = ... const videoOutput = ... await session.configure([ { input: 'back', // [!code ++] outputs: [ { output: photoOutput, mirrorMode: 'auto' }, { output: videoOutput, mirrorMode: 'auto' } ], constraints: [] } ], {}) await session.start() ``` #### Resolutions [#resolutions] A Camera hardware provides a single stream, which is configured at a specific resolution. Each [`CameraOutput`](/api/react-native-vision-camera/hybrid-objects/CameraOutput) specifies its own target resolution (either specified by the user, or internally configured by VisionCamera), so VisionCamera internally configures the Camera hardware to most closely match the [`CameraOutput`](/api/react-native-vision-camera/hybrid-objects/CameraOutput)'s target resolution. For example, to configure both Video and Photo outputs to stream in 4k, set your [`targetResolution`](/api/react-native-vision-camera/interfaces/PhotoOutputOptions#targetresolution) to [`CommonResolutions.UHD_16_9`](/api/react-native-vision-camera/variables/CommonResolutions#uhd_16_9): ```ts const photoOutput = usePhotoOutput({ targetResolution: CommonResolutions.UHD_16_9 }) const videoOutput = usePhotoOutput({ targetResolution: CommonResolutions.UHD_16_9 }) ``` ```ts const photoOutput = createPhotoOutput({ targetResolution: CommonResolutions.UHD_16_9 }) const videoOutput = createPhotoOutput({ targetResolution: CommonResolutions.UHD_16_9 }) ``` When multiple [`CameraOutput`](/api/react-native-vision-camera/hybrid-objects/CameraOutput)s are connected to a [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession), output resolutions are negotiated across outputs to find the closest matching Camera stream format. > Tip > > > See ["Constraints API"](constraints) for more information. #### Output readiness [#output-readiness] Often a [`CameraOutput`](/api/react-native-vision-camera/hybrid-objects/CameraOutput) only becomes usable after it has been connected to the [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession) - in this case, use the [`onConfigured={...}`](/api/react-native-vision-camera/interfaces/CameraProps#onconfigured) callback: ```tsx function App() { const output = ... return ( { output.doSomething() }} /> ) } ``` ```tsx function App() { const output = ... const camera = useCamera({ isActive: true, device: 'back', outputs: [output], // [!code ++:3] onConfigured() { output.doSomething() } }) } ``` ```tsx const session = await VisionCamera.createCameraSession(false) const output = ... await session.configure([ { input: 'back', outputs: [ { output: output, mirrorMode: 'auto' } ], constraints: [] } ], {}) await session.start() // [!code ++] output.doSomething() ``` --- # Camera Session Source: Guides URL: https://visioncamera.margelo.com/docs/camera-session A [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession) connects inputs (see ["Camera Devices"](devices)) to outputs (see ["Camera Outputs"](camera-outputs)) and orchestrates lifecycle. ### Creating a CameraSession [#creating-a-camerasession] To create a [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession), either use the [``](/api/react-native-vision-camera/views/Camera) view, the [`useCamera(...)`](/api/react-native-vision-camera/functions/useCamera) hook, or create a [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession) manually: ```tsx function App() { return ( // [!code ++:5] ) } ``` ```tsx function App() { // [!code ++:4] const camera = useCamera({ isActive: true, device: 'back', }) } ``` ```tsx const device = ... const isMultiCam = false // [!code ++:8] const session = await VisionCamera.createCameraSession(isMultiCam) await session.configure([ { input: device, outputs: [], constraints: [] } ], {}) await session.start() ``` > Tip > > > See ["Multi-Camera"](multi-camera) for more information about multi-camera sessions. ### CameraSession Configuration [#camerasession-configuration] While the [``](/api/react-native-vision-camera/views/Camera) view and [`useCamera(...)`](/api/react-native-vision-camera/functions/useCamera) hook automatically manage session configuration and lifecycle for you (see ["Lifecycle"](lifecycle)), manually using a [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession) requires you to explicitly configure, start and stop the session yourself. > Tip > > > If you manually use a [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession), ensure that most configuration (see [`configure(...)`](/api/react-native-vision-camera/hybrid-objects/CameraSession#configure)) is handled before you start the session (see [`start()`](/api/react-native-vision-camera/hybrid-objects/CameraSession#start)), as any configuration while the session is running can be expensive and cause stutters. There's three stages to Camera configuration: 1. Session-wide configuration: (see [`CameraSessionConfiguration`](/api/react-native-vision-camera/interfaces/CameraSessionConfiguration)) 2. Connection-wide configuration (see [`Constraint`](/api/react-native-vision-camera/type-aliases/Constraint)) 3. Output-specific configuration (see [`CameraOutputConfiguration`](/api/react-native-vision-camera/interfaces/CameraOutputConfiguration)) > Note > > > Properties like [zoom](zooming), [exposure](exposure-bias) or [focus](tap-to-focus) can be adjusted without Session re-configuration - see ["Camera Controller"](camera-controller) ### Interruptions [#interruptions] A [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession) can be interrupted, for example due to an incoming FaceTime call or device thermal throttling (see [`InterruptionReason`](/api/react-native-vision-camera/type-aliases/InterruptionReason)). You can listen to interruptions: ```tsx function App() { return ( console.log(`Interrupted: ${reason}`)} onInterruptionEnded={() => console.log(`Interruption ended`)} /> ) } ``` ```tsx function App() { const camera = useCamera({ isActive: true, device: 'back', // [!code ++:6] onInterruptionStarted(reason) { console.log(`Interrupted: ${reason}`) }, onInterruptionEnded() { console.log(`Interruption ended`) } }) } ``` ```tsx const session = ... // [!code ++:6] session.addOnInterruptionStartedListener((reason) => { console.log(`Interrupted: ${reason}`) }) session.addOnInterruptionEndedListener(() => { console.log(`Interruption ended`) }) ``` ### Stopping a CameraSession [#stopping-a-camerasession] To stop a [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession), use [`stop()`](/api/react-native-vision-camera/hybrid-objects/CameraSession#stop). To fully dispose all resources it holds, use [`dispose()`](https://nitro.margelo.com/docs/hybrid-objects) after it has been stopped. --- # Source: Guides URL: https://visioncamera.margelo.com/docs/camera-view The [``](/api/react-native-vision-camera/views/Camera) is a convenience wrapper around [`useCamera(...)`](/api/react-native-vision-camera/functions/useCamera) that adds a [`PreviewView`](/api/react-native-vision-camera/type-aliases/PreviewView), wraps methods in a [`CameraRef`](/api/react-native-vision-camera/interfaces/CameraRef), and supports updating [`zoom`](/api/react-native-vision-camera/interfaces/CameraViewProps#zoom) and [`exposure`](/api/react-native-vision-camera/interfaces/CameraViewProps#exposure) via Reanimated `SharedValue`s. In most apps, [``](/api/react-native-vision-camera/views/Camera) provides enough flexibility for all use-cases. If you need full control over the individual connections and preview outputs (for example to build a multi-camera session), you should use the [``](nativepreview-view) directly. ### Using the `` [#using-the-camera-] To display a Camera, grab a [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice) and render the [``](/api/react-native-vision-camera/views/Camera) view: ```tsx function App() { const device = useCameraDevice('back') return ( ) } ``` > Tip > > > See ["Camera Devices"](devices) for more information about [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice) and [`useCameraDevice(...)`](/api/react-native-vision-camera/functions/useCameraDevice). ### The `isActive` prop [#the-isactive-prop] [`isActive`](/api/react-native-vision-camera/interfaces/CameraViewProps#isactive) controls the Camera's lifecycle. When it is `true`, the Camera will start as soon as possible (see [`CameraSession.start()`](/api/react-native-vision-camera/hybrid-objects/CameraSession#start)) and keeps running until it is unmounted. It is recommended to set [`isActive`](/api/react-native-vision-camera/interfaces/CameraViewProps#isactive) to `false` as soon as your scene/page/screen goes out of focus, which will stop the Camera (see [`CameraSession.stop()`](/api/react-native-vision-camera/hybrid-objects/CameraSession#stop)) while keeping it configured and prepared in-memory. For example, in [react-navigation](https://github.com/react-navigation/react-navigation) you would use [`useIsFocused()`](https://reactnavigation.org/docs/use-is-focused/): ```tsx import { useIsFocused } from '@react-navigation/native' function App() { const device = useCameraDevice('back') // [!code ++] const isFocused = useIsFocused() return ( ) } ``` > Note > > > See ["Lifecycle"](lifecycle) for more information about the Camera's lifecycle. ### Native Gesture Controllers [#native-gesture-controllers] The [``](/api/react-native-vision-camera/views/Camera) view has built-in support for various native gestures - such as the [`ZoomGestureController`](/api/react-native-vision-camera/hybrid-objects/ZoomGestureController) (which enables pinch to zoom) or the [`TapToFocusGestureController`](/api/react-native-vision-camera/hybrid-objects/TapToFocusGestureController) (which enables tap to focus). To enable those gestures, simply set [`enableNativeZoomGesture`](/api/react-native-vision-camera/interfaces/CameraViewProps#enablenativezoomgesture) or [`enableNativeTapToFocusGesture`](/api/react-native-vision-camera/interfaces/CameraViewProps#enablenativetaptofocusgesture): ```tsx function App() { return ( ) } ``` --- # Source: Guides URL: https://visioncamera.margelo.com/docs/codescanner-view The [``](/api/react-native-vision-camera-barcode-scanner/views/CodeScanner) is a view component that allows quickly scanning Barcodes/QR-Codes using [MLKit](https://developers.google.com/ml-kit). > Dependency > > > The [``](/api/react-native-vision-camera-barcode-scanner/views/CodeScanner) requires [react-native-vision-camera-barcode-scanner](/api/react-native-vision-camera-barcode-scanner) to be installed. ### Using the `` [#using-the-codescanner-] To display the Code Scanner view, simply configure your desired [`BarcodeFormat`](/api/react-native-vision-camera-barcode-scanner/type-aliases/BarcodeFormat)s, and handle scanned [`Barcode`](/api/react-native-vision-camera-barcode-scanner/hybrid-objects/Barcode) results: ```tsx function App() { return ( { console.log(`Scanned ${barcodes.length} barcodes!`) }} /> ) } ``` > Tip > > > See ["The Barcode Scanner"](barcode-scanner) for more information. --- # Constraints API Source: Guides URL: https://visioncamera.margelo.com/docs/constraints A [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice) can capture in different resolutions, frame-rates (FPS), dynamic ranges (HDR), output formats (JPEG vs RAW), and more. Often, such features have certain limitations - for example, while 4k and 60 FPS might be supported on the [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice) *individually*, they may not be supported *together* due to bandwidth limitations. To avoid exposing a huge compatibility matrix to the user, VisionCamera internally negotiates given [constraints](constraints) automatically - allowing you to express *intent* - and VisionCamera ensures the closest compatible solution is found: ```tsx function App() { const videoOutput = useVideoOutput({ targetResolution: CommonResolutions.UHD_16_9 }) return ( ) } ``` ```tsx function App() { const videoOutput = useVideoOutput({ targetResolution: CommonResolutions.UHD_16_9 }) const device = useCameraDevice('back') const camera = useCamera({ isActive: true, device: device, outputs: [videoOutput], // [!code ++:4] constraints: [ { resolutionBias: videoOutput }, { fps: 60 } ] }) return ... } ``` ```tsx const session = await VisionCamera.createCameraSession(false) const videoOutput = createVideoOutput({ targetResolution: CommonResolutions.UHD_16_9 }) await session.configure([ { input: 'back', outputs: [videoOutput], // [!code ++:4] constraints: [ { resolutionBias: videoOutput }, { fps: 60 } ] } ], {}) await session.start() ``` ### Array order = Constraint Priority [#array-order--constraint-priority] The order of the array passed to [`constraints={...}`](/api/react-native-vision-camera/interfaces/CameraProps#constraints) specifies the individual [`Constraint`](/api/react-native-vision-camera/type-aliases/Constraint)'s priority - a [`Constraint`](/api/react-native-vision-camera/type-aliases/Constraint) listed "higher up" (start of array) has higher priority than a [`Constraint`](/api/react-native-vision-camera/type-aliases/Constraint) listed "further down" (end of the array). For example, if you prefer a closer frame rate match over a closer resolution match, list an [`{ fps: ... }`](/api/react-native-vision-camera/interfaces/FPSConstraint) constraint above the [`{ resolutionBias: ... }`](/api/react-native-vision-camera/interfaces/ResolutionBiasConstraint) constraint: ```tsx function App() { const videoOutput = useVideoOutput({ targetResolution: CommonResolutions.UHD_16_9 }) return ( ) } ``` ```tsx function App() { const videoOutput = useVideoOutput({ targetResolution: CommonResolutions.UHD_16_9 }) const device = useCameraDevice('back') const camera = useCamera({ isActive: true, device: device, outputs: [videoOutput], // [!code ++:4] constraints: [ { fps: 60 }, { resolutionBias: videoOutput } ] }) return ... } ``` ```tsx const session = await VisionCamera.createCameraSession(false) const videoOutput = createVideoOutput({ targetResolution: CommonResolutions.UHD_16_9 }) await session.configure([ { input: 'back', outputs: [videoOutput], // [!code ++:4] constraints: [ { fps: 60 }, { resolutionBias: videoOutput } ] } ], {}) await session.start() ``` For example, the Constraints API may internally negotiate these given device capabilities: ``` - 4k @ 30FPS <-- resolution matches, but FPS doesn't - and FPS is more important - 1080p @ 60FPS <-- will be selected; matches 60 FPS and has best resolution match - 720p @ 60FPS <-- FPS matches, but we can get better resolution - 480p @ 120FPS <-- FPS matches, but we can get better resolution ``` ### Constraints are safe [#constraints-are-safe] In contrast to the old Formats API (or other Camera libraries) constraints make VisionCamera *safe*, meaning a working Camera configuration is always found. For example, if you pass a [`{ fps: 99999 }`](/api/react-native-vision-camera/interfaces/FPSConstraint) constraint, the Camera always starts - the Constraints API internally finds the closest matching FPS range, which is effectively just the highest available FPS range on the [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice): ```tsx function App() { const videoOutput = useVideoOutput({ targetResolution: CommonResolutions.UHD_16_9 }) return ( ) } ``` ```tsx function App() { const videoOutput = useVideoOutput({ targetResolution: CommonResolutions.UHD_16_9 }) const device = useCameraDevice('back') const camera = useCamera({ isActive: true, device: device, outputs: [videoOutput], // [!code ++:3] constraints: [ { fps: 99999 } ] }) return ... } ``` ```tsx const session = await VisionCamera.createCameraSession(false) const videoOutput = createVideoOutput({ targetResolution: CommonResolutions.UHD_16_9 }) await session.configure([ { input: 'back', outputs: [videoOutput], // [!code ++:3] constraints: [ { fps: 99999 } ] } ], {}) await session.start() ``` ### Get enabled Constraints [#get-enabled-constraints] The [`Constraint`](/api/react-native-vision-camera/type-aliases/Constraint)s passed to [`constraints={...}`](/api/react-native-vision-camera/interfaces/CameraProps#constraints) are *negotiated* (based on the [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice)'s capabilities to find a matching combination most closely matching your intent) when configuring the [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession). Once a compatible Camera configuration has been found, the [`onSessionConfigSelected={...}`](/api/react-native-vision-camera/interfaces/CameraSessionConnection#onsessionconfigselected) callback will be called with a populated [`CameraSessionConfig`](/api/react-native-vision-camera/hybrid-objects/CameraSessionConfig): ```tsx function App() { return ( { console.log(`Config selected: ${config.toString()}`) }} /> ) } ``` ```tsx function App() { const camera = useCamera({ isActive: true, device: ..., outputs: [...], constraints: [...], // [!code ++:3] onSessionConfigSelected: (config) => { console.log(`Config selected: ${config.toString()}`) } }) return ... } ``` ```tsx const device = ... await session.configure([ { input: device, outputs: [...], constraints: [...], // [!code ++:3] onSessionConfigSelected: (config) => { console.log(`Config selected: ${config.toString()}`) } } ], {}) await session.start() ``` ### Manually resolve Constraints [#manually-resolve-constraints] To manually resolve given [`Constraint`](/api/react-native-vision-camera/type-aliases/Constraint)s to a populated [`CameraSessionConfig`](/api/react-native-vision-camera/hybrid-objects/CameraSessionConfig) without starting a Camera session, use [`resolveConstraints(...)`](/api/react-native-vision-camera/hybrid-objects/CameraFactory#resolveconstraints): ```ts const device = ... const videoOutput = ... const config = await VisionCamera.resolveConstraints( device, [ { output: videoOutput, mirrorMode: 'auto' } ], [ { resolutionBias: videoOutput }, { fps: 60 } ] ) console.log(`Config resolved: ${config.toString()}`) ``` ### Common Examples [#common-examples] #### Photo > Video [#photo--video] If Photo capture is more important than Video capture, list your [`{ resolutionBias: ... }`](/api/react-native-vision-camera/interfaces/ResolutionBiasConstraint) and potentially also a [`{ photoHDR: ... }`](/api/react-native-vision-camera/interfaces/PhotoHDRConstraint) above your video constraints: ```ts const constraints = [ { resolutionBias: photoOutput }, { photoHDR: true }, { resolutionBias: videoOutput } ] satisfies Constraint[] ``` #### Low resolution Frame output [#low-resolution-frame-output] Constraints find the *closest match* to your described intent, which goes both ways - to stream Frames in a low resolution, configure your [`CameraFrameOutput`](/api/react-native-vision-camera/hybrid-objects/CameraFrameOutput)'s [`targetResolution`](/api/react-native-vision-camera/interfaces/FrameOutputOptions#targetresolution) to a low resolution, like [`CommonResolutions.VGA_16_9`](/api/react-native-vision-camera/variables/CommonResolutions#vga_16_9), and use a [`{ resolutionBias: ... }`](/api/react-native-vision-camera/interfaces/ResolutionBiasConstraint) for it: ```ts const frameOutput = useFrameOutput({ targetResolution: CommonResolutions.VGA_16_9 }) const constraints = [ { resolutionBias: frameOutput }, ] satisfies Constraint[] ``` #### Video HDR [#video-hdr] [Video HDR](video-hdr) has to be negotiated across output resolutions, frame rates, and device specific capabilities - you can configure the Camera to stream in a High Dynamic Range (HDR) using a [`{ videoDynamicRange: ... }`](/api/react-native-vision-camera/interfaces/VideoDynamicRangeConstraint): ```ts const constraints = [ { videoDynamicRange: CommonDynamicRanges.ANY_HDR }, ] satisfies Constraint[] ``` #### Stabilization Mode [#stabilization-mode] To prefer a specific [Video Stabilization Mode](video-stabilization), use a [`{ videoStabilizationMode: ... }`](/api/react-native-vision-camera/interfaces/VideoStabilizationModeConstraint): ```ts const constraints = [ { videoStabilizationMode: 'cinematic-extended' }, ] satisfies Constraint[] ``` #### Binned preference [#binned-preference] Binned formats combine multiple neighboring sensor pixels into one larger effective pixel. This usually improves low-light sensitivity and reduces noise, but can trade away fine detail compared to a full-resolution non-binned readout. Additionally, binned formats are more performant as they use significantly less bandwidth. To prefer a binned format over a non-binned format, use a [`{ binned: true }`](/api/react-native-vision-camera/interfaces/BinnedConstraint) constraint, and to prefer a non-binned format over a binned format use a [`{ binned: false }`](/api/react-native-vision-camera/interfaces/BinnedConstraint) constraint. As with other formats, not specifying the constraint means "no preference", so binned and non-binned formats are ranked equally. ```ts const constraints = [ { binned: true }, ] satisfies Constraint[] ``` --- # Coordinate Systems Source: Guides URL: https://visioncamera.margelo.com/docs/coordinate-systems The Camera operates in an platform-native coordinate system, which is normalized (`0.0` ... `1.0`) on some platforms, or uses sensor-coordinates on other platforms. It does not have a concept of orientation, scaling or mirroring - which is why coordinate system conversions are required. ### Preview Coordinate System [#preview-coordinate-system] In most apps, the Camera operates with a Preview View - which provides methods to convert from- and to- the Camera coordinate system. For example, [`convertViewPointToCameraPoint(...)`](/api/react-native-vision-camera/interfaces/PreviewViewMethods#convertviewpointtocamerapoint) allows converting a [`Point`](/api/react-native-vision-camera/interfaces/Point) inside the View coordinate system to Camera coordinates: ```ts const preview = ... const viewPoint = { x: 196, y: 379.5 } const cameraPoint = preview.convertViewPointToCameraPoint(viewPoint) console.log(viewPoint) // { x: 0.5, y: 0.5 } ``` To convert a Camera [`Point`](/api/react-native-vision-camera/interfaces/Point) to View coordinates, use [`convertCameraPointToViewPoint(...)`](/api/react-native-vision-camera/interfaces/PreviewViewMethods#convertcamerapointtoviewpoint): ```ts const preview = ... const cameraPoint = { x: 0.5, y: 0.5 } const viewPoint = preview.convertCameraPointToViewPoint(cameraPoint) console.log(viewPoint) // { x: 196, y: 379.5 } ``` #### ScannedObject coordinates [#scannedobject-coordinates] To convert all coordinates in a [`ScannedObject`](/api/react-native-vision-camera/hybrid-objects/ScannedObject) to Preview View coordinates, use [`convertScannedObjectCoordinatesToViewCoordinates(...)`](/api/react-native-vision-camera/interfaces/PreviewViewMethods#convertscannedobjectcoordinatestoviewcoordinates): ```ts const preview = ... const scannedObject = ... const viewScannedObject = preview.convertScannedObjectCoordinatesToViewCoordinates(scannedObject) ``` #### MeteringPoint [#meteringpoint] A [`MeteringPoint`](/api/react-native-vision-camera/hybrid-objects/MeteringPoint) is essentially a convenience wrapper around [`convertViewPointToCameraPoint(...)`](/api/react-native-vision-camera/interfaces/PreviewViewMethods#convertviewpointtocamerapoint), allowing you to easily convert "Tap" coordinates in a Preview View to Camera coordinates. ```ts const preview = ... const viewPoint = { x: 196, y: 379.5 } const meteringPoint = preview.createMeteringPoint(viewPoint.x, viewPoint.y) console.log(meteringPoint.normalizedX, meteringPoint.normalizedY) // 0.5, 0.5 ``` ### Frame Coordinate System [#frame-coordinate-system] [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame)s are typically streamed in the Camera's native [`Orientation`](/api/react-native-vision-camera/type-aliases/CameraOrientation) and mirroring modes. To convert from a [`Point`](/api/react-native-vision-camera/interfaces/Point) in a [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) to Camera coordinates, use [`convertFramePointToCameraPoint(...)`](/api/react-native-vision-camera/hybrid-objects/Frame#convertframepointtocamerapoint): ```ts const frame = ... const framePoint = { x: frame.width / 2, y: frame.height / 2 } const cameraPoint = frame.convertFramePointToCameraPoint(framePoint) console.log(viewPoint) // { x: 0.5, y: 0.5 } ``` To convert a Camera [`Point`](/api/react-native-vision-camera/interfaces/Point) to [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) coordinates, use [`convertCameraPointToFramePoint(...)`](/api/react-native-vision-camera/hybrid-objects/Frame#convertcamerapointtoframepoint): ```ts const frame = ... const cameraPoint = { x: 0.5, y: 0.5 } const framePoint = frame.convertCameraPointToFramePoint(cameraPoint) console.log(viewPoint) // { x: 360, y: 640 } ``` #### Convert from Frame coordinates to Preview View coordinates [#convert-from-frame-coordinates-to-preview-view-coordinates] Putting all pieces together, you can convert a [`Point`](/api/react-native-vision-camera/interfaces/Point) in [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) coordinates to Preview View coordinates: ```ts const frame = ... const preview = ... const framePoint = { x: frame.width / 2, y: frame.height / 2 } const cameraPoint = frame.convertFramePointToCameraPoint(framePoint) const viewPoint = preview.convertCameraPointToViewPoint(cameraPoint) console.log(viewPoint) // { x: 196, y: 379.5 } ``` This is useful if your Frame Processor detects an object in a [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) and you want to display a visual indicator or bounding box in the Preview View. --- # Implementing a custom native CameraOutput Source: Guides URL: https://visioncamera.margelo.com/docs/custom-native-camera-outputs Third-party libraries can implement the [`CameraOutput`](/api/react-native-vision-camera/hybrid-objects/CameraOutput) class in native code to build a custom camera output that can be connected to the Camera just like any other output. This is achieved using [Nitro Modules](https://github.com/mrousavy/nitro) Hybrid Object inheritance - simply implement the native `HybridCameraOutputSpec`, and conform to the `NativeCameraOutput` interface/protocol: ```swift import AVFoundation import VisionCamera class MyCustomOutput: HybridCameraOutputSpec, NativeCameraOutput { // ... } ``` ```kotlin import com.margelo.nitro.camera.HybridOutputSpec import com.margelo.nitro.camera.public.NativeCameraOutput class MyCustomOutput: HybridCameraOutputSpec(), NativeCameraOutput { // ... } ``` > Note > > > The `NativeCameraOutput` interface/protocol requires you to implement methods and properties that expose the actual native `AVCaptureOutput`/`UseCase`, which will get used by the [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession). > > Additionally, you can participate in resolution negotiations, and input/format requirements via these. Then, create a [Nitro Modules](https://github.com/mrousavy/nitro) `HybridObject` that returns a [`CameraOutput`](/api/react-native-vision-camera/hybrid-objects/CameraOutput): ```ts import type { CameraOutput } from 'react-native-vision-camera' export interface MyCustomOutputFactory { createMyCustomOutput(): CameraOutput } ``` And finally, implement the `createMyCustomOutput()` method: ```swift import AVFoundation import VisionCamera class MyCustomOutputFactory: HybridMyCustomOutputFactorySpec { func createMyCustomOutput() -> any HybridCameraOutputSpec { return MyCustomOutput() } } ``` ```kotlin import com.margelo.nitro.camera.HybridOutputSpec import com.margelo.nitro.camera.public.NativeCameraOutput class MyCustomOutputFactory: HybridMyCustomOutputFactorySpec() { fun createMyCustomOutput(): HybridCameraOutputSpec { return MyCustomOutput() } } ``` Now, if you create an instance of this output in JS, you can attach it to the Camera Session. > Note > > > This is how the VisionCamera Barcode Scanner ([react-native-vision-camera-barcode-scanner](/api/react-native-vision-camera-barcode-scanner)) output is implemented - see: [`createBarcodeScannerOutput(...)`](/api/react-native-vision-camera-barcode-scanner/functions/createBarcodeScannerOutput). --- # The Depth Output Source: Guides URL: https://visioncamera.margelo.com/docs/depth-output The [`CameraDepthFrameOutput`](/api/react-native-vision-camera/hybrid-objects/CameraDepthFrameOutput) allows streaming [`Depth`](/api/react-native-vision-camera/hybrid-objects/Depth) frames in realtime, making them accessible via a JS worklet function. ### Creating a Depth Frame Output [#creating-a-depth-frame-output] ```tsx function App() { const device = useCameraDevice('back') // [!code ++:8] const depthOutput = useDepthOutput({ // ...options onDepth(depth) { 'worklet' console.log(`Received ${depth.width}x${depth.height} Depth!`) depth.dispose() } }) return ( ) } ``` ```tsx function App() { const device = useCameraDevice('back') // [!code ++:8] const depthOutput = useDepthOutput({ // ...options onDepth(depth) { 'worklet' console.log(`Received ${depth.width}x${depth.height} Depth!`) depth.dispose() } }) const camera = useCamera({ isActive: true, device: device, // [!code ++] outputs: [depthOutput], }) } ``` ```tsx const session = await VisionCamera.createCameraSession(false) // [!code ++:9] const depthOutput = VisionCamera.createDepthFrameOutput({ /* options */ }) const workletRuntime = createWorkletRuntimeForThread(depthOutput.thread) scheduleOnRuntime(workletRuntime, () => { 'worklet' depthOutput.setOnDepthFrameCallback((depth) => { console.log(`Received ${depth.width}x${depth.height} Depth!`) depth.dispose() }) }) await session.configure([ { input: 'back', outputs: [ // [!code ++] { output: depthOutput, mirrorMode: 'auto' } ], constraints: [] } ], {}) await session.start() ``` See [`DepthFrameOutputOptions`](/api/react-native-vision-camera/interfaces/DepthFrameOutputOptions) for a full list of configuration options for the Depth Output. > Dependency > > > The [`CameraDepthFrameOutput`](/api/react-native-vision-camera/hybrid-objects/CameraDepthFrameOutput) requires [react-native-vision-camera-worklets](/api/react-native-vision-camera-worklets) (and [react-native-worklets](https://docs.swmansion.com/react-native-worklets/docs/)) to be installed to synchronously run the [`onDepth(...)`](/api/react-native-vision-camera/hybrid-objects/CameraDepthFrameOutput#setondepthframecallback) function on a parallel JS Worklet Runtime. ### Disposing a Depth Frame [#disposing-a-depth-frame] A [`Depth`](/api/react-native-vision-camera/hybrid-objects/Depth) frame is a GPU-backed buffer, streamed at high resolution and frame rate. The Camera pipeline keeps a small pool to re-use buffers, and if that pool is full, the pipeline stalls and subsequent frames will be dropped. To prevent frame drops, you need to dispose a [`Depth`](/api/react-native-vision-camera/hybrid-objects/Depth) frame once you are done using it via [`dispose()`](https://nitro.margelo.com/docs/hybrid-objects): ```ts const depthOutput = useDepthOutput({ onDepth(depth) { 'worklet' try { // processing... } finally { // [!code ++] depth.dispose() } } }) ``` --- # Camera Devices Source: Guides URL: https://visioncamera.margelo.com/docs/devices A [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice) is a camera lens on your phone that can be used as an input for a [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession). The [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice) type reports supported Camera features such as zoom ranges, available resolutions, supported FPS ranges, device-specific metadata and more. In most cases, the default [`'back'`](/api/react-native-vision-camera/type-aliases/CameraPosition) Camera Device is the most fitting: ```tsx const device = useCameraDevice("back") ``` ```ts const deviceFactory = await VisionCamera.createDeviceFactory() const device = deviceFactory.getDefaultCamera("back") ``` ### Camera Device Types [#camera-device-types] #### Physical Device Types [#physical-device-types] There are effectively three different physical Device Types (see [`DeviceType`](/api/react-native-vision-camera/type-aliases/DeviceType)): * [`'ultra-wide-angle'`](/api/react-native-vision-camera/type-aliases/DeviceType): A physical Camera with an ultra-wide field of view, like a fish-eye view. Often referred to as "the 0.5x Camera". * [`'wide-angle'`](/api/react-native-vision-camera/type-aliases/DeviceType): A physical Camera with a wide field of view suitable for everyday mobile photography. Often referred to as "the 1x Camera", or "the default Camera". * [`'telephoto'`](/api/react-native-vision-camera/type-aliases/DeviceType): A physical Camera with a narrow field of view suitable for large zooms. Often referred to as "the 3x Camera" or "the 5x Camera". #### Virtual Devices [#virtual-devices] Some [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice)s consist of two or more physical devices to make up a single "virtual" device, like the [`triple`](/api/react-native-vision-camera/type-aliases/DeviceType) camera - which consists of the `ultra-wide-angle`, the `wide-angle` and the `telephoto` Camera. Virtual [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice)s support automatically switching over between physical devices to provide a "zoom-out" experience like in this Google Pixel Ad: Example of swapping cameras for zoom level use-case (from Pixel 3 Ad) ### Individual Capabilities (Constraints) [#individual-capabilities-constraints] A [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice) exposes its individually supported capabilities such as Resolutions, Photo HDR, Video HDR, FPS Ranges, Video Stabilization Modes and more. ```ts const device = ... console.log(device.getSupportedResolutions('video')) console.log(device.getSupportedResolutions('photo')) console.log(device.supportedPixelFormats) console.log(device.supportedFPSRanges) console.log(device.supportsPhotoHDR) console.log(device.supportsVideoStabilizationMode('cinematic')) ``` As mentioned in the ["Constraints API"](constraints), these features are *individually* supported, but not guaranteed to be supported when combined with other features. VisionCamera requires you to use [`Constraint`](/api/react-native-vision-camera/type-aliases/Constraint)s to safely combine features, and finds a best matching Camera configuration automatically. > Tip > > > See ["Constraints API"](constraints) for more information. ### Selecting a custom Camera Device [#selecting-a-custom-camera-device] The Camera Device used for your Camera Session affects available features and resolutions, where more powerful devices tend to have a bigger starting time performance impact. For simple Camera use-cases, it's often a good idea to just select a single physical Camera - which loads faster than a bigger virtual Camera, and supports most available resolutions. #### Select a specific Camera Device by criteria [#select-a-specific-camera-device-by-criteria] You can also select a specific Camera Device that matches your criteria (e.g. Triple-Camera): ```tsx const device = useCameraDevice("back", { physicalDevices: ['ultra-wide-angle', 'wide-angle', 'telephoto'] }) ``` ```ts const deviceFactory = await VisionCamera.createDeviceFactory() const device = getCameraDevice(deviceFactory, "back", { physicalDevices: ['ultra-wide-angle', 'wide-angle', 'telephoto'] }) ``` The Triple-Camera then lists all of its constituent physical devices; ```ts for (const physicalDevice of device.physicalDevices) { console.log(physicalDevice.type) } // Output: // 'wide-angle' // 'ultra-wide-angle' // 'triple' ``` #### Getting all Camera Devices [#getting-all-camera-devices] If you want to filter out Camera Devices yourself, you can get all available Camera devices on the system: ```tsx const devices = useCameraDevices() ``` ```ts const deviceFactory = await VisionCamera.createDeviceFactory() let devices = deviceFactory.cameraDevices deviceFactory.addOnCameraDevicesChangedListener((d) => { devices = d }) ``` #### External Devices [#external-devices] VisionCamera allows using external Cameras, as long as they implement the platform's Camera API - most USB Cameras that implement the [UVC](https://en.wikipedia.org/wiki/USB_video_device_class) protocol do this. On iPad, Mac, and Android this often works seamlessly: ```tsx const device = useCameraDevice("external") ``` As an external Camera is plugged in or plugged out from the device, the [`useCameraDevice(...)`](/api/react-native-vision-camera/functions/useCameraDevice) hook automatically updates. ```ts const deviceFactory = await VisionCamera.createDeviceFactory() let device = getCameraDevice(deviceFactory, "external") deviceFactory.addOnCameraDevicesChangedListener(() => { device = getCameraDevice(deviceFactory, "external") }) ``` As an external Camera is plugged in or plugged out from the device, the [`CameraDeviceFactory.addOnCameraDevicesChangedListener(...)`](/api/react-native-vision-camera/hybrid-objects/CameraDeviceFactory#addoncameradeviceschangedlistener) listener fires and you can call [`getCameraDevice(...)`](/api/react-native-vision-camera/functions/getCameraDevice) again to possibly detect new devices, or avoid using removed devices. ### Using the Camera Device [#using-the-camera-device] To use your [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice), pass it to your Camera's Configuration: ```tsx function App() { const device = useCameraDevice('back') return ( ) } ``` ```tsx function App() { const device = useCameraDevice('back') const camera = useCamera({ isActive: true, // [!code ++] device: device, }) } ``` ```tsx const session = await VisionCamera.createCameraSession(false) const device = ... await session.configure([ { // [!code ++] input: device, outputs: [], constraints: [] } ], {}) await session.start() ``` --- # Exposure Bias Source: Guides URL: https://visioncamera.margelo.com/docs/exposure-bias Exposure Bias allows adjusting the Camera's exposure, where negative values result in darker, under-exposed images, and positive values result in brighter, over-exposed images. A value of `0` indicates no exposure bias compensation, which is the default. ### Setting Exposure Bias [#setting-exposure-bias] To adjust a Camera's exposure via Exposure Bias Compensation: The [``](/api/react-native-vision-camera/views/Camera) view allows adjusting [`exposure`](/api/react-native-vision-camera/interfaces/CameraViewProps#exposure) via React state (a `number`), or a [Reanimated `SharedValue`](https://docs.swmansion.com/react-native-reanimated/docs/core/useSharedValue/) - which is the recommended approach for smoothly adjusting exposure. ```tsx function App() { // [!code ++] const exposure = useSharedValue(0) return ( ) } ``` To adjust the Exposure Bias on a [`CameraController`](/api/react-native-vision-camera/hybrid-objects/CameraController), use [`setExposureBias(...)`](/api/react-native-vision-camera/hybrid-objects/CameraController#setexposurebias): ```ts const controller = ... // [!code ++] await controller.setExposureBias(0) ``` > Warning > > > Make sure your [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice) supports exposure ([`supportsExposureBias`](/api/react-native-vision-camera/hybrid-objects/CameraDevice#supportsexposurebias)), and your exposure value always stays within the [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice)'s supported exposure bias ranges: [`minExposureBias`](/api/react-native-vision-camera/hybrid-objects/CameraDevice#minexposurebias) and [`maxExposureBias`](/api/react-native-vision-camera/hybrid-objects/CameraDevice#maxexposurebias): > > > > ```ts > > const controller = ... > > const exposure = ... > > const device = controller.device > > if (device.supportsExposureBias) { > > const min = device.minExposureBias > > const max = device.maxExposureBias > > const clampedExposure = clamp(exposure, min, max) > > } > > ``` ### Getting Exposure Bias [#getting-exposure-bias] To get the current Exposure value on a [`CameraController`](/api/react-native-vision-camera/hybrid-objects/CameraController), use [`exposureBias`](/api/react-native-vision-camera/hybrid-objects/CameraController#exposurebias): ```ts const controller = ... // [!code ++] console.log(controller.exposureBias) // 0 ``` --- # FPS Source: Guides URL: https://visioncamera.margelo.com/docs/fps A Camera's Frame Rate can be configured per [`CameraSessionConnection`](/api/react-native-vision-camera/interfaces/CameraSessionConnection) and affects Preview- (see ["The Preview Output"](preview-output)), Video- (see ["The Video Output"](video-output)) and Frame- (see ["The Frame Output"](frame-output)) outputs. ### Get available FPS ranges [#get-available-fps-ranges] Each [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice) lists the FPS ranges it supports individually via [`supportedFPSRanges`](/api/react-native-vision-camera/hybrid-objects/CameraDevice#supportedfpsranges). Additionally, you can check if a specific fixed FPS value is individually supported via [`supportsFPS(...)`](/api/react-native-vision-camera/hybrid-objects/CameraDevice#supportsfps): ```ts const device = ... const allRanges = device.supportedFPSRanges const supports60 = device.supportsFPS(60) ``` > Tip > > > While a device may support a given FPS individually, it is not guaranteed to be supported with all possible feature and output combinations. The [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession) internally negotiates constraints together, and may downgrade FPS if needed. > > To check if a specific combination is supported upfront, use [`isSessionConfigSupported(...)`](/api/react-native-vision-camera/hybrid-objects/CameraDevice#issessionconfigsupported). ### Set FPS [#set-fps] To set the target FPS, pass an [`{ fps: ... }`](/api/react-native-vision-camera/interfaces/FPSConstraint) constraint in your constraints: ```tsx function App() { const device = useCameraDevice('back') return ( ) } ``` ```tsx function App() { const device = useCameraDevice('back') const camera = useCamera({ isActive: true, device: device, constraints: [ // [!code ++] { fps: 60 } ] }) } ``` ```tsx const session = await VisionCamera.createCameraSession(false) await session.configure([ { input: 'back', constraints: [ // [!code ++] { fps: 60 } ] } ], {}) await session.start() ``` --- # The Frame Output Source: Guides URL: https://visioncamera.margelo.com/docs/frame-output The [`CameraFrameOutput`](/api/react-native-vision-camera/hybrid-objects/CameraFrameOutput) allows streaming [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame)s in realtime, making them accessible via a JS worklet function. > Note > > > In VisionCamera V1-V4, this feature was called "Frame Processors" - the `useFrameProcessor` hook is now [`useFrameOutput`](/api/react-native-vision-camera/functions/useFrameOutput). ### Creating a Frame Output [#creating-a-frame-output] ```tsx function App() { const device = useCameraDevice('back') // [!code ++:8] const frameOutput = useFrameOutput({ // ...options onFrame(frame) { 'worklet' console.log(`Received ${frame.width}x${frame.height} Frame!`) frame.dispose() } }) return ( ) } ``` ```tsx function App() { const device = useCameraDevice('back') // [!code ++:8] const frameOutput = useFrameOutput({ // ...options onFrame(frame) { 'worklet' console.log(`Received ${frame.width}x${frame.height} Frame!`) frame.dispose() } }) const camera = useCamera({ isActive: true, device: device, // [!code ++] outputs: [frameOutput], }) } ``` ```tsx const session = await VisionCamera.createCameraSession(false) // [!code ++:9] const frameOutput = VisionCamera.createFrameOutput({ /* options */ }) const workletRuntime = createWorkletRuntimeForThread(frameOutput.thread) scheduleOnRuntime(workletRuntime, () => { 'worklet' frameOutput.setOnFrameCallback((frame) => { console.log(`Received ${frame.width}x${frame.height} Frame!`) frame.dispose() }) }) await session.configure([ { input: 'back', outputs: [ // [!code ++] { output: frameOutput, mirrorMode: 'auto' } ], constraints: [] } ], {}) await session.start() ``` See [`FrameOutputOptions`](/api/react-native-vision-camera/interfaces/FrameOutputOptions) for a full list of configuration options for the Frame Output. > Dependency > > > The [`CameraFrameOutput`](/api/react-native-vision-camera/hybrid-objects/CameraFrameOutput) requires [react-native-vision-camera-worklets](/api/react-native-vision-camera-worklets) (and [react-native-worklets](https://docs.swmansion.com/react-native-worklets/docs/)) to be installed to synchronously run the [`onFrame(...)`](/api/react-native-vision-camera/hybrid-objects/CameraFrameOutput#setonframecallback) function on a parallel JS Worklet Runtime. ### Disposing a Frame [#disposing-a-frame] A [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) is a GPU-backed buffer, streamed at full resolution and frame rate. The Camera pipeline keeps a small pool to re-use buffers, and if that pool is full, the pipeline stalls and subsequent frames will be dropped. To prevent frame drops, you need to dispose a [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) once you are done using it via [`dispose()`](https://nitro.margelo.com/docs/hybrid-objects): ```ts const frameOutput = useFrameOutput({ onFrame(frame) { 'worklet' try { // processing... } finally { // [!code ++] frame.dispose() } } }) ``` ### Choosing a Pixel Format [#choosing-a-pixel-format] Choosing an appropriate [`pixelFormat`](/api/react-native-vision-camera/interfaces/FrameOutputOptions#pixelformat) depends on your Frame Processor's usage. While the most commonly used format in visual recognition models is [`'rgb'`](/api/react-native-vision-camera/type-aliases/TargetVideoPixelFormat), it is by far not the most efficient format for a Camera pipeline as it requires an additional conversion and uses \~2.6x more bandwidth than [`'yuv'`](/api/react-native-vision-camera/type-aliases/TargetVideoPixelFormat). If you render to native Surfaces (e.g. via GPU pipelines or Media Encoders), you may also be able to use [`'native'`](/api/react-native-vision-camera/type-aliases/TargetVideoPixelFormat), which chooses whatever the [`CameraSessionConfig`](/api/react-native-vision-camera/hybrid-objects/CameraSessionConfig)'s [`nativePixelFormat`](/api/react-native-vision-camera/hybrid-objects/CameraSessionConfig#nativepixelformat) is, and requires zero conversions. Use [`'native'`](/api/react-native-vision-camera/type-aliases/TargetVideoPixelFormat) with caution, as the negotiated [`nativePixelFormat`](/api/react-native-vision-camera/hybrid-objects/CameraSessionConfig#nativepixelformat) might also be a RAW format like [`'raw-bayer-packed96-12-bit'`](/api/react-native-vision-camera/type-aliases/VideoPixelFormat), or a vendor-specific private format ([`'private'`](/api/react-native-vision-camera/type-aliases/PixelFormat)). Examples: * [OpenCV](https://opencv.org) natively supports YUV, so streaming in [`'yuv'`](/api/react-native-vision-camera/type-aliases/TargetVideoPixelFormat) is most efficient. * [LiteRT](https://ai.google.dev/edge/litert/overview) supports YUV, **but converts to RGB internally** - so streaming in [`'rgb'`](/api/react-native-vision-camera/type-aliases/TargetVideoPixelFormat) directly is more efficient as conversion is handled in the Camera pipeline. * [react-native-skia](https://shopify.github.io/react-native-skia/) supports importing external textures (PRIVATE), as well as YUV and RGB Frames, so streaming in [`'native'`](/api/react-native-vision-camera/type-aliases/TargetVideoPixelFormat) is most efficient, with [`'yuv'`](/api/react-native-vision-camera/type-aliases/TargetVideoPixelFormat) as a next-best alternative. After selecting a [`pixelFormat`](/api/react-native-vision-camera/interfaces/FrameOutputOptions#pixelformat), inspect your [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) for the actual pixel format you receive via [`Frame.pixelFormat`](/api/react-native-vision-camera/hybrid-objects/Frame#pixelformat): ```ts const frameOutput = useFrameOutput({ // [!code ++] pixelFormat: 'yuv', onFrame(frame) { 'worklet' // [!code ++] console.log(frame.pixelFormat) // 'yuv-420-8-bit-full' frame.dispose() } }) ``` ### Using the `Frame` [#using-the-frame] > Tip > > > See ["A Frame"](a-frame) to understand how the [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) type works, and how to use it. --- # Getting Started Source: Guides URL: https://visioncamera.margelo.com/docs ### Introduction [#introduction] VisionCamera is the fastest and most powerful Camera library for [react-native](https://reactnative.dev). It's built with [Nitro Modules](https://nitro.margelo.com) and uses [AVFoundation](https://developer.apple.com/documentation/avfoundation/) on iOS, and [CameraX](https://developer.android.com/media/camera/camerax) on Android. VisionCamera features an extensible API, allowing you to plug in native code at any point. ### Installation [#installation] #### 1. Install library [#1-install-library] Install [react-native-vision-camera](https://www.npmjs.com/package/react-native-vision-camera) from npm: ```bash npm install react-native-vision-camera ``` ```bash pnpm add react-native-vision-camera ``` ```bash yarn add react-native-vision-camera ``` ```bash bun add react-native-vision-camera ``` VisionCamera is built on-top of [react-native-nitro-modules](https://www.npmjs.com/package/react-native-nitro-modules) and uses [react-native-nitro-image](https://www.npmjs.com/package/react-native-nitro-image)'s Image type for photos - install those dependencies: ```bash npm install react-native-nitro-modules react-native-nitro-image ``` ```bash pnpm add react-native-nitro-modules react-native-nitro-image ``` ```bash yarn add react-native-nitro-modules react-native-nitro-image ``` ```bash bun add react-native-nitro-modules react-native-nitro-image ``` #### 2. Add permissions [#2-add-permissions] After installing the library from npm, you must add Camera (and optionally Microphone) usage permissions to your app's manifest: Add Camera (and optionally Microphone) permissions to your Expo config (`app.json`, `app.config.json` or `app.config.js`): ```json { // [!code ++:6] "ios": { "infoPlist": { "NSCameraUsageDescription": "$(PRODUCT_NAME) needs access to your Camera to capture photos and videos.", "NSMicrophoneUsageDescription": "$(PRODUCT_NAME) needs access to your Microphone to record audio for video recordings.", } }, // [!code ++:3] "android": { "permissions": ["android.permission.CAMERA", "android.permission.RECORD_AUDIO"] } } ``` ##### iOS [#ios] Add `NSCameraUsageDescription` (and optionally `NSMicrophoneUsageDescription`) permissions to your app's `Info.plist`: ```xml // [!code ++] NSCameraUsageDescription // [!code ++] $(PRODUCT_NAME) needs access to your Camera to capture photos and videos. // [!code ++] NSMicrophoneUsageDescription // [!code ++] $(PRODUCT_NAME) needs access to your Microphone to record audio for video recordings. ``` ##### Android [#android] Add `CAMERA` (and optionally `RECORD_AUDIO`) permissions to your app's main `AndroidManifest.xml`: ```xml // [!code ++] // [!code ++] ``` #### 3. Rebuild native [#3-rebuild-native] Then, compile the mods: ```bash npx expo prebuild ``` And lastly, to apply the native changes build a new binary: iOS Android ```bash npx expo run:ios ``` ```bash npx expo run:android ``` Then, rebuild Pods: ```bash npx pod-install ``` And lastly, to apply the native changes build a new binary: iOS Android ```bash npm run ios ``` ```bash npm run android ``` #### 4. Render the `` [#4-render-the-camera-] In your app's code, you can now request permissions and render [the `` view](/api/react-native-vision-camera/views/Camera): ```tsx import React, { useEffect } from 'react' import { Camera, useCameraPermission } from 'react-native-vision-camera' function App() { const { hasPermission, requestPermission } = useCameraPermission() useEffect(() => { if (!hasPermission) requestPermission() }, [hasPermission, requestPermission]) return ( ) } ``` #### 5. Add outputs [#5-add-outputs] The Camera can output to a variety of Camera Outputs - for example, to capture Photos, use the [`CameraPhotoOutput`](/api/react-native-vision-camera/hybrid-objects/CameraPhotoOutput): ```tsx import React, { useEffect } from 'react' import { Camera, useCameraPermission, usePhotoOutput } from 'react-native-vision-camera' function App() { const { hasPermission, requestPermission } = useCameraPermission() // [!code ++] const photoOutput = usePhotoOutput() useEffect(() => { if (!hasPermission) requestPermission() }, [hasPermission, requestPermission]) return ( ) } ``` See ["Camera Outputs"](/docs/camera-outputs) to learn more about outputs. --- # Lifecycle Source: Guides URL: https://visioncamera.margelo.com/docs/lifecycle The [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession) has three lifecycle stages: * Idle (no connections, and not running) * Ready (connections configured, but not yet started) * Active (connections configured and started) ### Switching between lifecycle stages [#switching-between-lifecycle-stages] It is recommended to move an active Camera Session to the "Ready" state when it goes out of view, to prevent the Camera from running in the background. This will stop the Camera (see [`CameraSession.stop()`](/api/react-native-vision-camera/hybrid-objects/CameraSession#stop)) while keeping it configured and prepared in-memory. For example, in [react-navigation](https://github.com/react-navigation/react-navigation) you would use [`useIsFocused()`](https://reactnavigation.org/docs/use-is-focused/): ```tsx // [!code ++] import { useIsFocused } from '@react-navigation/native' function App() { const device = useCameraDevice('back') // [!code ++] const isFocused = useIsFocused() return ( ) } ``` ```tsx // [!code ++] import { useIsFocused } from '@react-navigation/native' function App() { const device = useCameraDevice('back') // [!code ++] const isFocused = useIsFocused() const camera = useCamera({ // [!code ++] isActive: isFocused, device: device, }) } ``` ```tsx const session = ... // [!code ++:6] const focusListener = navigation.addListener('focus', async () => { await session.start() }) const blurListener = navigation.addListener('blur', async () => { await session.stop() }) ``` #### Unmounting vs `isActive={false}` [#unmounting-vs-isactivefalse] When [`isActive`](/api/react-native-vision-camera/interfaces/CameraProps#isactive) is set to `false`, the [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession) remains fully configured in memory ("Ready" state), causing subsequent calls to [`isActive`](/api/react-native-vision-camera/interfaces/CameraProps#isactive) = `true` to be much faster. If the [``](/api/react-native-vision-camera/views/Camera) is instead fully unmounted, the entire [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession) will be torn down and all connections will be removed. #### Reconfiguring [#reconfiguring] When the [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession) is reconfigured (e.g. when attaching or removing [`outputs={...}`](/api/react-native-vision-camera/interfaces/CameraProps#outputs), changing the input [`device={...}`](/api/react-native-vision-camera/interfaces/CameraProps#device) or adjusting [`constraints={...}`](/api/react-native-vision-camera/interfaces/CameraProps#constraints)), it will be paused for a brief moment to submit the new configuration to the hardware. As a general tip, avoid reconfigurations as much as possible. --- # Location Source: Guides URL: https://visioncamera.margelo.com/docs/location Captured Photos (see ["A Photo"](a-photo)) and Videos (see ["The Recorder"](recorder)) can contain Location tags in their EXIF flags or video metadata. > Dependency > > > Location requires [react-native-vision-camera-location](/api/react-native-vision-camera-location) to be installed. ### Get a Location [#get-a-location] To get a [`Location`](/api/react-native-vision-camera/hybrid-objects/Location), use a [`LocationManager`](/api/react-native-vision-camera-location/hybrid-objects/LocationManager) from [react-native-vision-camera-location](/api/react-native-vision-camera-location): ```tsx const location = useLocation({ /* options */ }) useEffect(() => { if (!location.hasPermission) { location.requestPermission() } }, [location.hasPermission]) if (location.hasPermission) { console.log(location.location) } ``` ```ts const locationManager = createLocationManager({ /* options */ }) if (locationManager.locationPermissionStatus !== 'authorized') { const hasPermission = await locationManager.requestLocationPermission() if (!hasPermission) return } await locationManager.startUpdating() locationManager.addOnLocationChangedListener((location) => { console.log(location) }) ``` #### Manually creating a Location [#manually-creating-a-location] Alternatively, you can create a custom [`Location`](/api/react-native-vision-camera/hybrid-objects/Location) using [`createLocation(...)`](/api/react-native-vision-camera-location/functions/createLocation), which can be useful for testing or spoofing location: ```ts const location = createLocation(48.2084, 16.3735) ``` ### Adding Location tags to Photos [#adding-location-tags-to-photos] To add a [`Location`](/api/react-native-vision-camera/hybrid-objects/Location) to a [`Photo`](/api/react-native-vision-camera/hybrid-objects/Photo), pass a custom [`location`](/api/react-native-vision-camera/interfaces/CapturePhotoSettings#location) to [`capturePhoto(...)`](/api/react-native-vision-camera/hybrid-objects/CameraPhotoOutput#capturephoto): ```ts const photoOutput = ... const location = ... const photo = await photoOutput.capturePhoto( { location: location }, { /* callbacks */ } ) ``` ### Adding Location tags to Videos [#adding-location-tags-to-videos] To add a [`Location`](/api/react-native-vision-camera/hybrid-objects/Location) to a captured Video, pass a custom [`location`](/api/react-native-vision-camera/interfaces/RecorderSettings#location) to [`createRecorder(...)`](/api/react-native-vision-camera/hybrid-objects/CameraVideoOutput#createrecorder): ```ts const videoOutput = ... const location = ... const recorder = await videoOutput.createRecorder({ location: location }) ``` --- # Locking AE/AF/AWB Source: Guides URL: https://visioncamera.margelo.com/docs/locking-ae-af-awb Exposure, Focus and White-Balance are typically automatically adjusted as the scene changes. For pro-Camera apps, you can manually adjust Exposure Duration/ISO, Focus Lens Position and White-Balance Temperature and Tint Value and lock them in-place, if the device supports it. ### Setting specific values [#setting-specific-values] #### Setting custom Exposure Duration/ISO [#setting-custom-exposure-durationiso] If the [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice) supports Exposure Locking (see [`supportsExposureLocking`](/api/react-native-vision-camera/hybrid-objects/CameraDevice#supportsexposurelocking)) you can set a custom Exposure Duration/ISO via [`setExposureLocked(...)`](/api/react-native-vision-camera/hybrid-objects/CameraController#setexposurelocked): ```ts const controller = ... const format = ... if (controller.device.supportsExposureLocking) { const exposureDuration = 1 / 60 const iso = 200 await controller.setExposureLocked(exposureDuration, iso) } ``` > Warning > > > Make sure the given `exposureDuration` value is inside the current [`CameraController`](/api/react-native-vision-camera/hybrid-objects/CameraController)'s [`minExposureDuration`](/api/react-native-vision-camera/hybrid-objects/CameraController#minexposureduration) and [`maxExposureDuration`](/api/react-native-vision-camera/hybrid-objects/CameraController#maxexposureduration) bounds. > > > > Make sure the given `iso` value is inside the currently selected [`CameraController`](/api/react-native-vision-camera/hybrid-objects/CameraController)'s [`minISO`](/api/react-native-vision-camera/hybrid-objects/CameraController#miniso) and [`maxISO`](/api/react-native-vision-camera/hybrid-objects/CameraController#maxiso) bounds. #### Setting custom Focus Lens Position [#setting-custom-focus-lens-position] If the [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice) supports Focus Locking (see [`supportsFocusLocking`](/api/react-native-vision-camera/hybrid-objects/CameraDevice#supportsfocuslocking)) you can set a custom Focus Lens Position via [`setFocusLocked(...)`](/api/react-native-vision-camera/hybrid-objects/CameraController#setfocuslocked): ```ts const controller = ... if (controller.device.supportsFocusLocking) { const lensPosition = 0.5 await controller.setFocusLocked(lensPosition) } ``` > Warning > > > Make sure the given `lensPosition` value is between `0.0` and `1.0`. #### Setting custom White Balance Temperature and Tint [#setting-custom-white-balance-temperature-and-tint] If the [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice) supports White-Balance Locking (see [`supportsWhiteBalanceLocking`](/api/react-native-vision-camera/hybrid-objects/CameraDevice#supportswhitebalancelocking)) you can set custom White Balance Temperature and Tint values via [`setWhiteBalanceLocked(...)`](/api/react-native-vision-camera/hybrid-objects/CameraController#setwhitebalancelocked): ```ts const controller = ... if (controller.device.supportsWhiteBalanceLocking) { const temperature = 4500 const tint = 20 await controller.setWhiteBalanceLocked(temperature, tint) } ``` > Warning > > > A good range for `temperature` is between 2500K and 8000K, and a good value for `tint` is usually between -150 and 150. ### Getting current values [#getting-current-values] At any point in time you can get the Camera's current Exposure, Focus or White-Balance values. #### Getting current Exposure Duration/ISO [#getting-current-exposure-durationiso] To get the current exposure values (for example to use VisionCamera as a light meter) use [`exposureDuration`](/api/react-native-vision-camera/hybrid-objects/CameraController#exposureduration) or [`iso`](/api/react-native-vision-camera/hybrid-objects/CameraController#iso): ```ts const controller = ... console.log(controller.exposureDuration) console.log(controller.iso) ``` #### Getting current Focus Lens Position [#getting-current-focus-lens-position] To figure out how far away the current focus point is, simply get the current [`lensPosition`](/api/react-native-vision-camera/hybrid-objects/CameraController#lensposition): ```ts const controller = ... console.log(controller.lensPosition) // between 0...1 ``` #### Getting current White Balance Gains [#getting-current-white-balance-gains] Lastly, the [`CameraController`](/api/react-native-vision-camera/hybrid-objects/CameraController) also exposes its current White-Balance Gains via [`whiteBalanceGains`](/api/react-native-vision-camera/hybrid-objects/CameraController#whitebalancegains): ```ts const controller = ... console.log(controller.whiteBalanceGains) ``` > Warning > > > If the device does not support manual control over AE/AF/AWB, invalid values (e.g. `0`) will be returned. ### Locking current values [#locking-current-values] To lock the current Exposure/Focus/White-Balance values at their current value (for example, after a [tap to focus](tap-to-focus) action), use [`lockCurrentExposure()`](/api/react-native-vision-camera/hybrid-objects/CameraController#lockcurrentexposure), [`lockCurrentFocus()`](/api/react-native-vision-camera/hybrid-objects/CameraController#lockcurrentfocus) or [`lockCurrentWhiteBalance()`](/api/react-native-vision-camera/hybrid-objects/CameraController#lockcurrentwhitebalance): ```ts const controller = ... const meteringPoint = ... await controller.focusTo(meteringPoint, { autoResetAfter: null }) if (controller.device.supportsExposureLocking) { await controller.lockCurrentExposure() } if (controller.device.supportsFocusLocking) { await controller.lockCurrentFocus() } if (controller.device.supportsWhiteBalanceLocking) { await controller.lockCurrentWhiteBalance() } ``` To reset Exposure/Focus/White-Balance back to auto, use [`resetFocus()`](/api/react-native-vision-camera/hybrid-objects/CameraController#resetfocus): ```ts const controller = ... await controller.resetFocus() ``` ### Reacting to subject area changes [#reacting-to-subject-area-changes] Once you lock AE/AF/AWB, the Camera keeps those values frozen no matter what the user points the device at. That's usually fine for a deliberate tap-to-focus, but if the user pans the Camera away from the subject, the scene becomes very under- or over-exposed and out-of-focus; so the locked values no longer make sense. VisionCamera fires an [`onSubjectAreaChanged()`](/api/react-native-vision-camera/hybrid-objects/CameraController#addsubjectareachangedlistener) listener whenever the scene substantially changes - for example, when the focus point drifts off the previously-focused subject. You can listen for this event and automatically reset AE/AF/AWB back to continuously auto-adjusting via [`resetFocus()`](/api/react-native-vision-camera/hybrid-objects/CameraController#resetfocus): ```tsx function App() { const camera = useRef(null) return ( { camera.current?.resetFocus() }} /> ) } ``` ```tsx function App() { const camera = useCamera({ isActive: true, device: 'back', // [!code ++:3] onSubjectAreaChanged: () => { camera?.resetFocus() } }) } ``` ```tsx const session = ... const controller = await session.configure(...) // [!code ++:3] const listener = controller.addSubjectAreaChangedListener(() => { controller.resetFocus() }) ``` --- # Low Light Boost Source: Guides URL: https://visioncamera.margelo.com/docs/low-light-boost Low Light Boost allows the Camera pipeline to automatically extend exposure times (and effectively drop frame rate) to receive more light, if necessary. This is useful in dark scenes where the image would otherwise look too dark. ### Check support [#check-support] Each [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice) exposes whether it supports low light boost via [`supportsLowLightBoost`](/api/react-native-vision-camera/hybrid-objects/CameraDevice#supportslowlightboost): ```ts const device = ... console.log(device.supportsLowLightBoost) ``` ### Enable Low Light Boost [#enable-low-light-boost] To enable low light boost, set [`enableLowLightBoost`](/api/react-native-vision-camera/interfaces/CameraViewProps#enablelowlightboost) to `true`: ```tsx function App() { const device = useCameraDevice('back') return ( ) } ``` ```tsx function App() { const device = useCameraDevice('back') const camera = useCamera({ isActive: true, device: device, // [!code ++] enableLowLightBoost: device.supportsLowLightBoost }) } ``` ```ts const controller = ... if (controller.device.supportsLowLightBoost) { // [!code ++:3] await controller.configure({ enableLowLightBoost: true }) } ``` > Warning > > > Make sure your [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice) supports low light boost via [`supportsLowLightBoost`](/api/react-native-vision-camera/hybrid-objects/CameraDevice#supportslowlightboost). > > Enabling low light boost on an unsupported device will throw. ### The `night` Camera Extension [#the-night-camera-extension] Some Android Phones have vendor-specific [`CameraExtension`](/api/react-native-vision-camera/hybrid-objects/CameraExtension)s. If the phone has a [`'night'`](/api/react-native-vision-camera/type-aliases/CameraExtensionType) extension, you can enable it to get the best still images under low-light situations. This is a vendor-defined processing mode at ISP level, and can also improve exposure in dark scenes. To enable it, first query available extensions and then select the [`'night'`](/api/react-native-vision-camera/type-aliases/CameraExtensionType) extension: ```tsx function App() { const device = ... const extensions = useCameraDeviceExtensions(device) const extension = extensions.find((e) => e.type === 'night') return ( ) } ``` ```tsx function App() { const device = ... const extensions = useCameraDeviceExtensions(device) const extension = extensions.find((e) => e.type === 'night') const camera = useCamera({ isActive: true, device: device, // [!code ++] cameraExtension: extension }) } ``` ```tsx const device = ... const session = ... const deviceFactory = await VisionCamera.createDeviceFactory() const extensions = await deviceFactory.getSupportedExtensions(device) const extension = extensions.find((e) => e.type === 'night') const controllers = await session.configure([ { input: device, outputs: [], constraints: [], // [!code ++] cameraExtension: extension } ], {}) ``` As with all [`CameraExtension`](/api/react-native-vision-camera/hybrid-objects/CameraExtension)s, this mode comes with the usual Camera Extension limitations around [Video HDR](video-hdr), RAW capture and Frame Streaming. > Tip > > > See ["Camera Extensions"](camera-extensions) for more information. ### Other ways to improve low-light exposure [#other-ways-to-improve-low-light-exposure] #### Binned Formats [#binned-formats] Binned formats combine multiple neighboring sensor pixels into one larger effective pixel. This often improves low-light exposure too, so if low-light performance is more important than maximum spatial detail, prefer a [`{ binned: true }`](/api/react-native-vision-camera/interfaces/BinnedConstraint) constraint. #### Lower FPS [#lower-fps] Lower FPS gives the Camera more time to expose each Frame, which can improve low-light exposure. If you don't need 60 FPS, use a lower [`{ fps: ... }`](/api/react-native-vision-camera/interfaces/FPSConstraint) constraint like 30 FPS or 24 FPS instead. > Tip > > > See ["FPS"](fps) for more information. #### Exposure Bias [#exposure-bias] Increasing [Exposure Bias](exposure-bias) can also make the image brighter, but it may introduce more noise. If possible, prefer actually receiving more light through low light boost, binned formats or lower FPS instead. > Tip > > > See ["Exposure Bias"](exposure-bias) for more information. --- # Multi-Camera Source: Guides URL: https://visioncamera.margelo.com/docs/multi-camera A [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession) allows attaching multiple connections to stream from multiple [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice)s at the same time (e.g. Picture-in-Picture mode via front + back Camera) - if the system supports it. ### Creating a Multi-Camera Session [#creating-a-multi-camera-session] To create a multi-camera [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession), use [`createCameraSession(true)`](/api/react-native-vision-camera/hybrid-objects/CameraFactory#createcamerasession). Make sure [`supportsMultiCamSessions`](/api/react-native-vision-camera/hybrid-objects/CameraFactory#supportsmulticamsessions) is `true`: ```ts if (VisionCamera.supportsMultiCamSessions) { const session = await VisionCamera.createCameraSession(true) } ``` ### Getting Multi-Cam capable CameraDevices [#getting-multi-cam-capable-cameradevices] Due to hardware constraints, not every [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice) can be paired with every other [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice), therefore VisionCamera exposes a list of supported device combinations via [`supportedMultiCamDeviceCombinations`](/api/react-native-vision-camera/hybrid-objects/CameraDeviceFactory#supportedmulticamdevicecombinations) upfront: A combination contains one or more logical [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice)s. On iOS, a combination can contain a single virtual Camera, such as a Dual- or Triple-Camera, because that one Camera is backed by multiple physical Cameras. Pass the returned Cameras directly to [`configure(...)`](/api/react-native-vision-camera/hybrid-objects/CameraSession#configure), and use [`physicalDevices`](/api/react-native-vision-camera/hybrid-objects/CameraDevice#physicaldevices) only for inspection. If you need multiple independent previews, choose a combination with at least two Cameras. ```ts const deviceFactory = await VisionCamera.createDeviceFactory() const frontAndBackCombination = deviceFactory.supportedMultiCamDeviceCombinations.find((devices) => { return ( devices.some((d) => d.position === 'front') && devices.some((d) => d.position === 'back') ) }) if (frontAndBackCombination == null) return const frontDevice = frontAndBackCombination.find((d) => d.position === 'front') const backDevice = frontAndBackCombination.find((d) => d.position === 'back') ``` ### Using multiple Connections [#using-multiple-connections] Then, knowing `frontDevice` and `backDevice` can be used simultaneously in a Multi-Cam session, create the outputs and build the [`CameraSessionConnection`](/api/react-native-vision-camera/interfaces/CameraSessionConnection)s: ```ts const frontPreviewOutput = VisionCamera.createPreviewOutput() const frontPhotoOutput = VisionCamera.createPhotoOutput({}) const backPreviewOutput = VisionCamera.createPreviewOutput() const backPhotoOutput = VisionCamera.createPhotoOutput({}) const [frontController, backController] = await session.configure([ // Front Camera { input: frontDevice, outputs: [ { output: frontPreviewOutput, mirrorMode: 'on' }, { output: frontPhotoOutput, mirrorMode: 'off' }, ], constraints: [] }, // Back Camera { input: backDevice, outputs: [ { output: backPreviewOutput, mirrorMode: 'off' }, { output: backPhotoOutput, mirrorMode: 'off' }, ], constraints: [] } ]) await session.start() ``` Each returned [`CameraController`](/api/react-native-vision-camera/hybrid-objects/CameraController) correlates to the connection at that index - e.g. `frontController` allows zooming/exposure/focus the `frontDevice`, and vice-versa. ### Picture-in-Picture Multi-Previews [#picture-in-picture-multi-previews] Then, ensure you display both `frontPreviewOutput` and `backPreviewOutput` in separate [``](/api/react-native-vision-camera/views/NativePreviewView) views: ```tsx function App() { const frontPreviewOutput = ... const backPreviewOutput = ... return ( ) } ``` --- # Native Frame Processor Plugins Source: Guides URL: https://visioncamera.margelo.com/docs/native-frame-processor-plugins Native Frame Processor Plugins are essentially native Swift/Kotlin functions that can be called from a JS Frame Processor (see ["The Frame Output"](frame-output)). ```ts const myNativePlugin = ... const frameOutput = useFrameOutput({ onFrame(frame) { 'worklet' // [!code ++] myNativePlugin.call(frame) frame.dispose() } }) ``` ### Implementation [#implementation] Native Frame Processor Plugins are [Nitro Modules](https://github.com/mrousavy/nitro). #### 1. Bootstrap a Nitro Module [#1-bootstrap-a-nitro-module] To get started, follow the ["Nitro: How to build a Nitro Module"](https://nitro.margelo.com/docs/how-to-build-a-nitro-module) guide, and create a Swift/Kotlin Hybrid Object. #### 2. Add a dependency on react-native-vision-camera [#2-add-a-dependency-on-react-native-vision-camera] Then, in your Nitro Module, add a dependency on [react-native-vision-camera](/api/react-native-vision-camera) in your `package.json`: ```json title="package.json" { // ... "devDependencies": { // ... // [!code ++] "react-native-vision-camera": "*", }, "peerDependencies": { // ... // [!code ++] "react-native-vision-camera": "*" }, } ``` ..as well as to your native iOS/Android dependencies: Add the `VisionCamera` pod to your `*.podspec`: ```rb title="MyNativePlugin.podspec" Pod::Spec.new do |s| # ... # [!code ++] s.dependency 'VisionCamera' end ``` Add the `react-native-vision-camera` project to your `build.gradle`: ```groovy title="android/build.gradle" // ... dependencies { // ... // [!code ++] implementation project(":react-native-vision-camera") ``` ..and the prefab to your `CMakeLists`: ```cmake title="android/CMakeLists.txt" // ... // [!code ++] find_package(react-native-vision-camera REQUIRED) # Link all libraries together target_link_libraries( ${PACKAGE_NAME} // ... // [!code ++] react-native-vision-camera::VisionCamera ) ``` #### 3. Using the `Frame` in the specs [#3-using-the-frame-in-the-specs] Now, define a Nitro `HybridObject` that takes a [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) from [react-native-vision-camera](/api/react-native-vision-camera): ```ts title="MyNativePlugin.nitro.ts" import type { HybridObject } from 'react-native-nitro-modules' import type { Frame } from 'react-native-vision-camera' export interface MyNativePlugin extends HybridObject<{ ios: 'swift', android: 'kotlin' }> { call(frame: Frame): void } ``` > Tip > > > The names, arguments, and return values are irrelevant - you can name this method whatever you like, pass any kind of arguments and return any return value - given Nitro supports it. #### 4. Implement the native plugin [#4-implement-the-native-plugin] Then, generate your Nitro specs via `nitrogen`. In your native iOS/Android project, you can now implement `MyNativePlugin` and its `call(...)` function: ```swift title="HybridMyNativePlugin.swift" import VisionCamera import NitroModules class HybridMyNativePlugin: HybridMyNativePluginSpec { // [!code ++:3] func call(frame: any HybridFrameSpec) { // TODO: Implementation } } ``` ```kt title="HybridMyNativePlugin.kt" package com.margelo.nitro.mynativeplugin import com.margelo.nitro.camera.HybridFrameSpec class HybridMyNativePlugin: HybridMyNativePluginSpec() { // [!code ++:3] fun call(frame: HybridFrameSpec) { // TODO: Implementation } } ``` To unwrap the native [`CMSampleBuffer`](https://developer.apple.com/documentation/CoreMedia/CMSampleBuffer)/[`Image`](https://developer.android.com/reference/android/media/Image) from the `HybridFrameSpec`, cast it to `NativeFrame` - a public type exposed by VisionCamera: ```swift title="HybridMyNativePlugin.swift" import VisionCamera import AVFoundation import NitroModules class HybridMyNativePlugin: HybridMyNativePluginSpec { func call(frame: any HybridFrameSpec) { // [!code ++:2] guard let frame = frame as? any NativeFrame else { return } let buffer = frame.sampleBuffer // CMSampleBuffer } } ``` ```kt title="HybridMyNativePlugin.kt" package com.margelo.nitro.mynativeplugin import com.margelo.nitro.camera.HybridFrameSpec import com.margelo.nitro.camera.public.NativeFrame class HybridMyNativePlugin: HybridMyNativePluginSpec() { fun call(frame: HybridFrameSpec) { // [!code ++:2] val frame = frame as? NativeFrame ?: return val image = frame.image // ImageProxy } } ``` #### 5. Call it from JS [#5-call-it-from-js] In JS, you can now create an instance of your Nitro HybridObject and use it in a Frame Processor: ```ts import { NitroModules } from 'react-native-nitro-modules' // [!code ++] const plugin = NitroModules.createHybridObject('MyNativePlugin') const frameOutput = useFrameOutput({ onFrame(frame) { 'worklet' // [!code ++] plugin.call(frame) frame.dispose() } }) ``` Thanks to [Nitro](https://github.com/mrousavy/nitro)'s powerful architecture, your Native Frame Processor Plugin can accept any kinds of arguments, return any kind of values (even a [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame)!), and even be asynchronous. > Tip > > > If your `HybridObject` needs arguments, you should create a separate `HybridObject` that acts as a factory and has a create-function for your `HybridObject` with arguments. ### C++ Plugins [#c-plugins] Because [Nitro](https://github.com/mrousavy/nitro) supports C++, you can also implement your Frame Processor Plugin in pure C++. ```cpp title="HybridMyNativePlugin.hpp" #include namespace margelo::nitro::myplugin { class HybridMyNativePlugin: public HybridMyNativePluginSpec { public: HybridMyNativePlugin(): HybridObject(TAG) {} // [!code ++:3] void call(const std::shared_ptr& frame) { // TODO: Implementation } }; } ``` Since the [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) is a platform type, you cannot reliably downcast it cross-platform directly. Instead, you can use the public JS APIs (like [`Frame.getNativeBuffer()`](/api/react-native-vision-camera/hybrid-objects/Frame#getnativebuffer)) from C++, and downcast per platform if needed: ```cpp void call(const std::shared_ptr& frame) { // [!code ++:7] auto nativeBuffer = frame->getNativeBuffer(); auto orientation = frame->getOrientation(); #ifdef ANDROID AHardwareBuffer* hardwareBuffer = reinterpret_cast(nativeBuffer.pointer); #else // iOS CVPixelBufferRef pixelBuffer = reinterpret_cast(nativeBuffer.pointer); #endif } ``` > Tip > > > See [A Frame's NativeBuffer](a-frames-nativebuffer) for more information. Alternatively, you can add platform-specific C++/Objective-C++ code to your existing Swift/Kotlin codebases, and use the respective [`CVPixelBuffer`](https://developer.apple.com/documentation/corevideo/cvpixelbuffer) or [`AHardwareBuffer*`](https://developer.android.com/ndk/reference/group/a-hardware-buffer) APIs. ### Depth [#depth] While this guide covered the [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) type, the same principle applies to [`Depth`](/api/react-native-vision-camera/hybrid-objects/Depth) as well. Simply use the [`Depth`](/api/react-native-vision-camera/hybrid-objects/Depth) type instead of [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame), and cast to `NativeDepth`. --- # Source: Guides URL: https://visioncamera.margelo.com/docs/nativeframerenderer-view The [``](/api/react-native-vision-camera/views/NativeFrameRendererView) is a native [Nitro View](https://nitro.margelo.com/docs/hybrid-views) that allows rendering [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame)s using a [`FrameRenderer`](/api/react-native-vision-camera/hybrid-objects/FrameRenderer): ```tsx function App() { const frameRenderer = useFrameRenderer() return ( ) } ``` ### Rendering a `Frame` [#rendering-a-frame] For example, you could simply render the output of a [`CameraFrameOutput`](/api/react-native-vision-camera/hybrid-objects/CameraFrameOutput): ```tsx function App() { const frameRenderer = useFrameRenderer() const frameOutput = useFrameOutput({ onFrame(frame) { 'worklet' // [!code ++] frameRenderer.renderFrame(frame) frame.dispose() } }) const camera = useCamera({ isActive: true, device: 'back', outputs: [frameOutput] }) return ( ) } ``` > Tip > > > See ["The Frame Output"](frame-output) for more information about streaming [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame)s. --- # Source: Guides URL: https://visioncamera.margelo.com/docs/nativepreview-view The [``](/api/react-native-vision-camera/views/NativePreviewView) is a native [Nitro View](https://nitro.margelo.com/docs/hybrid-views) that allows rendering the contents of a [`CameraPreviewOutput`](/api/react-native-vision-camera/hybrid-objects/CameraPreviewOutput) (see ["Preview Output"](preview-output)): ```tsx function App() { const previewOutput = usePreviewOutput() return ( ) } ``` See [`PreviewViewProps`](/api/react-native-vision-camera/interfaces/PreviewViewProps) for a full list of available props. ### Accessing methods on the View [#accessing-methods-on-the-view] The [``](/api/react-native-vision-camera/views/NativePreviewView) provides methods for coordinate system conversions, and snapshot functionality under its ref: ```tsx function App() { const previewView = useRef(null) return ( { previewView.current = r })} /> ) } ``` For example, to convert a View point to Camera coordinates, you can use [`convertViewPointToCameraPoint(...)`](/api/react-native-vision-camera/interfaces/PreviewViewMethods#convertviewpointtocamerapoint): ```tsx function App() { const previewView = useRef(null) // [!code ++:3] const onTap = ({ nativeEvent: { x, y } }) => { const cameraPoint = previewView.current.convertViewPointToCameraPoint({ x, y }) } return ( { previewView.current = r })} /> ) } ``` See [`PreviewViewMethods`](/api/react-native-vision-camera/interfaces/PreviewViewMethods) for a full list of available methods. --- # The Object Output Source: Guides URL: https://visioncamera.margelo.com/docs/object-output The [`CameraObjectOutput`](/api/react-native-vision-camera/hybrid-objects/CameraObjectOutput) allows scanning objects (as [`ScannedObject`](/api/react-native-vision-camera/hybrid-objects/ScannedObject)s) using the platform-native object outputs. This is more efficient than the Barcode Scanner (see ["The Barcode Scanner"](barcode-scanner)), but offers less flexibility. ### Creating an Object Output [#creating-an-object-output] ```tsx function App() { const device = useCameraDevice('back') // [!code ++:6] const objectOutput = useObjectOutput({ types: ['qr'], onObjectsScanned(objects) { console.log(`Scanned ${objects.length} objects!`) } }) return ( ) } ``` ```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], }) } ``` ```tsx const session = await VisionCamera.createCameraSession(false) // [!code ++:6] const objectOutput = VisionCamera.createObjectOutput({ enabledObjectTypes: ['qr'] }) objectOutput.setOnObjectsScannedCallback((objects) => { console.log(`Scanned ${objects.length} objects!`) }) await session.configure([ { input: 'back', outputs: [ // [!code ++] { output: objectOutput, mirrorMode: 'auto' } ], constraints: [] } ], {}) await session.start() ``` See [`ObjectOutputOptions`](/api/react-native-vision-camera/interfaces/ObjectOutputOptions) for a full list of configuration options for the Object Output. > Warning > > > The [`CameraObjectOutput`](/api/react-native-vision-camera/hybrid-objects/CameraObjectOutput) is iOS only, since Android does not have a native object output. > > > > Use ["The Barcode Scanner"](barcode-scanner) (which uses MLKit) on Android instead. ### ScannedObject subclasses [#scannedobject-subclasses] [`ScannedObject`](/api/react-native-vision-camera/hybrid-objects/ScannedObject) is the base-class of all objects scanned by the [`CameraObjectOutput`](/api/react-native-vision-camera/hybrid-objects/CameraObjectOutput). There are multiple subclasses of [`ScannedObject`](/api/react-native-vision-camera/hybrid-objects/ScannedObject), such as [`ScannedCode`](/api/react-native-vision-camera/hybrid-objects/ScannedCode) (e.g. for QR codes or barcodes) or [`ScannedFace`](/api/react-native-vision-camera/hybrid-objects/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"](a-scannedobject) for more information about Scanned Objects. --- # Orientation Source: Guides URL: https://visioncamera.margelo.com/docs/orientation A Camera has a fixed sensor orientation in which Frames are streamed in. If you rotate your phone, the Camera doesn't physically rotate alongside with it, so rotation has to be applied to the Frames dynamically - and each [`CameraOutput`](/api/react-native-vision-camera/hybrid-objects/CameraOutput) applies orientation differently. ### Automatically set Orientation [#automatically-set-orientation] In most cases, your [`Orientation`](/api/react-native-vision-camera/type-aliases/CameraOrientation) should be automatically set to either the App's Interface Orientation, or your Phone's Device Orientation: * App Interface Orientation ([`'interface'`](/api/react-native-vision-camera/type-aliases/OrientationSource)): Changes output orientation only when the UI rotates. If the UI is locked to `portrait` and the phone is held sideways, the output orientation will still stick to `portrait` ([`'up'`](/api/react-native-vision-camera/type-aliases/CameraOrientation)). This is how apps like Snapchat or Instagram work. * Phone Device Orientation ([`'device'`](/api/react-native-vision-camera/type-aliases/OrientationSource)): Changes output orientation when the phone physically rotates. If the UI is locked to `portrait` and the phone is held sideways, the output orientation will change to be sideways - even if the UI doesn't rotate to `landscape`. This is how most photography apps (including the stock iOS Camera app) work. VisionCamera exposes two [`OrientationManager`](/api/react-native-vision-camera/hybrid-objects/OrientationManager)s - one for monitoring [`'interface'`](/api/react-native-vision-camera/type-aliases/OrientationSource) orientation, and one for monitoring [`'device'`](/api/react-native-vision-camera/type-aliases/OrientationSource) orientation: ```tsx function App() { const device = useCameraDevice('back') return ( ) } ``` ```tsx function App() { const device = useCameraDevice('back') const camera = useCamera({ isActive: true, device: device, // [!code ++] orientationSource: 'device', }) } ``` ```tsx const output = ... // [!code ++] const orientationManager = VisionCamera.createOrientationManager('device') orientationManager.startOrientationUpdates((newOrientation) => { output.outputOrientation = newOrientation }) output.outputOrientation = orientationManager.currentOrientation ``` ### Manually set Orientation [#manually-set-orientation] For full manual control over orientation, set [`orientationSource`](/api/react-native-vision-camera/interfaces/CameraProps#orientationsource) to [`'custom'`](/api/react-native-vision-camera/type-aliases/OrientationSource) (if you are using `` or `useCamera(...)`), and set a custom [`CameraOutput.outputOrientation`](/api/react-native-vision-camera/hybrid-objects/CameraOutput#outputorientation) for your outputs. ### How Orientation is handled [#how-orientation-is-handled] Since Camera sensors have fixed orientations, rotation has to be applied to Frames dynamically. The Camera pipeline does not physically rotate buffers, as this is computationally expensive and would introduce latency. #### Photo Orientation via EXIF tags [#photo-orientation-via-exif-tags] For captured Photos (see ["The Photo Output"](photo-output)), [`Orientation`](/api/react-native-vision-camera/type-aliases/CameraOrientation) is applied via EXIF tags. #### Video Orientation via metadata [#video-orientation-via-metadata] For recorded videos (see ["The Video Output"](video-output)), [`Orientation`](/api/react-native-vision-camera/type-aliases/CameraOrientation) is applied via mp4/mov metadata. #### Preview Orientation via View Transforms [#preview-orientation-via-view-transforms] For preview (see ["The Preview Output"](preview-output)), [`Orientation`](/api/react-native-vision-camera/type-aliases/CameraOrientation) is applied via view transforms. #### Frame Output is manual [#frame-output-is-manual] For streamed Frames (see ["The Frame Output"](frame-output) or ["The Depth Output"](depth-output)), [`Orientation`](/api/react-native-vision-camera/type-aliases/CameraOrientation) is **not** applied automatically - instead, it is passed alongside as metadata, relative to what the [`CameraOutput`](/api/react-native-vision-camera/hybrid-objects/CameraOutput)'s target [`outputOrientation`](/api/react-native-vision-camera/hybrid-objects/CameraOutput#outputorientation) is. Inside a Frame Processor, you must interpret a [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame)'s [`orientation`](/api/react-native-vision-camera/hybrid-objects/Frame#orientation) accordingly. Most Frame Processing libraries allow setting orientation and mirror settings as flags, for example, [MLKit](https://developers.google.com/ml-kit) uses `UIImageOrientation`: ```swift let frame = ... let mlImage = MLImage(sampleBuffer: frame.sampleBuffer) switch frame.orientation { case .up: // [!code ++] mlImage.orientation = frame.isMirrored ? .portrait : .portraitMirrored case .down: // ... } ``` > Tip > > > See ["A Frame: `orientation` and `isMirrored`"](a-frame#orientation-and-ismirrored) for more information. ##### Countering rotation (and mirroring) [#countering-rotation-and-mirroring] For example, to get the [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) to its *intended presentation* for rendering it with a custom rendering library, counter-rotate the [`orientation`](/api/react-native-vision-camera/hybrid-objects/Frame#orientation) accordingly: * If [`Frame.orientation`](/api/react-native-vision-camera/hybrid-objects/Frame#orientation) is [`'up'`](/api/react-native-vision-camera/type-aliases/CameraOrientation), you don't need to rotate anything - it is already in upright rotation. * If [`Frame.orientation`](/api/react-native-vision-camera/hybrid-objects/Frame#orientation) is [`'left'`](/api/react-native-vision-camera/type-aliases/CameraOrientation), it is rotated -90° left relative to the output's target orientation - you need to rotate it by +90° to get it back "upright". * If [`Frame.orientation`](/api/react-native-vision-camera/hybrid-objects/Frame#orientation) is [`'right'`](/api/react-native-vision-camera/type-aliases/CameraOrientation), it is rotated +90° right relative to the output's target orientation - you need to rotate it by -90° to get it back "upright". * If [`Frame.orientation`](/api/react-native-vision-camera/hybrid-objects/Frame#orientation) is [`'down'`](/api/react-native-vision-camera/type-aliases/CameraOrientation), it is rotated 180° upside down relative to the output's target orientation - you need to rotate it by 180° to get it back "upright". This also applies to [`isMirrored`](/api/react-native-vision-camera/hybrid-objects/Frame#ismirrored): * If [`Frame.isMirrored`](/api/react-native-vision-camera/hybrid-objects/Frame#ismirrored) is `false`, you don't need to mirror anything - it is already properly mirrored. (either output is mirrored and frame is mirrored, or output is not mirrored and frame is also not mirrored) * If [`Frame.isMirrored`](/api/react-native-vision-camera/hybrid-objects/Frame#ismirrored) is `true`, it is mirrored respective to the output's target mirror mode - you need to mirror it to get its intended presentation. (either output is mirrored and frame is not mirrored, or output is not mirrored and frame is mirrored) --- # Performance Source: Guides URL: https://visioncamera.margelo.com/docs/performance VisionCamera's modern architecture, super-fast native bindings via [Nitro Modules](https://github.com/mrousavy/nitro), and best practices in-place allows it to be highly optimized for every Camera situation. As with all advanced tools, there are still ways to mis-use it. This guide covers common tips to improve Camera performance in VisionCamera. ### Simpler Camera Device [#simpler-camera-device] Selecting a "simpler" [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice) (i.e. a Camera Device with *less [`physicalDevices`](/api/react-native-vision-camera/hybrid-objects/CameraDevice#physicaldevices)*) allows the Camera to initialize faster as it does not have to start multiple devices at once. You can prefer a simple [`'wide-angle'`](/api/react-native-vision-camera/type-aliases/DeviceType) Camera over something like a [`'triple-camera'`](/api/react-native-vision-camera/type-aliases/DeviceType) to significantly speed up initialization time. ```ts const fasterDevice = useCameraDevice('back', { physicalDevices: ['wide-angle-camera'], }) const slowerDevice = useCameraDevice('back', { physicalDevices: ['ultra-wide-angle-camera', 'wide-angle-camera', 'telephoto-camera'], }) ``` ```ts const deviceFactory = await VisionCamera.createDeviceFactory() const fasterDevice = getCameraDevice(deviceFactory, 'back', { physicalDevices: ['wide-angle-camera'], }) const slowerDevice = getCameraDevice(deviceFactory, 'back', { physicalDevices: ['ultra-wide-angle-camera', 'wide-angle-camera', 'telephoto-camera'], }) ``` > Tip > > > See ["Camera Devices"](devices) for more information. ### No Video HDR [#no-video-hdr] Video HDR uses 10-bit formats and/or additional processing steps that come with additional computation overhead. Disable Video HDR for higher efficiency. > Tip > > > See ["Video HDR"](video-hdr) for more information. ### Video Stabilization [#video-stabilization] Video Stabilization requires additional overhead to start the algorithm and introduces capture latency. Disabling Video Stabilization can significantly speed up the Camera initialization time. > Tip > > > See ["Video Stabilization"](video-stabilization) for more information. ### Pixel Format [#pixel-format] The Camera's native [`PixelFormat`](/api/react-native-vision-camera/type-aliases/PixelFormat) is a YUV-like format. If you set a [`CameraFrameOutput`](/api/react-native-vision-camera/hybrid-objects/CameraFrameOutput)'s [`pixelFormat`](/api/react-native-vision-camera/interfaces/FrameOutputOptions#pixelformat) to [`'rgb'`](/api/react-native-vision-camera/type-aliases/TargetVideoPixelFormat), the pipeline will need to convert the YUV buffers to RGB, which introduces additional overhead and consumes more memory. If you are using any Frame Processor Plugins that work with RGB, try to replace them with YUV-based plugins instead and set your [`pixelFormat`](/api/react-native-vision-camera/interfaces/FrameOutputOptions#pixelformat) to [`'yuv'`](/api/react-native-vision-camera/type-aliases/TargetVideoPixelFormat). > Tip > > > See ["Pixel Formats Map"](pixel-formats-map) for more information. ### Barcode Scanner vs Object Output [#barcode-scanner-vs-object-output] [The Barcode Scanner](barcode-scanner) is a custom processing pipeline using MLKit for barcode detection. On iOS, [the Object Output](object-output) is a native Camera pipeline, which also allows barcode detection and is much more lightweight and efficient. Consider using [the Object Output](object-output) instead of [the Barcode Scanner](barcode-scanner) on iOS for better performance if it suits your needs, and only fall back to [the Barcode Scanner](barcode-scanner) otherwise (e.g. on Android). > Tip > > > See ["The Barcode Scanner"](barcode-scanner) or ["The Object Output"](object-output) for more information. ### Code Scanning Formats [#code-scanning-formats] When using [the Barcode Scanner](barcode-scanner) or [the Object Output](object-output), only enable the code formats you actually need to scan to improve performance. ### No physical Buffer rotation [#no-physical-buffer-rotation] Instead of physically rotating buffers, your Frame Processor Pipeline should be able to work with orientation and mirroring via flags. Ensure your [`CameraFrameOutput`](/api/react-native-vision-camera/hybrid-objects/CameraFrameOutput) is not configured with [`enablePhysicalBufferRotation`](/api/react-native-vision-camera/interfaces/FrameOutputOptions#enablephysicalbufferrotation), as this causes latency and requires conversion overhead. > Tip > > > See ["Orientation"](orientation) for more information. ### Disable unneeded Outputs [#disable-unneeded-outputs] Only attach [`CameraOutput`](/api/react-native-vision-camera/hybrid-objects/CameraOutput)s that are actually needed. The more outputs you add to a [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession), the more processing power is required. ### No Skia Frame Processor [#no-skia-frame-processor] If you are not using Skia, use the regular [``](/api/react-native-vision-camera/views/Camera) view instead of the [``](/api/react-native-vision-camera-skia/views/SkiaCamera) view, as the [``](/api/react-native-vision-camera-skia/views/SkiaCamera) view requires much more processing power. ### Using `isActive` [#using-isactive] The [`isActive`](/api/react-native-vision-camera/interfaces/CameraProps#isactive) property controls whether the Camera should actively stream frames. Instead of fully unmounting the [``](/api/react-native-vision-camera/views/Camera) component and remounting it again, keep it mounted and just switch [`isActive`](/api/react-native-vision-camera/interfaces/CameraProps#isactive) on or off. This allows the Camera to resume much faster as it internally keeps the session warmed up. > Tip > > > See ["Lifecycle"](lifecycle) for more information. ### Fast Photos [#fast-photos] If you need to take photos as fast as possible, use a [`qualityPrioritization`](/api/react-native-vision-camera/interfaces/PhotoOutputOptions#qualityprioritization) of [`'speed'`](/api/react-native-vision-camera/type-aliases/QualityPrioritization) to speed up the photo pipeline: ```tsx const photoOutput = usePhotoOutput({ qualityPrioritization: 'speed' }) ``` ### Prepare Photo Settings [#prepare-photo-settings] Some photo captures require the native Camera pipeline to allocate additional buffers or reconfigure parts of the photo render path before the capture can be serviced efficiently. On iOS, this can especially matter for expensive captures such as maximum-resolution photos, RAW photos, depth data, flash captures, or [`qualityPrioritization`](/api/react-native-vision-camera/interfaces/PhotoOutputOptions#qualityprioritization) set to [`'quality'`](/api/react-native-vision-camera/type-aliases/QualityPrioritization). If you already know which [`CapturePhotoSettings`](/api/react-native-vision-camera/interfaces/CapturePhotoSettings) you are going to use, call [`prepareSettings(...)`](/api/react-native-vision-camera/hybrid-objects/CameraPhotoOutput#preparesettings) before the actual capture: ```ts await photoOutput.prepareSettings([ { flashMode: 'off' } ]) const photo = await photoOutput.capturePhoto( { flashMode: 'off' }, {} ) ``` Preparing settings is optional, but it allows VisionCamera to warm up the native photo pipeline for the exact settings you plan to capture with. On Android, [`prepareSettings(...)`](/api/react-native-vision-camera/hybrid-objects/CameraPhotoOutput#preparesettings) is a no-op. ### Snapshot Capture [#snapshot-capture] If photo capture is still too slow for your use-case, consider capturing a Snapshot via [`takeSnapshot()`](/api/react-native-vision-camera/interfaces/PreviewViewMethods#takesnapshot) instead: ```ts const preview = ... const snapshot = await preview.takeSnapshot() ``` > Tip > > > See ["Snapshot Capture"](snapshot-capture) for more information. ### Appropriate Resolution [#appropriate-resolution] Choose resolutions efficiently. If your backend can only handle 1080p videos, don't use a 4k resolution if you have to downsize it later anyways - instead configure the Camera for 1080p already via a [`{ resolutionBias: ... }`](/api/react-native-vision-camera/interfaces/ResolutionBiasConstraint) constraint, or by setting a matching [`targetResolution`](/api/react-native-vision-camera/interfaces/VideoOutputOptions#targetresolution) on your outputs. ### Binned Formats [#binned-formats] Binned formats combine multiple neighboring sensor pixels into one larger effective pixel. This usually improves low-light sensitivity and reduces noise. Additionally, binned formats are more performant as they use significantly less bandwidth. The tradeoff is that binned formats can reduce fine detail compared to a full-resolution non-binned readout. If performance is more important than maximum spatial detail, prefer a binned format with a [`{ binned: true }`](/api/react-native-vision-camera/interfaces/BinnedConstraint) constraint. If fine detail is more important, prefer a non-binned format with a [`{ binned: false }`](/api/react-native-vision-camera/interfaces/BinnedConstraint) constraint. > Tip > > > See ["Constraints API"](constraints) for more information. ### Appropriate FPS [#appropriate-fps] Same as with resolutions, also record at the frame rate you expect. Setting higher frame rate uses more memory and could heat up the battery. If your backend can only handle 30 FPS, there is no need to record at 60 FPS, instead set the Camera's FPS to 30 via an [`{ fps: ... }`](/api/react-native-vision-camera/interfaces/FPSConstraint) constraint. > Tip > > > See ["FPS"](fps) for more information. --- # Photo HDR Source: Guides URL: https://visioncamera.margelo.com/docs/photo-hdr Photo HDR fuses multiple Frames together to capture [`Photo`](/api/react-native-vision-camera/hybrid-objects/Photo)s in a higher dynamic range, allowing for much brighter highlights and deeper shadows. In most HDR pipelines, an underexposed Frame, a regular exposed Frame, and an overexposed Frame are captured at the same time, and merged together at ISP-level. ### Capture HDR Photos [#capture-hdr-photos] To capture HDR [`Photo`](/api/react-native-vision-camera/hybrid-objects/Photo)s, ensure your currently selected [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice) supports Photo HDR, and enable a [`{ photoHDR: ... }`](/api/react-native-vision-camera/interfaces/PhotoHDRConstraint) constraint: ```tsx function App() { return ( ) } ``` ```tsx function App() { const camera = useCamera({ isActive: true, device: 'back', constraints: [ // [!code ++] { photoHDR: true } ] }) } ``` ```tsx const device = ... const session = ... const controllers = await session.configure([ { input: device, outputs: [], constraints: [ // [!code ++] { photoHDR: true } ] } ], {}) ``` #### HDR Camera Extensions [#hdr-camera-extensions] Some Android Phones have vendor-specific [`CameraExtension`](/api/react-native-vision-camera/hybrid-objects/CameraExtension)s. If the phone has a [`'hdr'`](/api/react-native-vision-camera/type-aliases/CameraExtensionType) extension, you can enable it to capture HDR [`Photo`](/api/react-native-vision-camera/hybrid-objects/Photo)s. This does not require enabling Photo HDR via the [`{ photoHDR: ... }`](/api/react-native-vision-camera/interfaces/PhotoHDRConstraint) constraint, but instead just requires the extension to be enabled: ```tsx function App() { const device = ... const extensions = useCameraExtensions(device) const hdrExtension = extensions.find((e) => e.type === 'hdr') return ( ) } ``` > Tip > > > See ["Camera Extensions"](camera-extensions) for more information. --- # Photo Output Callbacks Source: Guides URL: https://visioncamera.margelo.com/docs/photo-output-callbacks The Photo Capture Pipeline (see ["The Photo Output"](photo-output)) has multiple stages for [`Photo`](/api/react-native-vision-camera/hybrid-objects/Photo) capture. Each stage invokes the respective callback - see [`CapturePhotoCallbacks`](/api/react-native-vision-camera/interfaces/CapturePhotoCallbacks). ### Capture Events [#capture-events] A Photo capture has 3 stages: 1. [`onWillBeginCapture()`](/api/react-native-vision-camera/interfaces/CapturePhotoCallbacks#onwillbegincapture) 2. [`onWillCapturePhoto()`](/api/react-native-vision-camera/interfaces/CapturePhotoCallbacks#onwillcapturephoto) 3. [`onDidCapturePhoto()`](/api/react-native-vision-camera/interfaces/CapturePhotoCallbacks#ondidcapturephoto) To receive callbacks for each stage, pass [`CapturePhotoCallbacks`](/api/react-native-vision-camera/interfaces/CapturePhotoCallbacks) to [`capturePhoto(...)`](/api/react-native-vision-camera/hybrid-objects/CameraPhotoOutput#capturephoto): ```ts const photoOutput = ... const photo = await photoOutput.capturePhoto( { /* options */ }, { onWillBeginCapture: () => console.log('will begin capture'), onWillCapturePhoto: () => console.log('about to capture'), onDidCapturePhoto: () => console.log('did capture'), } ) ``` ### Preview Image [#preview-image] A [`CameraPhotoOutput`](/api/react-native-vision-camera/hybrid-objects/CameraPhotoOutput) can be configured to deliver a preview-sized Image before the final [`Photo`](/api/react-native-vision-camera/hybrid-objects/Photo) is ready, to display optimistic UIs or thumbnails - assuming the [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice) supports it. Preview Images are useful in long capture pipelines (e.g. [`'quality'`](/api/react-native-vision-camera/type-aliases/QualityPrioritization) prioritization, or RAW capture) to provide a useful thumbnail upfront. First, specify your [`previewImageTargetSize`](/api/react-native-vision-camera/interfaces/PhotoOutputOptions#previewimagetargetsize): ```ts const photoOutput = usePhotoOutput({ previewImageTargetSize: { width: 100, height: 150 } }) ``` Then, in [`capturePhoto(...)`](/api/react-native-vision-camera/hybrid-objects/CameraPhotoOutput#capturephoto), pass an [`onPreviewImageAvailable(...)`](/api/react-native-vision-camera/interfaces/CapturePhotoCallbacks#onpreviewimageavailable) callback: ```ts const photoOutput = ... const photo = await photoOutput.capturePhoto( { /* options */ }, { onPreviewImageAvailable: (image) => { console.log(`Received ${image.width}x${image.height} Image thumbnail!`) } } ) ``` > Warning > > > If your [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice)'s [`supportsPreviewImage`](/api/react-native-vision-camera/hybrid-objects/CameraDevice#supportspreviewimage) is `false`, the [`onPreviewImageAvailable(...)`](/api/react-native-vision-camera/interfaces/CapturePhotoCallbacks#onpreviewimageavailable) callback will never be called. --- # The Photo Output Source: Guides URL: https://visioncamera.margelo.com/docs/photo-output The [`CameraPhotoOutput`](/api/react-native-vision-camera/hybrid-objects/CameraPhotoOutput) allows capturing processed- and RAW-[`Photo`](/api/react-native-vision-camera/hybrid-objects/Photo)s. ### Creating a Photo Output [#creating-a-photo-output] ```tsx function App() { const device = useCameraDevice('back') // [!code ++] const photoOutput = usePhotoOutput({ /* options */ }) return ( ) } ``` ```tsx function App() { const device = useCameraDevice('back') // [!code ++] const photoOutput = usePhotoOutput({ /* options */ }) const camera = useCamera({ isActive: true, device: device, // [!code ++] outputs: [photoOutput], }) } ``` ```tsx const session = await VisionCamera.createCameraSession(false) // [!code ++] const photoOutput = VisionCamera.createPhotoOutput({ /* options */ }) await session.configure([ { input: 'back', outputs: [ // [!code ++] { output: photoOutput, mirrorMode: 'auto' } ], constraints: [] } ], {}) await session.start() ``` See [`PhotoOutputOptions`](/api/react-native-vision-camera/interfaces/PhotoOutputOptions) for a full list of configuration options for the Photo Output. ### Capturing Photos [#capturing-photos] #### Capturing Photos in-memory [#capturing-photos-in-memory] To capture a [`Photo`](/api/react-native-vision-camera/hybrid-objects/Photo) in-memory, use [`capturePhoto(...)`](/api/react-native-vision-camera/hybrid-objects/CameraPhotoOutput#capturephoto): ```ts const photo = await photoOutput.capturePhoto( { /* options */ }, { /* callbacks */ } ) // ... photo.dispose() ``` > Warning > > > Make sure to [dispose the `Photo` when you no longer use it](a-photo#dispose-when-no-longer-used), as otherwise the JS Runtime might not immediately delete it, possibly exhausting system resources or stalling the Camera: See ["A Photo"](a-photo) to understand how the [`Photo`](/api/react-native-vision-camera/hybrid-objects/Photo) type works, and how to use it. #### Capturing Photos to a file [#capturing-photos-to-a-file] To capture a photo and directly save it to a temporary file, use [`capturePhotoToFile(...)`](/api/react-native-vision-camera/hybrid-objects/CameraPhotoOutput#capturephototofile): ```ts const { filePath } = await photoOutput.capturePhotoToFile( { /* options */ }, { /* callbacks */ } ) ``` `filePath` is a plain filesystem path, not a `file://` URL. If another library expects a URI, prepend `file://` at the call site. See [`CapturePhotoSettings`](/api/react-native-vision-camera/interfaces/CapturePhotoSettings) for a full list of configuration options, and [`CapturePhotoCallbacks`](/api/react-native-vision-camera/interfaces/CapturePhotoCallbacks) for a full list of callbacks for the capture method. --- # Configuring Photo Quality Source: Guides URL: https://visioncamera.margelo.com/docs/photo-quality While the [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession) negotiates the Photo resolution based on your [`Constraint`](/api/react-native-vision-camera/type-aliases/Constraint)s and connected outputs, the [`CameraPhotoOutput`](/api/react-native-vision-camera/hybrid-objects/CameraPhotoOutput) can still adjust its quality (JPEG compression), as well as balance photo quality over capture speed as preferred. ### Adjust Quality Prioritization [#adjust-quality-prioritization] Use [`qualityPrioritization`](/api/react-native-vision-camera/interfaces/PhotoOutputOptions#qualityprioritization) to configure the [`CameraPhotoOutput`](/api/react-native-vision-camera/hybrid-objects/CameraPhotoOutput)'s capture mode - [`'speed'`](/api/react-native-vision-camera/type-aliases/QualityPrioritization) configures for maximum capture speed at the cost of possibly reducing image quality, [`'quality'`](/api/react-native-vision-camera/type-aliases/QualityPrioritization) configures the pipeline for maximum photo quality which possibly introduces more latency, and [`'balanced'`](/api/react-native-vision-camera/type-aliases/QualityPrioritization) balances between the two: ```ts const photoOutput = usePhotoOutput({ qualityPrioritization: 'quality' }) ``` To configure the pipeline for maximum capture speed, use [`'speed'`](/api/react-native-vision-camera/type-aliases/QualityPrioritization), which requires the [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice) to support it: ```ts const device = ... const photoOutput = usePhotoOutput({ qualityPrioritization: device.supportsSpeedQualityPrioritization ? 'speed' : 'balanced' }) ``` > Tip > > > [`'speed'`](/api/react-native-vision-camera/type-aliases/QualityPrioritization) enables zero-shutter-lag (ZSL). ### Configure JPEG `quality` [#configure-jpeg-quality] Processed [`PhotoContainerFormat`](/api/react-native-vision-camera/type-aliases/PhotoContainerFormat)s (such as [`'jpeg'`](/api/react-native-vision-camera/type-aliases/PhotoContainerFormat) or [`'heic'`](/api/react-native-vision-camera/type-aliases/PhotoContainerFormat)) compress captured [`Photo`](/api/react-native-vision-camera/hybrid-objects/Photo)s. By default, a compression of `0.9` (meaning 90% quality) is used, which can be adjusted via [`quality`](/api/react-native-vision-camera/interfaces/PhotoOutputOptions#quality) - for example, to capture in maximum quality set it to `1.0`: ```ts const photoOutput = usePhotoOutput({ qualityPrioritization: 'quality', quality: 1.0, }) ``` For faster capture speed, use a lower [`quality`](/api/react-native-vision-camera/interfaces/PhotoOutputOptions#quality), such as `0.7`: ```ts const device = ... const photoOutput = usePhotoOutput({ qualityPrioritization: device.supportsSpeedQualityPrioritization ? 'speed' : 'balanced', quality: 0.7 }) ``` > Note > > > RAW [`PhotoContainerFormat`](/api/react-native-vision-camera/type-aliases/PhotoContainerFormat) (such as [`'dng'`](/api/react-native-vision-camera/type-aliases/PhotoContainerFormat)) do not support compression, effectively always using a [`quality`](/api/react-native-vision-camera/interfaces/PhotoOutputOptions#quality) of `1.0`. --- # Pixel Formats Map Source: Guides URL: https://visioncamera.margelo.com/docs/pixel-formats-map ### Requesting a Pixel Format [#requesting-a-pixel-format] In a [`CameraFrameOutput`](/api/react-native-vision-camera/hybrid-objects/CameraFrameOutput), you have three options that affects your [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame)'s [`pixelFormat`](/api/react-native-vision-camera/hybrid-objects/Frame#pixelformat): * [`'native'`](/api/react-native-vision-camera/type-aliases/TargetVideoPixelFormat): Uses the [`CameraSessionConfig`](/api/react-native-vision-camera/hybrid-objects/CameraSessionConfig)'s [`nativePixelFormat`](/api/react-native-vision-camera/hybrid-objects/CameraSessionConfig#nativepixelformat) - this requires zero conversion and is generally the most efficient. * [`'yuv'`](/api/react-native-vision-camera/type-aliases/TargetVideoPixelFormat): Uses the platform default YUV format - often [`yuv-420-8-bit-full`](/api/react-native-vision-camera/type-aliases/VideoPixelFormat). In most cases, this requires little to no conversion and is very efficient. * [`'rgb'`](/api/react-native-vision-camera/type-aliases/TargetVideoPixelFormat): Uses the platform default RGB format - often [`rgb-rgba-8-bit`](/api/react-native-vision-camera/type-aliases/VideoPixelFormat) or [`rgb-bgra-8-bit`](/api/react-native-vision-camera/type-aliases/VideoPixelFormat). This always requires conversion as the Camera operates in YUV (or BayerRAW), and uses \~2.6x more memory. > Tip > > > It is recommended to use [`'yuv'`](/api/react-native-vision-camera/type-aliases/TargetVideoPixelFormat) if possible, as it is the most efficient CPU-accessible format. > > Only fall-back to [`'rgb'`](/api/react-native-vision-camera/type-aliases/TargetVideoPixelFormat) if your Native Frame Processor Plugins do not natively support YUV buffers. > > If your pipeline is entirely GPU-based, use [`'native'`](/api/react-native-vision-camera/type-aliases/TargetVideoPixelFormat), as this requires zero conversions and keeps buffers entirely on the GPU. > Warning > > > Use [`'native'`](/api/react-native-vision-camera/type-aliases/TargetVideoPixelFormat) with caution. > > Most camera configurations stream in YUV formats like [`'yuv-420-8-bit-full'`](/api/react-native-vision-camera/type-aliases/VideoPixelFormat), but on some devices the native format could also be a vendor-specific format ([`'private'`](/api/react-native-vision-camera/type-aliases/PixelFormat)) which is not readable by the CPU. You can still pass [`'private'`](/api/react-native-vision-camera/type-aliases/PixelFormat) [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame)s to consumers like a Media Encoder or a Surface, but you cannot access its pixel data. > > > > Some configurations natively stream in RAW pixel formats like [`raw-bayer-packed96-12-bit`](/api/react-native-vision-camera/type-aliases/VideoPixelFormat). Make sure to be prepared for this if you use [`'native'`](/api/react-native-vision-camera/type-aliases/TargetVideoPixelFormat). ### Inspecting a Pixel Format [#inspecting-a-pixel-format] When you receive a [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame), you can inspect its [`pixelFormat`](/api/react-native-vision-camera/hybrid-objects/Frame#pixelformat) to find out the precise Pixel Format it uses - here are some examples that map to native pixel formats: | VisionCamera [`VideoPixelFormat`](/api/react-native-vision-camera/type-aliases/VideoPixelFormat) | iOS [`CVPixelFormatType`](https://developer.apple.com/documentation/corevideo/cvpixelformattype) | Android [`ImageFormat`](https://developer.android.com/reference/android/graphics/ImageFormat) | | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | | [`yuv-420-8-bit-full`](/api/react-native-vision-camera/type-aliases/VideoPixelFormat) | [`420YpCbCr8BiPlanarFullRange`](https://developer.apple.com/documentation/CoreVideo/kCVPixelFormatType_420YpCbCr8BiPlanarFullRange) | [`YUV_420_888`](https://developer.android.com/reference/android/graphics/ImageFormat#YUV_420_888) | | [`yuv-420-10-bit-full`](/api/react-native-vision-camera/type-aliases/VideoPixelFormat) | [`420YpCbCr10BiPlanarFullRange`](https://developer.apple.com/documentation/corevideo/kcvpixelformattype_420ypcbcr10biplanarfullrange) | [`YCBCR_P010`](https://developer.android.com/reference/android/graphics/ImageFormat#YCBCR_P010) | | [`rgb-bgra-8-bit`](/api/react-native-vision-camera/type-aliases/VideoPixelFormat) | [`32BGRA`](https://developer.apple.com/documentation/CoreVideo/kCVPixelFormatType_32BGRA) | / | | [`rgb-rgba-8-bit`](/api/react-native-vision-camera/type-aliases/VideoPixelFormat) | / | [`FLEX_RGBA_888`](https://developer.android.com/reference/android/graphics/ImageFormat#FLEX_RGBA_888) | | [`private`](/api/react-native-vision-camera/type-aliases/VideoPixelFormat) | / | [`PRIVATE`](https://developer.android.com/reference/android/graphics/ImageFormat#PRIVATE) | --- # The Preview Output Source: Guides URL: https://visioncamera.margelo.com/docs/preview-output The [`CameraPreviewOutput`](/api/react-native-vision-camera/hybrid-objects/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 [#creating-a-preview-output] > Note > > > The [``](/api/react-native-vision-camera/views/Camera) view already creates a [`CameraPreviewOutput`](/api/react-native-vision-camera/hybrid-objects/CameraPreviewOutput) (+ [``](/api/react-native-vision-camera/views/NativePreviewView)) for you, automatically. ```tsx function App() { const device = useCameraDevice('back') // [!code ++] const previewOutput = usePreviewOutput() const camera = useCamera({ isActive: true, device: device, // [!code ++] outputs: [previewOutput], }) } ``` ```tsx const session = await VisionCamera.createCameraSession(false) // [!code ++] const previewOutput = VisionCamera.createPreviewOutput() await session.configure([ { input: 'back', outputs: [ // [!code ++] { output: previewOutput, mirrorMode: 'auto' } ], constraints: [] } ], {}) await session.start() ``` ### Connecting the Preview Output to a View [#connecting-the-preview-output-to-a-view] To display the Camera feed to the user, you must connect the [`CameraPreviewOutput`](/api/react-native-vision-camera/hybrid-objects/CameraPreviewOutput) to a [``](/api/react-native-vision-camera/views/NativePreviewView): ```tsx function App() { const previewOutput = usePreviewOutput() return ( // [!code ++:4] ) } ``` See ["Views: \"](nativepreview-view) for more information about ``. --- # Production Apps Source: Guides URL: https://visioncamera.margelo.com/docs/production-apps ### Attribution [#attribution] This list is compiled from public knowledge and publicly observable app information. Install and download figures are compiled from public store listings and public app-intelligence estimates. Apple does not publish lifetime App Store install counts, so App Store numbers are shown as monthly estimates where available. The npm package download total is summed from the public npm downloads API through June 7, 2026. No affiliation, sponsorship, or endorsement implied. All trademarks and app icons belong to their respective owners. --- # Capturing RAW Photos Source: Guides URL: https://visioncamera.margelo.com/docs/raw-photos A typical Photo pipeline consists of multiple processing stages in the [ISP](https://en.wikipedia.org/wiki/Image_processor) - white balancing, color interpolation and correction, colorspace conversions, and finally JPEG/HEIF compression. Many modern phones support skipping the processing stages entirely, allowing applications to capture true RAW photos. RAW photos are typically captured in [DNG](https://en.wikipedia.org/wiki/Digital_Negative) format (see the [`'dng'`](/api/react-native-vision-camera/type-aliases/PhotoContainerFormat) [`PhotoContainerFormat`](/api/react-native-vision-camera/type-aliases/PhotoContainerFormat)). ### Prepare the pipeline for RAW [#prepare-the-pipeline-for-raw] To capture RAW, configure your [`CameraPhotoOutput`](/api/react-native-vision-camera/hybrid-objects/CameraPhotoOutput) to capture in RAW/DNG photos by setting the [`containerFormat`](/api/react-native-vision-camera/interfaces/PhotoOutputOptions#containerformat) to [`'dng'`](/api/react-native-vision-camera/type-aliases/PhotoContainerFormat): ```ts const photoOutput = usePhotoOutput({ containerFormat: 'dng' }) ``` ```ts const photoOutput = VisionCamera.createPhotoOutput({ containerFormat: 'dng' }) ``` The [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession) internally negotiates your [`Constraint`](/api/react-native-vision-camera/type-aliases/Constraint)s and outputs to find a configuration that supports RAW capture. If RAW is not available on the device, the session configuration will fail - you can check support upfront via [`isSessionConfigSupported(...)`](/api/react-native-vision-camera/hybrid-objects/CameraDevice#issessionconfigsupported). #### Use a Preview Image [#use-a-preview-image] Since RAW capture uses much higher bandwidth, it is also slower to capture a single [`Photo`](/api/react-native-vision-camera/hybrid-objects/Photo). To provide instant user-feedback, it is recommended to request a Preview Image to display as a thumbnail - see ["Photo Output Callbacks: Preview Image"](photo-output-callbacks#preview-image) for more information. ### Capture RAW [#capture-raw] Then, capture a RAW photo using [`capturePhoto(...)`](/api/react-native-vision-camera/hybrid-objects/CameraPhotoOutput#capturephoto): ```ts const photoOutput = ... const photo = await photoOutput.capturePhoto( { /* options */ }, { /* callbacks */ } ) ``` The captured [`Photo`](/api/react-native-vision-camera/hybrid-objects/Photo)'s RAW pixel data can be accessed via [`getPixelBuffer()`](/api/react-native-vision-camera/hybrid-objects/Photo#getpixelbuffer): ```ts const photo = ... if (photo.hasPixelBuffer) { const buffer = photo.getPixelBuffer() } ``` When a RAW photo is saved via [`saveToTemporaryFileAsync()`](/api/react-native-vision-camera/hybrid-objects/Photo#savetotemporaryfileasync) it is saved to a `.dng` file. #### Apple ProRAW [#apple-proraw] If available, Apple devices may automatically capture in Apple ProRAW instead of regular DNG RAW. This provides better multi-Frame fuse details and supports quality prioritization. --- # The Recorder Source: Guides URL: https://visioncamera.margelo.com/docs/recorder The [`Recorder`](/api/react-native-vision-camera/hybrid-objects/Recorder) allows recording video and audio data to a file. It is often created by a [`CameraVideoOutput`](/api/react-native-vision-camera/hybrid-objects/CameraVideoOutput). See ["The Video Output"](video-output) for more information. ```ts const videoOutput = ... const recorder = await videoOutput.createRecorder({ // ...options }) ``` ### Setting maximum duration or file-size [#setting-maximum-duration-or-file-size] To automatically stop a recording when a certain duration or file-size has been reached, use [`maxDuration`](/api/react-native-vision-camera/interfaces/RecorderSettings#maxduration) or [`maxFileSize`](/api/react-native-vision-camera/interfaces/RecorderSettings#maxfilesize): ```ts const videoOutput = ... const recorder = await videoOutput.createRecorder({ maxDuration: 5, // 5 seconds maxFileSize: 10000000, // ~10 MB }) ``` When the duration or file size has been reached, the [`onRecordingFinished(...)`](/api/react-native-vision-camera/hybrid-objects/Recorder#startrecording) callback will be called with a [`reason`](/api/react-native-vision-camera/type-aliases/RecordingFinishedReason) - either [`'max-duration'`](/api/react-native-vision-camera/type-aliases/RecordingFinishedReason) or [`'max-file-size'`](/api/react-native-vision-camera/type-aliases/RecordingFinishedReason). ### Starting a Recording [#starting-a-recording] To start a Video Recording, use [`Recorder.startRecording(...)`](/api/react-native-vision-camera/hybrid-objects/Recorder#startrecording), which takes callbacks for recording events: ```ts const recorder = ... await recorder.startRecording( (path, reason) => console.log(`Recording finished! ${reason}`), (error) => console.error(`Recording error!`, error), () => console.log(`Recording paused!`), () => console.log(`Recording resumed!`) ) ``` #### Inspecting Progress [#inspecting-progress] As a recording progresses, you can inspect the [`Recorder`](/api/react-native-vision-camera/hybrid-objects/Recorder)'s [`recordedDuration`](/api/react-native-vision-camera/hybrid-objects/Recorder#recordedduration) and [`recordedFileSize`](/api/react-native-vision-camera/hybrid-objects/Recorder#recordedfilesize) properties: ```ts const recorder = ... const interval = setInterval(() => { console.log(`Recorded ${recorder.recordedFileSize} bytes`) }, 500) ``` The [`Recorder`](/api/react-native-vision-camera/hybrid-objects/Recorder) also exposes metadata about its state - like [`isRecording`](/api/react-native-vision-camera/hybrid-objects/Recorder#isrecording), [`isPaused`](/api/react-native-vision-camera/hybrid-objects/Recorder#ispaused) and [`filePath`](/api/react-native-vision-camera/hybrid-objects/Recorder#filepath). `filePath` and the value passed to `onRecordingFinished` are plain filesystem paths instead of `file://` URLs; if another library expects a URI, prepend `file://` at the call site. ### Pausing/Resuming [#pausingresuming] To pause/resume Video Recordings, use [`Recorder.pauseRecording()`](/api/react-native-vision-camera/hybrid-objects/Recorder#pauserecording)/[`Recorder.resumeRecording()`](/api/react-native-vision-camera/hybrid-objects/Recorder#resumerecording), which also fires the `onRecordingPaused`/`onRecordingResumed` callbacks previously passed to the [`Recorder.startRecording(...)`](/api/react-native-vision-camera/hybrid-objects/Recorder#startrecording) function: ```ts await recorder.pauseRecording() await recorder.resumeRecording() ``` ### Stopping a Recording [#stopping-a-recording] To finish a Video Recording, use [`Recorder.stopRecording()`](/api/react-native-vision-camera/hybrid-objects/Recorder#stoprecording), which requests the [`CameraVideoOutput`](/api/react-native-vision-camera/hybrid-objects/CameraVideoOutput) to stop after all Frames have been successfully written. ```ts await recorder.stopRecording() ``` This method resolves once the stop has been requested, but it may take a few Frames or sometimes even multiple seconds before the Video Recording will be finished - for example when using Video Stabilization, or when the device is throttled due to high thermal conditions. Once the Video Recording has been finished, the `onRecordingFinished` callback passed to the [`Recorder.startRecording(...)`](/api/react-native-vision-camera/hybrid-objects/Recorder#startrecording) function will be called. ### Cancelling a Recording [#cancelling-a-recording] To cancel a Video Recording instead of stopping it, use [`cancelRecording()`](/api/react-native-vision-camera/hybrid-objects/Recorder#cancelrecording), which deletes the file and cleans up state. ```ts await recorder.cancelRecording() ``` ### Interruptions [#interruptions] The [`Recorder`](/api/react-native-vision-camera/hybrid-objects/Recorder) gracefully handles interruptions such as incoming calls, minimizing the app, or pipeline stalls - in this case your [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession)'s [`onInterruptionStarted`](/api/react-native-vision-camera/hybrid-objects/CameraSession#addoninterruptionstartedlistener) listener will get called. If the Recording has to be paused, the `onRecordingPaused` callback previously passed to the [`Recorder.startRecording(...)`](/api/react-native-vision-camera/hybrid-objects/Recorder#startrecording) function will be called. For incoming calls, the Recording doesn't have to be paused - only the audio track will be disabled, while video may continue to record. By default, the [`CameraVideoOutput`](/api/react-native-vision-camera/hybrid-objects/CameraVideoOutput) stops an active recording when its input [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice) changes (e.g. when flipping from the [`'front'`](/api/react-native-vision-camera/type-aliases/CameraPosition) to the [`'back'`](/api/react-native-vision-camera/type-aliases/CameraPosition) Camera) - to continue recording in this case, create [a Persistent Video Output](video-output#persistent-video-outputs) instead. ### Don't re-use a `Recorder` [#dont-re-use-a-recorder] A [`Recorder`](/api/react-native-vision-camera/hybrid-objects/Recorder) is single-use, meaning you need to create a new [`Recorder`](/api/react-native-vision-camera/hybrid-objects/Recorder) to record a new Video. --- # Resizing/Converting Frames Source: Guides URL: https://visioncamera.margelo.com/docs/resizer Most ML models are trained on RGB frames at a very small resolution, which is not something the Camera natively produces. To use these models, you must convert your [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) to RGB, and resize it to match the input tensor's resolution first. For example, the BlazeFace ML model declares its input tensor size as following: ``` Input: [1, 3, 128, 128] (float32) ``` This often refers to NCHW; * `N`: Number of batches = 1 * `C`: Number of channels per pixel = 3 (implying RGB) * `H`: Height of the image = 128 pixels * `W`: Width of the image = 128 pixels * `float32`: The data-type of each scalar pixel = `float32` No Camera natively produces 128x128 RGB Images, especially not in `float32` (as `uint8` is much more compact), so we have to convert Frames manually. VisionCamera includes a GPU-accelerated resizing and pixel-format conversion pipeline in the [react-native-vision-camera-resizer](/api/react-native-vision-camera-resizer) package. > Dependency > > > The [`Resizer`](/api/react-native-vision-camera-resizer/hybrid-objects/Resizer) requires [react-native-vision-camera-resizer](/api/react-native-vision-camera-resizer) to be installed. ### Using the resizer [#using-the-resizer] To create a [`Resizer`](/api/react-native-vision-camera-resizer/hybrid-objects/Resizer) use [`useResizer(...)`](/api/react-native-vision-camera-resizer/functions/useResizer) and configure its [`width`](/api/react-native-vision-camera-resizer/interfaces/ResizerOptions#width), [`height`](/api/react-native-vision-camera-resizer/interfaces/ResizerOptions#height), [`channelOrder`](/api/react-native-vision-camera-resizer/interfaces/ResizerOptions#channelorder), [`dataType`](/api/react-native-vision-camera-resizer/interfaces/ResizerOptions#datatype) and [`pixelLayout`](/api/react-native-vision-camera-resizer/interfaces/ResizerOptions#pixellayout): ```ts import { useResizer } from 'react-native-vision-camera-resizer' function App() { // [!code ++:7] const { resizer } = useResizer({ width: 128, height: 128, channelOrder: 'rgb', dataType: 'float32', pixelLayout: 'planar', }) } ``` ```ts import { createResizer } from 'react-native-vision-camera-resizer' // [!code ++:7] const resizer = await createResizer({ width: 128, height: 128, channelOrder: 'rgb', dataType: 'float32', pixelLayout: 'planar', }) ``` Then, in your Frame Processor, call [`resize(...)`](/api/react-native-vision-camera-resizer/hybrid-objects/Resizer#resize): ```ts const { resizer } = ... const frameOutput = useFrameOutput({ pixelFormat: 'yuv', onFrame(frame) { 'worklet' // [!code ++:2] const resized = resizer.resize(frame) const pixels = resized.getPixelBuffer() // call BlazeFace with `pixels` now resized.dispose() frame.dispose() } }) ``` ```ts const resizer = ... const frameOutput = VisionCamera.createFrameOutput({ // ...options pixelFormat: 'yuv', onFrame(frame) { 'worklet' // [!code ++:2] const resized = resizer.resize(frame) const pixels = resized.getPixelBuffer() // call BlazeFace with `pixels` now resized.dispose() frame.dispose() } }) ``` The returned [`GPUFrame`](/api/react-native-vision-camera-resizer/hybrid-objects/GPUFrame) holds the resized buffer (see [`getPixelBuffer()`](/api/react-native-vision-camera-resizer/hybrid-objects/GPUFrame#getpixelbuffer)) in the target width/height, channel order, pixel layout and data type - which you can then pass to your ML model - for example to an ONNX Runtime, TFLite, or other. Make sure to [`dispose()`](https://nitro.margelo.com/docs/hybrid-objects) the [`GPUFrame`](/api/react-native-vision-camera-resizer/hybrid-objects/GPUFrame) once you are done using it, otherwise the pipeline stalls. #### Availability and Fallbacks [#availability-and-fallbacks] The Resizer pipeline is GPU-accelerated using Metal on iOS, and Vulkan on Android. On Android, the Resizer pipeline requires Vulkan extensions such as [`VK_ANDROID_external_memory_android_hardware_buffer`](https://docs.vulkan.org/refpages/latest/refpages/source/VK_ANDROID_external_memory_android_hardware_buffer.html) or [`VK_EXT_queue_family_foreign`](https://docs.vulkan.org/refpages/latest/refpages/source/VK_EXT_queue_family_foreign.html), which are often only available on Android 8.0+. To check if the current device supports the GPU-accelerated [`Resizer`](/api/react-native-vision-camera-resizer/hybrid-objects/Resizer) pipeline, use [`isResizerAvailable()`](/api/react-native-vision-camera-resizer/functions/isResizerAvailable) and fall back to a custom CPU implementation otherwise: ```ts import { isResizerAvailable, createResizer } from 'react-native-vision-camera-resizer' function getResizer(options: ResizerOptions): Resizer | CPUFallbackResizer { if (isResizerAvailable()) { // GPU accelerated Resizer pipeline is available! return createResizer(options) } else { // GPU accelerated Resizer pipeline is not available on this device, // fall back to a CPU implementation. return ... } } ``` ### Input Frame Constraints [#input-frame-constraints] #### Input Frame Pixel Formats [#input-frame-pixel-formats] The [`Resizer`](/api/react-native-vision-camera-resizer/hybrid-objects/Resizer) expects the input [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) to be a GPU-backed buffer, so it's recommended to configure the [`CameraFrameOutput`](/api/react-native-vision-camera/hybrid-objects/CameraFrameOutput) to stream Frames in [`pixelFormat='yuv'`](/api/react-native-vision-camera/interfaces/FrameOutputOptions#pixelformat). For maximum performance, you can set [`pixelFormat='native'`](/api/react-native-vision-camera/interfaces/FrameOutputOptions#pixelformat), but only if the [`CameraSessionConfig`](/api/react-native-vision-camera/hybrid-objects/CameraSessionConfig)'s [`nativePixelFormat`](/api/react-native-vision-camera/hybrid-objects/CameraSessionConfig#nativepixelformat) is either [`'yuv-420-8-bit-full'`](/api/react-native-vision-camera/type-aliases/VideoPixelFormat) or [`'private'`](/api/react-native-vision-camera/type-aliases/PixelFormat), otherwise the input [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) might use a pixel format not supported by the [`Resizer`](/api/react-native-vision-camera-resizer/hybrid-objects/Resizer) (like [`'raw-bayer-packed96-12-bit'`](/api/react-native-vision-camera/type-aliases/VideoPixelFormat)). > Warning > > > Do not set the [`CameraFrameOutput`](/api/react-native-vision-camera/hybrid-objects/CameraFrameOutput)'s [`pixelFormat`](/api/react-native-vision-camera/interfaces/FrameOutputOptions#pixelformat) to [`'rgb'`](/api/react-native-vision-camera/type-aliases/TargetVideoPixelFormat), as this performs an unnecessary conversion in the Camera pipeline. > > The [`Resizer`](/api/react-native-vision-camera-resizer/hybrid-objects/Resizer) already converts to RGB, which is faster because it's GPU accelerated. #### Input Frame Size [#input-frame-size] The bigger the [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) is, the more work the [`Resizer`](/api/react-native-vision-camera-resizer/hybrid-objects/Resizer) has to do. It is recommended to configure your [`CameraFrameOutput`](/api/react-native-vision-camera/hybrid-objects/CameraFrameOutput) with a [`targetResolution`](/api/react-native-vision-camera/interfaces/FrameOutputOptions#targetresolution) that is as small as possible. The [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession) negotiates all constraints and output resolutions together to find the best match. ### Output Configurations [#output-configurations] #### Float vs Int [#float-vs-int] Most ML models are trained on `float32` data types, which means each value in a pixel is a 32-bit Float ranging from `0.0` to `1.0`. While GPUs (and NPUs) are optimized on floating point datatypes, it may be worth to quantize the model to use `uint8` instead, as this is much more compact in memory (4x smaller), which could improve performance and overall device thermals. > Tip > > > See [`ChannelOrder`](/api/react-native-vision-camera-resizer/type-aliases/ChannelOrder) and [`DataType`](/api/react-native-vision-camera-resizer/type-aliases/DataType) for the supported output formats the [`Resizer`](/api/react-native-vision-camera-resizer/hybrid-objects/Resizer) can convert to. #### Pixel Layout [#pixel-layout] The [`pixelLayout`](/api/react-native-vision-camera-resizer/interfaces/ResizerOptions#pixellayout) specifies how the individual channels per pixel are arranged in memory. * [`'interleaved'`](/api/react-native-vision-camera-resizer/type-aliases/PixelLayout) stores complete pixels next to each other, which corresponds to (N)HWC: ```text RGBRGBRGBRGB RGBRGBRGBRGB RGBRGBRGBRGB ``` Use [`'interleaved'`](/api/react-native-vision-camera-resizer/type-aliases/PixelLayout) if your ML model input tensor is (N)HWC shaped - e.g.: `[1, H, W, 3]`. * [`'planar'`](/api/react-native-vision-camera-resizer/type-aliases/PixelLayout) stores one full channel plane after the other, which corresponds to (N)CHW: ```text RRRRRRRRRRRR GGGGGGGGGGGG BBBBBBBBBBBB ``` Use [`'planar'`](/api/react-native-vision-camera-resizer/type-aliases/PixelLayout) if your ML model input tensor is (N)CHW shaped - e.g.: `[1, 3, H, W]`. > Tip > > > See [`PixelLayout`](/api/react-native-vision-camera-resizer/type-aliases/PixelLayout) for a list of all memory pixel layouts. #### Scale Mode [#scale-mode] When the [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame)'s aspect ratio doesn't match the [`Resizer`](/api/react-native-vision-camera-resizer/hybrid-objects/Resizer)'s output aspect ratio, the Resizer either has to scale the Frame to [`'cover'`](/api/react-native-vision-camera-resizer/type-aliases/ScaleMode) the output (which crops out any overflow), or [`'contain'`](/api/react-native-vision-camera-resizer/type-aliases/ScaleMode) the Frame inside the output (which adds black bars around underflowing areas). > Tip > > > See [`ScaleMode`](/api/react-native-vision-camera-resizer/type-aliases/ScaleMode) for more information. ### Orientation and Mirroring [#orientation-and-mirroring] The [`Resizer`](/api/react-native-vision-camera-resizer/hybrid-objects/Resizer) automatically counter-rotates and possibly counter-mirrors the [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) to be in its intended up-right and non-mirrored presentation. It is recommended to set [`enablePhysicalBufferRotation`](/api/react-native-vision-camera/interfaces/FrameOutputOptions#enablephysicalbufferrotation) to `false` to prevent the Camera from performing this on it's own, as the [`Resizer`](/api/react-native-vision-camera-resizer/hybrid-objects/Resizer) is GPU-accelerated and typically much faster. ### Multiple Resizers [#multiple-resizers] It is fine to run multiple [`Resizer`](/api/react-native-vision-camera-resizer/hybrid-objects/Resizer) instances if you have multiple different ML models, although it is recommended to convert ML models to the same common type to avoid duplicating conversion overhead. You may even run the [`Resizer`](/api/react-native-vision-camera-resizer/hybrid-objects/Resizer) in parallel - see ["Async Frame Processing"](async-frame-processing) for more information. --- # Skia Frame Processors Source: Guides URL: https://visioncamera.margelo.com/docs/skia-frame-processors Skia Frame Processors allow using [@Shopify/react-native-skia](https://github.com/Shopify/react-native-skia) to draw on a [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame) in realtime. > Dependency > > > Skia Frame Processors require [react-native-vision-camera-skia](/api/react-native-vision-camera-skia) to be installed. ### Using Skia with VisionCamera [#using-skia-with-visioncamera] After installing [@Shopify/react-native-skia](https://github.com/Shopify/react-native-skia) and [react-native-vision-camera-skia](/api/react-native-vision-camera-skia), you can use the [``](/api/react-native-vision-camera-skia/views/SkiaCamera) view to quickly render a Camera feed using Skia: ```tsx import { SkiaCamera } from 'react-native-vision-camera-skia' function App() { return ( { 'worklet' // ... custom Frame processing logic render(({ frameTexture, canvas }) => { // ... custom drawing operations canvas.drawImage(frameTexture, 0, 0) }) frame.dispose() }} /> ) } ``` In the [`onFrame(...)`](/api/react-native-vision-camera-skia/interfaces/SkiaCameraProps#onframe) callback you receive two parameters: * The `frame` (a [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame)), which you can use for any kind of Frame Processing, like Face Detection. * A `render(...)` function, which allows you to render the Frame (as an `SkImage`) to a Skia `SkCanvas`. The `SkCanvas` will be in the Frame's [coordinate system](coordinate-systems), and will ultimately be rendered to the screen via the preview Skia [``](https://shopify.github.io/react-native-skia/docs/canvas/overview/). #### Pixel Formats [#pixel-formats] Just like in a regular [`CameraFrameOutput`](/api/react-native-vision-camera/hybrid-objects/CameraFrameOutput), you can configure the [``](/api/react-native-vision-camera-skia/views/SkiaCamera)'s pixel format via [`pixelFormat`](/api/react-native-vision-camera-skia/interfaces/SkiaCameraProps#pixelformat). The pixel format affects your Skia Camera's performance, as well as the pixel format of the `frame`. * Choose [`'yuv'`](/api/react-native-vision-camera/type-aliases/TargetVideoPixelFormat) as a good default - Skia supports rendering 8-bit and 10-bit YUV buffers, and most native Frame Processing libraries support YUV. * Choose [`'rgb'`](/api/react-native-vision-camera/type-aliases/TargetVideoPixelFormat) as a fallback if [`'yuv'`](/api/react-native-vision-camera/type-aliases/TargetVideoPixelFormat) is not supported by your native Frame Processor libraries, as [`'rgb'`](/api/react-native-vision-camera/type-aliases/TargetVideoPixelFormat) requires conversion overhead. * Choose [`'native'`](/api/react-native-vision-camera/type-aliases/TargetVideoPixelFormat) only if you ensure the negotiated [`CameraSessionConfig`](/api/react-native-vision-camera/hybrid-objects/CameraSessionConfig)'s [`nativePixelFormat`](/api/react-native-vision-camera/hybrid-objects/CameraSessionConfig#nativepixelformat) is renderable by Skia. As of today, Skia supports 8-bit and 10-bit YUV formats, RGB formats, as well as [`'private'`](/api/react-native-vision-camera/type-aliases/PixelFormat) on Android. > Tip > > > See ["The Frame Output: Choosing a Pixel Format"](frame-output#choosing-a-pixel-format) for more information. ### Differences to a regular `` [#differences-to-a-regular-camera-] The [``](/api/react-native-vision-camera-skia/views/SkiaCamera) is different than the [``](/api/react-native-vision-camera/views/Camera) in two important ways: * A [``](/api/react-native-vision-camera-skia/views/SkiaCamera) does not render to a [`PreviewView`](/api/react-native-vision-camera/type-aliases/PreviewView) - instead it renders a Skia [``](https://shopify.github.io/react-native-skia/docs/canvas/overview/) and draws [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame)s manually, which you can control via `render(...)`. * A [``](/api/react-native-vision-camera-skia/views/SkiaCamera) always has a [`CameraFrameOutput`](/api/react-native-vision-camera/hybrid-objects/CameraFrameOutput) attached. ### Rendering yourself [#rendering-yourself] If you want to render Frames yourself, without [``](/api/react-native-vision-camera-skia/views/SkiaCamera), use the [`NativeBuffer`](/api/react-native-vision-camera/interfaces/NativeBuffer) APIs and Skia's `MakeImageFromNativeBuffer(...)` API: ```ts const frameOutput = useFrameOutput({ pixelFormat: 'native', onFrame(frame) { 'worklet' const surface = // create a Skia.Surface & cache it across onFrame(...) const nativeBuffer = frame.getNativeBuffer() const frameTexture = Skia.Image.MakeImageFromNativeBuffer(nativeBuffer.pointer) // render `frameTexture` to `surface`/canvas frameTexture.dispose() nativeBuffer.release() frame.dispose() } }) ``` > Tip > > > See ["A Frame's NativeBuffer"](a-frames-nativebuffer) for more information about the [`NativeBuffer`](/api/react-native-vision-camera/interfaces/NativeBuffer) API. --- # Source: Guides URL: https://visioncamera.margelo.com/docs/skiacamera-view The [``](/api/react-native-vision-camera-skia/views/SkiaCamera) is a view component that allows rendering Frames with [@Shopify/react-native-skia](https://github.com/Shopify/react-native-skia). This allows fully custom GPU-based processing like effects, shaders, shapes and boxes, and more. > Dependency > > > The [``](/api/react-native-vision-camera-skia/views/SkiaCamera) requires [react-native-vision-camera-worklets](/api/react-native-vision-camera-worklets) (and [react-native-worklets](https://docs.swmansion.com/react-native-worklets/docs/)) and [react-native-vision-camera-skia](/api/react-native-vision-camera-skia) to be installed. ### Using the `` [#using-the-skiacamera-] To display a Skia Camera, mount the view and implement the [`onFrame(...)`](/api/react-native-vision-camera-skia/interfaces/SkiaCameraProps#onframe) function to simply render the [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame): ```tsx function App() { return ( { 'worklet' // ... custom Frame processing logic render(({ frameTexture, canvas }) => { // ... custom drawing operations canvas.drawImage(frameTexture, 0, 0) }) frame.dispose() }} /> ) } ``` Since you are in full control over rendering, you can run frame-by-frame analysis and conditionally render contents or overlays such as accurate bounding boxes over QR codes or faces, or custom shaders for visual effects. > Tip > > > See ["Skia Frame Processors"](skia-frame-processors) for more information. --- # Snapshot Capture Source: Guides URL: https://visioncamera.margelo.com/docs/snapshot-capture To capture a snapshot of the current Preview View's contents, use [`takeSnapshot()`](/api/react-native-vision-camera/interfaces/PreviewViewMethods#takesnapshot): ```ts const preview = ... const snapshot = await preview.takeSnapshot() ``` --- # Tap To Focus Source: Guides URL: https://visioncamera.margelo.com/docs/tap-to-focus A "Focus Metering Action" adjusts Auto-Exposure (AE), Auto-Focus (AF) and Auto-White-Balance (AWB) to bring a specific point in the Camera "into focus". This operation is also often called "3A Metering". ### Start a Focus Metering Action [#start-a-focus-metering-action] To start a Focus Metering Action, call [`CameraController.focusTo(...)`](/api/react-native-vision-camera/hybrid-objects/CameraController#focusto): The [``](/api/react-native-vision-camera/views/Camera) view automatically converts View Points to Camera Coordinates and performs a Focus Metering Action via [`CameraRef.focusTo(...)`](/api/react-native-vision-camera/interfaces/CameraRef#focusto): ```tsx function App() { const camera = useRef(null) const onTap = async ({ viewX, viewY }) => { // [!code ++] await camera.current.focusTo({ x: viewX, y: viewY }) } return ( ) } ``` Alternatively, you can enable the native Tap-To-Focus Gesture by setting [`enableNativeTapToFocusGesture`](/api/react-native-vision-camera/interfaces/CameraViewProps#enablenativetaptofocusgesture) to `true`: ```tsx function App() { return ( ) } ``` See [`TapToFocusGestureController`](/api/react-native-vision-camera/hybrid-objects/TapToFocusGestureController) for more information. If you have a [`CameraController`](/api/react-native-vision-camera/hybrid-objects/CameraController), you must first create a [`MeteringPoint`](/api/react-native-vision-camera/hybrid-objects/MeteringPoint). You can create a [`MeteringPoint`](/api/react-native-vision-camera/hybrid-objects/MeteringPoint) from View Coordinates via a [`PreviewView`](/api/react-native-vision-camera/type-aliases/PreviewView) ([`createMeteringPoint(...)`](/api/react-native-vision-camera/interfaces/PreviewViewMethods#createmeteringpoint)): ```ts const preview = ... const meteringPoint = preview.createMeteringPoint(viewX, viewY) ``` ..or from normalized Camera Coordinates (`0.0` to `1.0`) via [`createNormalizedMeteringPoint(...)`](/api/react-native-vision-camera/hybrid-objects/CameraFactory#createnormalizedmeteringpoint): ```ts const meteringPoint = VisionCamera.createNormalizedMeteringPoint(0.5, 0.5) ``` Then, start a Focus Metering Action to the specific [`MeteringPoint`](/api/react-native-vision-camera/hybrid-objects/MeteringPoint) via [`CameraController.focusTo(...)`](/api/react-native-vision-camera/hybrid-objects/CameraController#focusto)): ```ts const controller = ... const meteringPoint = ... // [!code ++] await controller.focusTo(meteringPoint) ``` ### Focus Metering Options [#focus-metering-options] The Focus Metering Action focuses Exposure ([`'AE'`](/api/react-native-vision-camera/type-aliases/MeteringMode)), Focus ([`'AF'`](/api/react-native-vision-camera/type-aliases/MeteringMode)) and White-Balance ([`'AWB'`](/api/react-native-vision-camera/type-aliases/MeteringMode)) to a specific point as fast as possible ([`'snappy'`](/api/react-native-vision-camera/type-aliases/FocusResponsiveness)), and then keeps that point continuously focused even if the scene changes ([`'continuous'`](/api/react-native-vision-camera/type-aliases/SceneAdaptiveness)). After 5 seconds, focus will be automatically reset to the center again. To adjust this behaviour, use [`FocusOptions`](/api/react-native-vision-camera/interfaces/FocusOptions). #### Metering Modes [#metering-modes] By default, all [`MeteringMode`](/api/react-native-vision-camera/type-aliases/MeteringMode)s that are supported on the current [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice) will be used. You can adjust this behaviour to - for example - only adjust Exposure ([`'AE'`](/api/react-native-vision-camera/type-aliases/MeteringMode)): ```ts const controller = ... const meteringPoint = ... // [!code ++] if (controller.device.supportsExposureMetering) { await controller.focusTo(meteringPoint, { // [!code ++] modes: ['AE'] }) } ``` Now, only Exposure will be metered to the given `meteringPoint`, while Focus and White Balance remain at their current positions (possibly the center of the Camera). > Warning > > > If you pass a custom [`MeteringMode`](/api/react-native-vision-camera/type-aliases/MeteringMode)s array, you must ensure that all given [`MeteringMode`](/api/react-native-vision-camera/type-aliases/MeteringMode)s are supported on the current [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice). > > For [`'AE'`](/api/react-native-vision-camera/type-aliases/MeteringMode), that's [`CameraDevice.supportsExposureMetering`](/api/react-native-vision-camera/hybrid-objects/CameraDevice#supportsexposuremetering). #### Focus Responsiveness [#focus-responsiveness] By default, the Metering Action focuses as quickly as possible ([`'snappy'`](/api/react-native-vision-camera/type-aliases/FocusResponsiveness)). This is suitable for photo capture (see ["The Photo Output"](photo-output)), as users want to quickly bring a scene into focus. When recording videos, this may feel disruptive - in that case use [`'steady'`](/api/react-native-vision-camera/type-aliases/FocusResponsiveness) instead, which might focus slower, but doesn't disrupt a video recording as much: ```ts const controller = ... const meteringPoint = ... await controller.focusTo(meteringPoint, { // [!code ++] responsiveness: 'steady' }) ``` #### Scene Adaptiveness [#scene-adaptiveness] By default, the Metering Action continuously keeps the given [`MeteringPoint`](/api/react-native-vision-camera/hybrid-objects/MeteringPoint) in focus - even as the scene changes ([`'continuous'`](/api/react-native-vision-camera/type-aliases/SceneAdaptiveness)). For example, when focusing the football field at a football game, the Camera will adjust AE/AF/AWB to bring the football field "into focus". Once a person walks through the Camera (to grab a nice cold beer), the Camera might adjust AE/AF/AWB briefly onto the person, which causes the football field to lose focus. To prevent this, you can lock the AE/AF/AWB values at the given [`MeteringPoint`](/api/react-native-vision-camera/hybrid-objects/MeteringPoint) instead by using [`'locked'`](/api/react-native-vision-camera/type-aliases/SceneAdaptiveness): ```ts const controller = ... const meteringPoint = ... await controller.focusTo(meteringPoint, { // [!code ++] adaptiveness: 'locked' }) ``` #### Auto Reset [#auto-reset] By default, AE/AF/AWB will automatically be reset to the center of the Camera after 5 seconds. To change the auto reset duration, pass a custom number: ```ts const controller = ... const meteringPoint = ... await controller.focusTo(meteringPoint, { // [!code ++] autoResetAfter: 10 }) ``` If you want to disable auto reset entirely, pass `null`: ```ts const controller = ... const meteringPoint = ... await controller.focusTo(meteringPoint, { // [!code ++] autoResetAfter: null }) ``` ### Resetting Focus [#resetting-focus] To reset AE/AF/AWB back to the center of the Camera, use [`CameraController.resetFocus()`](/api/react-native-vision-camera/hybrid-objects/CameraController#resetfocus): ```ts const controller = ... await controller.resetFocus() ``` Resetting Focus also resets any locked states and ensures the Camera will continuously update AE/AF/AWB again. --- # Video HDR Source: Guides URL: https://visioncamera.margelo.com/docs/video-hdr Video HDR captures Frames in a higher dynamic range, which allows much brighter highlights and deeper shadows. ### Enable Video HDR [#enable-video-hdr] To enable Video HDR, pass a [`{ videoDynamicRange: ... }`](/api/react-native-vision-camera/interfaces/VideoDynamicRangeConstraint) constraint in your constraints. The [`CommonDynamicRanges`](/api/react-native-vision-camera/variables/CommonDynamicRanges) export defines a few commonly used Dynamic Ranges such as [`ANY_SDR`](/api/react-native-vision-camera/variables/CommonDynamicRanges#any_sdr) or [`ANY_HDR`](/api/react-native-vision-camera/variables/CommonDynamicRanges#any_hdr): ```tsx function App() { const device = ... return ( ) } ``` ```tsx function App() { const device = ... const camera = useCamera({ isActive: true, device: device, constraints: [ // [!code ++] { videoDynamicRange: CommonDynamicRanges.ANY_HDR } ] }) } ``` ```tsx const session = ... const device = ... const controllers = await session.configure([ { input: device, outputs: [], constraints: [ // [!code ++] { videoDynamicRange: CommonDynamicRanges.ANY_HDR } ] } ], {}) ``` The [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession) internally negotiates the [`{ videoDynamicRange: ... }`](/api/react-native-vision-camera/interfaces/VideoDynamicRangeConstraint) constraint with other enabled constraints and all connected [`CameraOutput`](/api/react-native-vision-camera/hybrid-objects/CameraOutput)s to find a best-matching supported combination on this device. > Tip > > > To check if Video HDR is supported with your specific combination of constraints and outputs upfront, use [`isSessionConfigSupported(...)`](/api/react-native-vision-camera/hybrid-objects/CameraDevice#issessionconfigsupported). #### Custom Dynamic Ranges [#custom-dynamic-ranges] For a custom [`TargetDynamicRange`](/api/react-native-vision-camera/interfaces/TargetDynamicRange), pass the dynamic range as an object directly. - for example, to try using [`'apple-log'`](/api/react-native-vision-camera/type-aliases/ColorSpace) in 10-bit: ```tsx [ { // [!code ++:5] videoDynamicRange: { bitDepth: 'hdr-10-bit', colorSpace: 'apple-log', colorRange: 'full' } } ] ``` ### Implementation details [#implementation-details] Video HDR is implemented in four different ways, possibly combined. #### Higher Bit-Depth [#higher-bit-depth] Some Video HDR pipelines capture Frames with a higher bit-depth (10-bit instead of 8-bit) allowing for a wider color-spectrum. | Bit Depth | Different Colors | Maximum Brightness | | --------- | ---------------- | ------------------ | | 8-bit | 256 | \~100 nits | | 10-bit | 1024 | \~1000-4000 nits | #### Different Transfer Function [#different-transfer-function] Video SDR (standard dynamic range) uses a *simple gamma curve* for color mapping (e.g. BT.1886), which is limited in brightness range. Video HDR often use a different transfer functions - often PQ (HDR10/Dolby) or HLG, which fundamentally changes how brightness is encoded. #### Different Color Spaces [#different-color-spaces] The transfer functions often also affect color-spaces - while Video SDR typically uses [`'srgb'`](/api/react-native-vision-camera/type-aliases/ColorSpace), an HDR pipeline uses a wider color-space like [`'hlg-bt2020'`](/api/react-native-vision-camera/type-aliases/ColorSpace). #### Extended Dynamic Range [#extended-dynamic-range] Many Apple devices support capturing video using ["Extended Dynamic Range"](https://developer.apple.com/documentation/avfoundation/avcapturedevice/isvideohdrenabled), which internally doubles Video Frame Rate (see ["FPS"](fps)) to capture an under-exposed, an over-exposed and a regularly-exposed Frame in one go and fuses them together to create a more widely-exposed Frame - this is similar to how ["Photo HDR"](photo-hdr) works. --- # The Video Output Source: Guides URL: https://visioncamera.margelo.com/docs/video-output The [`CameraVideoOutput`](/api/react-native-vision-camera/hybrid-objects/CameraVideoOutput) allows capturing Videos, optionally with Audio. ### Creating a Video Output [#creating-a-video-output] ```tsx function App() { const device = useCameraDevice('back') // [!code ++] const videoOutput = useVideoOutput({ /* options */ }) return ( ) } ``` ```tsx function App() { const device = useCameraDevice('back') // [!code ++] const videoOutput = useVideoOutput({ /* options */ }) const camera = useCamera({ isActive: true, device: device, // [!code ++] outputs: [videoOutput], }) } ``` ```tsx const session = await VisionCamera.createCameraSession(false) // [!code ++] const videoOutput = VisionCamera.createVideoOutput({ /* options */ }) await session.configure([ { input: 'back', outputs: [ // [!code ++] { output: videoOutput, mirrorMode: 'auto' } ], constraints: [] } ], {}) await session.start() ``` See [`VideoOutputOptions`](/api/react-native-vision-camera/interfaces/VideoOutputOptions) for a full list of configuration options for the Video Output. #### Enabling Audio [#enabling-audio] By default, audio is disabled. To record audio from the microphone, set [`enableAudio`](/api/react-native-vision-camera/interfaces/VideoOutputOptions#enableaudio) to `true`: ```ts const videoOutput = useVideoOutput({ // [!code ++] enableAudio: true }) ``` ```ts const videoOutput = VisionCamera.createVideoOutput({ // [!code ++] enableAudio: true }) ``` > Warning > > > Enabling Audio requires microphone permission. #### Persistent Video Outputs [#persistent-video-outputs] By default, an active recording will be automatically stopped when the input [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice) changes (e.g. when the user flips the Camera from front to back). To continue an active recording even when the [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice) changes, set [`enablePersistentRecorder`](/api/react-native-vision-camera/interfaces/VideoOutputOptions#enablepersistentrecorder) to `true`: ```ts const videoOutput = useVideoOutput({ // [!code ++] enablePersistentRecorder: true }) ``` ```ts const videoOutput = VisionCamera.createVideoOutput({ // [!code ++] enablePersistentRecorder: true }) ``` > Note > > > The Persistent Recorder uses a different, buffered pipeline for recording Videos, which introduces slight overhead. > > If possible, disable the persistent recorder by default for maximum efficiency. #### File container format [#file-container-format] By default, VisionCamera records to a QuickTime container (`.mov`) on iOS, and an MPEG-4 container (`.mp4`) on Android. You can configure iOS to also record to an MPEG-4 container by setting your [`VideoOutputOptions.fileType`](/api/react-native-vision-camera/interfaces/VideoOutputOptions#filetype) to [`'mp4'`](/api/react-native-vision-camera/type-aliases/RecorderFileType): ```ts const videoOutput = useVideoOutput({ fileType: 'mp4' }) ``` As Android does not support QuickTime containers (`.mov`), this option is iOS only. ### Preparing a Recorder [#preparing-a-recorder] Before recording a Video, you must first prepare a [`Recorder`](/api/react-native-vision-camera/hybrid-objects/Recorder) using [`createRecorder(...)`](/api/react-native-vision-camera/hybrid-objects/CameraVideoOutput#createrecorder): ```ts const recorder = await videoOutput.createRecorder({ // ...options }) ``` See [`RecorderSettings`](/api/react-native-vision-camera/interfaces/RecorderSettings) for a full list of configuration options. ### Recording a Video [#recording-a-video] Then, capture a video using [`Recorder.startRecording(...)`](/api/react-native-vision-camera/hybrid-objects/Recorder#startrecording): ```ts await recorder.startRecording( (path) => console.log(`Recording finished!`), (error) => console.error(`Recording error!`, error) ) ``` To finish the recording, use [`Recorder.stopRecording()`](/api/react-native-vision-camera/hybrid-objects/Recorder#stoprecording): ```ts await recorder.stopRecording() ``` This method resolves once a stop has been requested. After the video recording has been fully written to a file, the [`onRecordingFinished`](/api/react-native-vision-camera/hybrid-objects/Recorder#startrecording) callback passed to [`Recorder.startRecording(...)`](/api/react-native-vision-camera/hybrid-objects/Recorder#startrecording) will be called. > Tip > > > See ["The Recorder"](recorder) to understand how the [`Recorder`](/api/react-native-vision-camera/hybrid-objects/Recorder) works, and how to use it. ### Re-create your Recorder [#re-create-your-recorder] > Warning > > > Don't re-use a [`Recorder`](/api/react-native-vision-camera/hybrid-objects/Recorder). > > To start a new Video recording, you must create a new [`Recorder`](/api/react-native-vision-camera/hybrid-objects/Recorder). --- # Video Stabilization Source: Guides URL: https://visioncamera.margelo.com/docs/video-stabilization Video Stabilization applies software- and sometimes hardware-processing to stabilize Frames in the Camera. ### Enable Video Stabilization [#enable-video-stabilization] To enable Video Stabilization, pass a [`{ videoStabilizationMode: ... }`](/api/react-native-vision-camera/interfaces/VideoStabilizationModeConstraint) constraint using your desired [`StabilizationMode`](/api/react-native-vision-camera/type-aliases/StabilizationMode): ```tsx function App() { return ( ) } ``` ```tsx function App() { const camera = useCamera({ isActive: true, device: 'back', constraints: [ // [!code ++] { videoStabilizationMode: 'cinematic' } ] }) } ``` ```tsx const device = ... const session = ... const controllers = await session.configure([ { input: device, outputs: [], constraints: [ // [!code ++] { videoStabilizationMode: 'cinematic' } ] } ], {}) ``` ### Latency [#latency] Software-based [`StabilizationMode`](/api/react-native-vision-camera/type-aliases/StabilizationMode)s keep a queue of Frames in-memory to adjust stabilization, which introduces latency in the Camera pipeline. The side-effect of this is that [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame)s arrive a few milliseconds/seconds later than when they were captured. --- # VisionCamera vs Data Scanner Source: Guides URL: https://visioncamera.margelo.com/docs/visioncamera-vs-data-scanner Both VisionCamera and [react-native-data-scanner](https://github.com/mrousavy/react-native-data-scanner) support scanning QR/Barcodes using the Camera. * [react-native-data-scanner](https://github.com/mrousavy/react-native-data-scanner) is a one-shot QR/Barcode scanner using [VisionKit](https://developer.apple.com/documentation/visionkit/datascannerviewcontroller) on iOS, and [Google's Code Scanner](https://developers.google.com/ml-kit/vision/barcode-scanning/code-scanner) on Android. Pick it for simple scanning flows. * VisionCamera ([react-native-vision-camera](/api/react-native-vision-camera)) is a fully featured Camera framework built with Nitro, and ships two Barcode scanning flows: [The Object Output](object-output), and [The Barcode Scanner](barcode-scanner). Pick it for camera-first apps, more advanced scanning flows, custom overlays, custom QR/Barcode processing, and more. ### Feature Comparison [#feature-comparison] | Feature | VisionCamera | react-native-data-scanner | | --------------------------------------------------------------------- | ------------ | ------------------------- | | Zero-config one-shot scan a QR/Barcode | ❌ | ✅ | | Uses the platform/OS native scanner UI | ❌ | ✅ | | Works without Camera permission (on Android) | ❌ | ✅ | | Render your own in-app Camera UI | ✅ | ❌ | | Keep scanning multiple QR/Barcodes at once | ✅ | ❌ | | Validate scanned codes in JS before closing the Camera | ✅ | ❌ | | Draw a custom overlay, reticle, mask, or instructions over the Camera | ✅ | ❌ | | Capture photos/videos, stream frames, use zoom, focus, HDR, ... | ✅ | ❌ | ### Data Scanner [#data-scanner] [react-native-data-scanner](https://github.com/mrousavy/react-native-data-scanner) is optimized for the simplest scanning flow: ```tsx import { DataScanner } from 'react-native-data-scanner' async function scanBarcode() { const barcode = await DataScanner.scanBarcode({ targetFormats: ['qr', 'ean-13'], enableAutoZoom: true, }) console.log(barcode.format, barcode.value) } ``` On Android, it uses [Google's Code Scanner](https://developers.google.com/ml-kit/vision/barcode-scanning/code-scanner) through Google Play Services. That scanner is presented in a separate Activity, so your app does not need `android.permission.CAMERA` permission for this flow. On iOS, it uses VisionKit's [`DataScannerViewController`](https://developer.apple.com/documentation/visionkit/datascannerviewcontroller). This requires iOS 16.0 or later. Your app still needs an `NSCameraUsageDescription`, but the library presents the native scanner UI and keeps the integration close to zero-config. ### VisionCamera [#visioncamera] VisionCamera is the better choice when scanning is part of a custom Camera flow. The Camera view itself stays inside your app, which means you can draw your own overlay, use custom zoom/focus controls, scan multiple codes, convert coordinates, and decide in JS when a scanned code should actually be accepted. For barcode scanning in VisionCamera, there are two main options: * [The Barcode Scanner](barcode-scanner) uses [MLKit](https://developers.google.com/ml-kit/vision/barcode-scanning) through [react-native-vision-camera-barcode-scanner](/api/react-native-vision-camera-barcode-scanner), and works on both iOS and Android. * [The Object Output](object-output) uses iOS' native [`AVCaptureMetadataOutput`](https://developer.apple.com/documentation/avfoundation/avcapturemetadataoutput), which is lightweight and platform-native, but iOS only. The Barcode Scanner is the simplest cross-platform VisionCamera setup. On iOS, it adds the third-party `GoogleMLKit/BarcodeScanning` dependency and its ML model to your binary, which is device-only, so it does not ship iOS Simulator binaries. For the leanest in-app scanner, you can use [the Barcode Scanner](barcode-scanner) on Android and [the Object Output](object-output) on iOS. That avoids MLKit on iOS and uses Apple's native metadata output, but it means splitting the implementation by platform and excluding `react-native-vision-camera-barcode-scanner` from iOS autolinking. For a plain one-shot scan, [react-native-data-scanner](https://github.com/mrousavy/react-native-data-scanner) is much easier. --- # VisionCamera vs Expo Camera Source: Guides URL: https://visioncamera.margelo.com/docs/visioncamera-vs-expo-camera Both VisionCamera and Expo Camera are popular Camera libraries for React Native and Expo - however each come with their own feature set and limitations, showcased here on this page. * Expo Camera ([expo-camera](https://docs.expo.dev/versions/latest/sdk/camera)) is the Expo SDK's Camera view. Pick it for Expo Go, Web, and fast Expo setup. * VisionCamera ([react-native-vision-camera](/api/react-native-vision-camera)) is a native Camera framework built with Nitro. Pick it for camera-first apps, pro capture controls, high-performance Camera apps, realtime frames/ML, depth, HDR/RAW, multi-cam, custom outputs, or native plugins. ### Feature Comparison [#feature-comparison] | Feature | VisionCamera | Expo Camera | | ------------------------------------------------------------------------------------------------------ | ------------ | ----------------------- | | Works in [Expo Go](https://expo.dev/go) | ❌ | ✅ | | Works on [Web](https://docs.expo.dev/versions/latest/sdk/camera/#web-support) | ❌ | ✅ | | [Camera View](camera-view) Component | ✅ | ✅ | | Capturing [Photos](photo-output) | ✅ | ✅ | | In-memory [Photo Capture](photo-output#capturing-photos-in-memory) | ✅ | ✅ | | Android [Snapshot Capture](snapshot-capture) | ✅ | ❌ | | Capturing [Videos](video-output) | ✅ | ✅ | | Barcode [Scanning](barcode-scanner) | ✅ | ✅ | | System [Barcode Scanner UI](https://docs.expo.dev/versions/latest/sdk/camera/#launchscanneroptions) | ❌ | ✅ | | Scan [Barcodes from Image URL](barcode-scanner#using-the-barcode-scanner) | ✅ | ✅ | | Locking [AE/AF/AWB](locking-ae-af-awb) | ✅ | ❌ | | Configurable [`focusTo(...)`](tap-to-focus#focus-metering-options) | ✅ | ❌ | | Realtime [Frame Processing](frame-output) | ✅ | ❌ | | Drawing onto the Camera with [Skia](skia-frame-processors) | ✅ | ❌ | | Realtime [Depth Frame Processing](depth-output) | ✅ | ❌ | | Depth in [Photos](a-photo) | ✅ | ❌ | | Capturing [RAW Photos](raw-photos) | ✅ | ❌ | | Photo [HDR](photo-hdr) | ✅ | ❌ | | Video [HDR/Dynamic Ranges](video-hdr) | ✅ | ❌ | | Maximum Photo [Resolution](camera-outputs#resolutions) | ✅ | ❌ | | Android [Camera Extensions](camera-extensions) | ✅ | ❌ | | Video [Stabilization](video-stabilization) | ✅ | ✅ | | Preview [Stabilization](/api/react-native-vision-camera/interfaces/PreviewStabilizationModeConstraint) | ✅ | ❌ | | Low Light [Boost](low-light-boost) | ✅ | ❌ | | Exposure [Bias](exposure-bias) | ✅ | ❌ | | Configurable [FPS](fps) | ✅ | ❌ | | Specific [Camera/Lens Selection](devices#selecting-a-custom-camera-device) | ✅ | Front/back + iOS lenses | | External [Camera Devices](devices#external-devices) | ✅ | ❌ | | Multi-Camera [Support](multi-camera) | ✅ | ❌ | | Persistent [Video Outputs](video-output#persistent-video-outputs) | ✅ | ❌ | | Coordinate [Systems](coordinate-systems) | ✅ | ❌ | | Location [Tags](location) | ✅ | ❌ | | Photo Output [Callbacks](photo-output-callbacks) | ✅ | ❌ | | Preview Image [During Capture](photo-output-callbacks#preview-image) | ✅ | ❌ | | Custom Photo [JPEG Quality](photo-quality#configure-jpeg-quality) | ✅ | ✅ | | Photo [`qualityPrioritization`](photo-quality#adjust-quality-prioritization) | ✅ | ❌ | | Custom Video [`maxFileSize`](/api/react-native-vision-camera/interfaces/RecorderSettings#maxfilesize) | ✅ | ✅ | | Custom Video [`maxDuration`](/api/react-native-vision-camera/interfaces/RecorderSettings#maxduration) | ✅ | ✅ | | Custom Video [Bitrate](/api/react-native-vision-camera/interfaces/VideoOutputOptions#targetbitrate) | ✅ | ✅ | | Custom Video [`codec`](/api/react-native-vision-camera/interfaces/VideoOutputSettings#codec) | ✅ | ✅ | | Native [Frame Processor Plugins](native-frame-processor-plugins) | ✅ | ❌ | | Custom Native [`CameraOutput`s](custom-native-camera-outputs) | ✅ | ❌ | ### Expo projects [#expo-projects] Expo Camera is an Expo SDK package and runs in [Expo Go](https://expo.dev/go). VisionCamera is a third-party native package and runs in an [Expo Development Build](https://docs.expo.dev/tutorial/eas/configure-development-build/#initialize-a-development-build) (`expo prebuild`), or in a bare React Native app. --- # Zooming Source: Guides URL: https://visioncamera.margelo.com/docs/zooming Zooming allows you to adjust the crop-area of a Camera: The [``](/api/react-native-vision-camera/views/Camera) view allows adjusting [`zoom`](/api/react-native-vision-camera/interfaces/CameraViewProps#zoom) via React state (a `number`), or a [Reanimated `SharedValue`](https://docs.swmansion.com/react-native-reanimated/docs/core/useSharedValue/) - which is the recommended approach for smoothly adjusting zoom. ```tsx function App() { // [!code ++] const zoom = useSharedValue(device.minZoom) return ( ) } ``` Alternatively, you can enable the native Zoom Gesture by setting [`enableNativeZoomGesture`](/api/react-native-vision-camera/interfaces/CameraViewProps#enablenativezoomgesture) to `true`: ```tsx function App() { return ( ) } ``` See [`ZoomGestureController`](/api/react-native-vision-camera/hybrid-objects/ZoomGestureController) for more information. To zoom on a [`CameraController`](/api/react-native-vision-camera/hybrid-objects/CameraController), use [`setZoom(...)`](/api/react-native-vision-camera/hybrid-objects/CameraController#setzoom): ```ts const device = ... const controller = ... // [!code ++] await controller.setZoom(device.minZoom) ``` > Warning > > > Make sure your Zoom value always stays within the [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice)'s supported zoom ranges: [`minZoom`](/api/react-native-vision-camera/hybrid-objects/CameraDevice#minzoom) and [`maxZoom`](/api/react-native-vision-camera/hybrid-objects/CameraDevice#maxzoom): > > > > ```ts > > const device = ... > > const zoom = ... > > const clampedZoom = Math.min(Math.max(zoom, device.minZoom), device.maxZoom) > > ``` ### Zoom Animations [#zoom-animations] Zoom animations can be started using [`CameraController.startZoomAnimation(...)`](/api/react-native-vision-camera/hybrid-objects/CameraController#startzoomanimation): ```ts const controller = ... const zoom = ... await controller.startZoomAnimation(zoom, 2) ``` To cancel a zoom animation, use [`CameraController.cancelZoomAnimation()`](/api/react-native-vision-camera/hybrid-objects/CameraController#cancelzoomanimation): ```ts const controller = ... await controller.cancelZoomAnimation() ``` ### Virtual Device Zoom switchover [#virtual-device-zoom-switchover] Virtual Camera Devices (see [`CameraDevice.isVirtualDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice#isvirtualdevice)) contain multiple constituent physical devices, and automatically switchover between devices, depending on the zoom ratio. Example of swapping cameras for zoom level use-case (from Pixel 3 Ad) To find out at which zoom ranges a virtual device may switch over to a different physical device, use [`CameraDevice.zoomLensSwitchFactors`](/api/react-native-vision-camera/hybrid-objects/CameraDevice#zoomlensswitchfactors): ```ts const device = ... const controller = ... for (const switchOverFactor of device.zoomLensSwitchFactors) { await controller.setZoom(switchOverFactor) } ``` #### Default Zoom [#default-zoom] To provide a natural user experience, always start at zoom `1`. If a virtual Camera contains an [`'ultra-wide-angle'`](/api/react-native-vision-camera/type-aliases/DeviceType) Camera (the "0.5x Camera"), the user may zoom out to less than `1` (here `0.5`) instead. * [`minZoom`](/api/react-native-vision-camera/hybrid-objects/CameraDevice#minzoom) \<= `1` (e.g. 0.5x) * natural zoom = `1` * [`maxZoom`](/api/react-native-vision-camera/hybrid-objects/CameraDevice#maxzoom) >= `1` (e.g. 3x) ### Getting current zoom values [#getting-current-zoom-values] A [`CameraController`](/api/react-native-vision-camera/hybrid-objects/CameraController) exposes its current [`zoom`](/api/react-native-vision-camera/hybrid-objects/CameraController#zoom) value: ```ts const controller = ... console.log(controller.zoom) // 1 await controller.setZoom(5) console.log(controller.zoom) // 5 ``` #### Getting a user-displayable zoom factor [#getting-a-user-displayable-zoom-factor] A [`CameraController`](/api/react-native-vision-camera/hybrid-objects/CameraController) also exposes a user-displayable zoom factor via [`displayableZoomFactor`](/api/react-native-vision-camera/hybrid-objects/CameraController#displayablezoomfactor): ```ts const controller = ... console.log(controller.displayableZoomFactor) // 0.5 await controller.setZoom(2) console.log(controller.displayableZoomFactor) // 1 ``` --- # API Reference Source: API Reference URL: https://visioncamera.margelo.com/api --- title: API Reference --- ## Packages - [react-native-vision-camera](react-native-vision-camera/index.mdx) - [react-native-vision-camera-barcode-scanner](react-native-vision-camera-barcode-scanner/index.mdx) - [react-native-vision-camera-location](react-native-vision-camera-location/index.mdx) - [react-native-vision-camera-resizer](react-native-vision-camera-resizer/index.mdx) - [react-native-vision-camera-skia](react-native-vision-camera-skia/index.mdx) - [react-native-vision-camera-worklets](react-native-vision-camera-worklets/index.mdx) --- # react-native-vision-camera Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera --- title: react-native-vision-camera tocPlatforms: CameraCalibrationData: - iOS CameraExtension: - Android CameraObjectOutput: - iOS CameraOutputSynchronizer: - iOS ObjectOutputOptions: - iOS ScannedCode: - iOS ScannedFace: - iOS ScannedObject: - iOS PreviewImplementationMode: - Android getSupportedExtensions(...): - Android --- This is VisionCamera Core. Install it through npm: ```sh npm install react-native-vision-camera ``` VisionCamera Core depends on [react-native-nitro-modules](https://github.com/mrousavy/nitro) and [react-native-nitro-image](https://github.com/mrousavy/react-native-nitro-image) - install those dependencies: ```sh npm install react-native-nitro-modules react-native-nitro-image ``` Then, update your native project: ```sh npx pod-install ``` And rebuild your app. ## Add permissions To use the Camera, you must add the required permissions to your app's manifests. Use the official getting started guide to finish the installation. --- # react-native-vision-camera-location Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-location --- title: react-native-vision-camera-location --- This is VisionCamera Location. Install it through npm: ```sh npm install react-native-vision-camera-location ``` VisionCamera Location depends on VisionCamera Core. ```sh # Make sure VisionCamera Core is installed. ``` Then, add Location permission to your app's manifests - either in an Expo, or a bare React Native workflow: #### Expo Add location permission to your Expo config (`app.json`, `app.config.json` or `app.config.js`): ```json { // [!code ++:5] "ios": { "infoPlist": { "NSLocationWhenInUseUsageDescription": "$(PRODUCT_NAME) needs access to your Location to add GPS tags to captured photos.", } }, // [!code ++:3] "android": { "permissions": ["android.permission.ACCESS_FINE_LOCATION", "android.permission.ACCESS_COARSE_LOCATION"] } } ``` #### Bare React Native Add `NSLocationWhenInUseUsageDescription` permissions to your app's `Info.plist`: ```xml // [!code ++:2] NSLocationWhenInUseUsageDescription $(PRODUCT_NAME) needs access to your Location to add GPS tags to captured photos. ``` Add `ACCESS_FINE_LOCATION` and `ACCESS_COARSE_LOCATION` permissions to your app's `AndroidManifest.xml`: ```xml // [!code ++] // [!code ++] ``` Then, update your native project: ```sh npx pod-install ``` And rebuild your app. --- # react-native-vision-camera-barcode-scanner Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-barcode-scanner --- title: react-native-vision-camera-barcode-scanner --- This is VisionCamera Barcode Scanner. Install it through npm: ```sh npm install react-native-vision-camera-barcode-scanner react-native-nitro-image ``` VisionCamera Barcode Scanner depends on VisionCamera Core and Nitro Image. ```sh # Make sure VisionCamera Core is installed as well. ``` You can scan live camera frames, attach a Barcode Scanner output, or scan an existing Nitro Image with `BarcodeScanner.scanCodesInImageAsync(...)`. ## Minimum Requirements The `GoogleMLKit/BarcodeScanning` dependency (version `9.0.0`) requires a minimum iOS target version of 15.5. Adjust it in your `Podfile` if needed. Then, update your native project: ```sh npx pod-install ``` And rebuild your app. --- # react-native-vision-camera-resizer Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-resizer --- title: react-native-vision-camera-resizer --- This is VisionCamera Resizer. Install it through npm: ```sh npm install react-native-vision-camera-resizer ``` VisionCamera Resizer depends on VisionCamera Core. ```sh # Make sure VisionCamera Core is installed. ``` Then, update your native project: ```sh npx pod-install ``` And rebuild your app. --- # react-native-vision-camera-skia Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-skia --- title: react-native-vision-camera-skia --- This is VisionCamera Skia. Install it through npm: ```sh npm install react-native-vision-camera-skia ``` VisionCamera Skia depends on VisionCamera Core, [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated) (and [react-native-worklets](https://github.com/software-mansion/react-native-reanimated/tree/main/packages/react-native-worklets)). ```sh # Install react-native-reanimated + react-native-worklets via their guides ``` --- # react-native-vision-camera-worklets Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-worklets --- title: react-native-vision-camera-worklets --- This is the VisionCamera Worklets plugin, which connects [react-native-worklets](https://docs.swmansion.com/react-native-worklets/docs/) to **react-native-vision-camera** to provide an implementation for Frame Processors / `useFrameOutput(...)` / `AsyncRunner`. Install it through npm: ```sh npm install react-native-vision-camera-worklets ``` VisionCamera Worklets depends on VisionCamera Core, and [react-native-worklets](https://docs.swmansion.com/react-native-worklets/docs/): ```sh # Make sure VisionCamera Core is installed. npm install react-native-worklets ``` Then, update your native project: ```sh npx pod-install ``` And rebuild your app. --- # addOnCameraDevicesChangedListener Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/functions/addOnCameraDevicesChangedListener --- title: addOnCameraDevicesChangedListener description: |- Adds a listener that gets called whenever the list of available CameraDevices changes - for example when a USB Camera is plugged in or out. --- ```ts function addOnCameraDevicesChangedListener(listener: (newDevices: CameraDevice[]) => void): ListenerSubscription ``` Adds a listener that gets called whenever the list of available [`CameraDevice`](../hybrid-objects/CameraDevice.mdx)s changes - for example when a USB Camera is plugged in or out. The returned [`ListenerSubscription`](../interfaces/ListenerSubscription.mdx) must be removed via [`remove()`](../interfaces/ListenerSubscription.mdx#remove) when no longer needed. #### See [`useCameraDevices`](useCameraDevices.mdx) #### Deprecated Use the hooks API, or call `VisionCamera.createDeviceFactory()` yourself. --- # getAllCameraDevices Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/functions/getAllCameraDevices --- title: getAllCameraDevices description: Returns all CameraDevices currently available on this phone. --- ```ts function getAllCameraDevices(): CameraDevice[] ``` Returns all [`CameraDevice`](../hybrid-objects/CameraDevice.mdx)s currently available on this phone. This is a synchronous snapshot - it only contains devices that have already been discovered. If you want to reactively listen to device changes (e.g. when a USB Camera is plugged in or out), use [`addOnCameraDevicesChangedListener`](addOnCameraDevicesChangedListener.mdx) or the [`useCameraDevices`](useCameraDevices.mdx) hook instead. #### See - [`useCameraDevices`](useCameraDevices.mdx) - [`getCameraDevice`](getCameraDevice.mdx) #### Deprecated Use the hooks API, or call `VisionCamera.createDeviceFactory()` yourself. --- # getCameraDevice Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/functions/getCameraDevice --- title: getCameraDevice description: |- Get the best matching Camera device that best satisfies your requirements using a sorting filter, or `undefined` if not Cameras are available on this platform. --- ```ts function getCameraDevice( deviceFactory: CameraDeviceFactory, position: TargetCameraPosition, filter?: DeviceFilter): CameraDevice | undefined ``` Get the best matching Camera device that best satisfies your requirements using a sorting filter, or `undefined` if not Cameras are available on this platform. If this platform has any Cameras at the given [`position`](#getcameradevice), this method will always return a Camera device, so [`filter`](#getcameradevice) never excludes cameras. #### Parameters ##### position The position of the Camera device relative to the phone. ##### filter The filter you want to use. The Camera device that matches your filter the closest will be returned #### Returns The Camera device that matches your filter the closest, or `undefined` if no Camera Device exists on this platform. #### Example ```ts const device = getCameraDevice(devices, 'back', { physicalDevices: ['wide-angle'] }) ``` --- # getDefaultCameraDevice Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/functions/getDefaultCameraDevice --- title: getDefaultCameraDevice description: Returns the default CameraDevice for the given CameraPosition. --- ```ts function getDefaultCameraDevice(position: TargetCameraPosition): Promise ``` Returns the default [`CameraDevice`](../hybrid-objects/CameraDevice.mdx) for the given [`CameraPosition`](../type-aliases/CameraPosition.mdx). This is usually the physical wide-angle Camera on the respective side of the device. If no Camera is available on the given position, this returns `undefined`. #### See [`getCameraDevice`](getCameraDevice.mdx) #### Deprecated Use the hooks API, or call `VisionCamera.createDeviceFactory()` yourself. --- # getSupportedExtensions Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/functions/getSupportedExtensions --- title: getSupportedExtensions description: Returns all CameraExtensions supported by the given CameraDevice. platforms: - Android --- ```ts function getSupportedExtensions(device: CameraDevice): Promise ``` Returns all [`CameraExtension`](../hybrid-objects/CameraExtension.mdx)s supported by the given [`CameraDevice`](../hybrid-objects/CameraDevice.mdx). Extensions are vendor-specific Camera modes (such as HDR, Night, or Bokeh) implemented in the device's ISP pipeline. #### See - [`useCameraDeviceExtensions`](useCameraDeviceExtensions.mdx) - [`CameraExtension`](../hybrid-objects/CameraExtension.mdx) #### Deprecated Use the hooks API, or call `VisionCamera.createDeviceFactory()` yourself. --- # isScannedCode Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/functions/isScannedCode --- title: isScannedCode description: |- Returns `true` if the given ScannedObject is a ScannedCode - a subclass of ScannedObject that provides a machine readable code with corner points. --- ```ts function isScannedCode(object: ScannedObject): object is ScannedCode ``` Returns `true` if the given [`ScannedObject`](../hybrid-objects/ScannedObject.mdx) is a [`ScannedCode`](../hybrid-objects/ScannedCode.mdx) - a subclass of [`ScannedObject`](../hybrid-objects/ScannedObject.mdx) that provides a machine readable code with corner points. --- # isScannedFace Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/functions/isScannedFace --- title: isScannedFace description: |- Returns `true` if the given ScannedObject is a ScannedFace - a subclass of ScannedObject that provides face metadata. --- ```ts function isScannedFace(object: ScannedObject): object is ScannedFace ``` Returns `true` if the given [`ScannedObject`](../hybrid-objects/ScannedObject.mdx) is a [`ScannedFace`](../hybrid-objects/ScannedFace.mdx) - a subclass of [`ScannedObject`](../hybrid-objects/ScannedObject.mdx) that provides face metadata. --- # useAsyncRunner Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/functions/useAsyncRunner --- title: useAsyncRunner description: Use an AsyncRunner. --- ```ts function useAsyncRunner(): AsyncRunner ``` Use an [`AsyncRunner`](../interfaces/AsyncRunner.mdx). An [`AsyncRunner`](../interfaces/AsyncRunner.mdx) can be used to asynchronously run code in a Frame Processor on a separate, non-blocking Thread. #### Example ```ts function App() { const asyncRunner = useAsyncRunner() const frameOutput = useFrameOutput({ onFrame(frame) { 'worklet' const wasHandled = asyncRunner.runAsync(() => { 'worklet' doSomeHeavyProcessing(frame) // Async task finished - dispose the Frame now. frame.dispose() }) if (!wasHandled) { // `asyncRunner` is busy - drop this Frame! frame.dispose() } } }) } ``` --- # useCamera Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/functions/useCamera --- title: useCamera description: Use the Camera. --- ```ts function useCamera(__namedParameters: CameraProps): | CameraController | undefined ``` Use the Camera. This creates a [`CameraSession`](../hybrid-objects/CameraSession.mdx), manages the input and outputs (including orientation and mirror modes), wraps listeners as stable React callbacks, and returns a [`CameraController`](../hybrid-objects/CameraController.mdx). #### Example ```ts const camera = useCamera({ isActive: true, device: 'back', outputs: [] }) ``` --- # useCameraDevice Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/functions/useCameraDevice --- title: useCameraDevice description: |- Get the best matching Camera device that best satisfies your requirements using a sorting filter, or a default Camera device at the given position if no filter was passed. --- ```ts function useCameraDevice(position: TargetCameraPosition, filter?: DeviceFilter): CameraDevice | undefined ``` Get the best matching Camera device that best satisfies your requirements using a sorting [`filter`](#usecameradevice), or a default Camera device at the given [`position`](#usecameradevice) if no [`filter`](#usecameradevice) was passed. This hook is reactive to device changes. If a new device is plugged in, this hook updates. #### Parameters ##### position The position of the Camera device relative to the phone. ##### filter The filter you want to use. The Camera device that matches your filter the closest will be returned #### Returns The Camera device that matches your filter the closest, or `undefined` if no such Camera Device exists on the given [`position`](#usecameradevice). #### Example ```ts const device = useCameraDevice('back', { physicalDevices: ['wide-angle'] }) ``` --- # useCameraDeviceExtensions Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/functions/useCameraDeviceExtensions --- title: useCameraDeviceExtensions description: |- Get a list of all available CameraExtensions for this specific CameraDevice. --- ```ts function useCameraDeviceExtensions(device: CameraDevice | undefined): | CameraExtension[] | undefined ``` Get a list of all available [`CameraExtension`](../hybrid-objects/CameraExtension.mdx)s for this specific [`CameraDevice`](../hybrid-objects/CameraDevice.mdx). #### Example ```ts const device = useCameraDevice('back') const extensions = useCameraDeviceExtensions(device) // ...enable extension if available ``` --- # useCameraDevices Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/functions/useCameraDevices --- title: useCameraDevices description: Get a list of all CameraDevices. --- ```ts function useCameraDevices(): CameraDevice[] ``` Get a list of all [`CameraDevice`](../hybrid-objects/CameraDevice.mdx)s. > [!NOTE] Note > It is recommended to use [`useCameraDevice(...)`](useCameraDevice.mdx) if > you only need a single [`CameraDevice`](../hybrid-objects/CameraDevice.mdx), as a full list of available devices > can be heavy. --- # useCameraPermission Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/functions/useCameraPermission --- title: useCameraPermission description: Use the Camera Permission. --- ```ts const useCameraPermission: () => PermissionState ``` Use the Camera Permission. #### Example ```ts const { hasPermission, requestPermission } = useCameraPermission() useEffect(() => { if (!hasPermission) { requestPermission() } }, [hasPermission, requestPermission]) ``` --- # useDepthOutput Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/functions/useDepthOutput --- title: useDepthOutput description: Use a CameraDepthFrameOutput for streaming Depth Frames. --- ```ts function useDepthOutput(__namedParameters: UseDepthOutputProps): CameraDepthFrameOutput ``` Use a [`CameraDepthFrameOutput`](../hybrid-objects/CameraDepthFrameOutput.mdx) for streaming [`Depth`](../hybrid-objects/Depth.mdx) Frames. The [`onDepth(...)`](../interfaces/UseDepthOutputProps.mdx#ondepth) callback will be called for every [`Depth`](../hybrid-objects/Depth.mdx) Frame the Camera produces. It is a synchronous JS function running on the [`CameraDepthFrameOutput`](../hybrid-objects/CameraDepthFrameOutput.mdx)'s thread - aka a "worklet". > [!NOTE] Note > `useDepthOutput(...)` requires > `react-native-vision-camera-worklets` (and > [react-native-worklets](https://docs.swmansion.com/react-native-worklets/docs/)) > to be installed. #### Discussion You must [`dispose`](https://nitro.margelo.com/docs/hybrid-objects) the [`Depth`](../hybrid-objects/Depth.mdx) Frame after your callback has finished processing, otherwise subsequent Frames may be dropped (see [`onDepthFrameDropped(...)`](../interfaces/UseDepthOutputProps.mdx#ondepthframedropped)). #### Example ```ts const depthOutput = useDepthOutput({ onDepth(depth) { 'worklet' // some depth processing depth.dispose() } }) ``` --- # useFrameOutput Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/functions/useFrameOutput --- title: useFrameOutput description: Use a CameraFrameOutput. --- ```ts function useFrameOutput(__namedParameters: UseFrameOutputProps): CameraFrameOutput ``` Use a [`CameraFrameOutput`](../hybrid-objects/CameraFrameOutput.mdx). The [`onFrame(...)`](../interfaces/UseFrameOutputProps.mdx#onframe) callback will be called for every [`Frame`](../hybrid-objects/Frame.mdx) the Camera sees. It is a synchronous JS function running on the [`CameraFrameOutput`](../hybrid-objects/CameraFrameOutput.mdx)'s [`thread`](../hybrid-objects/CameraFrameOutput.mdx#thread) - aka a "worklet". > [!NOTE] Note > `useFrameOutput(...)` requires > `react-native-vision-camera-worklets` (and > [react-native-worklets](https://docs.swmansion.com/react-native-worklets/docs/)) > to be installed. #### Discussion You must [`dispose`](https://nitro.margelo.com/docs/hybrid-objects) the [`Frame`](../hybrid-objects/Frame.mdx) after your Frame Processor has finished processing, otherwise subsequent [`Frame`](../hybrid-objects/Frame.mdx)s may be dropped (see [`onFrameDropped(...)`](../interfaces/UseFrameOutputProps.mdx#onframedropped)). #### Discussion Choosing an appropriate [`pixelFormat`](../interfaces/FrameOutputOptions.mdx#pixelformat) depends on your Frame Processor's usage. While the most commonly used format in visual recognition models is [`'rgb'`](../type-aliases/VideoPixelFormat.mdx), it is by far not the most efficient format for a Camera pipeline as it requires an additional conversion and uses ~2.6x more bandwidth than [`'yuv'`](../type-aliases/VideoPixelFormat.mdx). If you render to native Surfaces (e.g. via GPU pipelines or Media Encoders), you may also be able to use [`'native'`](../type-aliases/TargetVideoPixelFormat.mdx), which chooses whatever the resolved [`CameraSessionConfig`](../hybrid-objects/CameraSessionConfig.mdx)'s [`nativePixelFormat`](../hybrid-objects/CameraSessionConfig.mdx#nativepixelformat) is, and requires zero conversions. Use [`'native'`](../type-aliases/TargetVideoPixelFormat.mdx) with caution, as the negotiated [`nativePixelFormat`](../hybrid-objects/CameraSessionConfig.mdx#nativepixelformat) might also be a RAW format like [`'raw-bayer-packed96-12-bit'`](../type-aliases/VideoPixelFormat.mdx), or a vendor-specific private format ([`'private'`](../type-aliases/PixelFormat.mdx)). Examples: - [MLKit](https://developers.google.com/ml-kit) natively supports YUV, so streaming in [`'yuv'`](../type-aliases/TargetVideoPixelFormat.mdx) is most efficient. - [OpenCV](https://opencv.org) natively supports YUV, so streaming in [`'yuv'`](../type-aliases/TargetVideoPixelFormat.mdx) is most efficient. - [LiteRT](https://ai.google.dev/edge/litert/overview) supports YUV, **but converts to RGB internally** - so streaming in [`'rgb'`](../type-aliases/TargetVideoPixelFormat.mdx) directly is more efficient as conversion is handled in the Camera pipeline. - [react-native-skia](https://shopify.github.io/react-native-skia/) supports both YUV and RGB, so streaming in [`'yuv'`](../type-aliases/TargetVideoPixelFormat.mdx) is more efficient. #### See - [`TargetVideoPixelFormat`](../type-aliases/TargetVideoPixelFormat.mdx) - [`VideoPixelFormat`](../type-aliases/VideoPixelFormat.mdx) #### Example ```ts const frameOutput = useFrameOutput({ onFrame(frame) { 'worklet' // some frame processing frame.dispose() } }) ``` --- # useFrameRenderer Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/functions/useFrameRenderer --- title: useFrameRenderer description: Use a FrameRenderer. --- ```ts function useFrameRenderer(): FrameRenderer ``` Use a [`FrameRenderer`](../hybrid-objects/FrameRenderer.mdx). A [`FrameRenderer`](../hybrid-objects/FrameRenderer.mdx) allows rendering [`Frame`](../hybrid-objects/Frame.mdx)s to a [``](../views/NativeFrameRendererView.mdx). #### Example ```tsx const frameRenderer = useFrameRenderer() const frameOutput = useFrameOutput({ onFrame(frame) { 'worklet' frameRenderer.renderFrame(frame) frame.dispose() } }) return ( ) ``` --- # useMicrophonePermission Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/functions/useMicrophonePermission --- title: useMicrophonePermission description: Use the Microphone Permission. --- ```ts const useMicrophonePermission: () => PermissionState ``` Use the Microphone Permission. #### Example ```ts const { hasPermission, requestPermission } = useMicrophonePermission() useEffect(() => { if (!hasPermission) { requestPermission() } }, [hasPermission, requestPermission]) ``` --- # useObjectOutput Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/functions/useObjectOutput --- title: useObjectOutput description: Use a CameraObjectOutput. --- ```ts function useObjectOutput(__namedParameters: UseObjectOutputProps): CameraObjectOutput ``` Use a [`CameraObjectOutput`](../hybrid-objects/CameraObjectOutput.mdx). #### Example ```ts const objectOutput = useObjectOutput({ types: ['qr'], onObjectsScanned(objects) { console.log(`Scanned ${objects.length} objects!`) } }) ``` --- # useOrientation Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/functions/useOrientation --- title: useOrientation description: Reactively use the current source CameraOrientation. --- ```ts function useOrientation(source: | OrientationSource | undefined): | CameraOrientation | undefined ``` Reactively use the current [`source`](#useorientation) [`CameraOrientation`](../type-aliases/CameraOrientation.mdx). - [`'interface'`](../type-aliases/OrientationSource.mdx) will listen to UI-orientation. - [`'device'`](../type-aliases/OrientationSource.mdx) will listen to physical phone orientation. - `undefined` will return `undefined` and not listen to anything. #### Example ```ts const orientation = useOrientation('device') // orientation: 'up' | 'right' | 'down' | 'left' | undefined ``` --- # usePhotoOutput Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/functions/usePhotoOutput --- title: usePhotoOutput description: Use a CameraPhotoOutput for capturing Photos. --- ```ts function usePhotoOutput(__namedParameters?: Partial): CameraPhotoOutput ``` Use a [`CameraPhotoOutput`](../hybrid-objects/CameraPhotoOutput.mdx) for capturing [`Photo`](../hybrid-objects/Photo.mdx)s. The returned [`CameraPhotoOutput`](../hybrid-objects/CameraPhotoOutput.mdx) can be passed to a [`Camera`](../views/Camera.mdx) to enable photo capture. Photos can then be captured via [`capturePhoto(...)`](../hybrid-objects/CameraPhotoOutput.mdx#capturephoto). #### Example ```ts const photoOutput = usePhotoOutput({ targetResolution: CommonResolutions.UHD_4_3, qualityPrioritization: 'quality', }) // ... const photo = await photoOutput.capturePhoto({ flashMode: 'on' }, {}) // ... photo.dispose() ``` --- # usePreviewOutput Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/functions/usePreviewOutput --- title: usePreviewOutput description: |- Use a CameraPreviewOutput for rendering the Camera's live preview on screen. --- ```ts function usePreviewOutput(): CameraPreviewOutput ``` Use a [`CameraPreviewOutput`](../hybrid-objects/CameraPreviewOutput.mdx) for rendering the Camera's live preview on screen. The returned [`CameraPreviewOutput`](../hybrid-objects/CameraPreviewOutput.mdx) can be connected to a [`CameraSession`](../hybrid-objects/CameraSession.mdx) and then displayed using the `PreviewView`. #### Example ```ts const previewOutput = usePreviewOutput() ``` --- # useVideoOutput Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/functions/useVideoOutput --- title: useVideoOutput description: Use a CameraVideoOutput for recording videos. --- ```ts function useVideoOutput(__namedParameters?: Partial): CameraVideoOutput ``` Use a [`CameraVideoOutput`](../hybrid-objects/CameraVideoOutput.mdx) for recording videos. The returned [`CameraVideoOutput`](../hybrid-objects/CameraVideoOutput.mdx) can be passed to a [`Camera`](../views/Camera.mdx) to enable video recording. To actually record a video, create a [`Recorder`](../hybrid-objects/Recorder.mdx) via [`createRecorder(...)`](../hybrid-objects/CameraVideoOutput.mdx#createrecorder), then start and stop it via [`startRecording(...)`](../hybrid-objects/Recorder.mdx#startrecording) and [`stopRecording()`](../hybrid-objects/Recorder.mdx#stoprecording). #### Example ```ts const videoOutput = useVideoOutput({ targetResolution: CommonResolutions.FHD_16_9, enableAudio: true, }) // ... const recorder = await videoOutput.createRecorder({}) await recorder.startRecording( (filePath) => console.log(`Recorded to ${filePath}`), (error) => console.error(error), ) // later... await recorder.stopRecording() ``` --- # CameraCalibrationData Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/hybrid-objects/CameraCalibrationData --- title: CameraCalibrationData description: |- Camera Calibration Data is per-frame data used to counter-apply any transformations applied by the Camera/ISP. platforms: - iOS --- ```ts interface CameraCalibrationData extends HybridObject ``` Camera Calibration Data is per-frame data used to counter-apply any transformations applied by the Camera/ISP. It can be useful to undo any distortion correction, or compute scenery in 3D space. #### See - [`Depth.cameraCalibrationData`](Depth.mdx#cameracalibrationdata) - [`Photo.calibrationData`](Photo.mdx#calibrationdata) ## Properties ### cameraExtrinsicsMatrix ```ts readonly cameraExtrinsicsMatrix: number[] ``` Gets the Camera extrinsic matrix, which maps world space to camera space. The returned array is a 3x4 matrix with column-major ordering. ``` K = [ r11 r12 r13 tx ] [ r21 r22 r23 ty ] [ r31 r32 r33 tz ] ``` - `r`: Rotation/orientation - `t`: Translation/position (in millimeters) *** ### cameraIntrinsicMatrix ```ts readonly cameraIntrinsicMatrix: number[] ``` Gets the Camera intrinsic matrix, which maps 3D Camera coordinates to 2D Pixel coordinates. The returned array is a 3x3 matrix with column-major ordering. Its origin is the top-left of the Frame. ``` K = [ fx 0 cx ] [ 0 fy cy ] [ 0 0 1 ] ``` - `fx`, `fy`: focal length in pixels - `cx`, `cy`: principal point in pixels #### Example ```ts const matrix = calibrationData.cameraIntrinsicMatrix const fx = matrix[0] const fy = matrix[4] ``` *** ### intrinsicMatrixReferenceDimensions ```ts readonly intrinsicMatrixReferenceDimensions: Size ``` The reference frame dimensions used in calculating a camera's principal point. *** ### lensDistortionCenter ```ts readonly lensDistortionCenter: Point ``` A [`Point`](../interfaces/Point.mdx) describing the offset of the lens' distortion center from the top left in [`intrinsicMatrixReferenceDimensions`](#intrinsicmatrixreferencedimensions). *** ### pixelSize ```ts readonly pixelSize: number ``` The size of one pixel at [`intrinsicMatrixReferenceDimensions`](#intrinsicmatrixreferencedimensions) in millimeters. --- # CameraController Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/hybrid-objects/CameraController --- title: CameraController description: |- A CameraController allows controlling an opened Camera. tocPlatforms: addSubjectAreaChangedListener(...): - iOS convertWhiteBalanceTemperatureAndTintValues(...): - iOS lockCurrentExposure(): - iOS lockCurrentFocus(): - iOS lockCurrentWhiteBalance(): - iOS setExposureLocked(...): - iOS setFocusLocked(...): - iOS setWhiteBalanceLocked(...): - iOS --- ```ts interface CameraController extends HybridObject ``` A `CameraController` allows controlling an opened Camera. You obtain one `CameraController` per configured connection via [`CameraSession.configure(...)`](CameraSession.mdx#configure), or via the [`useCamera(...)`](../functions/useCamera.mdx) hook. After a [`CameraSession`](CameraSession.mdx) is reconfigured (e.g. when binding new inputs, outputs, or connection settings), you receive a new `CameraController`. #### Examples Via the `useCamera(...)` hook: ```ts const device = useCameraDevice('back') const camera = useCamera({ isActive: true, device: device, outputs: [] }) useEffect(() => { camera?.setZoom(device.maxZoom) }, [camera, device]) ``` Via the imperative `CameraSession` APIs: ```ts const devicesFactory = await VisionCamera.createDeviceFactory() const device = devicesFactory.getDefaultCamera('back') const cameraSession = await VisionCamera.createCameraSession(false) const controller = await cameraSession.configure([ { input: device, outputs: [], constraints: [] } ]) await cameraSession.start() controller.setZoom(device.maxZoom) ``` ## Properties ### device ```ts readonly device: CameraDevice ``` Gets the [`CameraDevice`](CameraDevice.mdx) this `CameraController` is bound to. You can use the [`device`](#device) to query support for available features. #### Example Querying if the device supports focus metering: ```ts const controller = ... if (controller.supportsFocusMetering) { const meteringPoint = ... controller.focusTo(meteringPoint, { modes: ['AF'] }) } ``` *** ### displayableZoomFactor ```ts readonly displayableZoomFactor: number ``` A user-displayable zoom factor. #### Example ```ts const controller = ... // Triple-Camera controller.zoom // 1 controller.displayableZoomFactor // 0.5 ``` *** ### exposureBias ```ts readonly exposureBias: number ``` Get the current exposure compensation bias, or `0` if the [`device`](#device) does not support exposure bias compensation - see [`CameraDevice.supportsExposureBias`](CameraDevice.mdx#supportsexposurebias). A positive value (like `1`) means over-exposed ("brighter"), whereas a negative value (like `-1`) means under-exposed ("darker"). The default exposure bias is `0`. You can set exposure bias to a supported value via [`setExposureBias(...)`](#setexposurebias). *** ### exposureDuration ```ts readonly exposureDuration: number ``` Represents the current exposure duration, in seconds, or `0` if the [`device`](#device) does not support manual exposure control - see [`CameraDevice.supportsExposureLocking`](CameraDevice.mdx#supportsexposurelocking).. The [`exposureDuration`](#exposureduration) value changes over time (via continuous auto-focus/3A), when focused to a specific point (via [`focusTo(...)`](#focusto)), or when locked to a specific duration/ISO value (via [`setExposureLocked(...)`](#setexposurelocked)). *** ### exposureMode ```ts readonly exposureMode: ExposureMode ``` Represents the current [`ExposureMode`](../type-aliases/ExposureMode.mdx). - `'continuous-auto-exposure'`: The session is continuously adjusting AE as the scene changes. (the default) - `'auto-exposure'`: The session is currently metering to a specific exposure value via [`focusTo(...)`](#focusto). - `'locked'`: The session is currently locked at a specific [`exposureDuration`](#exposureduration)/[`iso`](#iso) via [`setExposureLocked(...)`](#setexposurelocked). *** ### focusMode ```ts readonly focusMode: FocusMode ``` Represents the current [`FocusMode`](../type-aliases/FocusMode.mdx). - `'continuous-auto-focus'`: The session is continuously adjusting AF as the scene changes. (the default) - `'auto-focus'`: The session is currently metering to a specific focus length position via [`focusTo(...)`](#focusto). - `'locked'`: The session is currently locked at a specific [`lensPosition`](#lensposition) via [`setFocusLocked(...)`](#setfocuslocked). *** ### isConnected ```ts readonly isConnected: boolean ``` Gets whether this `CameraController` is currently connected to the session. *** ### isDistortionCorrectionEnabled ```ts readonly isDistortionCorrectionEnabled: boolean ``` Gets whether geometric distortion correction is currently enabled. You can enable or disable distortion correction via [`configure(...)`](#configure) if the [`CameraDevice`](CameraDevice.mdx) supports distortion correction (see [`CameraDevice.supportsDistortionCorrection`](CameraDevice.mdx#supportsdistortioncorrection)). *** ### isLowLightBoostEnabled ```ts readonly isLowLightBoostEnabled: boolean ``` Gets whether low light boost is currently enabled. You can enable low light boost via [`configure(...)`](#configure). #### Example Enabling low light boost: ```ts const controller = ... if (controller.device.supportsLowLightBoost) { await controller.configure({ enableLowLightBoost: true }) } ``` *** ### iso ```ts readonly iso: number ``` Represents the current ISO value, or `0` if the [`device`](#device) does not support manual exposure control - see [`CameraDevice.supportsExposureLocking`](CameraDevice.mdx#supportsexposurelocking).. The [`iso`](#iso) value changes over time (via continuous auto-focus/3A), when focused to a specific point (via [`focusTo(...)`](#focusto)), or when locked to a specific duration/ISO value (via [`setExposureLocked(...)`](#setexposurelocked)). *** ### isSmoothAutoFocusEnabled ```ts readonly isSmoothAutoFocusEnabled: boolean ``` Gets whether smooth auto-focus is currently enabled. You can enable or disable smooth auto-focus via [`configure(...)`](#configure) if the [`CameraDevice`](CameraDevice.mdx) supports smooth auto-focus (see [`CameraDevice.supportsSmoothAutoFocus`](CameraDevice.mdx#supportssmoothautofocus)). *** ### isSuspended ```ts readonly isSuspended: boolean ``` Gets whether this `CameraController` is currently suspended. A `CameraController` may be suspended when the system receives an interruption, such as thermal pressure. *** ### isUsedByAnotherApp ```ts readonly isUsedByAnotherApp: boolean ``` Gets whether this `CameraController` is currently used by another app with higher priority Camera access, for example when multi-tasking on iPad. *** ### lensPosition ```ts readonly lensPosition: number ``` Represents the current focus length, from `0.0` (closest) to `1.0` (furthest), or `0` if the [`device`](#device) does not support manual focus control - see [`CameraDevice.supportsFocusLocking`](CameraDevice.mdx#supportsfocuslocking). The [`lensPosition`](#lensposition) changes over time (via continuous auto-focus/3A), when focused to a specific point (via [`focusTo(...)`](#focusto)), or when locked to a specific lens-position value (via [`setFocusLocked(...)`](#setfocuslocked)). *** ### maxExposureDuration ```ts readonly maxExposureDuration: number ``` Represents the maximum value for the [`duration`](#setexposurelocked) parameter in [`setExposureLocked(...)`](#setexposurelocked), or `0` if [`CameraDevice.supportsExposureLocking`](CameraDevice.mdx#supportsexposurelocking) is `false`. *** ### maxISO ```ts readonly maxISO: number ``` Represents the maximum value for the [`iso`](#setexposurelocked) parameter in [`setExposureLocked(...)`](#setexposurelocked), or `0` if [`CameraDevice.supportsExposureLocking`](CameraDevice.mdx#supportsexposurelocking) is `false`. *** ### maxZoom ```ts readonly maxZoom: number ``` Represents the maximum value for the [`zoom`](#setzoom) parameter in [`setZoom(...)`](#setzoom). *** ### minExposureDuration ```ts readonly minExposureDuration: number ``` Represents the minimum value for the [`duration`](#setexposurelocked) parameter in [`setExposureLocked(...)`](#setexposurelocked), or `0` if [`CameraDevice.supportsExposureLocking`](CameraDevice.mdx#supportsexposurelocking) is `false`. *** ### minISO ```ts readonly minISO: number ``` Represents the minimum value for the [`iso`](#setexposurelocked) parameter in [`setExposureLocked(...)`](#setexposurelocked), or `0` if [`CameraDevice.supportsExposureLocking`](CameraDevice.mdx#supportsexposurelocking) is `false`. *** ### minZoom ```ts readonly minZoom: number ``` Represents the minimum value for the [`zoom`](#setzoom) parameter in [`setZoom(...)`](#setzoom). *** ### torchMode ```ts readonly torchMode: TorchMode ``` Get the current [`TorchMode`](../type-aliases/TorchMode.mdx). The torch can be enabled or disabled via [`setTorchMode(...)`](#settorchmode), or enabled at a custom brightness level via [`enableTorchWithStrength(...)`](#enabletorchwithstrength). *** ### torchStrength ```ts readonly torchStrength: number ``` Get the Torch's configured brightness strength. The [`torchStrength`](#torchstrength) is a value within the `[device.minTorchStrength, device.maxTorchStrength]` range. When the Torch is [`'on'`](../type-aliases/TorchMode.mdx), this strength will be used. The torch's strength can be configured via [`enableTorchWithStrength(...)`](#enabletorchwithstrength) on devices that support custom torch brightness (see [`CameraDevice.supportsTorchStrength`](CameraDevice.mdx#supportstorchstrength)). *** ### whiteBalanceGains ```ts readonly whiteBalanceGains: WhiteBalanceGains ``` Represents the current white balance gains, or `{ 0, 0, 0 }` if the [`device`](#device) does not support manual white-balance control - see [`CameraDevice.supportsWhiteBalanceLocking`](CameraDevice.mdx#supportswhitebalancelocking).. The [`whiteBalanceGains`](#whitebalancegains) change over time (via continuous auto-focus/3A), when focused to a specific point (via [`focusTo(...)`](#focusto)), or when locked to specific [`WhiteBalanceGains`](../interfaces/WhiteBalanceGains.mdx) (via [`setWhiteBalanceLocked(...)`](#setwhitebalancelocked)). *** ### whiteBalanceMode ```ts readonly whiteBalanceMode: WhiteBalanceMode ``` Represents the current [`WhiteBalanceMode`](../type-aliases/WhiteBalanceMode.mdx). - `'continuous-auto-white-balance'`: The session is continuously adjusting AWB as the scene changes. (the default) - `'auto-white-balance'`: The session is currently metering to a specific white-balance value via [`focusTo(...)`](#focusto). - `'locked'`: The session is currently locked at a specific [`whiteBalanceGains`](#whitebalancegains) value via [`setWhiteBalanceLocked(...)`](#setwhitebalancelocked). *** ### zoom ```ts readonly zoom: number ``` Represents the current zoom value. Zoom can be set via [`setZoom(...)`](#setzoom). ## Methods ### addSubjectAreaChangedListener(...) ```ts addSubjectAreaChangedListener(onSubjectAreaChanged: () => void): ListenerSubscription ``` Adds a listener to be fired everytime the subject area substantially changes - e.g. when the user pans away from a scene previously in focus. Returns a [`ListenerSubscription`](../interfaces/ListenerSubscription.mdx) - call [`remove()`](../interfaces/ListenerSubscription.mdx#remove) on it to stop receiving subject-area-change events. Multiple subscriptions can coexist; the device stops monitoring subject-area changes only once the last subscription is removed. #### Discussion When manually locking focus (e.g. via [`focusTo(...)`](#focusto) with [`adaptiveness`](../interfaces/FocusOptions.mdx#adaptiveness) set to [`'locked'`](../type-aliases/SceneAdaptiveness.mdx), [`setFocusLocked(...)`](#setfocuslocked) (or similar), or [`lockCurrentFocus()`](#lockcurrentfocus) (or similar)), it is useful to listen for subject area changes, to reset focus again via [`resetFocus()`](#resetfocus). #### Example ```ts const controller = ... // Lock AE/AF/AWB await Promise.all([ controller.lockCurrentExposure(), controller.lockCurrentFocus(), controller.lockCurrentWhiteBalance(), ]) const subscription = controller.addSubjectAreaChangedListener(() => { // When user moves Camera away, reset AE/AF/AWB again controller.resetFocus() }) // Later, to stop listening: subscription.remove() ``` *** ### cancelZoomAnimation() ```ts cancelZoomAnimation(): Promise ``` Cancels any zoom animations previously started with [`startZoomAnimation(...)`](#startzoomanimation). *** ### configure(...) ```ts configure(config: CameraControllerConfiguration): Promise ``` Configures this `CameraController` with the given [`CameraControllerConfiguration`](../interfaces/CameraControllerConfiguration.mdx). Like a diff-map, setting a value inside the [`config`](#configure) object to `undefined`, causes the prop to be left at whatever its current value is. *** ### convertWhiteBalanceTemperatureAndTintValues(...) ```ts convertWhiteBalanceTemperatureAndTintValues(whiteBalanceTemperatureAndTint: WhiteBalanceTemperatureAndTint): WhiteBalanceGains ``` Converts the given [`whiteBalanceTemperatureAndTint`](#convertwhitebalancetemperatureandtintvalues) values to [`WhiteBalanceGains`](../interfaces/WhiteBalanceGains.mdx). *** ### enableTorchWithStrength(...) ```ts enableTorchWithStrength(strength: number): Promise ``` Sets the [`torchStrength`](#torchstrength) to the given [`strength`](#enabletorchwithstrength) value. #### Discussion This method always turns on the torch, but in contrast to [`setTorchMode(...)`](#settorchmode) (which always uses the default torch strength, often just the maximum), allows you to choose a custom torch strength level - often useful for dimming the torch slightly rather than using full strength. On some devices, this also allows using a higher torch strength than the default. If you simply want to enable the torch, use [`setTorchMode('on')`](#settorchmode) instead. To turn the torch off again, use [`setTorchMode('off')`](#settorchmode). > [!WARNING] Throws > If the [`device`](#device) does not support setting torch strength (see [`CameraDevice.supportsTorchStrength`](CameraDevice.mdx#supportstorchstrength)) > [!WARNING] Throws > If the [`device`](#device) does not support this [`strength`](#enabletorchwithstrength) value (see [`CameraDevice.minTorchStrength`](CameraDevice.mdx#mintorchstrength) / [`CameraDevice.maxTorchStrength`](CameraDevice.mdx#maxtorchstrength)) #### Example Set Torch to maximum strength: ```ts const controller = ... if (controller.device.supportsTorchStrength) { const maxStrength = controller.device.maxTorchStrength await controller.enableTorchWithStrength(maxStrength) } ``` *** ### focusTo(...) ```ts focusTo(point: MeteringPoint, options: FocusOptions): Promise ``` Focuses the Camera pipeline to the specified [`MeteringPoint`](MeteringPoint.mdx), using the specified [`MeteringMode`](../type-aliases/MeteringMode.mdx)s. By default, all metering modes that are supported on this device are enabled - ideally that's [`AE`](../type-aliases/MeteringMode.mdx), [`AF`](../type-aliases/MeteringMode.mdx) and [`AWB`](../type-aliases/MeteringMode.mdx) - also known as 3A. The returned [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) resolves once focusing has been fully settled, or rejects if the focusing operation timed out or was canceled. A focus operation can be canceled by calling [`focusTo(...)`](#focusto) again, or by calling [`resetFocus()`](#resetfocus). After the metering operation has settled, the Camera pipeline either keeps the specified [`MeteringPoint`](MeteringPoint.mdx) continuously focused even if the scene at the specific point changes ([`'continuous'`](../type-aliases/SceneAdaptiveness.mdx)), or locks the focus/exposure/white-balance values in-place ([`'locked'`](../type-aliases/SceneAdaptiveness.mdx)). You can adjust this behaviour via [`FocusOptions.adaptiveness`](../interfaces/FocusOptions.mdx#adaptiveness). #### Parameters ##### point The [`MeteringPoint`](MeteringPoint.mdx) to focus to. ##### options Options for this focus operation. > [!WARNING] Throws > If the [`device`](#device) does not support metering (see [`CameraDevice.supportsFocusMetering`](CameraDevice.mdx#supportsfocusmetering)) > [!WARNING] Throws > If [`'AE'`](../type-aliases/MeteringMode.mdx) is enabled, but the [`device`](#device) does > not support metering exposure (see [`CameraDevice.supportsExposureMetering`](CameraDevice.mdx#supportsexposuremetering)) > [!WARNING] Throws > If [`'AF'`](../type-aliases/MeteringMode.mdx) is enabled, but the [`device`](#device) does > not support metering focus (see [`CameraDevice.supportsFocusMetering`](CameraDevice.mdx#supportsfocusmetering)) > [!WARNING] Throws > If [`'AWB'`](../type-aliases/MeteringMode.mdx) is enabled, but the [`device`](#device) does > not support metering white-balance (see [`CameraDevice.supportsWhiteBalanceMetering`](CameraDevice.mdx#supportswhitebalancemetering)) #### Examples Focus center: ```ts const point = VisionCamera.createNormalizedMeteringPoint(0.5, 0.5) await controller.focusTo(point, { responsiveness: 'steady' }) ``` Focus on tap ```ts const onViewTapped = (tapX: number, tapY: number) => { const point = previewViewRef.createMeteringPoint(tapX, tapY) await controller.focusTo(point, { responsiveness: 'snappy' }) } ``` Lock focus until `controller.resetFocus()` is called: ```ts const point = previewViewRef.createMeteringPoint(tapX, tapY) await controller.focusTo(point, { responsiveness: 'snappy', adaptiveness: 'locked', autoResetAfter: null }) ``` *** ### lockCurrentExposure() ```ts lockCurrentExposure(): Promise ``` Locks the current exposure values. You can read the current exposure values via [`exposureDuration`](#exposureduration) and [`iso`](#iso). > [!WARNING] Throws > If the [`CameraDevice`](CameraDevice.mdx) does not support manual exposure - > see [`CameraDevice.supportsExposureLocking`](CameraDevice.mdx#supportsexposurelocking) > > To reset exposure again to be automatically adjusted by the Camera, > use [`resetFocus()`](#resetfocus). #### Example ```ts const controller = ... if (controller.device.supportsExposureLocking) { await controller.lockCurrentExposure() } ``` *** ### lockCurrentFocus() ```ts lockCurrentFocus(): Promise ``` Locks the current focus values. You can read the current focus values via [`lensPosition`](#lensposition). > [!WARNING] Throws > If the [`CameraDevice`](CameraDevice.mdx) does not support manual focus - > see [`CameraDevice.supportsFocusLocking`](CameraDevice.mdx#supportsfocuslocking) > > To reset focus again to be automatically adjusted by the Camera, > use [`resetFocus()`](#resetfocus). #### Example ```ts const controller = ... if (controller.device.supportsFocusLocking) { await controller.lockCurrentFocus() } ``` *** ### lockCurrentWhiteBalance() ```ts lockCurrentWhiteBalance(): Promise ``` Locks the current white-balance values. You can read the current white-balance values via [`whiteBalanceGains`](#whitebalancegains). > [!WARNING] Throws > If the [`CameraDevice`](CameraDevice.mdx) does not support manual white-balance - > see [`CameraDevice.supportsWhiteBalanceLocking`](CameraDevice.mdx#supportswhitebalancelocking) > > To reset white-balance again to be automatically adjusted by the Camera, > use [`resetFocus()`](#resetfocus). #### Example ```ts const controller = ... if (controller.device.supportsWhiteBalanceLocking) { await controller.lockCurrentWhiteBalance() } ``` *** ### resetFocus() ```ts resetFocus(): Promise ``` Cancels any current focus operations from [`focusTo(...)`](#focusto), resets back all 3A focus modes to continuously auto-focus if they have been previously locked (e.g. via [`setFocusLocked(...)`](#setfocuslocked) or [`lockCurrentFocus()`](#lockcurrentfocus), and similar), and resets the focus point of interest to be in the center. #### Example ```ts await controller.resetFocus() ``` *** ### setExposureBias(...) ```ts setExposureBias(exposure: number): Promise ``` Sets the [`exposureBias`](#exposurebias) to the given [`exposure`](#setexposurebias) bias value. A positive value (like `1`) means over-exposed ("brighter"), whereas a negative value (like `-1`) means under-exposed ("darker"). The default exposure bias is `0`. > [!WARNING] Throws > If the [`device`](#device) does not support setting exposure bias (see [`CameraDevice.supportsExposureBias`](CameraDevice.mdx#supportsexposurebias)) > [!WARNING] Throws > If the [`device`](#device) does not support this [`exposure`](#setexposurebias) bias value (see [`CameraDevice.minExposureBias`](CameraDevice.mdx#minexposurebias) / [`CameraDevice.maxExposureBias`](CameraDevice.mdx#maxexposurebias)) #### Example Set Camera to maximum exposure: ```ts const controller = ... if (controller.device.supportsExposureBias) { const maxExposure = controller.device.maxExposureBias await controller.setExposureBias(maxExposure) } ``` *** ### setExposureLocked(...) ```ts setExposureLocked(duration: number, iso: number): Promise ``` Locks the exposure at the specified [`duration`](#setexposurelocked) and [`iso`](#setexposurelocked) value. #### Parameters ##### duration The duration in seconds a single shutter is timed at. It must be a value between [`minExposureDuration`](#minexposureduration) and [`maxExposureDuration`](#maxexposureduration). ##### iso The ISO value for the Camera. It must be a value between [`minISO`](#miniso) and [`maxISO`](#maxiso). > [!WARNING] Throws > If [`duration`](#setexposurelocked) or [`iso`](#setexposurelocked) are not valid values. > [!WARNING] Throws > If the [`device`](#device) does not support manual exposure locking (see [`CameraDevice.supportsExposureLocking`](CameraDevice.mdx#supportsexposurelocking)) *** ### setFocusLocked(...) ```ts setFocusLocked(lensPosition: number): Promise ``` Locks the focus at the specified [`lensPosition`](#setfocuslocked). #### Parameters ##### lensPosition The position of the Camera lens, from `0.0` (closest) to `1.0` (furthest). > [!WARNING] Throws > If [`lensPosition`](#setfocuslocked) is outside of `0.0` ... `1.0`. > [!WARNING] Throws > If the [`device`](#device) does not support manual focus locking (see [`CameraDevice.supportsFocusLocking`](CameraDevice.mdx#supportsfocuslocking)) *** ### setTorchMode(...) ```ts setTorchMode(mode: TorchMode): Promise ``` Sets the torch to the specified [`mode`](#settorchmode). #### Discussion To enable the torch with a specific brightness level, use [`enableTorchWithStrength(...)`](#enabletorchwithstrength) instead. > [!WARNING] Throws > If the [`device`](#device) does not have a torch (see [`CameraDevice.hasTorch`](CameraDevice.mdx#hastorch)). #### See [`enableTorchWithStrength(...)`](#enabletorchwithstrength) *** ### setWhiteBalanceLocked(...) ```ts setWhiteBalanceLocked(whiteBalanceGains: WhiteBalanceGains): Promise ``` Locks the white-balance at the specified [`whiteBalanceGains`](#setwhitebalancelocked) value. #### Parameters ##### whiteBalanceGains The [`WhiteBalanceGains`](../interfaces/WhiteBalanceGains.mdx) values. Each channel's value must be within `1` and the current [`device`](#device)'s [`maxWhiteBalanceGain`](CameraDevice.mdx#maxwhitebalancegain) value. > [!WARNING] Throws > If one of the channels in [`whiteBalanceGains`](#setwhitebalancelocked) is out-of-range. > [!WARNING] Throws > If the [`device`](#device) does not support manual white-balance locking (see [`CameraDevice.supportsWhiteBalanceLocking`](CameraDevice.mdx#supportswhitebalancelocking)) *** ### setZoom(...) ```ts setZoom(zoom: number): Promise ``` Sets the Camera's zoom to the specified [`zoom`](#setzoom) value. > [!WARNING] Throws > If the [`CameraDevice`](CameraDevice.mdx) does not support the given [`zoom`](#setzoom) > value. See [`CameraDevice.minZoom`](CameraDevice.mdx#minzoom) / [`CameraDevice.maxZoom`](CameraDevice.mdx#maxzoom) #### Example Zoom to the maximum: ```ts const controller = ... const maxZoom = controller.device.maxZoom await controller.setZoom(maxZoom) ``` *** ### startZoomAnimation(...) ```ts startZoomAnimation(zoom: number, rate: number): Promise ``` Starts animating the Camera's zoom to the specified [`zoom`](#startzoomanimation) value, at the specified [`rate`](#startzoomanimation). > [!WARNING] Throws > If the [`CameraDevice`](CameraDevice.mdx) does not support the given [`zoom`](#startzoomanimation) > value. See [`CameraDevice.minZoom`](CameraDevice.mdx#minzoom) / [`CameraDevice.maxZoom`](CameraDevice.mdx#maxzoom) #### Example Zoom to the maximum: ```ts const controller = ... const maxZoom = controller.device.maxZoom await controller.startZoomAnimation(maxZoom, 2) ``` --- # CameraDepthFrameOutput Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/hybrid-objects/CameraDepthFrameOutput --- title: CameraDepthFrameOutput description: |- The CameraDepthFrameOutput allows synchronously streaming Depth Frames from the Camera, aka "Depth Frame Processing". hybridParent: CameraOutput --- ```ts interface CameraDepthFrameOutput extends CameraOutput ``` The `CameraDepthFrameOutput` allows synchronously streaming [`Depth`](Depth.mdx) Frames from the Camera, aka "Depth Frame Processing". #### See - [`DepthFrameOutputOptions`](../interfaces/DepthFrameOutputOptions.mdx) - [`useDepthOutput(...)`](../functions/useDepthOutput.mdx) #### Examples Creating a `CameraDepthFrameOutput` via the Hooks API: ```ts const depthOutput = useDepthOutput({ onDepth(depth) { 'worklet' depth.dispose() } }) ``` Creating a `CameraDepthFrameOutput` via the Imperative API: ```ts const depthOutput = VisionCamera.createDepthFrameOutput({ targetResolution: CommonResolutions.VGA_16_9, enableFiltering: true, enablePhysicalBufferRotation: false, dropFramesWhileBusy: true, allowDeferredStart: true, }) ``` ## Properties ### currentResolution? ```ts readonly optional currentResolution?: Size ``` The resolution that the underlying capture pipeline has resolved this [`CameraOutput`](CameraOutput.mdx) to, in sensor-native (un-rotated) pixels, or `undefined` if the output has not yet been connected to a [`CameraSession`](CameraSession.mdx). #### Discussion The selected [`Size`](../interfaces/Size.mdx) may differ from the requested [`Size`](../interfaces/Size.mdx) (e.g. from [`PhotoOutputOptions.targetResolution`](../interfaces/PhotoOutputOptions.mdx#targetresolution)), as the [`CameraSession`](CameraSession.mdx) negotiates resolutions across attached [`CameraOutput`](CameraOutput.mdx)s, connected [`CameraDevice`](CameraDevice.mdx) capabilities, and enabled [`Constraint`](../type-aliases/Constraint.mdx)s. #### Discussion For outputs that are not pixel-based (e.g. metadata-only outputs), this reports the resolution of the upstream video stream feeding the output, or `undefined` if no video input is attached. #### Inherited from [`CameraOutput`](CameraOutput.mdx).[`currentResolution`](CameraOutput.mdx#currentresolution) *** ### mediaType ```ts readonly mediaType: MediaType ``` The media type of the content being streamed by this [`CameraOutput`](CameraOutput.mdx). #### Inherited from [`CameraOutput`](CameraOutput.mdx).[`mediaType`](CameraOutput.mdx#mediatype) *** ### outputOrientation ```ts outputOrientation: CameraOrientation ``` Gets or sets the output orientation of this [`CameraOutput`](CameraOutput.mdx). Individual implementations of [`CameraOutput`](CameraOutput.mdx) may choose different strategies for implementing output orientation, for example: - A Photo output might apply orientation via EXIF flags. - A Video output might apply orientation via track transform metadata. - A Preview output might apply orientation via view transforms. - A Frame output might not apply orientation and only pass it as a property via the `Frame` object, unless explicitly configured to physically rotate buffers. #### Inherited from [`CameraOutput`](CameraOutput.mdx).[`outputOrientation`](CameraOutput.mdx#outputorientation) *** ### thread ```ts readonly thread: NativeThread ``` Get the [`NativeThread`](NativeThread.mdx) that this `CameraDepthFrameOutput` is running on. This is the thread that [`setOnDepthFrameCallback(...)`](#setondepthframecallback) callbacks run on. ## Methods ### setOnDepthFrameCallback(...) ```ts setOnDepthFrameCallback(onDepthFrame: (depth: Depth) => boolean & object | undefined): void ``` Adds a callback that calls the given [`onDepthFrame`](#setondepthframecallback) function every time the Camera produces a new [`Depth`](Depth.mdx). > [!WARNING] Throws > If not called on a Worklet/Runtime running on this [`thread`](#thread). *** ### setOnDepthFrameDroppedCallback(...) ```ts setOnDepthFrameDroppedCallback(onDepthFrameDropped: | ((reason: FrameDroppedReason) => void) | undefined): void ``` Adds a callback that gets called when a [`Depth`](Depth.mdx) has been dropped. This often happens if your Depth Frame Callback is taking longer than a frame interval. --- # CameraDevice Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/hybrid-objects/CameraDevice --- title: CameraDevice description: |- The CameraDevice represents a physical- or virtual Camera Device. tocPlatforms: companionDeskViewCamera?: - iOS isContinuityCamera: - iOS --- ```ts interface CameraDevice extends HybridObject ``` The `CameraDevice` represents a physical- or virtual Camera Device. Examples: - Physical: The 0.5x ultra-wide-angle Camera - Virtual: The Triple-Camera consisting of the 0.5x, the 1x, and the 3x Camera - TrueDepth Face ID: A virtual Camera consisting of a color, and a depth Camera ## Properties ### companionDeskViewCamera? ```ts readonly optional companionDeskViewCamera?: CameraDevice ``` The matching Desk View camera for this Continuity Camera, if available. *** ### focalLength? ```ts readonly optional focalLength?: number ``` Returns the Camera Device's nominal focal length in 35mm film format. *** ### hasFlash ```ts readonly hasFlash: boolean ``` Whether this `CameraDevice` has a physical flash unit, or not. For [`front`](../type-aliases/CameraPosition.mdx)-facing devices, [`hasFlash`](#hasflash) may be `false`, but you might still be able to use a screen- flash for photo capture. #### See [`CapturePhotoSettings.flashMode`](../interfaces/CapturePhotoSettings.mdx#flashmode) *** ### hasTorch ```ts readonly hasTorch: boolean ``` Whether this `CameraDevice` supports using its flash ([`hasFlash`](#hasflash)) as a continuous light (_"torch"_) while the session is running. In almost all cases, [`hasTorch`](#hastorch) is the same as [`hasFlash`](#hasflash). Use [`supportsTorchStrength`](#supportstorchstrength) to find out whether the torch additionally accepts a custom brightness level via [`enableTorchWithStrength(...)`](CameraController.mdx#enabletorchwithstrength). #### See - [`setTorchMode(...)`](CameraController.mdx#settorchmode) - [`supportsTorchStrength`](#supportstorchstrength) *** ### id ```ts readonly id: string ``` A unique identifier for this camera device. *** ### isContinuityCamera ```ts readonly isContinuityCamera: boolean ``` Returns `true` if this camera is a Continuity Camera. On non iOS platforms this is always `false`. *** ### isVirtualDevice ```ts readonly isVirtualDevice: boolean ``` Gets whether this `CameraDevice` is a virtual device, which consists of two or more physical `CameraDevice`s. Devices like the "Triple-Camera" (0.5x + 1x + 3x) or the "FaceID Camera" (color + depth) are virtual devices. To access the individual physical devices a virtual device consists of, use [`physicalDevices`](#physicaldevices). *** ### lensAperture ```ts readonly lensAperture: number ``` The size (ƒ number) of the lens diaphragm. *** ### localizedName ```ts readonly localizedName: string ``` A user friendly camera name shown by the system. *** ### manufacturer ```ts readonly manufacturer: string ``` The hardware manufacturer name for this device. *** ### maxExposureBias ```ts readonly maxExposureBias: number ``` Gets the maximum supported value for the exposure bias (in EV units), or `0` if [`supportsExposureBias`](#supportsexposurebias) is false. *** ### maxTorchStrength ```ts readonly maxTorchStrength: number ``` Gets the maximum supported torch strength for this device, or `0` if [`supportsTorchStrength`](#supportstorchstrength) is false. Use [`enableTorchWithStrength(...)`](CameraController.mdx#enabletorchwithstrength) to set the torch strength. #### See - [`supportsTorchStrength`](#supportstorchstrength) - [`minTorchStrength`](#mintorchstrength) *** ### maxWhiteBalanceGain ```ts readonly maxWhiteBalanceGain: number ``` The maximum value a single color-channel can be set to in [`WhiteBalanceGains`](../interfaces/WhiteBalanceGains.mdx), or `0` if [`supportsWhiteBalanceLocking`](#supportswhitebalancelocking) is `false`. *** ### maxZoom ```ts readonly maxZoom: number ``` The maximum individually supported zoom value of this device. > [!NOTE] Note > Depending on the [`Constraint`](../type-aliases/Constraint.mdx)s and > [`CameraOutput`](CameraOutput.mdx)s configured on the > [`CameraSession`](CameraSession.mdx), the actual maximum zoom > value may change. > Inspect the returned [`CameraController`](CameraController.mdx)'s > [`maxZoom`](CameraController.mdx#maxzoom) property > for a true current maximum. *** ### mediaTypes ```ts readonly mediaTypes: MediaType[] ``` Represents all [`MediaType`](../type-aliases/MediaType.mdx)s this `CameraDevice` can capture. Most Cameras return [`['video']`](../type-aliases/MediaType.mdx). Virtual Cameras that also support Depth Capture return [`['video', 'depth']`](../type-aliases/MediaType.mdx). *** ### minExposureBias ```ts readonly minExposureBias: number ``` Gets the minimum supported value for the exposure bias (in EV units), or `0` if [`supportsExposureBias`](#supportsexposurebias) is false. *** ### minTorchStrength ```ts readonly minTorchStrength: number ``` Gets the minimum supported torch strength for this device, or `0` if [`supportsTorchStrength`](#supportstorchstrength) is false. Use [`enableTorchWithStrength(...)`](CameraController.mdx#enabletorchwithstrength) to set the torch strength. #### See - [`supportsTorchStrength`](#supportstorchstrength) - [`maxTorchStrength`](#maxtorchstrength) *** ### minZoom ```ts readonly minZoom: number ``` The minimum individually supported zoom value of this device. > [!NOTE] Note > Depending on the [`Constraint`](../type-aliases/Constraint.mdx)s and > [`CameraOutput`](CameraOutput.mdx)s configured on the > [`CameraSession`](CameraSession.mdx), the actual minimum zoom > value may change. > Inspect the returned [`CameraController`](CameraController.mdx)'s > [`minZoom`](CameraController.mdx#minzoom) property > for a true current minimum. *** ### modelID ```ts readonly modelID: string ``` The model identifier for this camera device. *** ### physicalDevices ```ts readonly physicalDevices: CameraDevice[] ``` If this `CameraDevice` is a virtual device (see [`isVirtualDevice`](#isvirtualdevice)), this property contains a list of all constituent physical devices this virtual device is made of. For physical devices, this returns an empty array. *** ### position ```ts readonly position: CameraPosition ``` The position of this camera on the device. *** ### supportedFPSRanges ```ts readonly supportedFPSRanges: Range[] ``` Gets all available Frame Rate Ranges this `CameraDevice` supports individually. Frame Rates are expressed in FPS (Frames per Second), for example `60` refers to 60 FPS (= 16.666ms per Frame). #### Discussion Use [`supportsFPS(...)`](#supportsfps) as a convenience method to find out if a given fixed frame rate is supported individually. #### Discussion While a device may support a given FPS [`Range`](../interfaces/Range.mdx) individually, it is not guaranteed to be supported with all possible feature and output combinations. The [`Constraint`](../type-aliases/Constraint.mdx) API (specifically [`FPSConstraint`](../interfaces/FPSConstraint.mdx)) internally negotiates the target [`fps`](../interfaces/FPSConstraint.mdx#fps) with other enabled features (such as [`VideoStabilizationModeConstraint`](../interfaces/VideoStabilizationModeConstraint.mdx)) and all connected [`CameraOutput`](CameraOutput.mdx)s to find a best-matching supported combination on this device. Alternatively, to find out if a specific combination is supported upfront, use the [`isSessionConfigSupported(...)`](#issessionconfigsupported) method with your desired outputs and constraints applied. *** ### supportedPixelFormats ```ts readonly supportedPixelFormats: PixelFormat[] ``` Get a list of all supported [`PixelFormat`](../type-aliases/PixelFormat.mdx)s this `CameraDevice` can stream in. *** ### supportedVideoDynamicRanges ```ts readonly supportedVideoDynamicRanges: DynamicRange[] ``` Get a list of all [`DynamicRange`](../interfaces/DynamicRange.mdx)s this `CameraDevice` supports streaming at, often affecting both Video recordings and Preview. #### Discussion Unlike Photo HDR, Video Dynamic Ranges are not only extra processing, but often entirely different sensor readouts. While Photo HDR might capture multiple bracketed Photos to fuse them together to expose more colors, Video Dynamic Ranges sometimes stream in an entirely different Pixel Format (e.g. 10-bit instead of 8-bit), and use a different YUV Transfer Matrix to compose pixels from sensor data. #### Discussion While a device may support a given [`DynamicRange`](../interfaces/DynamicRange.mdx) individually, it is not guaranteed to be supported with all possible feature and output combinations. The [`Constraint`](../type-aliases/Constraint.mdx) API (specifically [`VideoDynamicRangeConstraint`](../interfaces/VideoDynamicRangeConstraint.mdx)) internally negotiates the target Dynamic Range with other enabled features (such as [`ResolutionBiasConstraint`](../interfaces/ResolutionBiasConstraint.mdx) or [`FPSConstraint`](../interfaces/FPSConstraint.mdx)) and all connected [`CameraOutput`](CameraOutput.mdx)s to find a best-matching supported combination on this device. Alternatively, to find out if a specific combination is supported upfront, use the [`isSessionConfigSupported(...)`](#issessionconfigsupported) method with your desired outputs and constraints applied. #### See - [`VideoDynamicRangeConstraint.videoDynamicRange`](../interfaces/VideoDynamicRangeConstraint.mdx#videodynamicrange) - [`CameraVideoOutput`](CameraVideoOutput.mdx) *** ### supportsDistortionCorrection ```ts readonly supportsDistortionCorrection: boolean ``` Whether the `CameraDevice` supports distortion correction to correct stretched edges in wide-angle Cameras during Photo capture. #### See [`CapturePhotoSettings.enableDistortionCorrection`](../interfaces/CapturePhotoSettings.mdx#enabledistortioncorrection) *** ### supportsExposureBias ```ts readonly supportsExposureBias: boolean ``` Gets whether this `CameraDevice` supports biasing auto-exposure via [`setExposureBias(...)`](CameraController.mdx#setexposurebias). *** ### supportsExposureLocking ```ts readonly supportsExposureLocking: boolean ``` Gets whether this `CameraDevice` supports manual exposure via [`setExposureLocked(...)`](CameraController.mdx#setexposurelocked). *** ### supportsExposureMetering ```ts readonly supportsExposureMetering: boolean ``` Gets whether this `CameraDevice` supports metering auto-exposure ([`'AE'`](../type-aliases/MeteringMode.mdx)) via [`focusTo(...)`](CameraController.mdx#focusto). *** ### supportsFocusLocking ```ts readonly supportsFocusLocking: boolean ``` Gets whether this `CameraDevice` supports manual focus via [`setFocusLocked(...)`](CameraController.mdx#setfocuslocked). *** ### supportsFocusMetering ```ts readonly supportsFocusMetering: boolean ``` Gets whether this `CameraDevice` supports metering auto-focus ([`'AF'`](../type-aliases/MeteringMode.mdx)) via [`focusTo(...)`](CameraController.mdx#focusto). *** ### supportsLowLightBoost ```ts readonly supportsLowLightBoost: boolean ``` Whether this `CameraDevice` supports enabling low-light boost to improve exposure in dark scenes via [`CameraControllerConfiguration.enableLowLightBoost`](../interfaces/CameraControllerConfiguration.mdx#enablelowlightboost). #### Example ```ts await controller.configure({ enableLowLightBoost: device.supportsLowLightBoost }) ``` *** ### supportsPhotoHDR ```ts readonly supportsPhotoHDR: boolean ``` Gets whether this `CameraDevice` supports capturing Photos in High Dynamic Range (HDR). #### Discussion Photo HDR captures multiple images in various exposure settings (often one under-exposed, one over-exposed and one perfectly exposed), and fuses the images together into a single image with a wider range of colors, which results in darker blacks and brighter whites. #### Discussion While a device may support Photo HDR individually, it is not guaranteed to be supported with all possible feature and output combinations. The [`Constraint`](../type-aliases/Constraint.mdx) API (specifically [`PhotoHDRConstraint`](../interfaces/PhotoHDRConstraint.mdx)) internally negotiates the target Photo HDR preference with other enabled features (such as [`ResolutionBiasConstraint`](../interfaces/ResolutionBiasConstraint.mdx)) and all connected [`CameraOutput`](CameraOutput.mdx)s to find a best-matching supported combination on this device. Alternatively, to find out if a specific combination is supported upfront, use the [`isSessionConfigSupported(...)`](#issessionconfigsupported) method with your desired outputs and constraints applied. #### See - [`PhotoHDRConstraint.photoHDR`](../interfaces/PhotoHDRConstraint.mdx#photohdr) - [`CameraPhotoOutput`](CameraPhotoOutput.mdx) *** ### supportsPreviewImage ```ts readonly supportsPreviewImage: boolean ``` Returns `true` if this `CameraDevice` supports delivering preview [`Image`](https://github.com/mrousavy/react-native-nitro-image) instances before the actual [`Photo`](Photo.mdx) is available. On iOS, this is always `true`. #### See - [`PhotoOutputOptions.previewImageTargetSize`](../interfaces/PhotoOutputOptions.mdx#previewimagetargetsize) - [`CapturePhotoCallbacks.onPreviewImageAvailable`](../interfaces/CapturePhotoCallbacks.mdx#onpreviewimageavailable) *** ### supportsSmoothAutoFocus ```ts readonly supportsSmoothAutoFocus: boolean ``` Gets whether this `CameraDevice` supports smoothly adjusting focus via [`CameraControllerConfiguration.enableSmoothAutoFocus`](../interfaces/CameraControllerConfiguration.mdx#enablesmoothautofocus). #### Example ```ts await controller.configure({ enableSmoothAutoFocus: device.supportsSmoothAutoFocus }) ``` *** ### supportsSpeedQualityPrioritization ```ts readonly supportsSpeedQualityPrioritization: boolean ``` Returns `true` if this `CameraDevice` supports capturing photos with the [`'speed'`](../type-aliases/QualityPrioritization.mdx) [`QualityPrioritization`](../type-aliases/QualityPrioritization.mdx). #### See [`PhotoOutputOptions.qualityPrioritization`](../interfaces/PhotoOutputOptions.mdx#qualityprioritization) *** ### supportsTorchStrength ```ts readonly supportsTorchStrength: boolean ``` Whether this `CameraDevice` supports configuring a custom torch brightness level via [`enableTorchWithStrength(...)`](CameraController.mdx#enabletorchwithstrength). #### Discussion Many devices with a [`torch`](#hastorch) can only toggle the torch on or off and do not expose a brightness level - calling [`enableTorchWithStrength(...)`](CameraController.mdx#enabletorchwithstrength) on such a device will fail. Use [`setTorchMode('on')`](CameraController.mdx#settorchmode) instead to turn the torch on at the system default level. #### See - [`hasTorch`](#hastorch) - [`enableTorchWithStrength(...)`](CameraController.mdx#enabletorchwithstrength) *** ### supportsWhiteBalanceLocking ```ts readonly supportsWhiteBalanceLocking: boolean ``` Gets whether this `CameraDevice` supports manual white-balance via [`setWhiteBalanceLocked(...)`](CameraController.mdx#setwhitebalancelocked). #### See [`maxWhiteBalanceGain`](#maxwhitebalancegain) *** ### supportsWhiteBalanceMetering ```ts readonly supportsWhiteBalanceMetering: boolean ``` Gets whether this `CameraDevice` supports metering auto-white-balance ([`'AWB'`](../type-aliases/MeteringMode.mdx)) via [`focusTo(...)`](CameraController.mdx#focusto). *** ### type ```ts readonly type: DeviceType ``` The camera hardware type, for example [`'wide-angle'`](../type-aliases/DeviceType.mdx). *** ### zoomLensSwitchFactors ```ts readonly zoomLensSwitchFactors: number[] ``` If this `CameraDevice` is a virtual device, this returns a list of zoom factors at which the virtual device may switch to another physical camera. For physical devices, this returns an empty array. #### Example ```ts const camera = ... // Triple-Camera (0.5x, 1x, 3x) camera.zoomLensSwitchFactors // [1, 3] ``` ## Methods ### getSupportedResolutions(...) ```ts getSupportedResolutions(outputStreamType: OutputStreamType): Size[] ``` Get a list of all supported resolutions this `CameraDevice` can produce for outputs of the given [`OutputStreamType`](../type-aliases/OutputStreamType.mdx). If a given [`OutputStreamType`](../type-aliases/OutputStreamType.mdx) can not be streamed to at all, an empty array (`[]`) will be returned. #### Discussion While a `CameraDevice` may be able to stream in the given output resolutions individually, it is not guaranteed that all resolutions are available when streaming to multiple [`CameraOutput`](CameraOutput.mdx) with multiple [`Constraint`](../type-aliases/Constraint.mdx)s enabled. The [`CameraSession`](CameraSession.mdx) internally negotiates available output resolutions based on [`Constraint`](../type-aliases/Constraint.mdx)s, and potentially downgrades (or upgrades) target resolutions if needed. #### See - [`VideoOutputOptions.targetResolution`](../interfaces/VideoOutputOptions.mdx#targetresolution) - [`PhotoOutputOptions.targetResolution`](../interfaces/PhotoOutputOptions.mdx#targetresolution) - [`FrameOutputOptions.targetResolution`](../interfaces/FrameOutputOptions.mdx#targetresolution) - [`DepthFrameOutputOptions.targetResolution`](../interfaces/DepthFrameOutputOptions.mdx#targetresolution) - [`ResolutionBiasConstraint`](../interfaces/ResolutionBiasConstraint.mdx) #### Example Get all resolutions for Photo capture: ```ts const device = ... const resolutions = device.getSupportedResolutions('photo') ``` *** ### isSessionConfigSupported(...) ```ts isSessionConfigSupported(config: CameraSessionConfig): boolean ``` Returns whether the given [`CameraSessionConfig`](CameraSessionConfig.mdx) is supported by this `CameraDevice`, or not. If this method returns `false`, configuring a [`CameraSession`](CameraSession.mdx) with this [`CameraSessionConfig`](CameraSessionConfig.mdx) will fail. *** ### supportsFPS(...) ```ts supportsFPS(fps: number): boolean ``` Gets whether the given [`fps`](#supportsfps) is individually supported by any of the [`supportedFPSRanges`](#supportedfpsranges) on this `CameraDevice`. #### Discussion While a device may support a given FPS [`Range`](../interfaces/Range.mdx) individually, it is not guaranteed to be supported with all possible feature and output combinations. The [`Constraint`](../type-aliases/Constraint.mdx) API (specifically [`FPSConstraint`](../interfaces/FPSConstraint.mdx)) internally negotiates the target [`fps`](../interfaces/FPSConstraint.mdx#fps) with other enabled features (such as [`VideoStabilizationModeConstraint`](../interfaces/VideoStabilizationModeConstraint.mdx)) and all connected [`CameraOutput`](CameraOutput.mdx)s to find a best-matching supported combination on this device. Alternatively, to find out if a specific combination is supported upfront, use the [`isSessionConfigSupported(...)`](#issessionconfigsupported) method with your desired outputs and constraints applied. #### See [`supportedFPSRanges`](#supportedfpsranges) *** ### supportsOutput(...) ```ts supportsOutput(output: CameraOutput): boolean ``` Returns whether this `CameraDevice` supports streaming to the given [`output`](#supportsoutput). #### Discussion Usually, a `CameraDevice` can stream to all [`CameraOutput`](CameraOutput.mdx)s, with very rare exceptions. For example, Depth Frame Outputs ([`CameraDepthFrameOutput`](CameraDepthFrameOutput.mdx)) may not be supported on all `CameraDevice`s - see [`mediaTypes`](#mediatypes). *** ### supportsPreviewStabilizationMode(...) ```ts supportsPreviewStabilizationMode(previewStabilizationMode: TargetStabilizationMode): boolean ``` Returns whether this `CameraDevice` supports the given [`StabilizationMode`](../type-aliases/StabilizationMode.mdx) for preview streams (e.g. [`CameraPreviewOutput`](CameraPreviewOutput.mdx)). #### Discussion While a device may support a given [`StabilizationMode`](../type-aliases/StabilizationMode.mdx) individually, it is not guaranteed to be supported with all possible feature and output combinations. The [`Constraint`](../type-aliases/Constraint.mdx) API (specifically [`PreviewStabilizationModeConstraint`](../interfaces/PreviewStabilizationModeConstraint.mdx)) internally negotiates the target [`previewStabilizationMode`](../interfaces/PreviewStabilizationModeConstraint.mdx#previewstabilizationmode) with other enabled features (such as [`FPSConstraint`](../interfaces/FPSConstraint.mdx)) and all connected [`CameraOutput`](CameraOutput.mdx)s to find a best-matching supported combination on this device. Alternatively, to find out if a specific combination is supported upfront, use the [`isSessionConfigSupported(...)`](#issessionconfigsupported) method with your desired outputs and constraints applied. *** ### supportsVideoStabilizationMode(...) ```ts supportsVideoStabilizationMode(videoStabilizationMode: TargetStabilizationMode): boolean ``` Returns whether this `CameraDevice` supports the given [`StabilizationMode`](../type-aliases/StabilizationMode.mdx) for video streams (e.g. [`CameraVideoOutput`](CameraVideoOutput.mdx)). #### Discussion While a device may support a given [`StabilizationMode`](../type-aliases/StabilizationMode.mdx) individually, it is not guaranteed to be supported with all possible feature and output combinations. The [`Constraint`](../type-aliases/Constraint.mdx) API (specifically [`VideoStabilizationModeConstraint`](../interfaces/VideoStabilizationModeConstraint.mdx)) internally negotiates the target [`videoStabilizationMode`](../interfaces/VideoStabilizationModeConstraint.mdx#videostabilizationmode) with other enabled features (such as [`FPSConstraint`](../interfaces/FPSConstraint.mdx)) and all connected [`CameraOutput`](CameraOutput.mdx)s to find a best-matching supported combination on this device. Alternatively, to find out if a specific combination is supported upfront, use the [`isSessionConfigSupported(...)`](#issessionconfigsupported) method with your desired outputs and constraints applied. --- # CameraDeviceFactory Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/hybrid-objects/CameraDeviceFactory --- title: CameraDeviceFactory description: |- The CameraDeviceFactory allows getting CameraDevices, listening to device changes, and querying extensions or preferred Cameras. --- ```ts interface CameraDeviceFactory extends HybridObject ``` The `CameraDeviceFactory` allows getting [`CameraDevice`](CameraDevice.mdx)s, listening to device changes, and querying extensions or preferred Cameras. ## Properties ### cameraDevices ```ts readonly cameraDevices: CameraDevice[] ``` Get a list of all [`CameraDevice`](CameraDevice.mdx)s on this platform. This list may change as [`CameraDevice`](CameraDevice.mdx)s get plugged in/out (e.g. [`'external'`](../type-aliases/CameraPosition.mdx) Cameras via USB/UVC), devices become available/unavailable (e.g. continuity Cameras), or Camera positions change (e.g. on foldable phones). *** ### supportedMultiCamDeviceCombinations ```ts readonly supportedMultiCamDeviceCombinations: CameraDevice[][] ``` A list of all [`CameraDevice`](CameraDevice.mdx) combinations that are supported in Multi-Cam [`CameraSession`](CameraSession.mdx)s. This list always contains a subset of [`cameraDevices`](#cameradevices), often less. Each inner array contains one or more logical [`CameraDevice`](CameraDevice.mdx)s. On iOS, a combination can contain a single virtual [`CameraDevice`](CameraDevice.mdx) such as a Dual- or Triple-Camera, because that device is backed by multiple physical Cameras. You can inspect those physical Cameras via [`physicalDevices`](CameraDevice.mdx#physicaldevices), but pass the returned [`CameraDevice`](CameraDevice.mdx)s directly to [`configure(...)`](CameraSession.mdx#configure). If you need multiple independent inputs, choose a combination with at least two [`CameraDevice`](CameraDevice.mdx)s. #### Discussion For example, on many platforms only a [`'front'`](../type-aliases/CameraPosition.mdx) and a [`'back'`](../type-aliases/CameraPosition.mdx) [`CameraDevice`](CameraDevice.mdx) are supported to be used in a Multi-Cam [`CameraSession`](CameraSession.mdx) - in this case, the returned 2D Array looks something like this: ```json [ [{ position: 'back', ... }, { position: 'front', ... }] ] ``` Two [`'back'`](../type-aliases/CameraPosition.mdx)-, or two [`'front'`](../type-aliases/CameraPosition.mdx) [`CameraDevice`](CameraDevice.mdx)s are often not supported together in a Multi-Cam [`CameraSession`](CameraSession.mdx). When creating a Multi-Cam [`CameraSession`](CameraSession.mdx), you must ensure that you are using Device combinations that are actually supported on the platform, otherwise the session might fail to configure. #### Discussion If the platform does not support Multi-Cam [`CameraSession`](CameraSession.mdx)s, an empty array (`[]`) will be returned. #### Example ```ts if (VisionCamera.supportsMultiCamSessions) { const deviceFactory = await VisionCamera.createDeviceFactory() const deviceCombinations = deviceFactory.supportedMultiCamDeviceCombinations[0] if (deviceCombinations != null) { const connections = deviceCombinations.map((device) => { const previewOutput = VisionCamera.createPreviewOutput() return { input: device, outputs: [ { output: previewOutput, mirrorMode: 'auto' } ], constraints: [] } satisfies CameraSessionConnection }) const session = await VisionCamera.createCameraSession(true) const controllers = await session.configure(connections) await session.start() } } ``` #### See [`CameraFactory.supportsMultiCamSessions`](CameraFactory.mdx#supportsmulticamsessions) *** ### userPreferredCamera? ```ts optional userPreferredCamera?: CameraDevice ``` Get or set the user's default preferred camera device. Setting a device here will persist the preference between apps. ## Methods ### addOnCameraDevicesChangedListener(...) ```ts addOnCameraDevicesChangedListener(listener: (newDevices: CameraDevice[]) => void): ListenerSubscription ``` Add a listener to be called whenever the available [`cameraDevices`](#cameradevices) change, for example when an external USB Camera gets plugged in- or out- of the Device. *** ### getCameraForId(...) ```ts getCameraForId(id: string): CameraDevice | undefined ``` Get the [`CameraDevice`](CameraDevice.mdx) with the given unique [`id`](#getcameraforid). If no device with the given [`id`](#getcameraforid) is found, this method returns `undefined`. *** ### getDefaultCamera(...) ```ts getDefaultCamera(position: TargetCameraPosition): CameraDevice | undefined ``` Get the platform's default [`CameraDevice`](CameraDevice.mdx) at the given [`TargetCameraPosition`](../type-aliases/TargetCameraPosition.mdx). *** ### getSupportedExtensions(...) ```ts getSupportedExtensions(camera: CameraDevice): Promise ``` Gets a list of all vendor-specific [`CameraExtension`](CameraExtension.mdx)s the given [`CameraDevice`](CameraDevice.mdx) supports. A [`CameraExtension`](CameraExtension.mdx) can be enabled when creating a [`CameraSession`](CameraSession.mdx) via [`configure(...)`](CameraSession.mdx#configure). --- # CameraExtension Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/hybrid-objects/CameraExtension --- title: CameraExtension description: |- A Camera Extension is a vendor-specific implementation of a private reprocessing pipeline, at ISP level. platforms: - Android --- ```ts interface CameraExtension extends HybridObject ``` A Camera Extension is a vendor-specific implementation of a private reprocessing pipeline, at ISP level. For example, a vendor like Google Pixel might implement a [`'hdr'`](../type-aliases/CameraExtensionType.mdx) extension to make use of the device's private native HDR implementation for photo capture. #### See [CameraX Extensions](https://developer.android.com/media/camera/camerax/extensions-api) > [!NOTE] Note > Camera Extensions are only supported on Android > [!NOTE] Note > Camera Extensions only work on SDR video streams - so make sure you don't have a [`TargetDynamicRange`](../interfaces/TargetDynamicRange.mdx) [`Constraint`](../type-aliases/Constraint.mdx). > [!NOTE] Note > Camera Extensions don't work with RAW capture - make sure you don't have a [`CameraPhotoOutput`](CameraPhotoOutput.mdx) configured for [`'dng'`](../type-aliases/PhotoContainerFormat.mdx) attached. > [!NOTE] Note > If [`CameraExtension.supportsFrameStreaming`](#supportsframestreaming) is `false`, you cannot use a [`CameraOutput`](CameraOutput.mdx) that streams frames. ## Properties ### supportsFrameStreaming ```ts readonly supportsFrameStreaming: boolean ``` Whether a Camera Device with this `CameraExtension` supports Frame Streaming outputs, or not. If this is `false`, enabling this `CameraExtension` and attaching an output that streams Frames (such as [`CameraFrameOutput`](CameraFrameOutput.mdx)) will throw. #### See [`CameraFrameOutput`](CameraFrameOutput.mdx) *** ### type ```ts readonly type: CameraExtensionType ``` Represents the type of this `CameraExtension`. #### See [`CameraExtensionType`](../type-aliases/CameraExtensionType.mdx) --- # CameraFactory Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/hybrid-objects/CameraFactory --- title: CameraFactory description: |- The CameraFactory allows creating various other Camera related objects with arguments. tocPlatforms: createObjectOutput(...): - iOS createOutputSynchronizer(...): - iOS --- ```ts interface CameraFactory extends HybridObject ``` The `CameraFactory` allows creating various other Camera related objects with arguments. ## Properties ### cameraPermissionStatus ```ts readonly cameraPermissionStatus: PermissionStatus ``` Get the current Camera [`PermissionStatus`](../type-aliases/PermissionStatus.mdx). *** ### microphonePermissionStatus ```ts readonly microphonePermissionStatus: PermissionStatus ``` Get the current Microphone [`PermissionStatus`](../type-aliases/PermissionStatus.mdx). *** ### supportsMultiCamSessions ```ts readonly supportsMultiCamSessions: boolean ``` Gets whether the platform supports creating multi-cam [`CameraSession`](CameraSession.mdx)s. Older phones may not be able to support this. #### See [`createCameraSession(enableMultiCam)`](#createcamerasession) ## Methods ### createCameraSession(...) ```ts createCameraSession(enableMultiCam: boolean): Promise ``` Creates a new [`CameraSession`](CameraSession.mdx). - If [`enableMultiCam`](#createcamerasession) is `true`, the [`CameraSession`](CameraSession.mdx) supports attaching multiple [`CameraDevice`](CameraDevice.mdx)s as inputs/connections at the same time. - If [`enableMultiCam`](#createcamerasession) is `false`, the [`CameraSession`](CameraSession.mdx) only supports a single [`CameraDevice`](CameraDevice.mdx) input at a time. > [!WARNING] Throws > If [`enableMultiCam`](#createcamerasession) is `true`, but [`supportsMultiCamSessions`](#supportsmulticamsessions) is `false`. *** ### createDepthFrameOutput(...) ```ts createDepthFrameOutput(options: DepthFrameOutputOptions): CameraDepthFrameOutput ``` Create a new [`CameraDepthFrameOutput`](CameraDepthFrameOutput.mdx) with the given [`DepthFrameOutputOptions`](../interfaces/DepthFrameOutputOptions.mdx). *** ### createDeviceFactory() ```ts createDeviceFactory(): Promise ``` Asynchronously create a new [`CameraDeviceFactory`](CameraDeviceFactory.mdx). *** ### createFrameOutput(...) ```ts createFrameOutput(options: FrameOutputOptions): CameraFrameOutput ``` Create a new [`CameraFrameOutput`](CameraFrameOutput.mdx) with the given [`FrameOutputOptions`](../interfaces/FrameOutputOptions.mdx). *** ### createFrameRenderer() ```ts createFrameRenderer(): FrameRenderer ``` Create a new [`FrameRenderer`](FrameRenderer.mdx). *** ### createNormalizedMeteringPoint(...) ```ts createNormalizedMeteringPoint( x: number, y: number, size?: number): MeteringPoint ``` Creates a normalized [`MeteringPoint`](MeteringPoint.mdx), where `x` and `y` are values in the normalized range from 0.0 to 1.0. Your are responsible for handling orientation, cropping and scaling. #### Parameters ##### x The X coordinate ranging from 0.0 to 1.0 ##### y The Y coordinate ranging from 0.0 to 1.0 ##### size The size/radius of the [`MeteringPoint`](MeteringPoint.mdx) *** ### createObjectOutput(...) ```ts createObjectOutput(options: ObjectOutputOptions): CameraObjectOutput ``` Create a new [`CameraObjectOutput`](CameraObjectOutput.mdx) with the given [`ObjectOutputOptions`](../interfaces/ObjectOutputOptions.mdx). *** ### createOrientationManager(...) ```ts createOrientationManager(orientationSource: OrientationSource): OrientationManager ``` Creates a new [`OrientationManager`](OrientationManager.mdx). *** ### createOutputSynchronizer(...) ```ts createOutputSynchronizer(outputs: CameraOutput[]): CameraOutputSynchronizer ``` Create a new [`CameraOutputSynchronizer`](CameraOutputSynchronizer.mdx) that synchronizes the given [`outputs`](#createoutputsynchronizer). *** ### createPhotoOutput(...) ```ts createPhotoOutput(options: PhotoOutputOptions): CameraPhotoOutput ``` Create a new [`CameraPhotoOutput`](CameraPhotoOutput.mdx) with the given [`PhotoOutputOptions`](../interfaces/PhotoOutputOptions.mdx). *** ### createPreviewOutput() ```ts createPreviewOutput(): CameraPreviewOutput ``` Create a new [`CameraPreviewOutput`](CameraPreviewOutput.mdx). *** ### createTapToFocusGestureController() ```ts createTapToFocusGestureController(): TapToFocusGestureController ``` Creates a new [`TapToFocusGestureController`](TapToFocusGestureController.mdx). *** ### createVideoOutput(...) ```ts createVideoOutput(options: VideoOutputOptions): CameraVideoOutput ``` Create a new [`CameraVideoOutput`](CameraVideoOutput.mdx) with the given [`VideoOutputOptions`](../interfaces/VideoOutputOptions.mdx). *** ### createZoomGestureController() ```ts createZoomGestureController(): ZoomGestureController ``` Creates a new [`ZoomGestureController`](ZoomGestureController.mdx). *** ### requestCameraPermission() ```ts requestCameraPermission(): Promise ``` Request Camera permission. #### Returns `true` if Camera permission has now been granted, `false` otherwise. *** ### requestMicrophonePermission() ```ts requestMicrophonePermission(): Promise ``` Request Microphone permission. #### Returns `true` if Microphone permission has now been granted, `false` otherwise. *** ### resolveConstraints(...) ```ts resolveConstraints( device: CameraDevice, outputConfigurations: CameraOutputConfiguration[], constraints: Constraint[], requiresMultiCam?: boolean): Promise ``` Resolves the given [`constraints`](#resolveconstraints) to a fully validated [`CameraSessionConfig`](CameraSessionConfig.mdx) respecting the given [`device`](#resolveconstraints)'s capabilities negotiated with the given [`outputConfigurations`](#resolveconstraints). The given [`constraints`](#resolveconstraints) are ranked by priority in their order passed in the array, descending. The first item (index `0`) has highest priority, while the last item has lowest priority. #### Discussion On a device that supports every possible combination of features, the returned [`CameraSessionConfig`](CameraSessionConfig.mdx) features exactly what was described in the given [`constraints`](#resolveconstraints). Most devices however negotiate available features across the given [`outputConfigurations`](#resolveconstraints) because of bandwidth constraints or simply feature compatibility - for example, 10-bit Video HDR is often not supported when used in conjunction with 100+ FPS. Also, maximum available video resolution is often only available when using a lower photo resolution, and vice-versa. #### Discussion The `resolutionPreference` [`Constraint`](../type-aliases/Constraint.mdx) is optional, but may rank the given [`CameraOutput`](CameraOutput.mdx)'s resolution above other [`Constraint`](../type-aliases/Constraint.mdx)s. If a `resolutionPreference` [`Constraint`](../type-aliases/Constraint.mdx) is omitted, it is treated as last priority - other [`Constraint`](../type-aliases/Constraint.mdx)s shall be met first, if possible. #### Examples For a Photo HDR session configuration, use this: ```ts const device = ... const photoOutput = ... const config = await resolveConstraints( device, [photoOutput], [ { resolutionPreference: photoOutput }, { photoHDR: true }, ] ) ``` To also enable Video HDR (if available), but still prefer Photo HDR if both are not supported concurrently, use this: ```ts const device = ... const photoOutput = ... const videoOutput = ... const config = await resolveConstraints( device, [photoOutput, videoOutput], [ { resolutionPreference: photoOutput }, { resolutionPreference: videoOutput }, { photoHDR: true }, { videoDynamicRange: CommonDynamicRanges.ANY_HDR }, ] ) ``` --- # CameraFrameOutput Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/hybrid-objects/CameraFrameOutput --- title: CameraFrameOutput description: |- The CameraFrameOutput allows synchronously streaming Frames from the Camera, aka "Frame Processing". hybridParent: CameraOutput --- ```ts interface CameraFrameOutput extends CameraOutput ``` The `CameraFrameOutput` allows synchronously streaming [`Frame`](Frame.mdx)s from the Camera, aka "Frame Processing". #### See - [`FrameOutputOptions`](../interfaces/FrameOutputOptions.mdx) - [`useFrameOutput(...)`](../functions/useFrameOutput.mdx) #### Examples Creating a `CameraFrameOutput` via the Hooks API: ```ts const frameOutput = useFrameOutput({ pixelFormat: 'yuv', onFrame(frame) { 'worklet' frame.dispose() } }) ``` Creating a `CameraFrameOutput` via the Imperative API: ```ts const frameOutput = VisionCamera.createFrameOutput({ targetResolution: CommonResolutions.HD_16_9, pixelFormat: 'yuv', enablePreviewSizedOutputBuffers: false, allowDeferredStart: true, enablePhysicalBufferRotation: false, enableCameraMatrixDelivery: false, dropFramesWhileBusy: true, }) ``` ## Properties ### currentResolution? ```ts readonly optional currentResolution?: Size ``` The resolution that the underlying capture pipeline has resolved this [`CameraOutput`](CameraOutput.mdx) to, in sensor-native (un-rotated) pixels, or `undefined` if the output has not yet been connected to a [`CameraSession`](CameraSession.mdx). #### Discussion The selected [`Size`](../interfaces/Size.mdx) may differ from the requested [`Size`](../interfaces/Size.mdx) (e.g. from [`PhotoOutputOptions.targetResolution`](../interfaces/PhotoOutputOptions.mdx#targetresolution)), as the [`CameraSession`](CameraSession.mdx) negotiates resolutions across attached [`CameraOutput`](CameraOutput.mdx)s, connected [`CameraDevice`](CameraDevice.mdx) capabilities, and enabled [`Constraint`](../type-aliases/Constraint.mdx)s. #### Discussion For outputs that are not pixel-based (e.g. metadata-only outputs), this reports the resolution of the upstream video stream feeding the output, or `undefined` if no video input is attached. #### Inherited from [`CameraOutput`](CameraOutput.mdx).[`currentResolution`](CameraOutput.mdx#currentresolution) *** ### mediaType ```ts readonly mediaType: MediaType ``` The media type of the content being streamed by this [`CameraOutput`](CameraOutput.mdx). #### Inherited from [`CameraOutput`](CameraOutput.mdx).[`mediaType`](CameraOutput.mdx#mediatype) *** ### outputOrientation ```ts outputOrientation: CameraOrientation ``` Gets or sets the output orientation of this [`CameraOutput`](CameraOutput.mdx). Individual implementations of [`CameraOutput`](CameraOutput.mdx) may choose different strategies for implementing output orientation, for example: - A Photo output might apply orientation via EXIF flags. - A Video output might apply orientation via track transform metadata. - A Preview output might apply orientation via view transforms. - A Frame output might not apply orientation and only pass it as a property via the `Frame` object, unless explicitly configured to physically rotate buffers. #### Inherited from [`CameraOutput`](CameraOutput.mdx).[`outputOrientation`](CameraOutput.mdx#outputorientation) *** ### thread ```ts readonly thread: NativeThread ``` Get the [`NativeThread`](NativeThread.mdx) that this `CameraFrameOutput` is running on. This is the thread that [`setOnFrameCallback(...)`](#setonframecallback) callbacks run on. ## Methods ### setOnFrameCallback(...) ```ts setOnFrameCallback(onFrame: (frame: Frame) => boolean & object | undefined): void ``` Adds a callback that calls the given [`onFrame`](#setonframecallback) function every time the Camera produces a new [`Frame`](Frame.mdx). > [!WARNING] Throws > If not called on a Worklet/Runtime running on this [`thread`](#thread). *** ### setOnFrameDroppedCallback(...) ```ts setOnFrameDroppedCallback(onFrameDropped: | ((reason: FrameDroppedReason) => void) | undefined): void ``` Adds a callback that gets called when a [`Frame`](Frame.mdx) has been dropped. This often happens if your Frame Callback is taking longer than a frame interval. --- # CameraObjectOutput Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/hybrid-objects/CameraObjectOutput --- title: CameraObjectOutput description: |- The CameraObjectOutput allows scanning various objects (ScannedObject), faces (ScannedFace), or machine-readable codes (ScannedCode) in the Camera, using a platform-native detection algorithm. platforms: - iOS hybridParent: CameraOutput --- ```ts interface CameraObjectOutput extends CameraOutput ``` The `CameraObjectOutput` allows scanning various objects ([`ScannedObject`](ScannedObject.mdx)), faces ([`ScannedFace`](ScannedFace.mdx)), or machine-readable codes ([`ScannedCode`](ScannedCode.mdx)) in the Camera, using a platform-native detection algorithm. #### See - [`ObjectOutputOptions`](../interfaces/ObjectOutputOptions.mdx) - [`useObjectOutput(...)`](../functions/useObjectOutput.mdx) #### Examples Creating a `CameraObjectOutput` via the Hooks API: ```ts const objectOutput = useObjectOutput({ types: ['qr-code'], onObjectsScanned(objects) { console.log(`Scanned ${objects.length} objects!`) } }) ``` Creating a `CameraObjectOutput` via the Imperative API: ```ts const objectOutput = VisionCamera.createObjectOutput({ enabledObjectTypes: ['qr-code'], }) ``` ## Properties ### currentResolution? ```ts readonly optional currentResolution?: Size ``` The resolution that the underlying capture pipeline has resolved this [`CameraOutput`](CameraOutput.mdx) to, in sensor-native (un-rotated) pixels, or `undefined` if the output has not yet been connected to a [`CameraSession`](CameraSession.mdx). #### Discussion The selected [`Size`](../interfaces/Size.mdx) may differ from the requested [`Size`](../interfaces/Size.mdx) (e.g. from [`PhotoOutputOptions.targetResolution`](../interfaces/PhotoOutputOptions.mdx#targetresolution)), as the [`CameraSession`](CameraSession.mdx) negotiates resolutions across attached [`CameraOutput`](CameraOutput.mdx)s, connected [`CameraDevice`](CameraDevice.mdx) capabilities, and enabled [`Constraint`](../type-aliases/Constraint.mdx)s. #### Discussion For outputs that are not pixel-based (e.g. metadata-only outputs), this reports the resolution of the upstream video stream feeding the output, or `undefined` if no video input is attached. #### Inherited from [`CameraOutput`](CameraOutput.mdx).[`currentResolution`](CameraOutput.mdx#currentresolution) *** ### mediaType ```ts readonly mediaType: MediaType ``` The media type of the content being streamed by this [`CameraOutput`](CameraOutput.mdx). #### Inherited from [`CameraOutput`](CameraOutput.mdx).[`mediaType`](CameraOutput.mdx#mediatype) *** ### outputOrientation ```ts outputOrientation: CameraOrientation ``` Gets or sets the output orientation of this [`CameraOutput`](CameraOutput.mdx). Individual implementations of [`CameraOutput`](CameraOutput.mdx) may choose different strategies for implementing output orientation, for example: - A Photo output might apply orientation via EXIF flags. - A Video output might apply orientation via track transform metadata. - A Preview output might apply orientation via view transforms. - A Frame output might not apply orientation and only pass it as a property via the `Frame` object, unless explicitly configured to physically rotate buffers. #### Inherited from [`CameraOutput`](CameraOutput.mdx).[`outputOrientation`](CameraOutput.mdx#outputorientation) ## Methods ### setOnObjectsScannedCallback(...) ```ts setOnObjectsScannedCallback(onObjectsScanned: | ((objects: ScannedObject[]) => void) | undefined): void ``` Sets the [`onObjectsScanned`](#setonobjectsscannedcallback) callback. --- # CameraOutput Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/hybrid-objects/CameraOutput --- title: CameraOutput description: |- A CameraOutput is the base-class of all outputs that can be connected to the CameraSession. --- ```ts interface CameraOutput extends HybridObject ``` A `CameraOutput` is the base-class of all outputs that can be connected to the [`CameraSession`](CameraSession.mdx). #### Discussion You can extend the `CameraOutput` Nitro spec in native and conform to the `NativeCameraOutput` interface/protocol to create custom outputs which can be connected to the [`CameraSession`](CameraSession.mdx). This is useful for building custom capture pipelines, such as private HDR implementations, or fully custom video pipelines (e.g. for batching/segmenting video). #### Extended by - [`CameraDepthFrameOutput`](CameraDepthFrameOutput.mdx) - [`CameraFrameOutput`](CameraFrameOutput.mdx) - [`CameraObjectOutput`](CameraObjectOutput.mdx) - [`CameraPhotoOutput`](CameraPhotoOutput.mdx) - [`CameraPreviewOutput`](CameraPreviewOutput.mdx) - [`CameraVideoOutput`](CameraVideoOutput.mdx) ## Properties ### currentResolution? ```ts readonly optional currentResolution?: Size ``` The resolution that the underlying capture pipeline has resolved this `CameraOutput` to, in sensor-native (un-rotated) pixels, or `undefined` if the output has not yet been connected to a [`CameraSession`](CameraSession.mdx). #### Discussion The selected [`Size`](../interfaces/Size.mdx) may differ from the requested [`Size`](../interfaces/Size.mdx) (e.g. from [`PhotoOutputOptions.targetResolution`](../interfaces/PhotoOutputOptions.mdx#targetresolution)), as the [`CameraSession`](CameraSession.mdx) negotiates resolutions across attached `CameraOutput`s, connected [`CameraDevice`](CameraDevice.mdx) capabilities, and enabled [`Constraint`](../type-aliases/Constraint.mdx)s. #### Discussion For outputs that are not pixel-based (e.g. metadata-only outputs), this reports the resolution of the upstream video stream feeding the output, or `undefined` if no video input is attached. *** ### mediaType ```ts readonly mediaType: MediaType ``` The media type of the content being streamed by this `CameraOutput`. *** ### outputOrientation ```ts outputOrientation: CameraOrientation ``` Gets or sets the output orientation of this `CameraOutput`. Individual implementations of `CameraOutput` may choose different strategies for implementing output orientation, for example: - A Photo output might apply orientation via EXIF flags. - A Video output might apply orientation via track transform metadata. - A Preview output might apply orientation via view transforms. - A Frame output might not apply orientation and only pass it as a property via the `Frame` object, unless explicitly configured to physically rotate buffers. --- # CameraOutputSynchronizer Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/hybrid-objects/CameraOutputSynchronizer --- title: CameraOutputSynchronizer description: |- A CameraOutputSynchronizer synchronizes 2 or more CameraOutputs to align their timestamps. platforms: - iOS --- ```ts interface CameraOutputSynchronizer extends HybridObject ``` A `CameraOutputSynchronizer` synchronizes 2 or more [`CameraOutput`](CameraOutput.mdx)s to align their timestamps. The most common use-case is to synchronize a [`CameraFrameOutput`](CameraFrameOutput.mdx) and a [`CameraDepthFrameOutput`](CameraDepthFrameOutput.mdx) to ensure the delivered [`Frame`](Frame.mdx) and [`Depth`](Depth.mdx) are synchronized. When an output is connected to the `CameraOutputSynchronizer` you should no longer use its own frame callback, but instead use the [`setOnFramesCallback`](#setonframescallback) provided here. ## Properties ### outputs ```ts readonly outputs: CameraOutput[] ``` The list of [`CameraOutput`](CameraOutput.mdx)s that are connected to this `CameraOutputSynchronizer`. *** ### thread ```ts readonly thread: NativeThread ``` The [`NativeThread`](NativeThread.mdx) this `CameraOutputSynchronizer` is running on. ## Methods ### setOnFrameDroppedCallback(...) ```ts setOnFrameDroppedCallback(onFrameDropped: | ((frameType: MediaType, reason: FrameDroppedReason) => void) | undefined): void ``` Sets the callback that gets called when a [`Frame`](Frame.mdx) or [`Depth`](Depth.mdx)-frame has been dropped, possibly due to a long drift in timelines. *** ### setOnFramesCallback(...) ```ts setOnFramesCallback(onFrames: | (frames: (Depth | Frame)[]) => boolean & object | undefined): void ``` Set the callback to be called when a new set of synchronized Frames arrive. > [!NOTE] Note > This method has to be called on a Worklet running on this [`thread`](#thread). --- # CameraPhotoOutput Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/hybrid-objects/CameraPhotoOutput --- title: CameraPhotoOutput description: |- The CameraPhotoOutput allows capturing Photos in-memory, as well as directly to a file. hybridParent: CameraOutput --- ```ts interface CameraPhotoOutput extends CameraOutput ``` The `CameraPhotoOutput` allows capturing [`Photo`](Photo.mdx)s in-memory, as well as directly to a file. In-memory [`Photo`](Photo.mdx)s can be converted to Images for immediate display, and/or saved to a file (or the media gallery) later on. #### See - [`PhotoOutputOptions`](../interfaces/PhotoOutputOptions.mdx) - [`CapturePhotoSettings`](../interfaces/CapturePhotoSettings.mdx) - [`usePhotoOutput(...)`](../functions/usePhotoOutput.mdx) #### Examples Creating a `CameraPhotoOutput` via the Hooks API: ```ts const photoOutput = usePhotoOutput() ``` Creating a `CameraPhotoOutput` via the Imperative API: ```ts const photoOutput = VisionCamera.createPhotoOutput({ targetResolution: CommonResolutions.UHD_4_3, containerFormat: 'native', quality: 0.9, qualityPrioritization: 'balanced', }) ``` ## Properties ### currentResolution? ```ts readonly optional currentResolution?: Size ``` The resolution that the underlying capture pipeline has resolved this [`CameraOutput`](CameraOutput.mdx) to, in sensor-native (un-rotated) pixels, or `undefined` if the output has not yet been connected to a [`CameraSession`](CameraSession.mdx). #### Discussion The selected [`Size`](../interfaces/Size.mdx) may differ from the requested [`Size`](../interfaces/Size.mdx) (e.g. from [`PhotoOutputOptions.targetResolution`](../interfaces/PhotoOutputOptions.mdx#targetresolution)), as the [`CameraSession`](CameraSession.mdx) negotiates resolutions across attached [`CameraOutput`](CameraOutput.mdx)s, connected [`CameraDevice`](CameraDevice.mdx) capabilities, and enabled [`Constraint`](../type-aliases/Constraint.mdx)s. #### Discussion For outputs that are not pixel-based (e.g. metadata-only outputs), this reports the resolution of the upstream video stream feeding the output, or `undefined` if no video input is attached. #### Inherited from [`CameraOutput`](CameraOutput.mdx).[`currentResolution`](CameraOutput.mdx#currentresolution) *** ### mediaType ```ts readonly mediaType: MediaType ``` The media type of the content being streamed by this [`CameraOutput`](CameraOutput.mdx). #### Inherited from [`CameraOutput`](CameraOutput.mdx).[`mediaType`](CameraOutput.mdx#mediatype) *** ### outputOrientation ```ts outputOrientation: CameraOrientation ``` Gets or sets the output orientation of this [`CameraOutput`](CameraOutput.mdx). Individual implementations of [`CameraOutput`](CameraOutput.mdx) may choose different strategies for implementing output orientation, for example: - A Photo output might apply orientation via EXIF flags. - A Video output might apply orientation via track transform metadata. - A Preview output might apply orientation via view transforms. - A Frame output might not apply orientation and only pass it as a property via the `Frame` object, unless explicitly configured to physically rotate buffers. #### Inherited from [`CameraOutput`](CameraOutput.mdx).[`outputOrientation`](CameraOutput.mdx#outputorientation) *** ### supportsCameraCalibrationDataDelivery ```ts readonly supportsCameraCalibrationDataDelivery: boolean ``` get whether this `CameraPhotoOutput` supports delivering camera calibration data, e.g. for reconstructing lens-distortion or geometry. #### See [`CapturePhotoSettings.enableCameraCalibrationDataDelivery`](../interfaces/CapturePhotoSettings.mdx#enablecameracalibrationdatadelivery) *** ### supportsDepthDataDelivery ```ts readonly supportsDepthDataDelivery: boolean ``` Get whether this `CameraPhotoOutput` supports capturing depth data alongside with a normal [`Photo`](Photo.mdx), e.g. for portrait effects matte. #### See [`CapturePhotoSettings.enableDepthData`](../interfaces/CapturePhotoSettings.mdx#enabledepthdata) ## Methods ### capturePhoto(...) ```ts capturePhoto(settings: CapturePhotoSettings, callbacks: CapturePhotoCallbacks): Promise ``` Captures a [`Photo`](Photo.mdx) using the given [`CapturePhotoSettings`](../interfaces/CapturePhotoSettings.mdx). > [!NOTE] Note > On Android, it is recommended to use > [`capturePhoto(...)`](#capturephoto) only > for [`'jpeg'`](../type-aliases/TargetPhotoContainerFormat.mdx) images, and use > [`capturePhotoToFile(...)`](#capturephototofile) > for any other formats (such as RAW ([`'dng'`](../type-aliases/TargetPhotoContainerFormat.mdx)), > as CameraX does not properly support in-memory Photos for formats like RAW yet. > See https://issuetracker.google.com/u/3/issues/482079661 for more information. > [!NOTE] Note > The [`Photo`](Photo.mdx) has to be `dispose()`'d after it > is no longer used, as otherwise the JS Runtime might not > immediately delete it, possibly exhausting system resources. #### Example ```ts const photo = await photoOutput.capturePhoto( { flashMode: 'on' }, {} ) // ... photo.dispose() ``` *** ### capturePhotoToFile(...) ```ts capturePhotoToFile(settings: CapturePhotoSettings, callbacks: CapturePhotoCallbacks): Promise ``` Captures a Photo and writes it to a temporary file using the given [`CapturePhotoSettings`](../interfaces/CapturePhotoSettings.mdx). #### Example ```ts const photoFile = await photoOutput.capturePhotoToFile( { flashMode: 'on' }, {} ) ``` *** ### prepareSettings(...) ```ts prepareSettings(settings: CapturePhotoSettings[]): Promise ``` Asynchronously prepares the `CameraPhotoOutput` with the given [`settings`](#preparesettings) array to improve capture responsiveness for subsequent [`capturePhoto(...)`](#capturephoto) calls when called with any of the same [`CapturePhotoSettings`](../interfaces/CapturePhotoSettings.mdx) that have been prepared via this method. #### Discussion It is recommended to always call this with a few common settings you expect to be used for [`capturePhoto(...)`](#capturephoto) later on. It is perfectly fine to not call [`prepareSettings(...)`](#preparesettings) when using Photo capture, but [`capturePhoto(...)`](#capturephoto) may allocate buffers that cause higher latency on initial calls when aiming for quality. On Android, this method is no-op. #### Example ```ts const photoOutput = usePhotoOutput({}) useEffect(() => { photoOutput.prepareSettings([ { flashMode: 'off', enableDistortionCorrection: true }, { flashMode: 'on', enableDistortionCorrection: false }, ]) }, []) ``` --- # CameraPreviewOutput Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/hybrid-objects/CameraPreviewOutput --- title: CameraPreviewOutput description: Represents the CameraOutput for preview. hybridParent: CameraOutput --- ```ts interface CameraPreviewOutput extends CameraOutput ``` Represents the [`CameraOutput`](CameraOutput.mdx) for preview. The `CameraPreviewOutput` needs to be connected to the [`CameraSession`](CameraSession.mdx) as an output, as well as to a [`PreviewView`](../type-aliases/PreviewView.mdx) as a target. #### Examples Creating a `CameraPreviewOutput` via the Hooks API: ```ts const previewOutput = usePreviewOutput() ``` Creating a `CameraPreviewOutput` via the Imperative API: ```ts const previewOutput = VisionCamera.createPreviewOutput() ``` ## Properties ### currentResolution? ```ts readonly optional currentResolution?: Size ``` The resolution that the underlying capture pipeline has resolved this [`CameraOutput`](CameraOutput.mdx) to, in sensor-native (un-rotated) pixels, or `undefined` if the output has not yet been connected to a [`CameraSession`](CameraSession.mdx). #### Discussion The selected [`Size`](../interfaces/Size.mdx) may differ from the requested [`Size`](../interfaces/Size.mdx) (e.g. from [`PhotoOutputOptions.targetResolution`](../interfaces/PhotoOutputOptions.mdx#targetresolution)), as the [`CameraSession`](CameraSession.mdx) negotiates resolutions across attached [`CameraOutput`](CameraOutput.mdx)s, connected [`CameraDevice`](CameraDevice.mdx) capabilities, and enabled [`Constraint`](../type-aliases/Constraint.mdx)s. #### Discussion For outputs that are not pixel-based (e.g. metadata-only outputs), this reports the resolution of the upstream video stream feeding the output, or `undefined` if no video input is attached. #### Inherited from [`CameraOutput`](CameraOutput.mdx).[`currentResolution`](CameraOutput.mdx#currentresolution) *** ### mediaType ```ts readonly mediaType: MediaType ``` The media type of the content being streamed by this [`CameraOutput`](CameraOutput.mdx). #### Inherited from [`CameraOutput`](CameraOutput.mdx).[`mediaType`](CameraOutput.mdx#mediatype) *** ### outputOrientation ```ts outputOrientation: CameraOrientation ``` Gets or sets the output orientation of this [`CameraOutput`](CameraOutput.mdx). Individual implementations of [`CameraOutput`](CameraOutput.mdx) may choose different strategies for implementing output orientation, for example: - A Photo output might apply orientation via EXIF flags. - A Video output might apply orientation via track transform metadata. - A Preview output might apply orientation via view transforms. - A Frame output might not apply orientation and only pass it as a property via the `Frame` object, unless explicitly configured to physically rotate buffers. #### Inherited from [`CameraOutput`](CameraOutput.mdx).[`outputOrientation`](CameraOutput.mdx#outputorientation) --- # CameraSession Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/hybrid-objects/CameraSession --- title: CameraSession description: Represents a Camera Session. --- ```ts interface CameraSession extends HybridObject ``` Represents a Camera Session. A Camera Session can have [`CameraSessionConnection`](../interfaces/CameraSessionConnection.mdx)s to stream from an input device ([`CameraDevice`](CameraDevice.mdx)) to an output ([`CameraOutput`](CameraOutput.mdx)). It is recommended to configure the `CameraSession` properly before starting it ([`start()`](#start)) to avoid reconfiguration hiccups. You can create and use a Camera Session via the [`useCamera(...)`](../functions/useCamera.mdx) hook, or by using the imperative APIs directly, which gives you more control over individual properties like [`mirrorMode`](../interfaces/CameraOutputConfiguration.mdx#mirrormode) per output, or multi-cam `CameraSession`s. #### Examples Create a Camera Session with the default 'back' CameraDevice using the hooks API: ```ts const photoOutput = ... const camera = useCamera({ isActive: true, input: 'back', outputs: [photoOutput] }) ``` Create a Camera Session with a custom CameraDevice using the hooks API: ```ts const device = ... const photoOutput = ... const camera = useCamera({ isActive: true, input: device, outputs: [photoOutput] }) ``` Create a single Camera Session using the imperative API: ```ts const session = await VisionCamera.createCameraSession(false) const [controller] = await session.configure([ { input: device, outputs: [ { output: previewOutput, mirrorMode: 'auto' }, { output: photoOutput, mirrorMode: 'auto' }, ], constraints: [] } ]) await session.start() ``` Create a multi-cam Camera Session to stream from both the front-, and back-Camera using the imperative API: ```ts if (VisionCamera.supportsMultiCamSessions) { const deviceFactory = await VisionCamera.createDeviceFactory() const deviceCombinations = deviceFactory.supportedMultiCamDeviceCombinations // ... get `frontDevice` and `backDevice` from one of // the combinations in `deviceCombinations`. const session = await VisionCamera.createCameraSession(true) const [frontController, backController] = await session.configure([ // Front Camera { input: frontDevice, outputs: [ { output: frontPreviewOutput, mirrorMode: 'on' }, { output: frontPhotoOutput, mirrorMode: 'off' }, ], constraints: [] }, // Back Camera { input: backDevice, outputs: [ { output: backPreviewOutput, mirrorMode: 'off' }, { output: backPhotoOutput, mirrorMode: 'off' }, ], constraints: [] } ]) await session.start() } ``` ## Properties ### isRunning ```ts readonly isRunning: boolean ``` Gets whether this `CameraSession` is currently running, or not. ## Methods ### addOnErrorListener(...) ```ts addOnErrorListener(onError: (error: Error) => void): ListenerSubscription ``` Adds a listener to when the `CameraSession` encountered an error. *** ### addOnInterruptionEndedListener(...) ```ts addOnInterruptionEndedListener(onInterruptionEnded: () => void): ListenerSubscription ``` Adds a listener to when a `CameraSession` interruption has ended and the Camera continues to run again. *** ### addOnInterruptionStartedListener(...) ```ts addOnInterruptionStartedListener(onInterruptionStarted: (reason: InterruptionReason) => void): ListenerSubscription ``` Adds a listener to when the `CameraSession` was interrupted, for example when the phone overheated, or the user received a FaceTime call. *** ### addOnStartedListener(...) ```ts addOnStartedListener(onStarted: () => void): ListenerSubscription ``` Adds a listener to when the `CameraSession` started running. *** ### addOnStoppedListener(...) ```ts addOnStoppedListener(onStopped: () => void): ListenerSubscription ``` Adds a listener to when the `CameraSession` stopped running. *** ### configure(...) ```ts configure(connections: CameraSessionConnection[], config?: CameraSessionConfiguration): Promise ``` Configures the `CameraSession` with the given [`connections`](#configure), and returns one [`CameraController`](CameraController.mdx) per [`CameraSessionConnection`](../interfaces/CameraSessionConnection.mdx). One [`CameraSessionConnection`](../interfaces/CameraSessionConnection.mdx) defines a connection from one [`CameraDevice`](CameraDevice.mdx) (the _input_) to multiple [`CameraOutput`](CameraOutput.mdx)s (the _outputs_). #### Parameters ##### connections The list of connections from one _input_ to multiple _outputs_. If this `CameraSession` was created as a multi-cam session (see [`createCameraSession(enableMultiCam)`](CameraFactory.mdx#createcamerasession)), you can add multiple [`CameraSessionConnection`](../interfaces/CameraSessionConnection.mdx)s. ##### config Configures session-wide configuration, such as [`CameraSessionConfiguration.allowBackgroundAudioPlayback`](../interfaces/CameraSessionConfiguration.mdx#allowbackgroundaudioplayback). #### Returns One [`CameraController`](CameraController.mdx) per [`CameraSessionConnection`](../interfaces/CameraSessionConnection.mdx). > [!NOTE] Note > In a Multi-Cam Camera Session, the given [`connections`](#configure)' input devices > must be supported to be used together in a Multi-Cam Camera Session, as not every > [`CameraDevice`](CameraDevice.mdx) can be used with every other [`CameraDevice`](CameraDevice.mdx) > simultaneously. See [`CameraDeviceFactory.supportedMultiCamDeviceCombinations`](CameraDeviceFactory.mdx#supportedmulticamdevicecombinations) > for a full list of supported combinations. > [!NOTE] Note > Some supported combinations can contain a single virtual > [`CameraDevice`](CameraDevice.mdx), such as an iOS Dual- or Triple-Camera. Pass the > returned devices directly to [`configure(...)`](#configure) instead > of expanding virtual devices via [`CameraDevice.physicalDevices`](CameraDevice.mdx#physicaldevices). > [!WARNING] Throws > If Camera Permission has not been granted - see [`CameraFactory.cameraPermissionStatus`](CameraFactory.mdx#camerapermissionstatus) > [!WARNING] Throws > If multiple [`connections`](#configure) are added, but the > `CameraSession` was not created as a multi-cam session. > [!WARNING] Throws > If hardware resources are being exhausted by too large connection graphs. > [!WARNING] Throws > If this is a Multi-Cam session, but the connection inputs are not supported to > be used together - see [`CameraDeviceFactory.supportedMultiCamDeviceCombinations`](CameraDeviceFactory.mdx#supportedmulticamdevicecombinations) #### Examples Creating a simple Preview + Photo connection for the default 'back' CameraDevice: ```ts const session = ... const [controller] = await session.configure([ { input: 'back', outputs: [ { output: previewOutput, mirrorMode: 'auto' }, { output: photoOutput, mirrorMode: 'auto' }, ], constraints: [] } ]) ``` Creating a simple Preview + Photo connection with a custom CameraDevice: ```ts const session = ... const device = ... const [controller] = await session.configure([ { input: device, outputs: [ { output: previewOutput, mirrorMode: 'auto' }, { output: photoOutput, mirrorMode: 'auto' }, ], constraints: [] } ]) ``` Configuring constraints (e.g. 60 FPS): ```ts const session = ... const device = ... const [controller] = await session.configure([ { input: device, outputs: [ { output: previewOutput, mirrorMode: 'auto' }, { output: photoOutput, mirrorMode: 'auto' }, ], constraints: [ { fps: 60 } ] } ]) await session.start() ``` Creating a multi-cam session with front- and back Camera: ```ts if (VisionCamera.supportsMultiCamSessions) { const deviceFactory = await VisionCamera.createDeviceFactory() const deviceCombinations = deviceFactory.supportedMultiCamDeviceCombinations // ... get `frontDevice` and `backDevice` from one of // the combinations in `deviceCombinations`. const session = await VisionCamera.createCameraSession(true) const [frontController, backController] = await session.configure([ // Front Camera { input: frontDevice, outputs: [ { output: frontPreviewOutput, mirrorMode: 'on' }, { output: frontPhotoOutput, mirrorMode: 'off' }, ], constraints: [] }, // Back Camera { input: backDevice, outputs: [ { output: backPreviewOutput, mirrorMode: 'off' }, { output: backPhotoOutput, mirrorMode: 'off' }, ], constraints: [] } ]) await session.start() } ``` *** ### start() ```ts start(): Promise ``` Starts the `CameraSession`. To avoid any runtime hiccups, it's good practice to configure everything via [`configure(...)`](#configure) before starting the `CameraSession`. *** ### stop() ```ts stop(): Promise ``` Stops the `CameraSession`. --- # CameraSessionConfig Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/hybrid-objects/CameraSessionConfig --- title: CameraSessionConfig description: Session-level configuration for a CameraSession. --- ```ts interface CameraSessionConfig extends HybridObject ``` Session-level configuration for a [`CameraSession`](CameraSession.mdx). You can check if a specific `CameraSessionConfig` is supported via [`CameraDevice.isSessionConfigSupported(...)`](CameraDevice.mdx#issessionconfigsupported). ## Properties ### autoFocusSystem ```ts readonly autoFocusSystem: AutoFocusSystem ``` Get the [`AutoFocusSystem`](../type-aliases/AutoFocusSystem.mdx) used by this `CameraSessionConfig`. *** ### isBinned ```ts readonly isBinned: boolean ``` Gets whether this `CameraSessionConfig` is streaming in a binned format. #### Discussion Pixel binning combines multiple neighboring sensor pixels into one larger effective pixel. This usually improves low-light sensitivity and reduces noise, but can trade away fine detail compared to a full-resolution non-binned readout. Additionally, binned formats are more performant as they use significantly less bandwidth. *** ### isPhotoHDREnabled ```ts readonly isPhotoHDREnabled: boolean ``` Gets whether Photo HDR is enabled, or not. *** ### nativePixelFormat ```ts readonly nativePixelFormat: PixelFormat ``` Gets the [`PixelFormat`](../type-aliases/PixelFormat.mdx) this config is natively streaming in. #### Discussion If [`nativePixelFormat`](#nativepixelformat) is the same [`PixelFormat`](../type-aliases/PixelFormat.mdx) as the requested pixel format of your streaming output (e.g. a [`CameraFrameOutput`](CameraFrameOutput.mdx)), no conversion has to take place to stream [`Frame`](Frame.mdx)s, which provides better performance and lower latency. If these pixel formats differ, pixel format conversions take place causing higher latency which ultimately causes lower throughput and higher battery usage. *** ### selectedFPS? ```ts readonly optional selectedFPS?: number ``` Gets the currently selected FPS, or `undefined` if no specific FPS value has been selected. *** ### selectedPreviewStabilizationMode? ```ts readonly optional selectedPreviewStabilizationMode?: TargetStabilizationMode ``` Gets the currently selected [`TargetStabilizationMode`](../type-aliases/TargetStabilizationMode.mdx) for Preview Streams (e.g. [`CameraPreviewOutput`](CameraPreviewOutput.mdx)), or `undefined` if no specific stabilization mode has been configured. *** ### selectedVideoDynamicRange? ```ts readonly optional selectedVideoDynamicRange?: TargetDynamicRange ``` Gets the currently selected [`DynamicRange`](../interfaces/DynamicRange.mdx) for Video Streams (e.g. [`CameraVideoOutput`](CameraVideoOutput.mdx)), or `undefined` if no specific dynamic range has been configured. *** ### selectedVideoStabilizationMode? ```ts readonly optional selectedVideoStabilizationMode?: TargetStabilizationMode ``` Gets the currently selected [`TargetStabilizationMode`](../type-aliases/TargetStabilizationMode.mdx) for Video Streams (e.g. [`CameraVideoOutput`](CameraVideoOutput.mdx)), or `undefined` if no specific stabilization mode has been configured. --- # CameraVideoOutput Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/hybrid-objects/CameraVideoOutput --- title: CameraVideoOutput description: |- A Video output allows recording videos (possibly with audio) to a file. tocPlatforms: getSupportedVideoCodecs(): - iOS setOutputSettings(...): - iOS hybridParent: CameraOutput --- ```ts interface CameraVideoOutput extends CameraOutput ``` A Video output allows recording videos (possibly with audio) to a file. #### See - [`VideoOutputOptions`](../interfaces/VideoOutputOptions.mdx) - [`Recorder`](Recorder.mdx) - [`useVideoOutput(...)`](../functions/useVideoOutput.mdx) #### Examples Creating a `CameraVideoOutput` via the Hooks API: ```ts const videoOutput = useVideoOutput() ``` Creating a `CameraVideoOutput` via the Imperative API: ```ts const videoOutput = VisionCamera.createVideoOutput({ targetResolution: CommonResolutions.FHD_16_9, }) ``` ## Properties ### currentResolution? ```ts readonly optional currentResolution?: Size ``` The resolution that the underlying capture pipeline has resolved this [`CameraOutput`](CameraOutput.mdx) to, in sensor-native (un-rotated) pixels, or `undefined` if the output has not yet been connected to a [`CameraSession`](CameraSession.mdx). #### Discussion The selected [`Size`](../interfaces/Size.mdx) may differ from the requested [`Size`](../interfaces/Size.mdx) (e.g. from [`PhotoOutputOptions.targetResolution`](../interfaces/PhotoOutputOptions.mdx#targetresolution)), as the [`CameraSession`](CameraSession.mdx) negotiates resolutions across attached [`CameraOutput`](CameraOutput.mdx)s, connected [`CameraDevice`](CameraDevice.mdx) capabilities, and enabled [`Constraint`](../type-aliases/Constraint.mdx)s. #### Discussion For outputs that are not pixel-based (e.g. metadata-only outputs), this reports the resolution of the upstream video stream feeding the output, or `undefined` if no video input is attached. #### Inherited from [`CameraOutput`](CameraOutput.mdx).[`currentResolution`](CameraOutput.mdx#currentresolution) *** ### mediaType ```ts readonly mediaType: MediaType ``` The media type of the content being streamed by this [`CameraOutput`](CameraOutput.mdx). #### Inherited from [`CameraOutput`](CameraOutput.mdx).[`mediaType`](CameraOutput.mdx#mediatype) *** ### outputOrientation ```ts outputOrientation: CameraOrientation ``` Gets or sets the output orientation of this [`CameraOutput`](CameraOutput.mdx). Individual implementations of [`CameraOutput`](CameraOutput.mdx) may choose different strategies for implementing output orientation, for example: - A Photo output might apply orientation via EXIF flags. - A Video output might apply orientation via track transform metadata. - A Preview output might apply orientation via view transforms. - A Frame output might not apply orientation and only pass it as a property via the `Frame` object, unless explicitly configured to physically rotate buffers. #### Inherited from [`CameraOutput`](CameraOutput.mdx).[`outputOrientation`](CameraOutput.mdx#outputorientation) ## Methods ### createRecorder(...) ```ts createRecorder(settings: RecorderSettings): Promise ``` Creates and prepares a new [`Recorder`](Recorder.mdx) instance with the given [`RecorderSettings`](../interfaces/RecorderSettings.mdx). The [`Recorder`](Recorder.mdx) will record to the configured file path, or to a temporary file if no path was provided. The [`Recorder`](Recorder.mdx)'s file paths are filesystem paths, not `file://` URLs. It can only record once. If you want to create a second recording, you must create a new [`Recorder`](Recorder.mdx). *** ### getSupportedVideoCodecs() ```ts getSupportedVideoCodecs(): VideoCodec[] ``` Get all supported [`VideoCodecs`](../type-aliases/VideoCodec.mdx) this `CameraVideoOutput` currently can record in. This method must be called after the `CameraVideoOutput` has been attached to a Camera Session. > [!WARNING] Throws > This method throws if you call it before this output > is attached to a Camera Session (via `configure(...)`) *** ### setOutputSettings(...) ```ts setOutputSettings(settings: VideoOutputSettings): Promise ``` Set the output settings for this video output. This method must be called after the output has been attached to the Camera Session, and before [`createRecorder(...)`](#createrecorder). --- # Depth Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/hybrid-objects/Depth --- title: Depth description: |- A Depth Frame is a frame captured from a CameraDepthFrameOutput. tocPlatforms: cameraCalibrationData?: - iOS --- ```ts interface Depth extends HybridObject ``` A `Depth` Frame is a frame captured from a [`CameraDepthFrameOutput`](CameraDepthFrameOutput.mdx). It contains depth data which can be accessed via native plugins, or from JS using [`getDepthData()`](#getdepthdata). The depth's format ([`pixelFormat`](#pixelformat)) specifies the returned `ArrayBuffer`'s format. Depth data has to be disposed (see [`dispose()`](https://nitro.margelo.com/docs/hybrid-objects)) to free up the memory, otherwise the producing pipeline might stall. ## Properties ### availableDepthPixelFormats ```ts readonly availableDepthPixelFormats: DepthPixelFormat[] ``` Gets the list of [`DepthPixelFormats`](../type-aliases/DepthPixelFormat.mdx) this `Depth` can be converted to using [`convert(...)`](#convert). > [!NOTE] Note > If this `Depth` is invalid ([`isValid`](#isvalid)), this returns an empty array (`[]`). > [!NOTE] Note > Some platforms may return an empty array (`[]`) if conversion is not supported. *** ### bytesPerRow ```ts readonly bytesPerRow: number ``` Get the number of bytes per row of the underlying pixel buffer. This may return `0` if the `Depth` is planar. #### See - [`width`](#width) - [`getDepthData()`](#getdepthdata) *** ### cameraCalibrationData? ```ts readonly optional cameraCalibrationData?: CameraCalibrationData ``` Gets the associated [`CameraCalibrationData`](CameraCalibrationData.mdx) for this `Depth`, if available. Camera calibration data can be used to project depth values into camera/world coordinates with higher accuracy. *** ### depthDataAccuracy ```ts readonly depthDataAccuracy: DepthDataAccuracy ``` Gets the measurement accuracy of this `Depth`. - [`'absolute'`](../type-aliases/DepthDataAccuracy.mdx): The depth values represent absolute distances. - [`'relative'`](../type-aliases/DepthDataAccuracy.mdx): The depth values represent relative distances. - [`'unknown'`](../type-aliases/DepthDataAccuracy.mdx): Accuracy is unknown or unavailable. > [!NOTE] Note > If this `Depth` is invalid ([`isValid`](#isvalid)), this just returns > [`'unknown'`](../type-aliases/DepthDataAccuracy.mdx). *** ### depthDataQuality ```ts readonly depthDataQuality: DepthDataQuality ``` Gets the quality classification of this `Depth`. - [`'high'`](../type-aliases/DepthDataQuality.mdx): High quality depth data. - [`'low'`](../type-aliases/DepthDataQuality.mdx): Lower quality depth data. - [`'unknown'`](../type-aliases/DepthDataQuality.mdx): Quality is unknown or unavailable. > [!NOTE] Note > If this `Depth` is invalid ([`isValid`](#isvalid)), this just returns > [`'unknown'`](../type-aliases/DepthDataQuality.mdx). *** ### height ```ts readonly height: number ``` Gets the total height of this `Depth`. > [!NOTE] Note > If this `Depth` is invalid ([`isValid`](#isvalid)), this may return `0`. *** ### isDepthDataFiltered ```ts readonly isDepthDataFiltered: boolean ``` Gets whether the depth map has been filtered/smoothed by the platform. Filtering typically reduces noise and smoothens out uneven spots in the depth map at the cost of some fine detail. > [!NOTE] Note > If this metadata is unavailable for this `Depth`, this may be `false`. *** ### isMirrored ```ts readonly isMirrored: boolean ``` Gets whether this `Depth` frame is mirrored alongside the vertical axis. *** ### isValid ```ts readonly isValid: boolean ``` Gets whether this `Depth` is still valid, or not. If the Depth is invalid, you cannot access its data anymore. A Depth is automatically invalidated via [`dispose()`](https://nitro.margelo.com/docs/hybrid-objects). *** ### orientation ```ts readonly orientation: CameraOrientation ``` The rotation of this `Depth` relative to the associated [`CameraDepthFrameOutput`](CameraDepthFrameOutput.mdx)'s target output orientation. Depth data is not automatically rotated to `'up'` because physically rotating buffers is expensive. The Camera streams depth frames in the hardware's native orientation and adjusts presentation later using metadata, transforms, or here; a flag. #### Discussion If you process this `Depth`, **you** must interpret its pixel data to be rotated by this `orientation`. *** ### pixelFormat ```ts readonly pixelFormat: DepthPixelFormat ``` Gets the [`DepthPixelFormat`](../type-aliases/DepthPixelFormat.mdx) of this `Depth` Frame's pixel data. Common formats are [`'depth-16-bit'`](../type-aliases/DepthPixelFormat.mdx) for depth frames, or [`'disparity-16-bit'`](../type-aliases/DepthPixelFormat.mdx) for disparity frames. > [!NOTE] Note > If this `Depth` frame is invalid ([`isValid`](#isvalid)), > this just returns [`'unknown'`](../type-aliases/DepthPixelFormat.mdx). *** ### timestamp ```ts readonly timestamp: number ``` Gets the presentation timestamp this `Depth` was timed at. > [!NOTE] Note > If this `Depth` is invalid ([`isValid`](#isvalid)), this may return `0`. *** ### width ```ts readonly width: number ``` Gets the total width of this `Depth`. > [!NOTE] Note > If this `Depth` is invalid ([`isValid`](#isvalid)), this may return `0`. ## Methods ### convert(...) ```ts convert(pixelFormat: DepthPixelFormat): Depth ``` Converts this `Depth` frame to the target [`pixelFormat`](#convert). The [`pixelFormat`](#convert) must be one of the [`DepthPixelFormat`](../type-aliases/DepthPixelFormat.mdx)s returned from [`availableDepthPixelFormats`](#availabledepthpixelformats). *** ### convertAsync(...) ```ts convertAsync(pixelFormat: DepthPixelFormat): Promise ``` Asynchronously converts this `Depth` frame to the target [`pixelFormat`](#convertasync). The [`pixelFormat`](#convertasync) must be one of the [`DepthPixelFormat`](../type-aliases/DepthPixelFormat.mdx)s returned from [`availableDepthPixelFormats`](#availabledepthpixelformats). *** ### convertCameraPointToDepthPoint(...) ```ts convertCameraPointToDepthPoint(cameraPoint: Point): Point ``` Converts the given [`cameraPoint`](#convertcamerapointtodepthpoint) in camera sensor coordinates into a [`Point`](../interfaces/Point.mdx) in Depth coordinates, relative to this `Depth`. > [!NOTE] Note > Camera sensor coordinates are not necessarily normalized from `0.0` to `1.0`. Some implementations may have a different opaque coordinate system. #### Example ```ts const cameraPoint = { x: 0.5, y: 0.5 } const depthPoint = depth.convertCameraPointToDepthPoint(cameraPoint) console.log(depthPoint) // { x: 960, y: 360 } ``` *** ### convertDepthPointToCameraPoint(...) ```ts convertDepthPointToCameraPoint(depthPoint: Point): Point ``` Converts the given [`depthPoint`](#convertdepthpointtocamerapoint) in Depth coordinates relative to this `Depth` into a [`Point`](../interfaces/Point.mdx) in camera sensor coordinates. > [!NOTE] Note > Camera sensor coordinates are not necessarily normalized from `0.0` to `1.0`. Some implementations may have a different opaque coordinate system. #### Example ```ts const depthPoint = { x: depth.width / 2, y: depth.height / 2 } const cameraPoint = depth.convertDepthPointToCameraPoint(depthPoint) console.log(cameraPoint) // { x: 0.5, y: 0.5 } ``` *** ### getDepthData() ```ts getDepthData(): ArrayBuffer ``` Gets the `Depth`'s depth data as a full contiguous `ArrayBuffer`. #### Discussion This does **not** perform a copy, but since the `Depth`'s data is stored on the GPU, it might lazily perform a GPU -> CPU download. #### Discussion Once the `Depth` frame gets invalidated ([`isValid`](#isvalid) == false), this ArrayBuffer is no longer safe to access. > [!WARNING] Throws > If this Depth is invalid ([`isValid`](#isvalid)). *** ### getNativeBuffer() ```ts getNativeBuffer(): NativeBuffer ``` Get a [`NativeBuffer`](../interfaces/NativeBuffer.mdx) that points to this `Depth` frame. This is a shared contract between libraries to pass native buffers around without natively typed bindings. The [`NativeBuffer`](../interfaces/NativeBuffer.mdx) must be released again by its consumer via [`release()`](../interfaces/NativeBuffer.mdx#release), otherwise the Camera pipeline might stall. *** ### rotate(...) ```ts rotate(orientation: CameraOrientation, isMirrored: boolean): Depth ``` Returns a derivative `Depth` frame by rotating it to the specified [`orientation`](#rotate), and potentially mirroring it. *** ### rotateAsync(...) ```ts rotateAsync(orientation: CameraOrientation, isMirrored: boolean): Promise ``` Asynchronously returns a derivative `Depth` frame by rotating it to the specified [`orientation`](#rotateasync), and potentially mirroring it. *** ### toFrame() ```ts toFrame(): Frame ``` Converts this `Depth` frame to a [`Frame`](Frame.mdx). The resulting [`Frame`](Frame.mdx) will contain the depth/disparity data in the current depth/disparity Format. You must release the resulting [`Frame`](Frame.mdx) again manually using [`Frame.dispose()`](https://nitro.margelo.com/docs/hybrid-objects). *** ### toFrameAsync() ```ts toFrameAsync(): Promise ``` Asynchronously converts this `Depth` frame to a [`Frame`](Frame.mdx). The resulting [`Frame`](Frame.mdx) will contain the depth/disparity data in the current depth/disparity Format. You must release the resulting [`Frame`](Frame.mdx) again manually using [`Frame.dispose()`](https://nitro.margelo.com/docs/hybrid-objects). --- # Frame Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/hybrid-objects/Frame --- title: Frame description: Represents a single Frame the Camera "sees". tocPlatforms: cameraIntrinsicMatrix?: - iOS --- ```ts interface Frame extends HybridObject ``` Represents a single Frame the Camera "sees". #### Discussion Typically, a [`CameraOutput`](CameraOutput.mdx) like [`CameraFrameOutput`](CameraFrameOutput.mdx) produces instances of this type. #### Discussion The Frame is either **planar** or **non-planar** ([`isPlanar`](#isplanar)). - A **planar** Frame's (often YUV) pixel data can be accessed on the CPU via [`Frame.getPlanes()`](#getplanes), where each [`FramePlane`](FramePlane.mdx) represents one plane of the pixel data. In YUV, this is often 1 **Y** Plane in full resolution, and 1 **UV** Plane in half resolution. In this case, [`Frame.getPixelBuffer()`](#getpixelbuffer)'s behaviour is undefined - sometimes it contains the whole pixel data in a contiguous block of memory, sometimes it just contains the data in the control block. - A **non-planar** Frame's (often RGB) pixel data can be accessed on the CPU via [`Frame.getPixelBuffer()`](#getpixelbuffer) as one contiguous block of memory. In this case, [`Frame.getPlanes()`](#getplanes) will return an empty array (`[]`). It is recommended to not rely on [`Frame.getPixelBuffer()`](#getpixelbuffer) for **planar** Frames. #### Discussion Frames have to be disposed (see [`dispose()`](https://nitro.margelo.com/docs/hybrid-objects)) to free up the memory, otherwise the producing pipeline might stall. ## Properties ### bytesPerRow ```ts readonly bytesPerRow: number ``` Get the number of bytes per row of the underlying pixel buffer. This may return `0` if the [`Depth`](Depth.mdx) is planar, in which case you should get the number of bytes per row of individual planes using [`getPlanes()`](#getplanes) / [`FramePlane.bytesPerRow`](FramePlane.mdx#bytesperrow). #### See - [`width`](#width) - [`getPixelBuffer()`](#getpixelbuffer) *** ### cameraIntrinsicMatrix? ```ts readonly optional cameraIntrinsicMatrix?: number[] ``` Gets the Camera intrinsic matrix for this Frame. The returned array is a 3x3 matrix with column-major ordering. Its origin is the top-left of the Frame. ``` K = [ fx 0 cx ] [ 0 fy cy ] [ 0 0 1 ] ``` - `fx`, `fy`: focal length in pixels - `cx`, `cy`: principal point in pixels > [!NOTE] Note > The `Frame` only has a Camera intrinsic matrix attached > if [`enableCameraMatrixDelivery`](../interfaces/FrameOutputOptions.mdx#enablecameramatrixdelivery) > is set to true on the `CameraFrameOutput`. #### Example ```ts const matrix = frame.cameraIntrinsicMatrix const fx = matrix[0] const fy = matrix[4] ``` *** ### hasNativeBuffer ```ts readonly hasNativeBuffer: boolean ``` Get whether this `Frame` has a Native Buffer attached to it. #### Discussion A Native Buffer can be sampled on the GPU as an external texture, or used in Media Encoder APIs. #### Discussion Usually a `Frame` has a Native Buffer if the platform supports it. Only legacy platforms don't support Native Buffers. #### See - [`getNativeBuffer()`](#getnativebuffer) - [`NativeBuffer`](../interfaces/NativeBuffer.mdx) *** ### hasPixelBuffer ```ts readonly hasPixelBuffer: boolean ``` Get whether this `Frame` has a CPU-accessible Pixel Buffer attached to it. #### Discussion Usually a `Frame` has an application-accessible Pixel Buffer if its [`pixelFormat`](#pixelformat) is application-accessible - aka every [`PixelFormat`](../type-aliases/PixelFormat.mdx) except for [`'private'`](../type-aliases/PixelFormat.mdx). On iOS, every Frame has an application-accessible Pixel Buffer. #### See [`getPixelBuffer()`](#getpixelbuffer) *** ### height ```ts readonly height: number ``` Gets the total height of the Frame. If this is a planar Frame (see [`isPlanar`](#isplanar)), the individual planes (see [`getPlanes()`](#getplanes)) will likely have different heights than the total height. For example, a YUV Frame's UV Plane is half the size of its Y Plane. > [!NOTE] Note > If this Frame is invalid ([`isValid`](#isvalid)), this just returns `0`. *** ### isMirrored ```ts readonly isMirrored: boolean ``` Indicates whether this `Frame`'s pixel data must be interpreted as mirrored along the vertical axis. This value is always relative to the target output's mirror mode. (see [`CameraOutputConfiguration.mirrorMode`](../interfaces/CameraOutputConfiguration.mdx#mirrormode)) Frames are not automatically mirroring their pixels because physically mirroring buffers is expensive. The Camera streams frames in the hardware's native mirroring mode and adjusts presentation later using metadata (such as EXIF), transforms, or here; a flag. - If the output is mirrored but the underlying pixel buffer is NOT, `isMirrored` will be `true`. You must treat the pixels as flipped (for example, read them right-to-left). - If both the output and the pixel buffer are mirrored (for example when [`FrameOutputOptions.enablePhysicalBufferRotation`](../interfaces/FrameOutputOptions.mdx#enablephysicalbufferrotation) is enabled), `isMirrored` will be `false` because the buffer already matches the output orientation. - If neither the output nor the pixel buffer are mirrored, `isMirrored` will be `false`. #### Discussion If you process the Frame, **you** must interpret the pixel data in this `Frame` as mirrored if `isMirrored` is true. In rendering libraries you would typically scale the `Frame` by `-1` on the X axis if it is mirrored to cancel out the mirroring at render time. Most ML libraries (for example Google MLKit) accept a mirroring flag for input images — pass `isMirrored` directly in those cases. *** ### isPlanar ```ts readonly isPlanar: boolean ``` Returns whether this `Frame` is **planar** or **non-planar**. - If a Frame is **planar** (e.g. YUV), you should only access its pixel buffer via [`getPlanes()`](#getplanes) instead of [`getPixelBuffer()`](#getpixelbuffer). - If a Frame is **non-planar** (e.g. RGB), you can access its pixel buffer via [`getPixelBuffer()`](#getpixelbuffer) instead of [`getPlanes()`](#getplanes). > [!NOTE] Note > If this Frame is invalid ([`isValid`](#isvalid)), this just returns `false`. *** ### isValid ```ts readonly isValid: boolean ``` Gets whether this Frame is still valid, or not. If the Frame is invalid, you cannot access its data anymore. A Frame is automatically invalidated via [`dispose()`](https://nitro.margelo.com/docs/hybrid-objects). *** ### orientation ```ts readonly orientation: CameraOrientation ``` The rotation of this `Frame` relative to the [`CameraOutput`](CameraOutput.mdx)'s target output orientation. (see [`CameraOutput.outputOrientation`](CameraOutput.mdx#outputorientation)) Frames are not automatically rotated to `'up'` because physically rotating buffers is expensive. The Camera streams frames in the hardware's native orientation and adjusts presentation later using metadata (such as EXIF), transforms, or here; a flag. Examples: - `'up'` — The Frame is already correctly oriented. - `'right'` — The pixel data is rotated +90° relative to the desired orientation. - `'left'` — The pixel data is rotated -90° relative to the desired orientation. - `'down'` — The pixel data is rotated 180° upside down relative to the desired orientation. #### Discussion If you process the Frame, **you** must interpret the pixel data in this `Frame` to be rotated by this `orientation`. In rendering libraries you would typically counter-rotate the `Frame` by this `orientation` to get it "up-right". Most ML libraries (for example Google MLKit) accept an orientation flag for input images - pass `orientation` directly in those cases. *** ### pixelFormat ```ts readonly pixelFormat: PixelFormat ``` Gets the [`PixelFormat`](../type-aliases/PixelFormat.mdx) of this Frame's pixel data. Common formats are [`'yuv-420-8-bit-video'`](../type-aliases/PixelFormat.mdx) for native YUV Frames, [`'rgb-bgra-8-bit'`](../type-aliases/PixelFormat.mdx) for processed RGB Frames, or [`'private'`](../type-aliases/PixelFormat.mdx) for zero-copy GPU-only Frames. > [!NOTE] Note > Frames are usually not in Depth Pixel Formats (like > [`'depth-32-bit'`](../type-aliases/PixelFormat.mdx)) unless they > have been manually converted from a [`Depth`](Depth.mdx) Frame to > a `Frame`. #### Discussion If the `Frame` is a GPU-only buffer, its [`pixelFormat`](#pixelformat) is [`'private'`](../type-aliases/PixelFormat.mdx), wich allows zero-copy importing it into GPU pipelines directly, however its pixel data is likely not accessible on the CPU. You can use [`getNativeBuffer()`](#getnativebuffer) to get a handle to the native GPU-based buffer, which can be used in GPU pipelines like Skia, or custom implementations using OpenGL/Vulkan/Metal shaders with external texture importers. > [!NOTE] Note > If this Frame is invalid ([`isValid`](#isvalid)), this just returns > [`'unknown'`](../type-aliases/PixelFormat.mdx). *** ### timestamp ```ts readonly timestamp: number ``` Gets the presentation timestamp this Frame was timed at. > [!NOTE] Note > If this Frame is invalid ([`isValid`](#isvalid)), this just returns `0`. *** ### width ```ts readonly width: number ``` Gets the total width of the Frame. If this is a planar Frame (see [`isPlanar`](#isplanar)), the individual planes (see [`getPlanes()`](#getplanes)) will likely have different widths than the total width. For example, a YUV Frame's UV Plane is half the size of its Y Plane. > [!NOTE] Note > If this Frame is invalid ([`isValid`](#isvalid)), this just returns `0`. ## Methods ### convertCameraPointToFramePoint(...) ```ts convertCameraPointToFramePoint(cameraPoint: Point): Point ``` Converts the given [`cameraPoint`](#convertcamerapointtoframepoint) in camera sensor coordinates into a [`Point`](../interfaces/Point.mdx) in Frame coordinates, relative to this `Frame`. > [!NOTE] Note > Camera sensor coordinates are not necessarily normalized from `0.0` to `1.0`. Some implementations may have a different opaque coordinate system. #### Example ```ts const cameraPoint = { x: 0.5, y: 0.5 } const framePoint = frame.convertCameraPointToFramePoint(cameraPoint) console.log(framePoint) // { x: 960, y: 360 } ``` *** ### convertFramePointToCameraPoint(...) ```ts convertFramePointToCameraPoint(framePoint: Point): Point ``` Converts the given [`framePoint`](#convertframepointtocamerapoint) in Frame coordinates relative to this `Frame` into a [`Point`](../interfaces/Point.mdx) in camera sensor coordinates. > [!NOTE] Note > Camera sensor coordinates are not necessarily normalized from `0.0` to `1.0`. Some implementations may have a different opaque coordinate system. #### Example ```ts const framePoint = { x: frame.width / 2, y: frame.height / 2 } const cameraPoint = frame.convertFramePointToCameraPoint(framePoint) console.log(cameraPoint) // { x: 0.5, y: 0.5 } ``` *** ### getNativeBuffer() ```ts getNativeBuffer(): NativeBuffer ``` Get a [`NativeBuffer`](../interfaces/NativeBuffer.mdx) that points to this `Frame`. This is a shared contract between libraries to pass Native Buffers around without natively typed bindings. The Native Buffer can be sampled by the GPU as an external texture, or passed to Media Encoder APIs. The [`NativeBuffer`](../interfaces/NativeBuffer.mdx) must be released again by its consumer via [`release()`](../interfaces/NativeBuffer.mdx#release), otherwise the Camera pipeline might stall. #### Discussion Libraries like Skia or WebGPU implement Native Buffer APIs. > [!WARNING] Throws > If [`hasNativeBuffer`](#hasnativebuffer) is false. #### Examples ```ts if (frame.hasNativeBuffer) { const nativeBuffer = frame.getNativeBuffer() console.log(`Native Buffer pointer: ${nativeBuffer.pointer}`) nativeBuffer.release() } ``` Import a `Frame` into Skia via `NativeBuffer` ```ts if (frame.hasNativeBuffer) { const nativeBuffer = frame.getNativeBuffer() const image = Skia.Image.MakeImageFromNativeBuffer(nativeBuffer.pointer) // Render `image` via Skia APIs image.dispose() nativeBuffer.release() } ``` Import a `Frame` into WebGPU via `NativeBuffer` ```ts const device = ... // WebGPU device if (frame.hasNativeBuffer) { const nativeBuffer = frame.getNativeBuffer() const videoFrame = RNWebGPU.createVideoFrameFromNativeBuffer(nativeBuffer.pointer) const externalTexture = device.importExternalTexture({ source: videoFrame, label: 'camera-frame' }) // After submitting commands that sample `externalTexture`: externalTexture.destroy() videoFrame.release() nativeBuffer.release() } ``` *** ### getPixelBuffer() ```ts getPixelBuffer(): ArrayBuffer ``` Gets the `Frame`'s entire pixel data as a full contiguous `ArrayBuffer`, if it contains one. #### Discussion - If the frame is planar (see [`Frame.isPlanar`](#isplanar), e.g. YUV), this might or might not contain valid data. - If the frame is **not** planar (e.g. RGB), this will contain the entire pixel data. #### Discussion This does **not** perform a copy, but since the `Frame`'s data is stored on the GPU, it might lazily perform a GPU -> CPU download. #### Discussion Once the `Frame` gets invalidated ([`isValid`](#isvalid) == false), this ArrayBuffer is no longer safe to access. > [!WARNING] Throws > If this Frame is invalid ([`isValid`](#isvalid)) or > [`hasPixelBuffer`](#haspixelbuffer) is false. #### Example ```ts if (frame.hasPixelBuffer) { const pixelBuffer = frame.getPixelBuffer() console.log(`Frame has ${pixelBuffer.byteLength} bytes.`) } ``` *** ### getPlanes() ```ts getPlanes(): FramePlane[] ``` Returns each plane of a **planar** Frame (see [`isPlanar`](#isplanar)). If this Frame is **non-planar**, this method returns an empty array (`[]`). > [!WARNING] Throws > If this Frame is invalid ([`isValid`](#isvalid)). --- # FrameConverter Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/hybrid-objects/FrameConverter --- title: FrameConverter description: |- The FrameConverter can convert Frames and Depth to Images, and back. --- ```ts interface FrameConverter extends HybridObject ``` The `FrameConverter` can convert [`Frame`](Frame.mdx)s and [`Depth`](Depth.mdx) to [`Image`](https://github.com/mrousavy/react-native-nitro-image)s, and back. ## Methods ### convertDepthToImage(...) ```ts convertDepthToImage(depth: Depth): Image ``` Converts the [`Depth`](Depth.mdx) frame to an [`Image`](https://github.com/mrousavy/react-native-nitro-image). The resulting [`Image`](https://github.com/mrousavy/react-native-nitro-image) will be a grey-scale RGB image, where black pixels are far away, and white pixels are close by. *** ### convertDepthToImageAsync(...) ```ts convertDepthToImageAsync(depth: Depth): Promise ``` *** ### convertFrameToImage(...) ```ts convertFrameToImage(frame: Frame): Image ``` Converts the given [`Frame`](Frame.mdx) to an [`Image`](https://github.com/mrousavy/react-native-nitro-image). This performs a CPU copy. > [!WARNING] Throws > If the Frame is invalid ([`Frame.isValid`](Frame.mdx#isvalid)). *** ### convertFrameToImageAsync(...) ```ts convertFrameToImageAsync(frame: Frame): Promise ``` Asynchronously converts this [`Frame`](Frame.mdx) to an [`Image`](https://github.com/mrousavy/react-native-nitro-image). This performs a CPU copy. > [!WARNING] Throws > If the Frame is invalid ([`Frame.isValid`](Frame.mdx#isvalid)). --- # FramePlane Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/hybrid-objects/FramePlane --- title: FramePlane description: Represents a single Plane of a **planar** Frame. --- ```ts interface FramePlane extends HybridObject ``` Represents a single Plane of a **planar** [`Frame`](Frame.mdx). #### See [`Frame.getPlanes()`](Frame.mdx#getplanes) ## Properties ### bytesPerRow ```ts readonly bytesPerRow: number ``` Get the number of bytes per row of the underlying pixel buffer. #### See - [`width`](#width) - [`getPixelBuffer()`](#getpixelbuffer) *** ### height ```ts readonly height: number ``` Returns the height of this Plane. > [!NOTE] Note > If this Plane (or its parent Frame) is invalid ([`isValid`](#isvalid)), > this just returns `0`. *** ### isValid ```ts readonly isValid: boolean ``` Gets whether this `FramePlane` (or its parent [`Frame`](Frame.mdx)) is still valid, or not. If the Plane is invalid, you cannot access its data anymore. A Plane is automatically invalidated via [`dispose()`](https://nitro.margelo.com/docs/hybrid-objects). *** ### width ```ts readonly width: number ``` Returns the width of this Plane. > [!NOTE] Note > If this Plane (or its parent Frame) is invalid ([`isValid`](#isvalid)), > this just returns `0`. ## Methods ### getPixelBuffer() ```ts getPixelBuffer(): ArrayBuffer ``` Gets the `FramePlane`'s pixel data as an `ArrayBuffer`. #### Discussion This does **not** perform a copy, but since the [`Frame`](Frame.mdx)'s data is stored on the GPU, it might lazily perform a GPU -> CPU download. #### Discussion Once the `FramePlane` gets invalidated ([`isValid`](#isvalid) == false), this ArrayBuffer is no longer safe to access. > [!NOTE] Note > If this Plane (or its parent Frame) is invalid ([`isValid`](#isvalid)), > this method throws. --- # FrameRenderer Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/hybrid-objects/FrameRenderer --- title: FrameRenderer description: |- A FrameRenderer is an object that can render Frames into a given target. --- ```ts interface FrameRenderer extends HybridObject ``` A `FrameRenderer` is an object that can render [`Frame`](Frame.mdx)s into a given target. For example, when a [`FrameRendererView`](../type-aliases/FrameRendererView.mdx) is connected to a `FrameRenderer`, it renders its [`Frame`](Frame.mdx)s on screen. You could also build a custom video recorder that accepts [`Frame`](Frame.mdx)s via a `FrameRenderer`. ## Methods ### renderFrame(...) ```ts renderFrame(frame: Frame): void ``` Synchronously renders the given [`Frame`](Frame.mdx). --- # GestureController Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/hybrid-objects/GestureController --- title: GestureController description: |- A GestureController is a controller that can control a CameraController's property via a user gesture. --- ```ts interface GestureController extends HybridObject ``` A `GestureController` is a controller that can control a [`CameraController`](CameraController.mdx)'s property via a user gesture. For example, a [`ZoomGestureController`](ZoomGestureController.mdx) uses a pinch gesture to modify the [`CameraController`](CameraController.mdx)'s [`zoom`](CameraController.mdx#zoom) property. The `GestureController` needs to be attached to a View (like a [`PreviewView`](../type-aliases/PreviewView.mdx)) to enable the gesture. #### Extended by - [`TapToFocusGestureController`](TapToFocusGestureController.mdx) - [`ZoomGestureController`](ZoomGestureController.mdx) ## Properties ### controller ```ts controller: CameraController | undefined ``` Gets or sets the [`CameraController`](CameraController.mdx) this `GestureController` should control. --- # Location Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/hybrid-objects/Location --- title: Location description: |- Represents the physical Location, in real world coordinates (latitude, longitude). --- ```ts interface Location extends HybridObject ``` Represents the physical Location, in real world coordinates ([`latitude`](#latitude), [`longitude`](#longitude)). Location tags can be embedded into captured [`Photos`](Photo.mdx) via EXIF tags, or into captured Videos via MP4/QuickTime flags. VisionCamera core does not provide a way to get a user's location. Instead, use the `react-native-vision-camera-location` module. #### See - [`CameraPhotoOutput`](CameraPhotoOutput.mdx) - [`CameraVideoOutput`](CameraVideoOutput.mdx) #### Example Embedding a Location in a Photo's EXIF tags: ```ts const photoOutput = ... const location = ... await photoOutput.capturePhoto({ location: location }, {}) ``` ## Properties ### altitude ```ts readonly altitude: number ``` Represents the vertical altitude. *** ### horizontalAccuracy ```ts readonly horizontalAccuracy: number ``` Represents the accuracy of the horizontal coordinates ([`latitude`](#latitude) and [`longitude`](#longitude)) in meters. *** ### isMock ```ts readonly isMock: boolean ``` Represents whether this `Location` is a mocked location, e.g. from a testing environment or spoofed. *** ### latitude ```ts readonly latitude: number ``` Represents the horizontal latitude. *** ### longitude ```ts readonly longitude: number ``` Represents the horizontal longitude. *** ### timestamp ```ts readonly timestamp: number ``` Represents the timestamp this `Location` was captured at, as a UNIX timestamp in milliseconds since 1970. *** ### verticalAccuracy ```ts readonly verticalAccuracy: number ``` Represents the accuracy of the vertical coordinate ([`altitude`](#altitude)) in meters. --- # MeteringPoint Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/hybrid-objects/MeteringPoint --- title: MeteringPoint description: |- Represents a point that can be used for focusing AE/AF/AWB on the Camera via CameraController. --- ```ts interface MeteringPoint extends HybridObject ``` Represents a point that can be used for focusing AE/AF/AWB on the Camera via [`CameraController`](CameraController.mdx). You can create a `MeteringPoint` via a [`PreviewView`](../type-aliases/PreviewView.mdx)'s `ref` (see [`PreviewViewMethods.createMeteringPoint(...)`](../interfaces/PreviewViewMethods.mdx#createmeteringpoint)), or manually via [`CameraFactory.createNormalizedMeteringPoint(...)`](CameraFactory.mdx#createnormalizedmeteringpoint). #### Examples Creating a Metering Point to the logical center of the Camera: ```ts const controller = ... const meteringPoint = VisionCamera.createNormalizedMeteringPoint(0.5, 0.5) await controller.focusTo(meteringPoint, {}) ``` Creating a Metering Point from a Preview View: ```tsx function App() { const previewView = useRef(null) const controller = ... const onTap = async (viewX, viewY) => { const meteringPoint = previewView.current?.createMeteringPoint(viewX, viewY) await controller.focusTo(meteringPoint, {}) } return ( ) } ``` ## Properties ### normalizedSize ```ts readonly normalizedSize: number ``` Represents the size of this `MeteringPoint`, normalized to the Camera's coordinate system after applying orientation, cropping, and scaling. *** ### normalizedX ```ts readonly normalizedX: number ``` Represents the X coordinate of this `MeteringPoint`, normalized to the Camera's coordinate system after applying orientation, cropping, and scaling. *** ### normalizedY ```ts readonly normalizedY: number ``` Represents the Y coordinate of this `MeteringPoint`, normalized to the Camera's coordinate system after applying orientation, cropping, and scaling. *** ### relativeSize? ```ts readonly optional relativeSize?: number ``` Represents the size/radius of this `MeteringPoint`, relative to whatever source was used to create this point - or `undefined` if no relative size was set. *** ### relativeX ```ts readonly relativeX: number ``` Represents the X coordinate of this `MeteringPoint`, relative to whatever source was used to create this point. - If created from a [`PreviewView`](../type-aliases/PreviewView.mdx), this will be the given View X coordinate (e.g. of the user tap). - If created from a normalized Point ([`CameraFactory.createNormalizedMeteringPoint()`](CameraFactory.mdx#createnormalizedmeteringpoint)), this will be the given normalized X coordinate (0...1) *** ### relativeY ```ts readonly relativeY: number ``` Represents the Y coordinate of this `MeteringPoint`, relative to whatever source was used to create this point. - If created from a [`PreviewView`](../type-aliases/PreviewView.mdx), this will be the given View Y coordinate (e.g. of the user tap). - If created from a normalized Point ([`CameraFactory.createNormalizedMeteringPoint()`](CameraFactory.mdx#createnormalizedmeteringpoint)), this will be the given normalized Y coordinate (0...1) --- # NativeThread Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/hybrid-objects/NativeThread --- title: NativeThread description: Represents a native "Thread". --- ```ts interface NativeThread extends HybridObject ``` Represents a native "Thread". A `NativeThread` is a JS handle to a native Thread implementation (most commonly, a [`DispatchQueue`](https://developer.apple.com/documentation/dispatch/dispatchqueue) on iOS and an [`Executor`](https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/Executors.html) on Android). It can be used to create Worklet Runtimes that run on the given `NativeThread`. #### Discussion You typically do not create instances of `NativeThread` yourself, and shouldn't interact with it. Higher level APIs like the [`useFrameOutput(...)`](../functions/useFrameOutput.mdx) hook already create a JS Worklet Runtime for you. #### Discussion Some [`CameraOutput`](CameraOutput.mdx)s (like the [`CameraFrameOutput`](CameraFrameOutput.mdx)) expose their `NativeThread` (see [`CameraFrameOutput.thread`](CameraFrameOutput.mdx#thread)) so a JS Worklet Runtime can be created for that `NativeThread` to ensure all work is executed on the same Thread. This is relevant for streaming outputs like the [`CameraFrameOutput`](CameraFrameOutput.mdx) to run synchronous JS functions (like a "Frame Processor") on the same Thread the output is running on, to prevent any Thread hops or synchronization - work can execute fully isolated and uninterrupted from other Runtimes. #### Discussion A `NativeThread` does not guarantee that it uses a single OS Thread. Instead, it may use a Thread Pool. Do not use `static thread_local` caches in C++, as this may break with pooled `NativeThread`s. The same concept applies to GCD (`DispatchQueue`) anyways. Even though the `NativeThread` may use a Thread pool, it never runs code in parallel - execution is guaranteed to be serial. ## Properties ### id ```ts readonly id: string ``` Get this Thread's ID. ## Methods ### runOnThread(...) ```ts runOnThread(task: () => void): void ``` - When called from JS, nothing changes - this just delays the call. - When called from native, this actually runs the [`task`](#runonthread) on this Thread. --- # NativeThreadFactory Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/hybrid-objects/NativeThreadFactory --- title: NativeThreadFactory description: A factory for creating NativeThreads. --- ```ts interface NativeThreadFactory extends HybridObject ``` A factory for creating [`NativeThread`](NativeThread.mdx)s. Typically you would never need this as Camera Outputs create [`NativeThread`](NativeThread.mdx)s. You can create [`NativeThread`](NativeThread.mdx)s for advanced asynchronous processing on a Worklet Queue, in which case VisionCamera prepares the necessary setup such as installing a Dispatcher to your Worklet Runtime. ## Methods ### createNativeThread(...) ```ts createNativeThread(name: string): NativeThread ``` Create a new [`NativeThread`](NativeThread.mdx). A [`NativeThread`](NativeThread.mdx) can be used for Camera operations such as Frame Processing. It uses platform native dispatching mechanisms like `DispatchQueue` or `CoroutineContext`. You can use the `WorkletQueueFactory` from react-native-vision-camera-worklets to wrap the [`NativeThread`](NativeThread.mdx) in a `WorkletQueue`, which allows you to run JS code on the thread. #### Example Creating a Worklet Runtime using this `NativeThread`: ```ts const thread = NativeThreadFactory.createNativeThread('async-processor') const runtime = createWorkletRuntimeForThread(thread) ``` --- # OrientationManager Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/hybrid-objects/OrientationManager --- title: OrientationManager description: |- The OrientationManager allows listening to CameraOrientation changes, like device- or interface- orientation. --- ```ts interface OrientationManager extends HybridObject ``` The `OrientationManager` allows listening to [`CameraOrientation`](../type-aliases/CameraOrientation.mdx) changes, like device- or interface- orientation. ## Properties ### currentOrientation ```ts readonly currentOrientation: | CameraOrientation | undefined ``` Get the current [`CameraOrientation`](../type-aliases/CameraOrientation.mdx), or `undefined` if no orientation is known. *** ### source ```ts readonly source: OrientationSource ``` Represents the [`OrientationSource`](../type-aliases/OrientationSource.mdx) this `OrientationManager` is tracking. ## Methods ### startOrientationUpdates(...) ```ts startOrientationUpdates(onChanged: (orientation: CameraOrientation) => void): void ``` Starts listening to orientation changes. *** ### stopOrientationUpdates() ```ts stopOrientationUpdates(): void ``` Stops listening to orientation changes. --- # Photo Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/hybrid-objects/Photo --- title: Photo description: Represents a captured Photo in-memory. tocPlatforms: calibrationData?: - iOS --- ```ts interface Photo extends HybridObject ``` Represents a captured `Photo` in-memory. `Photos` can be captured with a [`CameraPhotoOutput`](CameraPhotoOutput.mdx), and can be saved to a file using [`saveToTemporaryFileAsync()`](#savetotemporaryfileasync). To display the photo to the user, use [`toImageAsync()`](#toimageasync), then display that using `react-native-nitro-image`'s `` component. > [!NOTE] Note > As with all in-memory objects holding large native memory > such as Photos, Frames, Images or more, make sure to > [`dispose()`](https://nitro.margelo.com/docs/hybrid-objects) the Photo once you > are no longer using it, as otherwise the JS Runtime might > not immediately delete it, possibly exhausting system resources. #### Examples Display the Photo to the user using `react-native-nitro-image`: ```tsx const photoOutput = ... const [image, setImage] = useState() const takePhoto = async () => { const photo = await photoOutput.capturePhoto({}, {}) const img = await photo.toImageAsync() setImage(img) photo.dispose() } return ``` Save the photo to a temporary file: ```ts const photoOutput = ... const takePhoto = async () => { const photo = await photoOutput.capturePhoto({}, {}) const image = await photo.toImageAsync() photo.dispose() } ``` Convert the Photo to a Skia Image: ```ts const photoOutput = ... const photo = await photoOutput.capturePhoto({}, {}) const encodedData = await photo.getFileDataAsync() const bytes = new Uint8Array(encodedData) const data = Skia.Data.fromBytes(bytes) const skiaImage = Skia.Image.MakeImageFromEncoded(data) photo.dispose() ``` ## Properties ### calibrationData? ```ts readonly optional calibrationData?: CameraCalibrationData ``` Get the associated [`CameraCalibrationData`](CameraCalibrationData.mdx) for this `Photo` if calibration data delivery was enabled. #### See [`CapturePhotoSettings.enableCameraCalibrationDataDelivery`](../interfaces/CapturePhotoSettings.mdx#enablecameracalibrationdatadelivery) *** ### containerFormat ```ts readonly containerFormat: PhotoContainerFormat ``` Get the [`PhotoContainerFormat`](../type-aliases/PhotoContainerFormat.mdx) of this `Photo`. *** ### depth? ```ts readonly optional depth?: Depth ``` Get the associated [`Depth`](Depth.mdx) data for this `Photo` if it has one. #### See [`CapturePhotoSettings.enableDepthData`](../interfaces/CapturePhotoSettings.mdx#enabledepthdata) *** ### hasPixelBuffer ```ts readonly hasPixelBuffer: boolean ``` Get whether this `Photo` has a native pixel buffer attached to it, which allows reading its pixels from JS. #### See [`getPixelBuffer()`](#getpixelbuffer) *** ### height ```ts readonly height: number ``` Get the height of this `Photo`, in pixels. *** ### isMirrored ```ts readonly isMirrored: boolean ``` Gets whether this `Photo` is mirrored alongside the vertical axis. *** ### isRawPhoto ```ts readonly isRawPhoto: boolean ``` Gets whether this `Photo` is a RAW photo (i.e. no processing has been applied), or a processed photo (e.g. JPEG). #### See [`containerFormat`](#containerformat) *** ### orientation ```ts readonly orientation: CameraOrientation ``` Gets the [`CameraOrientation`](../type-aliases/CameraOrientation.mdx) this `Photo` was captured in. [`CameraOrientation`](../type-aliases/CameraOrientation.mdx) will be applied lazily via EXIF flags, or when converting the `Photo` to an [`Image`](https://github.com/mrousavy/react-native-nitro-image). *** ### timestamp ```ts readonly timestamp: number ``` Represents the timestamp this `Photo` was captured at, using the system's host clock, in seconds. *** ### width ```ts readonly width: number ``` Get the width of this `Photo`, in pixels. ## Methods ### getFileData() ```ts getFileData(): ArrayBuffer ``` Gets the raw file data of the `Photo` after processing and including EXIF flags. *** ### getFileDataAsync() ```ts getFileDataAsync(): Promise ``` Asynchronously gets the raw file data of the `Photo` after processing and including EXIF flags. *** ### getPixelBuffer() ```ts getPixelBuffer(): ArrayBuffer ``` Get the `Photo`'s native pixel buffer. This allows readonly access to the individual pixels. This does not contain any EXIF data. > [!WARNING] Throws > If [`hasPixelBuffer`](#haspixelbuffer) is false. *** ### saveToFileAsync(...) ```ts saveToFileAsync(path: string): Promise ``` Asynchronously saves this `Photo` to a file at the given [`path`](#savetofileasync), using this [`containerFormat`](#containerformat). #### Parameters ##### path The path to save the Image to. Must contain a full path name including filename and extension. All parent directories must exist, but the file itself must not exist. This must be a filesystem path, not a `file://` URL. *** ### saveToTemporaryFileAsync() ```ts saveToTemporaryFileAsync(): Promise ``` Asynchronously saves this `Photo` to a temporary file using this [`containerFormat`](#containerformat), and returns the path it was saved at. The returned value is a filesystem path, not a `file://` URL. *** ### toImage() ```ts toImage(): Image ``` Converts this `Photo` to an [`Image`](https://github.com/mrousavy/react-native-nitro-image), possibly applying [`orientation`](#orientation) and [`isMirrored`](#ismirrored) settings. > [!WARNING] Throws > If the `Photo` is a raw photo (see [`isRawPhoto`](#israwphoto)) > [!WARNING] Throws > If the `Photo`'s Image data cannot be accessed *** ### toImageAsync() ```ts toImageAsync(): Promise ``` Asynchronously converts this `Photo` to an [`Image`](https://github.com/mrousavy/react-native-nitro-image), possibly applying [`orientation`](#orientation) and [`isMirrored`](#ismirrored) settings. > [!WARNING] Throws > If the `Photo` is a raw photo (see [`isRawPhoto`](#israwphoto)) > [!WARNING] Throws > If the `Photo`'s Image data cannot be accessed --- # Recorder Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/hybrid-objects/Recorder --- title: Recorder description: |- Represents an instance that can record videos to a file. --- ```ts interface Recorder extends HybridObject ``` Represents an instance that can record videos to a file. A single `Recorder` instance records to a single video file. To record multiple videos, you will need to create multiple `Recorder` instances. ## Properties ### filePath ```ts readonly filePath: string ``` Returns the absolute path to the file that this `Recorder` is recording- or will record- to. This is a filesystem path (for example `/var/mobile/.../video.mp4` or `/data/user/0/.../video.mp4`), not a `file://` URL. *** ### isPaused ```ts readonly isPaused: boolean ``` Returns whether the current recording is paused. *** ### isRecording ```ts readonly isRecording: boolean ``` Returns whether the output is currently recording. *** ### recordedDuration ```ts readonly recordedDuration: number ``` Returns the currently recorded duration, in seconds. If [`isRecording`](#isrecording) is false, this returns `0`. *** ### recordedFileSize ```ts readonly recordedFileSize: number ``` Returns the currently recorded file size, in bytes. If [`isRecording`](#isrecording) is false, this returns `0`. ## Methods ### cancelRecording() ```ts cancelRecording(): Promise ``` Cancels the current recording and deletes the video file. *** ### pauseRecording() ```ts pauseRecording(): Promise ``` Requests the Video recording to be paused. Once the recording has actually been paused, the `onRecordingPaused` callback passed to [`startRecording`](#startrecording) will be called. *** ### resumeRecording() ```ts resumeRecording(): Promise ``` Requests the currently paused Video recording to be resumed. Once the recording has actually been resumed, the `onRecordingResumed` callback passed to [`startRecording`](#startrecording) will be called. *** ### startRecording(...) ```ts startRecording( onRecordingFinished: (filePath: string, reason: RecordingFinishedReason) => void, onRecordingError: (error: Error) => void, onRecordingPaused?: () => void, onRecordingResumed?: () => void): Promise ``` Start the Video recording to a temporary file. This Promise resolves once the Recording has been successfully started, and returns the temporary file path it is currently recording to. The path passed to `onRecordingFinished` is a filesystem path, not a `file://` URL. #### Parameters ##### onRecordingFinished Called when the Recording has successfully finished via a [`stopRecording()`](#stoprecording) call, or when the max duration/file-size has been reached. See [`RecordingFinishedReason`](../type-aliases/RecordingFinishedReason.mdx) ##### onRecordingError Called when an unexpected error occurred while recording. ##### onRecordingPaused Called when the recording has been paused. ##### onRecordingResumed Called when the paused recording has been resumed. > [!WARNING] Throws > If called twice on the same `Recorder` instance. *** ### stopRecording() ```ts stopRecording(): Promise ``` Requests the Video recording to be stopped. Once the recording has actually been stopped, the `onRecordingFinished` callback passed to [`startRecording`](#startrecording) will be called. > [!WARNING] Throws > If the recording is already stopped. --- # ScannedCode Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/hybrid-objects/ScannedCode --- title: ScannedCode description: Represents a machine-readable code, such as a QR code. platforms: - iOS hybridParent: ScannedObject --- ```ts interface ScannedCode extends ScannedObject ``` Represents a machine-readable code, such as a QR code. ## Properties ### boundingBox ```ts readonly boundingBox: BoundingBox ``` The bounding box coordinates of this [`ScannedObject`](ScannedObject.mdx). Coordinates are in camera-space (`0.0` ... `1.0`), and can be converted to view-space via the [`PreviewView`](../type-aliases/PreviewView.mdx). #### Inherited from [`ScannedObject`](ScannedObject.mdx).[`boundingBox`](ScannedObject.mdx#boundingbox) *** ### cornerPoints ```ts readonly cornerPoints: Point[] ``` The corner points outlining this `ScannedCode`. Coordinates are in camera-space (`0.0` ... `1.0`), and can be converted to view-space via the [`PreviewView`](../type-aliases/PreviewView.mdx). *** ### type ```ts readonly type: ScannedObjectType ``` The [`ScannedObjectType`](../type-aliases/ScannedObjectType.mdx) of this [`ScannedObject`](ScannedObject.mdx). #### Inherited from [`ScannedObject`](ScannedObject.mdx).[`type`](ScannedObject.mdx#type) *** ### value? ```ts readonly optional value?: string ``` The decoded string value of this `ScannedCode`, or `undefined` if the value cannot be decoded. This is error-corrected. --- # ScannedFace Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/hybrid-objects/ScannedFace --- title: ScannedFace description: Represents a Face. platforms: - iOS hybridParent: ScannedObject --- ```ts interface ScannedFace extends ScannedObject ``` Represents a Face. ## Properties ### boundingBox ```ts readonly boundingBox: BoundingBox ``` The bounding box coordinates of this [`ScannedObject`](ScannedObject.mdx). Coordinates are in camera-space (`0.0` ... `1.0`), and can be converted to view-space via the [`PreviewView`](../type-aliases/PreviewView.mdx). #### Inherited from [`ScannedObject`](ScannedObject.mdx).[`boundingBox`](ScannedObject.mdx#boundingbox) *** ### faceID ```ts readonly faceID: number ``` The ID of this `ScannedFace` used to identify multiple faces in the same scene. *** ### hasRollAngle ```ts readonly hasRollAngle: boolean ``` A Boolean value indicating whether there is a valid roll angle associated with the face. *** ### hasYawAngle ```ts readonly hasYawAngle: boolean ``` A Boolean value indicating whether there is a valid yaw angle associated with the face. *** ### rollAngle ```ts readonly rollAngle: number ``` The roll angle of the face specified in degrees. *** ### type ```ts readonly type: ScannedObjectType ``` The [`ScannedObjectType`](../type-aliases/ScannedObjectType.mdx) of this [`ScannedObject`](ScannedObject.mdx). #### Inherited from [`ScannedObject`](ScannedObject.mdx).[`type`](ScannedObject.mdx#type) *** ### yawAngle ```ts readonly yawAngle: number ``` The yaw angle of the face specified in degrees. --- # ScannedObject Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/hybrid-objects/ScannedObject --- title: ScannedObject description: Represents any kind of scanned object. platforms: - iOS --- ```ts interface ScannedObject extends HybridObject ``` Represents any kind of scanned object. #### See - [`ScannedCode`](ScannedCode.mdx) - [`ScannedFace`](ScannedFace.mdx) #### Extended by - [`ScannedCode`](ScannedCode.mdx) - [`ScannedFace`](ScannedFace.mdx) ## Properties ### boundingBox ```ts readonly boundingBox: BoundingBox ``` The bounding box coordinates of this `ScannedObject`. Coordinates are in camera-space (`0.0` ... `1.0`), and can be converted to view-space via the [`PreviewView`](../type-aliases/PreviewView.mdx). *** ### type ```ts readonly type: ScannedObjectType ``` The [`ScannedObjectType`](../type-aliases/ScannedObjectType.mdx) of this `ScannedObject`. --- # TapToFocusGestureController Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/hybrid-objects/TapToFocusGestureController --- title: TapToFocusGestureController description: |- A TapToFocusGestureController is a GestureController that can trigger a CameraController's focusTo(...) action via a native tap to focus gesture. hybridParent: GestureController --- ```ts interface TapToFocusGestureController extends GestureController ``` A `TapToFocusGestureController` is a [`GestureController`](GestureController.mdx) that can trigger a [`CameraController`](CameraController.mdx)'s [`focusTo(...)`](CameraController.mdx#focusto) action via a native tap to focus gesture. ## Properties ### controller ```ts controller: CameraController | undefined ``` Gets or sets the [`CameraController`](CameraController.mdx) this [`GestureController`](GestureController.mdx) should control. #### Inherited from [`GestureController`](GestureController.mdx).[`controller`](GestureController.mdx#controller) --- # ZoomGestureController Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/hybrid-objects/ZoomGestureController --- title: ZoomGestureController description: |- A ZoomGestureController is a GestureController that can modify a CameraController's zoom via a native pinch-to-zoom gesture. hybridParent: GestureController --- ```ts interface ZoomGestureController extends GestureController ``` A `ZoomGestureController` is a [`GestureController`](GestureController.mdx) that can modify a [`CameraController`](CameraController.mdx)'s [`zoom`](CameraController.mdx#zoom) via a native pinch-to-zoom gesture. ## Properties ### controller ```ts controller: CameraController | undefined ``` Gets or sets the [`CameraController`](CameraController.mdx) this [`GestureController`](GestureController.mdx) should control. #### Inherited from [`GestureController`](GestureController.mdx).[`controller`](GestureController.mdx#controller) --- # AsyncRunner Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/AsyncRunner --- title: AsyncRunner description: |- An AsyncRunner can be used to asynchronously run code in a Frame Processor on a separate, non-blocking Thread. --- ```ts interface AsyncRunner ``` An `AsyncRunner` can be used to asynchronously run code in a Frame Processor on a separate, non-blocking Thread. ## Methods ### isBusy() ```ts isBusy(): boolean ``` Get whether the `AsyncRunner` is currently busy running a task ([`runAsync(...)`](#runasync)), or not. *** ### runAsync(...) ```ts runAsync(task: () => void): boolean ``` Run the given [`task`](#runasync) asynchronously in a Frame Processor. This function returns `true` if the [`task`](#runasync) was scheduled to run, and `false` if the asynchronous runtime is currently busy - in this case you must drop the Frame. #### Parameters ##### task The worklet to run asynchronously. #### Returns Whether the task was handled, or not. #### Worklet #### Example ```ts const frameOutput = useFrameOutput({ onFrame(frame) { 'worklet' const wasHandled = asyncRunner.runAsync(() => { 'worklet' doSomeHeavyProcessing(frame) // Async task finished - dispose the Frame now. frame.dispose() }) if (!wasHandled) { // `AsyncRunner` is busy - drop this Frame! frame.dispose() } } }) ``` --- # BinnedConstraint Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/BinnedConstraint --- title: BinnedConstraint description: A constraint to prefer a binned format, or prefer a non-binned format. --- ```ts interface BinnedConstraint ``` A constraint to prefer a binned format, or prefer a non-binned format. #### Discussion Pixel binning combines multiple neighboring sensor pixels into one larger effective pixel. This usually improves low-light sensitivity and reduces noise, but can trade away fine detail compared to a full-resolution non-binned readout. Additionally, binned formats are more performant as they use significantly less bandwidth. #### Examples For higher spatial detail, prefer a non-binned format: ```ts { binned: false } ``` For better low-light sensitivity and better performance, prefer a binned format: ```ts { binned: true } ``` ## Properties ### binned ```ts binned: boolean ``` --- # BoundingBox Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/BoundingBox --- title: BoundingBox description: |- Represents the bounding box around a ScannedObject, in camera-space coordinates (`0.0` ... --- ```ts interface BoundingBox ``` Represents the bounding box around a [`ScannedObject`](../hybrid-objects/ScannedObject.mdx), in camera-space coordinates (`0.0` ... `1.0`). Convert to view-space using [`PreviewView.convertCameraPointToViewPoint(...)`](PreviewViewMethods.mdx#convertcamerapointtoviewpoint). ## Properties ### height ```ts height: number ``` The height of the bounding box. *** ### width ```ts width: number ``` The width of the bounding box. *** ### x ```ts x: number ``` The minimum X coordinate. *** ### y ```ts y: number ``` The minimum Y coordinate. --- # CameraControllerConfiguration Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/CameraControllerConfiguration --- title: CameraControllerConfiguration description: |- Specifies options to use for configuring a CameraController via configure(...). tocPlatforms: enableDistortionCorrection?: - iOS enableSmoothAutoFocus?: - iOS --- ```ts interface CameraControllerConfiguration ``` Specifies options to use for configuring a [`CameraController`](../hybrid-objects/CameraController.mdx) via [`configure(...)`](../hybrid-objects/CameraController.mdx). Like a diff-map, setting a value inside the `CameraControllerConfiguration` object to `undefined`, causes the prop to be left at whatever its current value is. ## Properties ### enableDistortionCorrection? ```ts optional enableDistortionCorrection?: boolean ``` If set to `true`, the camera pipeline may correct areas of the image that may appear distorted - for example the edges of a ultra-wide-angle camera, at the cost of losing a small amount of field of view. When [`enableDistortionCorrection`](#enabledistortioncorrection) is enabled and the camera pipeline applies a crop around the edges, the images will be upscaled to compensate for the artificial zoom - set [`enableDistortionCorrection`](#enabledistortioncorrection) to `false` if you want to avoid this overhead. > [!WARNING] Throws > If the [`CameraDevice`](../hybrid-objects/CameraDevice.mdx) does not support distortion > correction - see [`supportsDistortionCorrection`](../hybrid-objects/CameraDevice.mdx#supportsdistortioncorrection). #### Default ```ts true ``` *** ### enableLowLightBoost? ```ts optional enableLowLightBoost?: boolean ``` Low light boost allows the Camera pipeline to automatically extend exposure times (and effectively drop frame rate) to receive more light, if necessary. > [!WARNING] Throws > If the [`CameraDevice`](../hybrid-objects/CameraDevice.mdx) does not support low-light-boost - > see [`supportsLowLightBoost`](../hybrid-objects/CameraDevice.mdx#supportslowlightboost). #### Default ```ts false ``` *** ### enableSmoothAutoFocus? ```ts optional enableSmoothAutoFocus?: boolean ``` If set to `true`, auto-focus will switch between focus states much slower and smoother to appear less intrusive in video recordings. > [!WARNING] Throws > If the [`CameraDevice`](../hybrid-objects/CameraDevice.mdx) does not support > smooth auto focus - see [`supportsSmoothAutoFocus`](../hybrid-objects/CameraDevice.mdx#supportssmoothautofocus). #### Default ```ts false ``` --- # CameraOutputConfiguration Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/CameraOutputConfiguration --- title: CameraOutputConfiguration description: |- Specifies options for an output in a CameraSessionConnection used in CameraSession.configure(...). --- ```ts interface CameraOutputConfiguration ``` Specifies options for an output in a [`CameraSessionConnection`](CameraSessionConnection.mdx) used in [`CameraSession.configure(...)`](../hybrid-objects/CameraSession.mdx#configure). ## Properties ### mirrorMode ```ts mirrorMode: MirrorMode ``` Sets whether the [`CameraOutput`](../hybrid-objects/CameraOutput.mdx) is mirrored alongside the vertical axis, or not. By default, [`mirrorMode`](#mirrormode) is set to [`'auto'`](../type-aliases/MirrorMode.mdx), which automatically enables video mirroring if the device suggests it - for example on selfie cameras. #### Default ```ts 'auto' ``` *** ### output ```ts output: CameraOutput ``` The [`CameraOutput`](../hybrid-objects/CameraOutput.mdx). --- # CameraProps Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/CameraProps --- title: CameraProps tocPlatforms: enableDistortionCorrection?: - iOS enableSmoothAutoFocus?: - iOS onSubjectAreaChanged()?: - iOS --- ```ts interface CameraProps ``` #### Extended by - [`CameraViewProps`](CameraViewProps.mdx) - [`SkiaCameraProps`](../../react-native-vision-camera-skia/interfaces/SkiaCameraProps.mdx) ## Properties ### constraints? ```ts optional constraints?: Constraint[] ``` [`Constraint`](../type-aliases/Constraint.mdx)s (e.g. `{ fps: 60 }`) that the Camera pipeline will try to match when configuring the [`CameraSession`](../hybrid-objects/CameraSession.mdx). #### See [`CameraSessionConnection.constraints`](CameraSessionConnection.mdx#constraints) *** ### device ```ts device: | CameraDevice | CameraPosition ``` The [`CameraDevice`](../hybrid-objects/CameraDevice.mdx) to open, or a [`CameraPosition`](../type-aliases/CameraPosition.mdx) (e.g. `'back'`) to auto-pick a matching device via [`getCameraDevice(...)`](../functions/getCameraDevice.mdx). #### See [`CameraSessionConnection.input`](CameraSessionConnection.mdx#input) *** ### enableDistortionCorrection? ```ts optional enableDistortionCorrection?: boolean ``` If `true`, geometric distortion at the edges (e.g. on ultra-wide-angle cameras) is corrected, at the cost of a small amount of field of view. #### See [`CameraControllerConfiguration.enableDistortionCorrection`](CameraControllerConfiguration.mdx#enabledistortioncorrection) #### Default ```ts true ``` *** ### enableLowLightBoost? ```ts optional enableLowLightBoost?: boolean ``` If `true`, the Camera pipeline may extend exposure times (effectively dropping frame rate) in low-light scenes to receive more light. #### See [`CameraControllerConfiguration.enableLowLightBoost`](CameraControllerConfiguration.mdx#enablelowlightboost) #### Default ```ts false ``` *** ### enableSmoothAutoFocus? ```ts optional enableSmoothAutoFocus?: boolean ``` If `true`, auto-focus transitions are performed slower and smoother to appear less intrusive in video recordings. #### See [`CameraControllerConfiguration.enableSmoothAutoFocus`](CameraControllerConfiguration.mdx#enablesmoothautofocus) #### Default ```ts false ``` *** ### getInitialExposureBias? ```ts optional getInitialExposureBias?: () => number | undefined ``` A getter for the initial exposure bias to apply when the [`CameraController`](../hybrid-objects/CameraController.mdx) is created. Later, the exposure bias can be adjusted via [`CameraController.setExposureBias(...)`](../hybrid-objects/CameraController.mdx#setexposurebias). #### See [`CameraSessionConnection.initialExposureBias`](CameraSessionConnection.mdx#initialexposurebias) *** ### getInitialZoom? ```ts optional getInitialZoom?: () => number | undefined ``` A getter for the initial zoom value to apply when the [`CameraController`](../hybrid-objects/CameraController.mdx) is created. Later, the zoom can be adjusted via [`CameraController.setZoom(...)`](../hybrid-objects/CameraController.mdx#setzoom). #### See [`CameraSessionConnection.initialZoom`](CameraSessionConnection.mdx#initialzoom) *** ### isActive ```ts isActive: boolean ``` Starts the [`CameraSession`](../hybrid-objects/CameraSession.mdx) when set to `true`, and stops it when set back to `false`. #### See - [`CameraSession.start()`](../hybrid-objects/CameraSession.mdx#start) - [`CameraSession.stop()`](../hybrid-objects/CameraSession.mdx#stop) - [`CameraSession.isRunning`](../hybrid-objects/CameraSession.mdx#isrunning) *** ### mirrorMode? ```ts optional mirrorMode?: MirrorMode ``` Sets whether the [`CameraOutput`](../hybrid-objects/CameraOutput.mdx)s are mirrored along the vertical axis. [`'auto'`](../type-aliases/MirrorMode.mdx) mirrors automatically on selfie cameras. #### See [`CameraOutputConfiguration.mirrorMode`](CameraOutputConfiguration.mdx#mirrormode) #### Default ```ts 'auto' ``` *** ### onConfigured? ```ts optional onConfigured?: () => void ``` Called whenever the [`CameraSession`](../hybrid-objects/CameraSession.mdx) has been configured with new connections via [`configure(...)`](../hybrid-objects/CameraSession.mdx#configure) and connections to the individual outputs are formed. This is a good place to check output capabilities, such as [`CameraVideoOutput.getSupportedVideoCodecs()`](../hybrid-objects/CameraVideoOutput.mdx#getsupportedvideocodecs) *** ### onError? ```ts optional onError?: (error: Error) => void ``` Called whenever the [`CameraSession`](../hybrid-objects/CameraSession.mdx) has encountered an error. #### See [`CameraSession.addOnErrorListener`](../hybrid-objects/CameraSession.mdx#addonerrorlistener) *** ### onInterruptionEnded? ```ts optional onInterruptionEnded?: () => void ``` Called when a previous interruption has ended and the [`CameraSession`](../hybrid-objects/CameraSession.mdx) is running uninterrupted again. #### See [`CameraSession.addOnInterruptionEndedListener`](../hybrid-objects/CameraSession.mdx#addoninterruptionendedlistener) *** ### onInterruptionStarted? ```ts optional onInterruptionStarted?: (interruption: InterruptionReason) => void ``` Called whenever the [`CameraSession`](../hybrid-objects/CameraSession.mdx) has encountered an interruption of the given [`InterruptionReason`](../type-aliases/InterruptionReason.mdx). Interruptions are temporarily. #### See [`CameraSession.addOnInterruptionStartedListener`](../hybrid-objects/CameraSession.mdx#addoninterruptionstartedlistener) *** ### onSessionConfigSelected? ```ts optional onSessionConfigSelected?: (config: CameraSessionConfig) => void ``` Called once the given [`constraints`](#constraints) have been fully resolved into a concrete [`CameraSessionConfig`](../hybrid-objects/CameraSessionConfig.mdx). #### See [`CameraSessionConnection.onSessionConfigSelected`](CameraSessionConnection.mdx#onsessionconfigselected) *** ### onStarted? ```ts optional onStarted?: () => void ``` Called when the [`CameraSession`](../hybrid-objects/CameraSession.mdx) has been started. #### See [`CameraSession.addOnStartedListener`](../hybrid-objects/CameraSession.mdx#addonstartedlistener) *** ### onStopped? ```ts optional onStopped?: () => void ``` Called when the [`CameraSession`](../hybrid-objects/CameraSession.mdx) has been stopped. #### See [`CameraSession.addOnStoppedListener`](../hybrid-objects/CameraSession.mdx#addonstoppedlistener) *** ### onSubjectAreaChanged? ```ts optional onSubjectAreaChanged?: () => void ``` Called when the subject area substantially changes, e.g. when the user pans away from a scene that was previously in focus. This is a good point to reset any locked AE/AF/AWB focus states back to continuously auto-focus. #### See [`CameraController.addSubjectAreaChangedListener`](../hybrid-objects/CameraController.mdx#addsubjectareachangedlistener) *** ### orientationSource? ```ts optional orientationSource?: "custom" | OrientationSource ``` Set a desired [`OrientationSource`](../type-aliases/OrientationSource.mdx) for automatically applying [`CameraOrientation`](../type-aliases/CameraOrientation.mdx) to all [`outputs`](#outputs), or `'custom'` if you prefer to manually specify [`CameraOrientation`](../type-aliases/CameraOrientation.mdx) yourself. #### See [`CameraOutput.outputOrientation`](../hybrid-objects/CameraOutput.mdx#outputorientation) *** ### outputs? ```ts optional outputs?: CameraOutput[] ``` The [`CameraOutput`](../hybrid-objects/CameraOutput.mdx)s the [`device`](#device) will stream into. #### See - [`CameraSessionConnection.outputs`](CameraSessionConnection.mdx#outputs) - [`CameraOutputConfiguration.output`](CameraOutputConfiguration.mdx#output) --- # CameraRef Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/CameraRef --- title: CameraRef description: A React-ref to the Camera view. tocPlatforms: convertScannedObjectCoordinatesToViewCoordinates(...): - iOS takeSnapshot(): - Android --- ```ts interface CameraRef extends PreviewViewMethods, Pick ``` A React-ref to the [`Camera`](../views/Camera.mdx) view. #### Example ```tsx function App() { const camera = useRef(null) return } ``` ## Properties ### controller ```ts controller: | CameraController | undefined ``` Get the current [`CameraController`](../hybrid-objects/CameraController.mdx). This property will be set after `onStarted` has been called, and may change over time. *** ### preview ```ts preview: PreviewView | undefined ``` Get a ref to the [`PreviewView`](../type-aliases/PreviewView.mdx), or `undefined` if it has not yet been set. This value is set after the first mount, and usually won't change. ## Methods ### cancelZoomAnimation() ```ts cancelZoomAnimation(): Promise ``` Cancels any zoom animations previously started with [`startZoomAnimation(...)`](../hybrid-objects/CameraController.mdx#startzoomanimation). #### Inherited from [`CameraController`](../hybrid-objects/CameraController.mdx).[`cancelZoomAnimation`](../hybrid-objects/CameraController.mdx#cancelzoomanimation) *** ### convertCameraPointToViewPoint(...) ```ts convertCameraPointToViewPoint(cameraPoint: Point): Point ``` Converts the given [`cameraPoint`](PreviewViewMethods.mdx#convertcamerapointtoviewpoint) in camera sensor coordinates into a [`Point`](Point.mdx) in view coordinates, relative to this [`PreviewView`](../type-aliases/PreviewView.mdx). > [!NOTE] Note > Camera sensor coordinates are not necessarily normalized from `0.0` to `1.0`. Some implementations may have a different opaque coordinate system. > [!WARNING] Throws > If the [`PreviewView`](../type-aliases/PreviewView.mdx) isn't ready yet. #### Example ```ts const cameraPoint = { x: 0.5, y: 0.5 } const viewPoint = previewView.convertCameraPointToViewPoint(cameraPoint) console.log(viewPoint) // { x: 196, y: 379.5 } ``` #### Inherited from [`PreviewViewMethods`](PreviewViewMethods.mdx).[`convertCameraPointToViewPoint`](PreviewViewMethods.mdx#convertcamerapointtoviewpoint) *** ### convertScannedObjectCoordinatesToViewCoordinates(...) ```ts convertScannedObjectCoordinatesToViewCoordinates(scannedObject: ScannedObject): ScannedObject ``` Returns a new [`ScannedObject`](../hybrid-objects/ScannedObject.mdx) where all coordinates in the given [`scannedObject`](PreviewViewMethods.mdx#convertscannedobjectcoordinatestoviewcoordinates) are converted into view coordinates. #### Parameters ##### scannedObject The scanned object in its original coordinates. #### Inherited from [`PreviewViewMethods`](PreviewViewMethods.mdx).[`convertScannedObjectCoordinatesToViewCoordinates`](PreviewViewMethods.mdx#convertscannedobjectcoordinatestoviewcoordinates) *** ### convertViewPointToCameraPoint(...) ```ts convertViewPointToCameraPoint(viewPoint: Point): Point ``` Converts the given [`viewPoint`](PreviewViewMethods.mdx#convertviewpointtocamerapoint) in view coordinates relative to this [`PreviewView`](../type-aliases/PreviewView.mdx) into a [`Point`](Point.mdx) in camera sensor coordinates. > [!NOTE] Note > Camera sensor coordinates are not necessarily normalized from `0.0` to `1.0`. Some implementations may have a different opaque coordinate system. > [!WARNING] Throws > If the [`PreviewView`](../type-aliases/PreviewView.mdx) isn't ready yet. #### Example ```ts const viewPoint = { x: 196, y: 379.5 } const cameraPoint = previewView.convertViewPointToCameraPoint(viewPoint) console.log(cameraPoint) // { x: 0.5, y: 0.5 } ``` #### Inherited from [`PreviewViewMethods`](PreviewViewMethods.mdx).[`convertViewPointToCameraPoint`](PreviewViewMethods.mdx#convertviewpointtocamerapoint) *** ### createMeteringPoint(...) ```ts createMeteringPoint( viewX: number, viewY: number, size?: number): MeteringPoint ``` Creates a [`MeteringPoint`](../hybrid-objects/MeteringPoint.mdx) that can be used for focusing AE/AF/AWB on the Camera via [`focusTo(...)`](../hybrid-objects/CameraController.mdx#focusto). The coordinates ([`viewX`](PreviewViewMethods.mdx#createmeteringpoint), [`viewY`](PreviewViewMethods.mdx#createmeteringpoint)) are relative to this [`PreviewView`](../type-aliases/PreviewView.mdx), and take orientation, scaling and cropping into account. #### Parameters ##### viewX The X coordinate within the View's coordinate system. This can be the `x` value of a tap event on the [`PreviewView`](../type-aliases/PreviewView.mdx). ##### viewY The Y coordinate within the View's coordinate system. This can be the `y` value of a tap event on the [`PreviewView`](../type-aliases/PreviewView.mdx). ##### size (Optional) The size of the [`MeteringPoint`](../hybrid-objects/MeteringPoint.mdx) within the View's coordinate system. > [!WARNING] Throws > If the [`PreviewView`](../type-aliases/PreviewView.mdx) isn't ready yet. #### Inherited from [`PreviewViewMethods`](PreviewViewMethods.mdx).[`createMeteringPoint`](PreviewViewMethods.mdx#createmeteringpoint) *** ### focusTo(...) ```ts focusTo(viewPoint: Point, options?: FocusOptions): Promise ``` Focuses the Camera pipeline to the specified [`viewPoint`](#focusto) relative to the Camera view's coordinate system using the specified [`MeteringMode`](../type-aliases/MeteringMode.mdx)s. #### Parameters ##### viewPoint The point in the view coordinate system to focus to. ##### options Options for the focus operation. > [!WARNING] Throws > If the Camera isn't ready yet. #### Example ```tsx // Focus center await camera.current.focusTo({ x: width / 2, y: height / 2 }) ``` *** ### resetFocus() ```ts resetFocus(): Promise ``` Cancels any current focus operations from [`focusTo(...)`](../hybrid-objects/CameraController.mdx#focusto), resets back all 3A focus modes to continuously auto-focus if they have been previously locked (e.g. via [`setFocusLocked(...)`](../hybrid-objects/CameraController.mdx#setfocuslocked) or [`lockCurrentFocus()`](../hybrid-objects/CameraController.mdx#lockcurrentfocus), and similar), and resets the focus point of interest to be in the center. #### Example ```ts await controller.resetFocus() ``` #### Inherited from [`CameraController`](../hybrid-objects/CameraController.mdx).[`resetFocus`](../hybrid-objects/CameraController.mdx#resetfocus) *** ### startZoomAnimation(...) ```ts startZoomAnimation(zoom: number, rate: number): Promise ``` Starts animating the Camera's zoom to the specified [`zoom`](../hybrid-objects/CameraController.mdx#startzoomanimation) value, at the specified [`rate`](../hybrid-objects/CameraController.mdx#startzoomanimation). > [!WARNING] Throws > If the [`CameraDevice`](../hybrid-objects/CameraDevice.mdx) does not support the given [`zoom`](../hybrid-objects/CameraController.mdx#startzoomanimation) > value. See [`CameraDevice.minZoom`](../hybrid-objects/CameraDevice.mdx#minzoom) / [`CameraDevice.maxZoom`](../hybrid-objects/CameraDevice.mdx#maxzoom) #### Example Zoom to the maximum: ```ts const controller = ... const maxZoom = controller.device.maxZoom await controller.startZoomAnimation(maxZoom, 2) ``` #### Inherited from [`CameraController`](../hybrid-objects/CameraController.mdx).[`startZoomAnimation`](../hybrid-objects/CameraController.mdx#startzoomanimation) *** ### takeSnapshot() ```ts takeSnapshot(): Promise ``` Take a snapshot of the current [`PreviewView`](../type-aliases/PreviewView.mdx)'s contents, and return it as an [`Image`](https://github.com/mrousavy/react-native-nitro-image). > [!WARNING] Throws > If the [`PreviewView`](../type-aliases/PreviewView.mdx) isn't ready yet. > [!WARNING] Throws > If the [`PreviewView`](../type-aliases/PreviewView.mdx) doesn't have snapshottable contents. > [!WARNING] Throws > If the [`PreviewView`](../type-aliases/PreviewView.mdx) doesn't support snapshots. #### Inherited from [`PreviewViewMethods`](PreviewViewMethods.mdx).[`takeSnapshot`](PreviewViewMethods.mdx#takesnapshot) --- # CameraSessionConfiguration Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/CameraSessionConfiguration --- title: CameraSessionConfiguration description: Configuration for a CameraSession. tocPlatforms: allowBackgroundAudioPlayback?: - iOS --- ```ts interface CameraSessionConfiguration ``` Configuration for a [`CameraSession`](../hybrid-objects/CameraSession.mdx). ## Properties ### allowBackgroundAudioPlayback? ```ts optional allowBackgroundAudioPlayback?: boolean ``` If enabled, the [`CameraSession`](../hybrid-objects/CameraSession.mdx) does not interrupt currently playing audio (e.g. music from a different app), while recording. If disabled (the default), any playing audio will be stopped when a recording is started. #### Default ```ts false ``` --- # CameraSessionConnection Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/CameraSessionConnection --- title: CameraSessionConnection description: |- Specifies a single Camera input stream connection streaming into zero or more outputs. --- ```ts interface CameraSessionConnection ``` Specifies a single Camera input stream connection streaming into zero or more outputs. ## Properties ### constraints ```ts constraints: Constraint[] ``` Constraints specifically for this connection. *** ### initialExposureBias? ```ts optional initialExposureBias?: number ``` Sets the initial [`exposureBias`](../hybrid-objects/CameraController.mdx#exposurebias) value for the [`CameraController`](../hybrid-objects/CameraController.mdx). This value can later be adjusted via [`CameraController.setExposureBias(...)`](../hybrid-objects/CameraController.mdx#setexposurebias). *** ### initialZoom? ```ts optional initialZoom?: number ``` Sets the initial [`zoom`](../hybrid-objects/CameraController.mdx#zoom) value for the [`CameraController`](../hybrid-objects/CameraController.mdx). This value can later be adjusted via [`CameraController.setZoom(...)`](../hybrid-objects/CameraController.mdx#setzoom). *** ### input ```ts input: CameraDeviceOrPosition ``` The input device of this `CameraSessionConnection`. This [`CameraDevice`](../hybrid-objects/CameraDevice.mdx) will stream into all given [`outputs`](#outputs). Pass a [`TargetCameraPosition`](../type-aliases/TargetCameraPosition.mdx) to automatically select the default [`CameraDevice`](../hybrid-objects/CameraDevice.mdx) at the given position. *** ### onSessionConfigSelected? ```ts optional onSessionConfigSelected?: (config: CameraSessionConfig) => void ``` A callback that will be called after the given [`constraints`](#constraints) have been fully resolved, and a valid [`CameraSessionConfig`](../hybrid-objects/CameraSessionConfig.mdx) has been constructed. This is equivalent to calling [`CameraFactory.resolveConstraints(...)`](../hybrid-objects/CameraFactory.mdx#resolveconstraints) with the [`input`](#input), [`outputs`](#outputs) and [`constraints`](#constraints) listed here. #### Discussion The given [`config`](#onsessionconfigselected) can be used to provide visual feedback in Camera apps where buttons have to be greyed out when they are not supported, e.g. when passing a HDR [`Constraint`](../type-aliases/Constraint.mdx) but the session didn't end up selecting a [`CameraSessionConfig.selectedVideoDynamicRange`](../hybrid-objects/CameraSessionConfig.mdx#selectedvideodynamicrange). *** ### outputs ```ts outputs: CameraOutputConfiguration[] ``` All output configurations that the given [`input`](#input) device will stream into. --- # CameraViewProps Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/CameraViewProps --- title: CameraViewProps description: Props for the Camera component. tocPlatforms: enableDistortionCorrection?: - iOS enableSmoothAutoFocus?: - iOS implementationMode?: - Android onSubjectAreaChanged()?: - iOS --- ```ts interface CameraViewProps extends CameraProps, Pick ``` Props for the [`Camera`](../views/Camera.mdx) component. Extends [`CameraProps`](CameraProps.mdx) (the options for the underlying [`useCamera`](../functions/useCamera.mdx) hook) with [`PreviewView`](../type-aliases/PreviewView.mdx)-specific options and convenience props for gesture handling and animated values. ## Properties ### constraints? ```ts optional constraints?: Constraint[] ``` [`Constraint`](../type-aliases/Constraint.mdx)s (e.g. `{ fps: 60 }`) that the Camera pipeline will try to match when configuring the [`CameraSession`](../hybrid-objects/CameraSession.mdx). #### See [`CameraSessionConnection.constraints`](CameraSessionConnection.mdx#constraints) #### Inherited from [`CameraProps`](CameraProps.mdx).[`constraints`](CameraProps.mdx#constraints) *** ### device ```ts device: | CameraDevice | CameraPosition ``` The [`CameraDevice`](../hybrid-objects/CameraDevice.mdx) to open, or a [`CameraPosition`](../type-aliases/CameraPosition.mdx) (e.g. `'back'`) to auto-pick a matching device via [`getCameraDevice(...)`](../functions/getCameraDevice.mdx). #### See [`CameraSessionConnection.input`](CameraSessionConnection.mdx#input) #### Inherited from [`CameraProps`](CameraProps.mdx).[`device`](CameraProps.mdx#device) *** ### enableDistortionCorrection? ```ts optional enableDistortionCorrection?: boolean ``` If `true`, geometric distortion at the edges (e.g. on ultra-wide-angle cameras) is corrected, at the cost of a small amount of field of view. #### See [`CameraControllerConfiguration.enableDistortionCorrection`](CameraControllerConfiguration.mdx#enabledistortioncorrection) #### Default ```ts true ``` #### Inherited from [`CameraProps`](CameraProps.mdx).[`enableDistortionCorrection`](CameraProps.mdx#enabledistortioncorrection) *** ### enableLowLightBoost? ```ts optional enableLowLightBoost?: boolean ``` If `true`, the Camera pipeline may extend exposure times (effectively dropping frame rate) in low-light scenes to receive more light. #### See [`CameraControllerConfiguration.enableLowLightBoost`](CameraControllerConfiguration.mdx#enablelowlightboost) #### Default ```ts false ``` #### Inherited from [`CameraProps`](CameraProps.mdx).[`enableLowLightBoost`](CameraProps.mdx#enablelowlightboost) *** ### enableNativeTapToFocusGesture? ```ts optional enableNativeTapToFocusGesture?: boolean ``` Enables (or disables) the native tap-to-focus gesture. #### Default ```ts false ``` *** ### enableNativeZoomGesture? ```ts optional enableNativeZoomGesture?: boolean ``` Enables (or disables) the native pinch-to-zoom gesture. > [!WARNING] Throws > If this property is enabled and [`zoom`](#zoom) is not `undefined`. #### Default ```ts false ``` *** ### enableSmoothAutoFocus? ```ts optional enableSmoothAutoFocus?: boolean ``` If `true`, auto-focus transitions are performed slower and smoother to appear less intrusive in video recordings. #### See [`CameraControllerConfiguration.enableSmoothAutoFocus`](CameraControllerConfiguration.mdx#enablesmoothautofocus) #### Default ```ts false ``` #### Inherited from [`CameraProps`](CameraProps.mdx).[`enableSmoothAutoFocus`](CameraProps.mdx#enablesmoothautofocus) *** ### exposure? ```ts optional exposure?: | number | SharedValue ``` Sets the [`exposureBias`](../hybrid-objects/CameraController.mdx#exposurebias) value. You can also manually set the exposure bias via [`setExposureBias(...)`](../hybrid-objects/CameraController.mdx#setexposurebias). > [!NOTE] Note > This property can be animated via Reanimated by passing a [`SharedValue`](https://docs.swmansion.com/react-native-reanimated/docs/core/useSharedValue). #### Default ```ts 0 ``` *** ### getInitialExposureBias? ```ts optional getInitialExposureBias?: () => number | undefined ``` A getter for the initial exposure bias to apply when the [`CameraController`](../hybrid-objects/CameraController.mdx) is created. Later, the exposure bias can be adjusted via [`CameraController.setExposureBias(...)`](../hybrid-objects/CameraController.mdx#setexposurebias). #### See [`CameraSessionConnection.initialExposureBias`](CameraSessionConnection.mdx#initialexposurebias) #### Inherited from [`CameraProps`](CameraProps.mdx).[`getInitialExposureBias`](CameraProps.mdx#getinitialexposurebias) *** ### getInitialZoom? ```ts optional getInitialZoom?: () => number | undefined ``` A getter for the initial zoom value to apply when the [`CameraController`](../hybrid-objects/CameraController.mdx) is created. Later, the zoom can be adjusted via [`CameraController.setZoom(...)`](../hybrid-objects/CameraController.mdx#setzoom). #### See [`CameraSessionConnection.initialZoom`](CameraSessionConnection.mdx#initialzoom) #### Inherited from [`CameraProps`](CameraProps.mdx).[`getInitialZoom`](CameraProps.mdx#getinitialzoom) *** ### implementationMode? ```ts optional implementationMode?: PreviewImplementationMode ``` Sets the [`PreviewImplementationMode`](../type-aliases/PreviewImplementationMode.mdx) for the [`PreviewView`](../type-aliases/PreviewView.mdx). #### Default ```ts 'performance' ``` #### Inherited from [`PreviewViewProps`](PreviewViewProps.mdx).[`implementationMode`](PreviewViewProps.mdx#implementationmode) *** ### isActive ```ts isActive: boolean ``` Starts the [`CameraSession`](../hybrid-objects/CameraSession.mdx) when set to `true`, and stops it when set back to `false`. #### See - [`CameraSession.start()`](../hybrid-objects/CameraSession.mdx#start) - [`CameraSession.stop()`](../hybrid-objects/CameraSession.mdx#stop) - [`CameraSession.isRunning`](../hybrid-objects/CameraSession.mdx#isrunning) #### Inherited from [`CameraProps`](CameraProps.mdx).[`isActive`](CameraProps.mdx#isactive) *** ### mirrorMode? ```ts optional mirrorMode?: MirrorMode ``` Sets whether the [`CameraOutput`](../hybrid-objects/CameraOutput.mdx)s are mirrored along the vertical axis. [`'auto'`](../type-aliases/MirrorMode.mdx) mirrors automatically on selfie cameras. #### See [`CameraOutputConfiguration.mirrorMode`](CameraOutputConfiguration.mdx#mirrormode) #### Default ```ts 'auto' ``` #### Inherited from [`CameraProps`](CameraProps.mdx).[`mirrorMode`](CameraProps.mdx#mirrormode) *** ### onConfigured? ```ts optional onConfigured?: () => void ``` Called whenever the [`CameraSession`](../hybrid-objects/CameraSession.mdx) has been configured with new connections via [`configure(...)`](../hybrid-objects/CameraSession.mdx#configure) and connections to the individual outputs are formed. This is a good place to check output capabilities, such as [`CameraVideoOutput.getSupportedVideoCodecs()`](../hybrid-objects/CameraVideoOutput.mdx#getsupportedvideocodecs) #### Inherited from [`CameraProps`](CameraProps.mdx).[`onConfigured`](CameraProps.mdx#onconfigured) *** ### onError? ```ts optional onError?: (error: Error) => void ``` Called whenever the [`CameraSession`](../hybrid-objects/CameraSession.mdx) has encountered an error. #### See [`CameraSession.addOnErrorListener`](../hybrid-objects/CameraSession.mdx#addonerrorlistener) #### Inherited from [`CameraProps`](CameraProps.mdx).[`onError`](CameraProps.mdx#onerror) *** ### onInterruptionEnded? ```ts optional onInterruptionEnded?: () => void ``` Called when a previous interruption has ended and the [`CameraSession`](../hybrid-objects/CameraSession.mdx) is running uninterrupted again. #### See [`CameraSession.addOnInterruptionEndedListener`](../hybrid-objects/CameraSession.mdx#addoninterruptionendedlistener) #### Inherited from [`CameraProps`](CameraProps.mdx).[`onInterruptionEnded`](CameraProps.mdx#oninterruptionended) *** ### onInterruptionStarted? ```ts optional onInterruptionStarted?: (interruption: InterruptionReason) => void ``` Called whenever the [`CameraSession`](../hybrid-objects/CameraSession.mdx) has encountered an interruption of the given [`InterruptionReason`](../type-aliases/InterruptionReason.mdx). Interruptions are temporarily. #### See [`CameraSession.addOnInterruptionStartedListener`](../hybrid-objects/CameraSession.mdx#addoninterruptionstartedlistener) #### Inherited from [`CameraProps`](CameraProps.mdx).[`onInterruptionStarted`](CameraProps.mdx#oninterruptionstarted) *** ### onPreviewStarted? ```ts optional onPreviewStarted?: () => void ``` Called when the [`Camera`](../views/Camera.mdx)'s Preview received its first Frame. *** ### onPreviewStopped? ```ts optional onPreviewStopped?: () => void ``` Called when the [`Camera`](../views/Camera.mdx)'s Preview stopped streaming Frames. *** ### onSessionConfigSelected? ```ts optional onSessionConfigSelected?: (config: CameraSessionConfig) => void ``` Called once the given [`constraints`](CameraProps.mdx#constraints) have been fully resolved into a concrete [`CameraSessionConfig`](../hybrid-objects/CameraSessionConfig.mdx). #### See [`CameraSessionConnection.onSessionConfigSelected`](CameraSessionConnection.mdx#onsessionconfigselected) #### Inherited from [`CameraProps`](CameraProps.mdx).[`onSessionConfigSelected`](CameraProps.mdx#onsessionconfigselected) *** ### onStarted? ```ts optional onStarted?: () => void ``` Called when the [`CameraSession`](../hybrid-objects/CameraSession.mdx) has been started. #### See [`CameraSession.addOnStartedListener`](../hybrid-objects/CameraSession.mdx#addonstartedlistener) #### Inherited from [`CameraProps`](CameraProps.mdx).[`onStarted`](CameraProps.mdx#onstarted) *** ### onStopped? ```ts optional onStopped?: () => void ``` Called when the [`CameraSession`](../hybrid-objects/CameraSession.mdx) has been stopped. #### See [`CameraSession.addOnStoppedListener`](../hybrid-objects/CameraSession.mdx#addonstoppedlistener) #### Inherited from [`CameraProps`](CameraProps.mdx).[`onStopped`](CameraProps.mdx#onstopped) *** ### onSubjectAreaChanged? ```ts optional onSubjectAreaChanged?: () => void ``` Called when the subject area substantially changes, e.g. when the user pans away from a scene that was previously in focus. This is a good point to reset any locked AE/AF/AWB focus states back to continuously auto-focus. #### See [`CameraController.addSubjectAreaChangedListener`](../hybrid-objects/CameraController.mdx#addsubjectareachangedlistener) #### Inherited from [`CameraProps`](CameraProps.mdx).[`onSubjectAreaChanged`](CameraProps.mdx#onsubjectareachanged) *** ### orientationSource? ```ts optional orientationSource?: "custom" | OrientationSource ``` Set a desired [`OrientationSource`](../type-aliases/OrientationSource.mdx) for automatically applying [`CameraOrientation`](../type-aliases/CameraOrientation.mdx) to all [`outputs`](CameraProps.mdx#outputs), or `'custom'` if you prefer to manually specify [`CameraOrientation`](../type-aliases/CameraOrientation.mdx) yourself. #### See [`CameraOutput.outputOrientation`](../hybrid-objects/CameraOutput.mdx#outputorientation) #### Inherited from [`CameraProps`](CameraProps.mdx).[`orientationSource`](CameraProps.mdx#orientationsource) *** ### outputs? ```ts optional outputs?: CameraOutput[] ``` The [`CameraOutput`](../hybrid-objects/CameraOutput.mdx)s the [`device`](CameraProps.mdx#device) will stream into. #### See - [`CameraSessionConnection.outputs`](CameraSessionConnection.mdx#outputs) - [`CameraOutputConfiguration.output`](CameraOutputConfiguration.mdx#output) #### Inherited from [`CameraProps`](CameraProps.mdx).[`outputs`](CameraProps.mdx#outputs) *** ### ref? ```ts optional ref?: Ref ``` #### See [`CameraRef`](CameraRef.mdx) *** ### resizeMode? ```ts optional resizeMode?: PreviewResizeMode ``` Sets the [`PreviewResizeMode`](../type-aliases/PreviewResizeMode.mdx) for the [`PreviewView`](../type-aliases/PreviewView.mdx). #### Default ```ts 'cover' ``` #### Inherited from [`PreviewViewProps`](PreviewViewProps.mdx).[`resizeMode`](PreviewViewProps.mdx#resizemode) *** ### torchMode? ```ts optional torchMode?: TorchMode ``` Sets the [`torchMode`](../hybrid-objects/CameraController.mdx#torchmode) value. #### Default ```ts 'off' ``` *** ### zoom? ```ts optional zoom?: | number | SharedValue ``` Sets the [`zoom`](../hybrid-objects/CameraController.mdx#zoom) value. You can also manually set zoom via [`setZoom(...)`](../hybrid-objects/CameraController.mdx#setzoom). > [!NOTE] Note > This property can be animated via Reanimated by passing a [`SharedValue`](https://docs.swmansion.com/react-native-reanimated/docs/core/useSharedValue). > [!WARNING] Throws > If this property is set and [`enableNativeZoomGesture`](#enablenativezoomgesture) is enabled. #### Default ```ts 1 ``` --- # CapturePhotoCallbacks Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/CapturePhotoCallbacks --- title: CapturePhotoCallbacks description: |- Callbacks for a capturePhoto(...) call. --- ```ts interface CapturePhotoCallbacks ``` Callbacks for a [`capturePhoto(...)`](../hybrid-objects/CameraPhotoOutput.mdx#capturephoto) call. #### See [`CameraPhotoOutput`](../hybrid-objects/CameraPhotoOutput.mdx) ## Properties ### onDidCapturePhoto? ```ts optional onDidCapturePhoto?: () => void ``` Called just after the pipeline captured a photo. *** ### onPreviewImageAvailable? ```ts optional onPreviewImageAvailable?: (previewImage: Image) => void ``` Called just after [`onWillBeginCapture`](#onwillbegincapture) with an [`Image`](https://github.com/mrousavy/react-native-nitro-image) suitable for preview or thumbnail updates. This will only be called if a preview image size is set via [`PhotoOutputOptions.previewImageTargetSize`](PhotoOutputOptions.mdx#previewimagetargetsize), and the [`CameraDevice`](../hybrid-objects/CameraDevice.mdx) supports preview images (see [`CameraDevice.supportsPreviewImage`](../hybrid-objects/CameraDevice.mdx#supportspreviewimage)). *** ### onWillBeginCapture? ```ts optional onWillBeginCapture?: () => void ``` Called when the pipeline starts the capture. *** ### onWillCapturePhoto? ```ts optional onWillCapturePhoto?: () => void ``` Called just before the pipeline starts capturing the photo. --- # CapturePhotoSettings Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/CapturePhotoSettings --- title: CapturePhotoSettings description: |- Configuration options for a capturePhoto(...) call. tocPlatforms: enableCameraCalibrationDataDelivery?: - iOS --- ```ts interface CapturePhotoSettings ``` Configuration options for a [`capturePhoto(...)`](../hybrid-objects/CameraPhotoOutput.mdx#capturephoto) call. #### See [`CameraPhotoOutput`](../hybrid-objects/CameraPhotoOutput.mdx) ## Properties ### enableCameraCalibrationDataDelivery? ```ts optional enableCameraCalibrationDataDelivery?: boolean ``` Specifies whether the capture pipeline should deliver Camera calibration data. A [`Photo`](../hybrid-objects/Photo.mdx)'s calibration data can be accessed via [`Photo.calibrationData`](../hybrid-objects/Photo.mdx#calibrationdata). #### Default ```ts false ``` *** ### enableDepthData? ```ts optional enableDepthData?: boolean ``` Enables or disables depth data delivery in the resulting [`Photo`](../hybrid-objects/Photo.mdx). Depth data will be embedded in the Photo and can be accessed via [`Photo.depth`](../hybrid-objects/Photo.mdx#depth). [`enableDepthData`](#enabledepthdata) can only be enabled if the [`CameraPhotoOutput`](../hybrid-objects/CameraPhotoOutput.mdx) supports depth data - see [`CameraPhotoOutput.supportsDepthDataDelivery`](../hybrid-objects/CameraPhotoOutput.mdx#supportsdepthdatadelivery). #### Default ```ts false ``` *** ### enableDistortionCorrection? ```ts optional enableDistortionCorrection?: boolean ``` Specifies whether the capture pipeline should automatically correct lens distortion. > [!NOTE] Note > If enabled, captured photos will look > slightly different compared to the Preview > because the field-of-view might be narrower. #### Default ```ts false ``` *** ### enableRedEyeReduction? ```ts optional enableRedEyeReduction?: boolean ``` Specifies whether red-eye reduction should be applied automatically on flash captures. When [`flashMode`](#flashmode) is [`'off'`](../type-aliases/FlashMode.mdx), red eye reduction is automataically disabled. #### Default ```ts true ``` *** ### enableShutterSound? ```ts optional enableShutterSound?: boolean ``` Enables or disables the system shutter sound. The shutter sound is fired exactly when a photo will be captured. The OS may choose to override this behaviour, e.g. if regional sound-suppression settings are applied. #### Default ```ts true ``` *** ### enableVirtualDeviceFusion? ```ts optional enableVirtualDeviceFusion?: boolean ``` Enables or disables virtual device image fusion. If enabled, the Camera pipeline may capture photos from multiple constituent physical Camera devices at once (if using a Camera device that has multiple physical devices) to improve still image quality. When capturing RAW photos, this is disabled. #### Default ```ts true ``` *** ### flashMode? ```ts optional flashMode?: FlashMode ``` Configures the [`FlashMode`](../type-aliases/FlashMode.mdx) for this Photo capture. > [!WARNING] Throws > If [`FlashMode`](../type-aliases/FlashMode.mdx) is `'on'`, but > the [`CameraDevice`](../hybrid-objects/CameraDevice.mdx) does not have a > flash - see [`CameraDevice.hasFlash`](../hybrid-objects/CameraDevice.mdx#hasflash) #### Default ```ts 'off' ``` *** ### location? ```ts optional location?: Location ``` Sets the given [`Location`](../hybrid-objects/Location.mdx) to be embedded into the EXIF data of the captured [`Photo`](../hybrid-objects/Photo.mdx). #### Default ```ts undefined ``` --- # DepthFrameOutputOptions Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/DepthFrameOutputOptions --- title: DepthFrameOutputOptions description: Configuration options for a CameraDepthFrameOutput. tocPlatforms: allowDeferredStart: - iOS --- ```ts interface DepthFrameOutputOptions extends Pick ``` Configuration options for a [`CameraDepthFrameOutput`](../hybrid-objects/CameraDepthFrameOutput.mdx). #### See - [`CameraDepthFrameOutput`](../hybrid-objects/CameraDepthFrameOutput.mdx) - [`useDepthOutput(...)`](../functions/useDepthOutput.mdx) ## Properties ### allowDeferredStart ```ts allowDeferredStart: boolean ``` Allow this output to start later in the capture pipeline startup process. Enabling this lets the camera prioritize outputs needed for preview first, then start the [`CameraFrameOutput`](../hybrid-objects/CameraFrameOutput.mdx) shortly afterwards. This can improve startup behavior when preview responsiveness is more important than receiving frame-processor frames immediately. #### Inherited from [`FrameOutputOptions`](FrameOutputOptions.mdx).[`allowDeferredStart`](FrameOutputOptions.mdx#allowdeferredstart) *** ### dropFramesWhileBusy ```ts dropFramesWhileBusy: boolean ``` Whether to drop new Frames when they arrive while the Frame Processor is still executing. - If set to `true`, the [`CameraFrameOutput`](../hybrid-objects/CameraFrameOutput.mdx) will automatically drop any Frames that arrive while your Frame Processor is still executing to avoid exhausting resources, at the risk of loosing information since Frames may be dropped. - If set to `false`, the [`CameraFrameOutput`](../hybrid-objects/CameraFrameOutput.mdx) will queue up any Frames that arrive while your Frame Processor is still executing and immediatelly call it once it is free again, at the risk of exhausting resources and growing RAM. #### Default ```ts true ``` #### Inherited from [`FrameOutputOptions`](FrameOutputOptions.mdx).[`dropFramesWhileBusy`](FrameOutputOptions.mdx#dropframeswhilebusy) *** ### enableFiltering ```ts enableFiltering: boolean ``` Enables or disables depth data filtering to smoothen out uneven spots in the depth map. *** ### enablePhysicalBufferRotation ```ts enablePhysicalBufferRotation: boolean ``` Enable (or disable) physical buffer rotation. - When [`enablePhysicalBufferRotation`](FrameOutputOptions.mdx#enablephysicalbufferrotation) is set to `true`, and the [`CameraFrameOutput`](../hybrid-objects/CameraFrameOutput.mdx)'s [`outputOrientation`](../hybrid-objects/CameraOutput.mdx#outputorientation) is set to any value different than the Camera sensor's native orientation, the Camera pipeline will physically rotate the buffers to apply the orientation. The resulting [`Frame`](../hybrid-objects/Frame.mdx)'s [`orientation`](../hybrid-objects/Frame.mdx#orientation) will then always be `'up'`, meaning it no longer needs to be rotated by the consumer. - When [`enablePhysicalBufferRotation`](FrameOutputOptions.mdx#enablephysicalbufferrotation) is set to `false`, the Camera pipeline will not physically rotate buffers, but instead only provide the [`Frame`](../hybrid-objects/Frame.mdx)'s orientation relative to the [`CameraFrameOutput`](../hybrid-objects/CameraFrameOutput.mdx)'s target [`outputOrientation`](../hybrid-objects/CameraOutput.mdx#outputorientation) as metadata (see [`Frame.orientation`](../hybrid-objects/Frame.mdx#orientation)), meaning the consumers have to handle orientation themselves - e.g. by reading pixels in a different order, or applying orientation in a GPU rendering pass, depending on the use-case. Setting [`enablePhysicalBufferRotation`](FrameOutputOptions.mdx#enablephysicalbufferrotation) to `true` introduces processing overhead. #### Default ```ts false ``` #### Inherited from [`FrameOutputOptions`](FrameOutputOptions.mdx).[`enablePhysicalBufferRotation`](FrameOutputOptions.mdx#enablephysicalbufferrotation) *** ### targetResolution ```ts targetResolution: Size ``` The target Frame Resolution to use. #### Discussion The [`CameraSession`](../hybrid-objects/CameraSession.mdx) will negotiate all output [`targetResolution`](FrameOutputOptions.mdx#targetresolution)s and constraints (such as HDR, FPS, etc) in a [`CameraSessionConfig`](../hybrid-objects/CameraSessionConfig.mdx) to finalize the Resolution used for the Output. This is therefore merely a resolution _target_, and may not be exactly met. If the given [`targetResolution`](FrameOutputOptions.mdx#targetresolution) cannot be met exactly, its aspect ratio (computed by [`Size.width`](Size.mdx#width) / [`Size.height`](Size.mdx#height)) will be prioritized over pixel count. #### Inherited from [`FrameOutputOptions`](FrameOutputOptions.mdx).[`targetResolution`](FrameOutputOptions.mdx#targetresolution) --- # DeviceFilter Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/DeviceFilter --- title: DeviceFilter --- ```ts interface DeviceFilter ``` ## Properties ### physicalDevices? ```ts optional physicalDevices?: PhysicalDeviceType[] ``` The desired physical devices your camera device should have. Many modern phones have multiple Camera devices on one side and can combine those physical camera devices to one logical camera device. For example, the iPhone 11 has two physical camera devices, the `ultra-wide-angle` ("fish-eye") and the normal `wide-angle`. You can either use one of those devices individually, or use a combined logical camera device which can smoothly switch over between the two physical cameras depending on the current `zoom` level. When the user is at 0.5x-1x zoom, the `ultra-wide-angle` can be used to offer a fish-eye zoom-out effect, and anything above 1x will smoothly switch over to the `wide-angle`. > [!NOTE] Note > Devices with fewer physical devices (`['wide-angle']`) are usually faster to start up than more complex > devices (`['ultra-wide-angle', 'wide-angle', 'telephoto']`), but don't offer zoom switch-over capabilities. #### Example ```ts // This device is simpler, so it starts up faster. getCameraDevice(devices, 'back', { physicalDevices: ['wide-angle'] }) // This device is more complex, so it starts up slower, but you can switch between devices on 0.5x, 1x and 2x zoom. getCameraDevice(devices, 'back', { physicalDevices: ['ultra-wide-angle', 'wide-angle', 'telephoto'] }) ``` --- # DynamicRange Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/DynamicRange --- title: DynamicRange description: |- Represents a Dynamic Range, often used for recording HDR videos using a CameraVideoOutput. --- ```ts interface DynamicRange ``` Represents a Dynamic Range, often used for recording HDR videos using a [`CameraVideoOutput`](../hybrid-objects/CameraVideoOutput.mdx). #### Discussion To get all available `DynamicRange`s on a device, use [`CameraDevice.supportedVideoDynamicRanges`](../hybrid-objects/CameraDevice.mdx#supportedvideodynamicranges). #### Discussion To use a specific `DynamicRange` in a Camera session, use a [`VideoDynamicRangeConstraint`](VideoDynamicRangeConstraint.mdx). ## Properties ### bitDepth ```ts bitDepth: DynamicRangeBitDepth ``` The bit-depth for the dynamic range. Often 8-bit or 10-bit. *** ### colorRange ```ts colorRange: ColorRange ``` The range of YUV color components. *** ### colorSpace ```ts colorSpace: ColorSpace ``` The color-space for the dynamic range. SDR is often composed of `srgb` and `p3-d65`, and HDR is often composed of `hlg-bt2020`. --- # FPSConstraint Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/FPSConstraint --- title: FPSConstraint description: |- A constraint to set a given FPS `number` for any Video, Frame or Preview Streams (e.g. --- ```ts interface FPSConstraint ``` A constraint to set a given FPS `number` for any Video, Frame or Preview Streams (e.g. [`CameraVideoOutput`](../hybrid-objects/CameraVideoOutput.mdx), [`CameraFrameOutput`](../hybrid-objects/CameraFrameOutput.mdx), or [`CameraPreviewOutput`](../hybrid-objects/CameraPreviewOutput.mdx)) #### Example ```ts { fps: 60 } ``` ## Properties ### fps ```ts fps: number ``` --- # FocusOptions Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/FocusOptions --- title: FocusOptions description: |- Options for a focus metering operation via CameraController.focusTo(...) --- ```ts interface FocusOptions ``` Options for a focus metering operation via [`CameraController.focusTo(...)`](../hybrid-objects/CameraController.mdx#focusto) ## Properties ### adaptiveness? ```ts optional adaptiveness?: SceneAdaptiveness ``` The adaptiveness to changes in the scene. #### See [`SceneAdaptiveness`](../type-aliases/SceneAdaptiveness.mdx) #### Default ```ts 'continuous' ``` *** ### autoResetAfter? ```ts optional autoResetAfter?: number | null ``` - If set to a `number`, the focus will automatically reset itself to continuous auto focus again after it has been stable for the duration specified in [`autoResetAfter`](#autoresetafter) - in seconds. - If set to `null`, the focus stays locked until you manually call [`resetFocus()`](../hybrid-objects/CameraController.mdx#resetfocus), or schedule another focus operation via [`focusTo(...)`](../hybrid-objects/CameraController.mdx#focusto) #### Default ```ts 5 ``` *** ### modes? ```ts optional modes?: MeteringMode[] ``` The metering modes to run this focus operation on. By default, all [`MeteringMode`](../type-aliases/MeteringMode.mdx)s that are supported on the device will be enabled - so ideally 3A. When passing a custom value, you are responsible for ensuring that the given modes are compatible - e.g. when passing `['AF']` you must ensure that the [`CameraDevice`](../hybrid-objects/CameraDevice.mdx) supports focus metering - see [`CameraDevice.supportsFocusMetering`](../hybrid-objects/CameraDevice.mdx#supportsfocusmetering). #### See [`MeteringMode`](../type-aliases/MeteringMode.mdx) #### Default ```ts ['AE', 'AF', 'AWB'] ``` *** ### responsiveness? ```ts optional responsiveness?: FocusResponsiveness ``` The responsiveness of the metering operation. #### See [`FocusResponsiveness`](../type-aliases/FocusResponsiveness.mdx) #### Default ```ts 'snappy' ``` --- # FrameOutputOptions Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/FrameOutputOptions --- title: FrameOutputOptions description: Configuration options for a CameraFrameOutput. tocPlatforms: allowDeferredStart: - iOS enableCameraMatrixDelivery: - iOS --- ```ts interface FrameOutputOptions ``` Configuration options for a [`CameraFrameOutput`](../hybrid-objects/CameraFrameOutput.mdx). #### See - [`CameraFrameOutput`](../hybrid-objects/CameraFrameOutput.mdx) - [`useFrameOutput(...)`](../functions/useFrameOutput.mdx) ## Properties ### allowDeferredStart ```ts allowDeferredStart: boolean ``` Allow this output to start later in the capture pipeline startup process. Enabling this lets the camera prioritize outputs needed for preview first, then start the [`CameraFrameOutput`](../hybrid-objects/CameraFrameOutput.mdx) shortly afterwards. This can improve startup behavior when preview responsiveness is more important than receiving frame-processor frames immediately. *** ### dropFramesWhileBusy ```ts dropFramesWhileBusy: boolean ``` Whether to drop new Frames when they arrive while the Frame Processor is still executing. - If set to `true`, the [`CameraFrameOutput`](../hybrid-objects/CameraFrameOutput.mdx) will automatically drop any Frames that arrive while your Frame Processor is still executing to avoid exhausting resources, at the risk of loosing information since Frames may be dropped. - If set to `false`, the [`CameraFrameOutput`](../hybrid-objects/CameraFrameOutput.mdx) will queue up any Frames that arrive while your Frame Processor is still executing and immediatelly call it once it is free again, at the risk of exhausting resources and growing RAM. #### Default ```ts true ``` *** ### enableCameraMatrixDelivery ```ts enableCameraMatrixDelivery: boolean ``` Gets or sets whether the [`CameraFrameOutput`](../hybrid-objects/CameraFrameOutput.mdx) attaches a Camera Intrinsic Matrix to the [`Frame`](../hybrid-objects/Frame.mdx)s it produces. #### See [`Frame.cameraIntrinsicMatrix`](../hybrid-objects/Frame.mdx#cameraintrinsicmatrix) > [!WARNING] Throws > If video stabilization is enabled, as intrinsic matrix delivery only works when video stabilization is `'off'`. #### Default ```ts false ``` *** ### enablePhysicalBufferRotation ```ts enablePhysicalBufferRotation: boolean ``` Enable (or disable) physical buffer rotation. - When [`enablePhysicalBufferRotation`](#enablephysicalbufferrotation) is set to `true`, and the [`CameraFrameOutput`](../hybrid-objects/CameraFrameOutput.mdx)'s [`outputOrientation`](../hybrid-objects/CameraOutput.mdx#outputorientation) is set to any value different than the Camera sensor's native orientation, the Camera pipeline will physically rotate the buffers to apply the orientation. The resulting [`Frame`](../hybrid-objects/Frame.mdx)'s [`orientation`](../hybrid-objects/Frame.mdx#orientation) will then always be `'up'`, meaning it no longer needs to be rotated by the consumer. - When [`enablePhysicalBufferRotation`](#enablephysicalbufferrotation) is set to `false`, the Camera pipeline will not physically rotate buffers, but instead only provide the [`Frame`](../hybrid-objects/Frame.mdx)'s orientation relative to the [`CameraFrameOutput`](../hybrid-objects/CameraFrameOutput.mdx)'s target [`outputOrientation`](../hybrid-objects/CameraOutput.mdx#outputorientation) as metadata (see [`Frame.orientation`](../hybrid-objects/Frame.mdx#orientation)), meaning the consumers have to handle orientation themselves - e.g. by reading pixels in a different order, or applying orientation in a GPU rendering pass, depending on the use-case. Setting [`enablePhysicalBufferRotation`](#enablephysicalbufferrotation) to `true` introduces processing overhead. #### Default ```ts false ``` *** ### enablePreviewSizedOutputBuffers ```ts enablePreviewSizedOutputBuffers: boolean ``` Deliver smaller, preview-sized output buffers for Frame Processing. This is useful for ML and computer vision workloads where full-resolution buffers are unnecessary and would only increase memory bandwidth and processing costs. Other camera outputs (for example [`CameraVideoOutput`](../hybrid-objects/CameraVideoOutput.mdx)) keep using the full-resolution output negotiated by the [`CameraSession`](../hybrid-objects/CameraSession.mdx). #### Default ```ts false ``` *** ### pixelFormat ```ts pixelFormat: TargetVideoPixelFormat ``` Sets the [`TargetVideoPixelFormat`](../type-aliases/TargetVideoPixelFormat.mdx) of the [`CameraFrameOutput`](../hybrid-objects/CameraFrameOutput.mdx). - The most efficient format is [`'native'`](../type-aliases/TargetVideoPixelFormat.mdx), which internally just uses the [`CameraSessionConfig`](../hybrid-objects/CameraSessionConfig.mdx)'s [`nativePixelFormat`](../hybrid-objects/CameraSessionConfig.mdx#nativepixelformat). - Some configurations may natively stream in a YUV format (e.g. if [`nativePixelFormat`](../hybrid-objects/CameraSessionConfig.mdx#nativepixelformat) == [`'yuv-420-8-bit-video'`](../type-aliases/TargetVideoPixelFormat.mdx)), in which case [`'yuv'`](../type-aliases/TargetVideoPixelFormat.mdx) can also be zero overhead. - If your Frame Processor absolutely requires to run in RGB, you may set [`pixelFormat`](#pixelformat) to [`'rgb'`](../type-aliases/TargetVideoPixelFormat.mdx), which comes with additional processing overhead as the Camera pipeline will convert native frames to RGB (e.g. to [`'rgb-bgra-8-bit'`](../type-aliases/TargetVideoPixelFormat.mdx)). #### Discussion It is recommended to use [`'native'`](../type-aliases/TargetVideoPixelFormat.mdx) if possible, as this will use a zero-copy GPU-only path. Other formats almost always require conversion at some point, especially on Android. If you need CPU-access to pixels, use [`'yuv'`](../type-aliases/TargetVideoPixelFormat.mdx) instead of [`'rgb'`](../type-aliases/TargetVideoPixelFormat.mdx) as a next best alternative, as [`'rgb'`](../type-aliases/TargetVideoPixelFormat.mdx) uses ~2.6x more bandwidth than [`'yuv'`](../type-aliases/TargetVideoPixelFormat.mdx) and requires additional conversions as it is not a Camera-native format. Only use [`'rgb'`](../type-aliases/TargetVideoPixelFormat.mdx) if you really need to stream [`Frame`](../hybrid-objects/Frame.mdx)s in an RGB format. #### Discussion It is recommended to use [`'native'`](../type-aliases/TargetVideoPixelFormat.mdx) and design your Frame Processing pipeline to be fully GPU-based, such as performing ML model processing on the GPU/NPU and rendering via Metal/Vulkan/OpenGL by importing the [`Frame`](../hybrid-objects/Frame.mdx) as an external sampler/texture (or via Skia/WebGPU which use [`NativeBuffer`](NativeBuffer.mdx) zero-copy APIs), as the [`Frame`](../hybrid-objects/Frame.mdx)'s data will already be on the GPU then. If you use a non-[`'native'`](../type-aliases/TargetVideoPixelFormat.mdx) [`pixelFormat`](#pixelformat) in a GPU pipeline, your pipeline will be noticeably slower as CPU <-> GPU downloads/uploads will be performed on every frame. *** ### targetResolution ```ts targetResolution: Size ``` The target Frame Resolution to use. #### Discussion The [`CameraSession`](../hybrid-objects/CameraSession.mdx) will negotiate all output [`targetResolution`](#targetresolution)s and constraints (such as HDR, FPS, etc) in a [`CameraSessionConfig`](../hybrid-objects/CameraSessionConfig.mdx) to finalize the Resolution used for the Output. This is therefore merely a resolution _target_, and may not be exactly met. If the given [`targetResolution`](#targetresolution) cannot be met exactly, its aspect ratio (computed by [`Size.width`](Size.mdx#width) / [`Size.height`](Size.mdx#height)) will be prioritized over pixel count. --- # FrameRendererViewMethods Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/FrameRendererViewMethods --- title: FrameRendererViewMethods --- ```ts interface FrameRendererViewMethods extends HybridViewMethods ``` --- # FrameRendererViewProps Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/FrameRendererViewProps --- title: FrameRendererViewProps --- ```ts interface FrameRendererViewProps extends HybridViewProps ``` ## Properties ### renderer? ```ts optional renderer?: FrameRenderer ``` --- # ListenerSubscription Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/ListenerSubscription --- title: ListenerSubscription description: |- Represents a subscription to any kind of listener. --- ```ts interface ListenerSubscription ``` Represents a subscription to any kind of listener. You can remove the subscription by calling [`remove()`](#remove). ## Properties ### remove ```ts remove: () => void ``` Remove the listener subscription. You can call this in a `useEffect`'s cleanup function. --- # NativeBuffer Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/NativeBuffer --- title: NativeBuffer description: An unmanaged memory pointer to a native platform buffer. --- ```ts interface NativeBuffer ``` An unmanaged memory pointer to a native platform buffer. This is a shared contract between libraries to interact with native buffers without natively typed bindings. Consumers, like react-native-skia or react-native-wgpu, can use the [`pointer`](#pointer) to unwrap the native buffer, load it as a GPU Texture, and release it once it has been rendered via the [`release`](#release) function. #### Example ```ts const frame = ... const nativeBuffer = frame.getNativeBuffer() // your processing... nativeBuffer.release() frame.dispose() ``` ## Properties ### pointer ```ts readonly pointer: UInt64 ``` A uint64_t/uintptr_t to the native platform buffer, with a retain count of +1. - On iOS; this points to a `CVPixelBufferRef` - On Android; this points to a `AHardwareBuffer*` ## Methods ### release() ```ts release(): void ``` Release this reference to the platform buffer again, effectively decrementing the retain count by -1. > [!NOTE] Note > This must always be called as soon as possible, otherwise the pipeline will stall. > [!NOTE] Note > There might still be other references, so it does not guarantee buffer deletion. --- # ObjectOutputOptions Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/ObjectOutputOptions --- title: ObjectOutputOptions description: Options for the CameraObjectOutput. platforms: - iOS --- ```ts interface ObjectOutputOptions ``` Options for the [`CameraObjectOutput`](../hybrid-objects/CameraObjectOutput.mdx). #### See - `ObjectOutputOptions` - [`useObjectOutput(...)`](../functions/useObjectOutput.mdx) ## Properties ### enabledObjectTypes ```ts enabledObjectTypes: ScannedObjectType[] ``` The array of [`ScannedObjectType`](../type-aliases/ScannedObjectType.mdx)s to detect. --- # PermissionState Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/PermissionState --- title: PermissionState description: |- The state of a Camera or Microphone permission, as returned by useCameraPermission or useMicrophonePermission. --- ```ts interface PermissionState ``` The state of a Camera or Microphone permission, as returned by [`useCameraPermission`](../functions/useCameraPermission.mdx) or [`useMicrophonePermission`](../functions/useMicrophonePermission.mdx). ## Properties ### canRequestPermission ```ts canRequestPermission: boolean ``` Whether the app can still request this permission ([`status`](#status) is [`'not-determined'`](../type-aliases/PermissionStatus.mdx)). If this is `false` but [`hasPermission`](#haspermission) is also `false`, the user must grant the permission from the system Settings. *** ### hasPermission ```ts hasPermission: boolean ``` Whether the app has been granted this permission ([`status`](#status) is [`'authorized'`](../type-aliases/PermissionStatus.mdx)). *** ### requestPermission ```ts requestPermission: () => Promise ``` Requests the permission from the user. Resolves with whether the permission was granted after the request completed. Can only be called if [`canRequestPermission`](#canrequestpermission) is `true`. *** ### status ```ts status: PermissionStatus ``` The current raw [`PermissionStatus`](../type-aliases/PermissionStatus.mdx). --- # PhotoFile Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/PhotoFile --- title: PhotoFile description: Represents a Photo written to a File. --- ```ts interface PhotoFile ``` Represents a Photo written to a File. ## Properties ### filePath ```ts filePath: string ``` The path of the file. This is a filesystem path, not a `file://` URL. --- # PhotoHDRConstraint Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/PhotoHDRConstraint --- title: PhotoHDRConstraint description: A constraint to set Photo HDR for Photo Outputs (e.g. --- ```ts interface PhotoHDRConstraint ``` A constraint to set Photo HDR for Photo Outputs (e.g. [`CameraPhotoOutput`](../hybrid-objects/CameraPhotoOutput.mdx)) #### Example ```ts { photoHDR: true } ``` ## Properties ### photoHDR ```ts photoHDR: boolean ``` --- # PhotoOutputOptions Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/PhotoOutputOptions --- title: PhotoOutputOptions description: Configuration options for a CameraPhotoOutput. --- ```ts interface PhotoOutputOptions ``` Configuration options for a [`CameraPhotoOutput`](../hybrid-objects/CameraPhotoOutput.mdx). #### See - [`CameraPhotoOutput`](../hybrid-objects/CameraPhotoOutput.mdx) - [`usePhotoOutput(...)`](../functions/usePhotoOutput.mdx) ## Properties ### containerFormat ```ts containerFormat: TargetPhotoContainerFormat ``` Specifies the [`TargetPhotoContainerFormat`](../type-aliases/TargetPhotoContainerFormat.mdx) to shoot the [`Photo`](../hybrid-objects/Photo.mdx) in. *** ### previewImageTargetSize? ```ts optional previewImageTargetSize?: Size ``` When this is set to a specific [`Size`](Size.mdx), a ready to display [`Image`](https://github.com/mrousavy/react-native-nitro-image) will be delivered just before the resulting [`Photo`](../hybrid-objects/Photo.mdx) is available. Preview Image delivery requires additional processing, so this is disabled by default. If this is `undefined` (the default), no preview Image will be supplied. It is recommended to set this to a [`Size`](Size.mdx) that is as low as possible to avoid unnecessary overhead. #### See [`CapturePhotoCallbacks.onPreviewImageAvailable`](CapturePhotoCallbacks.mdx#onpreviewimageavailable) #### Default ```ts undefined ``` *** ### quality ```ts quality: number ``` Defines the compression quality for processed photo formats. The value must be within the normalized range from `0.0` to `1.0`, where `1.0` is the highest quality and `0.0` is the strongest compression. RAW photo formats such as [`'dng'`](../type-aliases/TargetPhotoContainerFormat.mdx) ignore this option. #### Default 0.9 in [`usePhotoOutput(...)`](../functions/usePhotoOutput.mdx) *** ### qualityPrioritization ```ts qualityPrioritization: QualityPrioritization ``` Specifies the balance between speed or image quality for the photo capture pipeline. The currently selected [`CameraDevice`](../hybrid-objects/CameraDevice.mdx) must support [`QualityPrioritization`](../type-aliases/QualityPrioritization.mdx) [`'speed'`](../type-aliases/QualityPrioritization.mdx) (see [`supportsSpeedQualityPrioritization`](../hybrid-objects/CameraDevice.mdx#supportsspeedqualityprioritization)), otherwise an error will be thrown. #### See [`CameraDevice.supportsSpeedQualityPrioritization`](../hybrid-objects/CameraDevice.mdx#supportsspeedqualityprioritization) *** ### targetResolution ```ts targetResolution: Size ``` The target Photo Resolution to use. #### Discussion The [`CameraSession`](../hybrid-objects/CameraSession.mdx) will negotiate all output [`targetResolution`](#targetresolution)s and constraints (such as HDR, FPS, etc) in a [`CameraSessionConfig`](../hybrid-objects/CameraSessionConfig.mdx) to finalize the Resolution used for the Output. This is therefore merely a resolution _target_, and may not be exactly met. If the given [`targetResolution`](#targetresolution) cannot be met exactly, its aspect ratio (computed by [`Size.width`](Size.mdx#width) / [`Size.height`](Size.mdx#height)) will be prioritized over pixel count. --- # PixelFormatConstraint Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/PixelFormatConstraint --- title: PixelFormatConstraint description: |- A constraint to prefer a streaming Format with the given target PixelFormat. --- ```ts interface PixelFormatConstraint ``` A constraint to prefer a streaming Format with the given target [`PixelFormat`](../type-aliases/PixelFormat.mdx). #### Example ```ts { pixelFormat: 'yuv-420-8-bit-full' } ``` ## Properties ### pixelFormat ```ts pixelFormat: PixelFormat ``` --- # Point Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/Point --- title: Point description: |- Represents a Point in the current context's coordinate system. --- ```ts interface Point ``` Represents a Point in the current context's coordinate system. ## Properties ### x ```ts x: number ``` The X coordinate of the Point. *** ### y ```ts y: number ``` The Y coordinate of the Point. --- # PreviewStabilizationModeConstraint Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/PreviewStabilizationModeConstraint --- title: PreviewStabilizationModeConstraint description: |- A constraint to set a TargetStabilizationMode for Preview Streams (e.g. --- ```ts interface PreviewStabilizationModeConstraint ``` A constraint to set a [`TargetStabilizationMode`](../type-aliases/TargetStabilizationMode.mdx) for Preview Streams (e.g. [`CameraPreviewOutput`](../hybrid-objects/CameraPreviewOutput.mdx)). #### Example ```ts { previewStabilizationMode: 'preview-optimized' } ``` ## Properties ### previewStabilizationMode ```ts previewStabilizationMode: TargetStabilizationMode ``` --- # PreviewViewMethods Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/PreviewViewMethods --- title: PreviewViewMethods tocPlatforms: convertScannedObjectCoordinatesToViewCoordinates(...): - iOS takeSnapshot(): - Android --- ```ts interface PreviewViewMethods extends HybridViewMethods ``` #### Extended by - [`CameraRef`](CameraRef.mdx) ## Methods ### convertCameraPointToViewPoint(...) ```ts convertCameraPointToViewPoint(cameraPoint: Point): Point ``` Converts the given [`cameraPoint`](#convertcamerapointtoviewpoint) in camera sensor coordinates into a [`Point`](Point.mdx) in view coordinates, relative to this [`PreviewView`](../type-aliases/PreviewView.mdx). > [!NOTE] Note > Camera sensor coordinates are not necessarily normalized from `0.0` to `1.0`. Some implementations may have a different opaque coordinate system. > [!WARNING] Throws > If the [`PreviewView`](../type-aliases/PreviewView.mdx) isn't ready yet. #### Example ```ts const cameraPoint = { x: 0.5, y: 0.5 } const viewPoint = previewView.convertCameraPointToViewPoint(cameraPoint) console.log(viewPoint) // { x: 196, y: 379.5 } ``` *** ### convertScannedObjectCoordinatesToViewCoordinates(...) ```ts convertScannedObjectCoordinatesToViewCoordinates(scannedObject: ScannedObject): ScannedObject ``` Returns a new [`ScannedObject`](../hybrid-objects/ScannedObject.mdx) where all coordinates in the given [`scannedObject`](#convertscannedobjectcoordinatestoviewcoordinates) are converted into view coordinates. #### Parameters ##### scannedObject The scanned object in its original coordinates. *** ### convertViewPointToCameraPoint(...) ```ts convertViewPointToCameraPoint(viewPoint: Point): Point ``` Converts the given [`viewPoint`](#convertviewpointtocamerapoint) in view coordinates relative to this [`PreviewView`](../type-aliases/PreviewView.mdx) into a [`Point`](Point.mdx) in camera sensor coordinates. > [!NOTE] Note > Camera sensor coordinates are not necessarily normalized from `0.0` to `1.0`. Some implementations may have a different opaque coordinate system. > [!WARNING] Throws > If the [`PreviewView`](../type-aliases/PreviewView.mdx) isn't ready yet. #### Example ```ts const viewPoint = { x: 196, y: 379.5 } const cameraPoint = previewView.convertViewPointToCameraPoint(viewPoint) console.log(cameraPoint) // { x: 0.5, y: 0.5 } ``` *** ### createMeteringPoint(...) ```ts createMeteringPoint( viewX: number, viewY: number, size?: number): MeteringPoint ``` Creates a [`MeteringPoint`](../hybrid-objects/MeteringPoint.mdx) that can be used for focusing AE/AF/AWB on the Camera via [`focusTo(...)`](../hybrid-objects/CameraController.mdx#focusto). The coordinates ([`viewX`](#createmeteringpoint), [`viewY`](#createmeteringpoint)) are relative to this [`PreviewView`](../type-aliases/PreviewView.mdx), and take orientation, scaling and cropping into account. #### Parameters ##### viewX The X coordinate within the View's coordinate system. This can be the `x` value of a tap event on the [`PreviewView`](../type-aliases/PreviewView.mdx). ##### viewY The Y coordinate within the View's coordinate system. This can be the `y` value of a tap event on the [`PreviewView`](../type-aliases/PreviewView.mdx). ##### size (Optional) The size of the [`MeteringPoint`](../hybrid-objects/MeteringPoint.mdx) within the View's coordinate system. > [!WARNING] Throws > If the [`PreviewView`](../type-aliases/PreviewView.mdx) isn't ready yet. *** ### takeSnapshot() ```ts takeSnapshot(): Promise ``` Take a snapshot of the current [`PreviewView`](../type-aliases/PreviewView.mdx)'s contents, and return it as an [`Image`](https://github.com/mrousavy/react-native-nitro-image). > [!WARNING] Throws > If the [`PreviewView`](../type-aliases/PreviewView.mdx) isn't ready yet. > [!WARNING] Throws > If the [`PreviewView`](../type-aliases/PreviewView.mdx) doesn't have snapshottable contents. > [!WARNING] Throws > If the [`PreviewView`](../type-aliases/PreviewView.mdx) doesn't support snapshots. --- # PreviewViewProps Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/PreviewViewProps --- title: PreviewViewProps tocPlatforms: implementationMode?: - Android --- ```ts interface PreviewViewProps extends HybridViewProps ``` ## Properties ### gestureControllers? ```ts optional gestureControllers?: GestureController[] ``` Attaches the given [`GestureController`](../hybrid-objects/GestureController.mdx)s on this [`PreviewView`](../type-aliases/PreviewView.mdx). For example, a [`ZoomGestureController`](../hybrid-objects/ZoomGestureController.mdx) can be attached to install a native pinch-to-zoom gesture. *** ### implementationMode? ```ts optional implementationMode?: PreviewImplementationMode ``` Sets the [`PreviewImplementationMode`](../type-aliases/PreviewImplementationMode.mdx) for the [`PreviewView`](../type-aliases/PreviewView.mdx). #### Default ```ts 'performance' ``` *** ### onPreviewStarted? ```ts optional onPreviewStarted?: () => void ``` Fires when the [`PreviewView`](../type-aliases/PreviewView.mdx) started. *** ### onPreviewStopped? ```ts optional onPreviewStopped?: () => void ``` Fires when the [`PreviewView`](../type-aliases/PreviewView.mdx) stopped. *** ### previewOutput? ```ts optional previewOutput?: CameraPreviewOutput ``` Sets the [`CameraPreviewOutput`](../hybrid-objects/CameraPreviewOutput.mdx) for the [`PreviewView`](../type-aliases/PreviewView.mdx). The [`CameraPreviewOutput`](../hybrid-objects/CameraPreviewOutput.mdx) can be connected to a [`CameraSession`](../hybrid-objects/CameraSession.mdx) to start in parallel, possibly even before the [`PreviewView`](../type-aliases/PreviewView.mdx) is mounted/visible. *** ### resizeMode? ```ts optional resizeMode?: PreviewResizeMode ``` Sets the [`PreviewResizeMode`](../type-aliases/PreviewResizeMode.mdx) for the [`PreviewView`](../type-aliases/PreviewView.mdx). #### Default ```ts 'cover' ``` --- # Range Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/Range --- title: Range description: Represents a numeric range with a minimum and maximum value, inclusive on both ends. --- ```ts interface Range ``` Represents a numeric range with a minimum and maximum value, inclusive on both ends. ## Properties ### max ```ts max: number ``` The upper bound of the range, inclusive. *** ### min ```ts min: number ``` The lower bound of the range, inclusive. --- # RecorderSettings Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/RecorderSettings --- title: RecorderSettings description: |- Video Recorder settings for a Recorder created by a CameraVideoOutput. --- ```ts interface RecorderSettings ``` Video Recorder settings for a [`Recorder`](../hybrid-objects/Recorder.mdx) created by a [`CameraVideoOutput`](../hybrid-objects/CameraVideoOutput.mdx). #### See - [`CameraVideoOutput`](../hybrid-objects/CameraVideoOutput.mdx) - [`Recorder`](../hybrid-objects/Recorder.mdx) - [`CameraVideoOutput.createRecorder(...)`](../hybrid-objects/CameraVideoOutput.mdx#createrecorder) ## Properties ### filePath? ```ts optional filePath?: string ``` The absolute path (including file name and extension) where the recording file should be written to, or `undefined` to create a file in the device's temporary directory. Pass a filesystem path, not a `file://` URL. All parent directories in this [`filePath`](#filepath) will be automatically created if they do not yet exist. #### Default ```ts undefined ``` *** ### location? ```ts optional location?: Location ``` Sets the given [`Location`](../hybrid-objects/Location.mdx) to be embedded into the video metadata using the ISO-6709 standard. *** ### maxDuration? ```ts optional maxDuration?: number ``` If set, the recording automatically stops once it reaches this duration, in seconds. When the limit is reached, the recording is finalized successfully, and the `onRecordingFinished` callback passed to [`startRecording(...)`](../hybrid-objects/Recorder.mdx#startrecording) is invoked with the resulting file path — the same behavior as calling [`stopRecording()`](../hybrid-objects/Recorder.mdx#stoprecording). #### Default ```ts undefined ``` *** ### maxFileSize? ```ts optional maxFileSize?: number ``` If set, the recording automatically stops once the file reaches this size, in bytes. When the limit is reached, the recording is finalized successfully, and the `onRecordingFinished` callback passed to [`startRecording(...)`](../hybrid-objects/Recorder.mdx#startrecording) is invoked with the resulting file path — the same behavior as calling [`stopRecording()`](../hybrid-objects/Recorder.mdx#stoprecording). #### Default ```ts undefined ``` --- # ResolutionBiasConstraint Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/ResolutionBiasConstraint --- title: ResolutionBiasConstraint description: |- A constraint to bias the resolution of the given CameraOutput over other constraints. --- ```ts interface ResolutionBiasConstraint ``` A constraint to bias the resolution of the given [`CameraOutput`](../hybrid-objects/CameraOutput.mdx) over other constraints. #### Discussion The resolution bias goes both ways; for example, if the given [`CameraOutput`](../hybrid-objects/CameraOutput.mdx)'s resolution is very low, a Camera configuration most closely matching that low resolution will be used. If there are two resolution bias constraints, one with a very high, and one with a very low output target resolution, a good "middle-ground" will be chosen. #### Discussion Resolution negotiation prefers aspect ratio matches over raw pixel count differences first, then uses a logarithmic scale to compare resolution differences. #### Examples If Photo is more important than Video: ```ts [ { resolutionBias: photoOutput }, { resolutionBias: videoOutput } ] ``` If Video is more important than Photo: ```ts [ { resolutionBias: videoOutput }, { resolutionBias: photoOutput } ] ``` ## Properties ### resolutionBias ```ts resolutionBias: CameraOutput ``` --- # RuntimeThread Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/RuntimeThread --- title: RuntimeThread description: An implementation for a separate Runtime/Thread. --- ```ts interface RuntimeThread ``` An implementation for a separate Runtime/Thread. For example, Worklets. ## Methods ### setOnDepthFrameCallback(...) ```ts setOnDepthFrameCallback(depthOutput: CameraDepthFrameOutput, callback: | ((depth: Depth) => void) | undefined): void ``` *** ### setOnFrameCallback(...) ```ts setOnFrameCallback(frameOutput: CameraFrameOutput, callback: | ((frame: Frame) => void) | undefined): void ``` --- # RuntimeThreadProvider Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/RuntimeThreadProvider --- title: RuntimeThreadProvider description: Provides an implementation for a separate Runtime/Thread. --- ```ts interface RuntimeThreadProvider ``` Provides an implementation for a separate Runtime/Thread. For example, Worklets. ## Methods ### bindUIUpdatesToController(...) ```ts bindUIUpdatesToController( value: SharedValue, controller: CameraController, funcName: "setExposureBias" | "setZoom"): ListenerSubscription ``` Binds the given [`SharedValue`](https://docs.swmansion.com/react-native-reanimated/docs/core/useSharedValue) to the [`CameraController`](../hybrid-objects/CameraController.mdx) on the UI Thread, and continuously update the controller via the [`funcName`](#binduiupdatestocontroller). *** ### createAsyncRunner() ```ts createAsyncRunner(): AsyncRunner ``` Create a new [`AsyncRunner`](AsyncRunner.mdx). An [`AsyncRunner`](AsyncRunner.mdx) can be used to asynchronously run code in a Frame Processor. #### See [`useAsyncRunner()`](../functions/useAsyncRunner.mdx) *** ### createRuntimeForThread(...) ```ts createRuntimeForThread(thread: NativeThread): RuntimeThread ``` Creates a new Runtime (exposed as a [`RuntimeThread`](RuntimeThread.mdx)) for the given [`NativeThread`](../hybrid-objects/NativeThread.mdx). --- # Size Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/Size --- title: Size description: Represents a 2D size in pixels. --- ```ts interface Size ``` Represents a 2D size in pixels. ## Properties ### height ```ts readonly height: number ``` The height, in pixels. *** ### width ```ts readonly width: number ``` The width, in pixels. --- # TargetDynamicRange Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/TargetDynamicRange --- title: TargetDynamicRange description: |- Represents a target DynamicRange, for example to be used with the Constraints API. --- ```ts interface TargetDynamicRange ``` Represents a target [`DynamicRange`](DynamicRange.mdx), for example to be used with the Constraints API. #### See - [`Constraint`](../type-aliases/Constraint.mdx) - [`CommonDynamicRanges`](../variables/CommonDynamicRanges.mdx) ## Properties ### bitDepth ```ts bitDepth: TargetDynamicRangeBitDepth ``` *** ### colorRange ```ts colorRange: TargetColorRange ``` *** ### colorSpace ```ts colorSpace: TargetColorSpace ``` --- # UseDepthOutputProps Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/UseDepthOutputProps --- title: UseDepthOutputProps tocPlatforms: allowDeferredStart?: - iOS --- ```ts interface UseDepthOutputProps extends Partial ``` ## Properties ### allowDeferredStart? ```ts optional allowDeferredStart?: boolean ``` Allow this output to start later in the capture pipeline startup process. Enabling this lets the camera prioritize outputs needed for preview first, then start the [`CameraFrameOutput`](../hybrid-objects/CameraFrameOutput.mdx) shortly afterwards. This can improve startup behavior when preview responsiveness is more important than receiving frame-processor frames immediately. #### Inherited from [`FrameOutputOptions`](FrameOutputOptions.mdx).[`allowDeferredStart`](FrameOutputOptions.mdx#allowdeferredstart) *** ### dropFramesWhileBusy? ```ts optional dropFramesWhileBusy?: boolean ``` Whether to drop new Frames when they arrive while the Frame Processor is still executing. - If set to `true`, the [`CameraFrameOutput`](../hybrid-objects/CameraFrameOutput.mdx) will automatically drop any Frames that arrive while your Frame Processor is still executing to avoid exhausting resources, at the risk of loosing information since Frames may be dropped. - If set to `false`, the [`CameraFrameOutput`](../hybrid-objects/CameraFrameOutput.mdx) will queue up any Frames that arrive while your Frame Processor is still executing and immediatelly call it once it is free again, at the risk of exhausting resources and growing RAM. #### Default ```ts true ``` #### Inherited from [`FrameOutputOptions`](FrameOutputOptions.mdx).[`dropFramesWhileBusy`](FrameOutputOptions.mdx#dropframeswhilebusy) *** ### enableFiltering? ```ts optional enableFiltering?: boolean ``` Enables or disables depth data filtering to smoothen out uneven spots in the depth map. #### Inherited from [`DepthFrameOutputOptions`](DepthFrameOutputOptions.mdx).[`enableFiltering`](DepthFrameOutputOptions.mdx#enablefiltering) *** ### onDepth? ```ts optional onDepth?: (depth: Depth) => void ``` A callback that will be called for every [`Depth`](../hybrid-objects/Depth.mdx) Frame the Camera produces. This must be a synchronous function, like a Worklet. The [`Depth`](../hybrid-objects/Depth.mdx) Frame must be disposed as soon as it is no longer needed to avoid stalling the Camera pipeline. #### Worklet *** ### onDepthFrameDropped? ```ts optional onDepthFrameDropped?: (reason: FrameDroppedReason) => void ``` A callback that will be called every time the Camera pipeline has to drop a [`Depth`](../hybrid-objects/Depth.mdx) Frame. #### See [`FrameDroppedReason`](../type-aliases/FrameDroppedReason.mdx) *** ### targetResolution? ```ts optional targetResolution?: Size ``` The target Frame Resolution to use. #### Discussion The [`CameraSession`](../hybrid-objects/CameraSession.mdx) will negotiate all output [`targetResolution`](FrameOutputOptions.mdx#targetresolution)s and constraints (such as HDR, FPS, etc) in a [`CameraSessionConfig`](../hybrid-objects/CameraSessionConfig.mdx) to finalize the Resolution used for the Output. This is therefore merely a resolution _target_, and may not be exactly met. If the given [`targetResolution`](FrameOutputOptions.mdx#targetresolution) cannot be met exactly, its aspect ratio (computed by [`Size.width`](Size.mdx#width) / [`Size.height`](Size.mdx#height)) will be prioritized over pixel count. #### Inherited from [`FrameOutputOptions`](FrameOutputOptions.mdx).[`targetResolution`](FrameOutputOptions.mdx#targetresolution) --- # UseFrameOutputProps Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/UseFrameOutputProps --- title: UseFrameOutputProps tocPlatforms: allowDeferredStart?: - iOS enableCameraMatrixDelivery?: - iOS --- ```ts interface UseFrameOutputProps extends Partial ``` ## Properties ### allowDeferredStart? ```ts optional allowDeferredStart?: boolean ``` Allow this output to start later in the capture pipeline startup process. Enabling this lets the camera prioritize outputs needed for preview first, then start the [`CameraFrameOutput`](../hybrid-objects/CameraFrameOutput.mdx) shortly afterwards. This can improve startup behavior when preview responsiveness is more important than receiving frame-processor frames immediately. #### Inherited from [`FrameOutputOptions`](FrameOutputOptions.mdx).[`allowDeferredStart`](FrameOutputOptions.mdx#allowdeferredstart) *** ### dropFramesWhileBusy? ```ts optional dropFramesWhileBusy?: boolean ``` Whether to drop new Frames when they arrive while the Frame Processor is still executing. - If set to `true`, the [`CameraFrameOutput`](../hybrid-objects/CameraFrameOutput.mdx) will automatically drop any Frames that arrive while your Frame Processor is still executing to avoid exhausting resources, at the risk of loosing information since Frames may be dropped. - If set to `false`, the [`CameraFrameOutput`](../hybrid-objects/CameraFrameOutput.mdx) will queue up any Frames that arrive while your Frame Processor is still executing and immediatelly call it once it is free again, at the risk of exhausting resources and growing RAM. #### Default ```ts true ``` #### Inherited from [`FrameOutputOptions`](FrameOutputOptions.mdx).[`dropFramesWhileBusy`](FrameOutputOptions.mdx#dropframeswhilebusy) *** ### enableCameraMatrixDelivery? ```ts optional enableCameraMatrixDelivery?: boolean ``` Gets or sets whether the [`CameraFrameOutput`](../hybrid-objects/CameraFrameOutput.mdx) attaches a Camera Intrinsic Matrix to the [`Frame`](../hybrid-objects/Frame.mdx)s it produces. #### See [`Frame.cameraIntrinsicMatrix`](../hybrid-objects/Frame.mdx#cameraintrinsicmatrix) > [!WARNING] Throws > If video stabilization is enabled, as intrinsic matrix delivery only works when video stabilization is `'off'`. #### Default ```ts false ``` #### Inherited from [`FrameOutputOptions`](FrameOutputOptions.mdx).[`enableCameraMatrixDelivery`](FrameOutputOptions.mdx#enablecameramatrixdelivery) *** ### enablePhysicalBufferRotation? ```ts optional enablePhysicalBufferRotation?: boolean ``` Enable (or disable) physical buffer rotation. - When [`enablePhysicalBufferRotation`](FrameOutputOptions.mdx#enablephysicalbufferrotation) is set to `true`, and the [`CameraFrameOutput`](../hybrid-objects/CameraFrameOutput.mdx)'s [`outputOrientation`](../hybrid-objects/CameraOutput.mdx#outputorientation) is set to any value different than the Camera sensor's native orientation, the Camera pipeline will physically rotate the buffers to apply the orientation. The resulting [`Frame`](../hybrid-objects/Frame.mdx)'s [`orientation`](../hybrid-objects/Frame.mdx#orientation) will then always be `'up'`, meaning it no longer needs to be rotated by the consumer. - When [`enablePhysicalBufferRotation`](FrameOutputOptions.mdx#enablephysicalbufferrotation) is set to `false`, the Camera pipeline will not physically rotate buffers, but instead only provide the [`Frame`](../hybrid-objects/Frame.mdx)'s orientation relative to the [`CameraFrameOutput`](../hybrid-objects/CameraFrameOutput.mdx)'s target [`outputOrientation`](../hybrid-objects/CameraOutput.mdx#outputorientation) as metadata (see [`Frame.orientation`](../hybrid-objects/Frame.mdx#orientation)), meaning the consumers have to handle orientation themselves - e.g. by reading pixels in a different order, or applying orientation in a GPU rendering pass, depending on the use-case. Setting [`enablePhysicalBufferRotation`](FrameOutputOptions.mdx#enablephysicalbufferrotation) to `true` introduces processing overhead. #### Default ```ts false ``` #### Inherited from [`FrameOutputOptions`](FrameOutputOptions.mdx).[`enablePhysicalBufferRotation`](FrameOutputOptions.mdx#enablephysicalbufferrotation) *** ### enablePreviewSizedOutputBuffers? ```ts optional enablePreviewSizedOutputBuffers?: boolean ``` Deliver smaller, preview-sized output buffers for Frame Processing. This is useful for ML and computer vision workloads where full-resolution buffers are unnecessary and would only increase memory bandwidth and processing costs. Other camera outputs (for example [`CameraVideoOutput`](../hybrid-objects/CameraVideoOutput.mdx)) keep using the full-resolution output negotiated by the [`CameraSession`](../hybrid-objects/CameraSession.mdx). #### Default ```ts false ``` #### Inherited from [`FrameOutputOptions`](FrameOutputOptions.mdx).[`enablePreviewSizedOutputBuffers`](FrameOutputOptions.mdx#enablepreviewsizedoutputbuffers) *** ### onFrame? ```ts optional onFrame?: (frame: Frame) => void ``` A callback that will be called for every [`Frame`](../hybrid-objects/Frame.mdx) the Camera sees. This must be a synchronous function, like a Worklet. The [`Frame`](../hybrid-objects/Frame.mdx) must be disposed as soon as it is no longer needed to avoid stalling the Camera pipeline. #### Worklet #### Example ```ts const frameOutput = useFrameOutput({ onFrame(frame) { 'worklet' // some frame processing frame.dispose() } }) ``` *** ### onFrameDropped? ```ts optional onFrameDropped?: (reason: FrameDroppedReason) => void ``` A callback that will be called for every time the Camera pipeline has to drop a [`Frame`](../hybrid-objects/Frame.mdx). If [`FrameDroppedReason`](../type-aliases/FrameDroppedReason.mdx) is [`'out-of-buffers'`](../type-aliases/FrameDroppedReason.mdx), a [`Frame`](../hybrid-objects/Frame.mdx) was dropped because the [`onFrame(...)`](#onframe) callback has been running longer than one frame interval. If your Frame Processor drops a lot of Frames you should speed it up - for example; - Lower your resolution (see [`FrameOutputOptions.targetResolution`](FrameOutputOptions.mdx#targetresolution)) - Optimize the Frame Processor (e.g. run on the GPU/NPU) - Choose a more efficient [`VideoPixelFormat`](../type-aliases/VideoPixelFormat.mdx) (see [`PixelFormatConstraint`](PixelFormatConstraint.mdx)) *** ### pixelFormat? ```ts optional pixelFormat?: TargetVideoPixelFormat ``` Sets the [`TargetVideoPixelFormat`](../type-aliases/TargetVideoPixelFormat.mdx) of the [`CameraFrameOutput`](../hybrid-objects/CameraFrameOutput.mdx). - The most efficient format is [`'native'`](../type-aliases/TargetVideoPixelFormat.mdx), which internally just uses the [`CameraSessionConfig`](../hybrid-objects/CameraSessionConfig.mdx)'s [`nativePixelFormat`](../hybrid-objects/CameraSessionConfig.mdx#nativepixelformat). - Some configurations may natively stream in a YUV format (e.g. if [`nativePixelFormat`](../hybrid-objects/CameraSessionConfig.mdx#nativepixelformat) == [`'yuv-420-8-bit-video'`](../type-aliases/TargetVideoPixelFormat.mdx)), in which case [`'yuv'`](../type-aliases/TargetVideoPixelFormat.mdx) can also be zero overhead. - If your Frame Processor absolutely requires to run in RGB, you may set [`pixelFormat`](FrameOutputOptions.mdx#pixelformat) to [`'rgb'`](../type-aliases/TargetVideoPixelFormat.mdx), which comes with additional processing overhead as the Camera pipeline will convert native frames to RGB (e.g. to [`'rgb-bgra-8-bit'`](../type-aliases/TargetVideoPixelFormat.mdx)). #### Discussion It is recommended to use [`'native'`](../type-aliases/TargetVideoPixelFormat.mdx) if possible, as this will use a zero-copy GPU-only path. Other formats almost always require conversion at some point, especially on Android. If you need CPU-access to pixels, use [`'yuv'`](../type-aliases/TargetVideoPixelFormat.mdx) instead of [`'rgb'`](../type-aliases/TargetVideoPixelFormat.mdx) as a next best alternative, as [`'rgb'`](../type-aliases/TargetVideoPixelFormat.mdx) uses ~2.6x more bandwidth than [`'yuv'`](../type-aliases/TargetVideoPixelFormat.mdx) and requires additional conversions as it is not a Camera-native format. Only use [`'rgb'`](../type-aliases/TargetVideoPixelFormat.mdx) if you really need to stream [`Frame`](../hybrid-objects/Frame.mdx)s in an RGB format. #### Discussion It is recommended to use [`'native'`](../type-aliases/TargetVideoPixelFormat.mdx) and design your Frame Processing pipeline to be fully GPU-based, such as performing ML model processing on the GPU/NPU and rendering via Metal/Vulkan/OpenGL by importing the [`Frame`](../hybrid-objects/Frame.mdx) as an external sampler/texture (or via Skia/WebGPU which use [`NativeBuffer`](NativeBuffer.mdx) zero-copy APIs), as the [`Frame`](../hybrid-objects/Frame.mdx)'s data will already be on the GPU then. If you use a non-[`'native'`](../type-aliases/TargetVideoPixelFormat.mdx) [`pixelFormat`](FrameOutputOptions.mdx#pixelformat) in a GPU pipeline, your pipeline will be noticeably slower as CPU <-> GPU downloads/uploads will be performed on every frame. #### Inherited from [`FrameOutputOptions`](FrameOutputOptions.mdx).[`pixelFormat`](FrameOutputOptions.mdx#pixelformat) *** ### targetResolution? ```ts optional targetResolution?: Size ``` The target Frame Resolution to use. #### Discussion The [`CameraSession`](../hybrid-objects/CameraSession.mdx) will negotiate all output [`targetResolution`](FrameOutputOptions.mdx#targetresolution)s and constraints (such as HDR, FPS, etc) in a [`CameraSessionConfig`](../hybrid-objects/CameraSessionConfig.mdx) to finalize the Resolution used for the Output. This is therefore merely a resolution _target_, and may not be exactly met. If the given [`targetResolution`](FrameOutputOptions.mdx#targetresolution) cannot be met exactly, its aspect ratio (computed by [`Size.width`](Size.mdx#width) / [`Size.height`](Size.mdx#height)) will be prioritized over pixel count. #### Inherited from [`FrameOutputOptions`](FrameOutputOptions.mdx).[`targetResolution`](FrameOutputOptions.mdx#targetresolution) --- # UseObjectOutputProps Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/UseObjectOutputProps --- title: UseObjectOutputProps --- ```ts interface UseObjectOutputProps ``` ## Properties ### onObjectsScanned? ```ts optional onObjectsScanned?: (objects: ScannedObject[]) => void ``` A callback that will be called every time the [`CameraObjectOutput`](../hybrid-objects/CameraObjectOutput.mdx) has scanned one or more objects. #### See [`ScannedObject`](../hybrid-objects/ScannedObject.mdx) *** ### types ```ts types: ScannedObjectType[] ``` The array of [`ScannedObjectType`](../type-aliases/ScannedObjectType.mdx)s the [`CameraObjectOutput`](../hybrid-objects/CameraObjectOutput.mdx) should scan for. --- # VideoDynamicRangeConstraint Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/VideoDynamicRangeConstraint --- title: VideoDynamicRangeConstraint description: |- A constraint to set TargetDynamicRange for Video Streams (e.g. --- ```ts interface VideoDynamicRangeConstraint ``` A constraint to set [`TargetDynamicRange`](TargetDynamicRange.mdx) for Video Streams (e.g. [`CameraVideoOutput`](../hybrid-objects/CameraVideoOutput.mdx)). #### See [`CommonDynamicRanges`](../variables/CommonDynamicRanges.mdx) #### Examples Any HDR range ```ts { videoDynamicRange: CommonDynamicRanges.ANY_HDR } ``` HDR HLG BT2020 ```ts { videoDynamicRange: { bitDepth: 'hdr-10-bit', colorSpace: 'hlg-bt2020', colorRange: 'full' } } ``` ## Properties ### videoDynamicRange ```ts videoDynamicRange: TargetDynamicRange ``` --- # VideoOutputOptions Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/VideoOutputOptions --- title: VideoOutputOptions description: Configuration options for a CameraVideoOutput. tocPlatforms: enableHigherResolutionCodecs?: - Android fileType?: - iOS --- ```ts interface VideoOutputOptions ``` Configuration options for a [`CameraVideoOutput`](../hybrid-objects/CameraVideoOutput.mdx). #### See - [`CameraVideoOutput`](../hybrid-objects/CameraVideoOutput.mdx) - [`useVideoOutput(...)`](../functions/useVideoOutput.mdx) ## Properties ### enableAudio? ```ts optional enableAudio?: boolean ``` Whether to enable, or disable audio in video recordings. By default, no audio is recorded. This requires audio/microphone permission. #### Default ```ts false ``` *** ### enableHigherResolutionCodecs? ```ts optional enableHigherResolutionCodecs?: boolean ``` If set to `true`, the [`CameraVideoOutput`](../hybrid-objects/CameraVideoOutput.mdx) supports using higher resolution (and potentially also higher bit-rate and higher frame rate) media codecs to encode video frames to the video container. On Android, this binds to [`VIDEO_CAPABILITIES_SOURCE_CAMCORDER_PROFILE`](https://developer.android.com/reference/kotlin/androidx/camera/video/Recorder#VIDEO_CAPABILITIES_SOURCE_CAMCORDER_PROFILE()) if `true`, and [`VIDEO_CAPABILITIES_SOURCE_CAMCORDER_PROFILE`](https://developer.android.com/reference/kotlin/androidx/camera/video/Recorder#VIDEO_CAPABILITIES_SOURCE_CAMCORDER_PROFILE()) if set to `false`. In practice, enabling this allows using formats with higher video resolutions, at the risk of higher power usage. As codecs are very device-specific, enabling this may cause instability issues, so use this with caution. #### Default ```ts false ``` *** ### enablePersistentRecorder? ```ts optional enablePersistentRecorder?: boolean ``` If set to `true`, the [`CameraVideoOutput`](../hybrid-objects/CameraVideoOutput.mdx) will be persistent. A persistent [`CameraVideoOutput`](../hybrid-objects/CameraVideoOutput.mdx) can continue to record even while switching Cameras. This may require additional processing power, or choose a different (non-fully-native) path for recording, so it is disabled by default. - On iOS, enabling [`enablePersistentRecorder`](#enablepersistentrecorder) will use a custom [`AVCaptureVideoDataOutput`](https://developer.apple.com/documentation/avfoundation/avcapturevideodataoutput) + `AVAssetWriter` pipeline instead of the fully internal [`AVCaptureMovieFileOutput`](https://developer.apple.com/documentation/avfoundation/avcapturemoviefileoutput). - On Android, enabling [`enablePersistentRecorder`](#enablepersistentrecorder) will use [`asPersistentRecording()`](https://developer.android.com/reference/androidx/camera/video/PendingRecording#asPersistentRecording()). #### Default ```ts false ``` *** ### fileType? ```ts optional fileType?: RecorderFileType ``` The container file type for recordings produced by this output. On Android this is always `.mp4` and this field is ignored. #### Default ```ts 'mov' ``` *** ### targetBitRate? ```ts optional targetBitRate?: number ``` Specifies the target bit-rate for the [`CameraVideoOutput`](../hybrid-objects/CameraVideoOutput.mdx), in bits per second. The encoder may or may not encode with exactly this bit-rate, depending on system pressure, moving pixels, and file size constraints - but it will be taken as reference. #### Default ```ts undefined ``` *** ### targetResolution ```ts targetResolution: Size ``` The target Video Resolution to use. #### Discussion The [`CameraSession`](../hybrid-objects/CameraSession.mdx) will negotiate all output [`targetResolution`](#targetresolution)s and constraints (such as HDR, FPS, etc) in a [`CameraSessionConfig`](../hybrid-objects/CameraSessionConfig.mdx) to finalize the Resolution used for the Output. This is therefore merely a resolution _target_, and may not be exactly met. If the given [`targetResolution`](#targetresolution) cannot be met exactly, its aspect ratio (computed by [`Size.width`](Size.mdx#width) / [`Size.height`](Size.mdx#height)) will be prioritized over pixel count. --- # VideoOutputSettings Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/VideoOutputSettings --- title: VideoOutputSettings description: Output settings for a CameraVideoOutput. --- ```ts interface VideoOutputSettings ``` Output settings for a [`CameraVideoOutput`](../hybrid-objects/CameraVideoOutput.mdx). #### See - [`CameraVideoOutput`](../hybrid-objects/CameraVideoOutput.mdx) - [`CameraVideoOutput.setOutputSettings(...)`](../hybrid-objects/CameraVideoOutput.mdx#setoutputsettings) ## Properties ### codec? ```ts optional codec?: VideoCodec ``` Configures the [`VideoCodec`](../type-aliases/VideoCodec.mdx) to use for recording a video. By default, it is `undefined`, and the most efficient codec will be selected (likely [`h265`](../type-aliases/VideoCodec.mdx)) --- # VideoStabilizationModeConstraint Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/VideoStabilizationModeConstraint --- title: VideoStabilizationModeConstraint description: |- A constraint to set a TargetStabilizationMode for Video Streams (e.g. --- ```ts interface VideoStabilizationModeConstraint ``` A constraint to set a [`TargetStabilizationMode`](../type-aliases/TargetStabilizationMode.mdx) for Video Streams (e.g. [`CameraVideoOutput`](../hybrid-objects/CameraVideoOutput.mdx)). #### Example ```ts { videoStabilizationMode: 'cinematic' } ``` ## Properties ### videoStabilizationMode ```ts videoStabilizationMode: TargetStabilizationMode ``` --- # WhiteBalanceGains Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/WhiteBalanceGains --- title: WhiteBalanceGains description: Represents the per-channel gains applied for white balance correction. --- ```ts interface WhiteBalanceGains ``` Represents the per-channel gains applied for white balance correction. Each gain is a multiplier applied to the respective color channel in the Camera's raw sensor data to achieve a neutral white point. #### See [`WhiteBalanceTemperatureAndTint`](WhiteBalanceTemperatureAndTint.mdx) ## Properties ### blueGain ```ts blueGain: number ``` The gain applied to the blue channel. *** ### greenGain ```ts greenGain: number ``` The gain applied to the green channel. *** ### redGain ```ts redGain: number ``` The gain applied to the red channel. --- # WhiteBalanceTemperatureAndTint Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/interfaces/WhiteBalanceTemperatureAndTint --- title: WhiteBalanceTemperatureAndTint description: Represents a white balance setting expressed as a color temperature and tint offset. --- ```ts interface WhiteBalanceTemperatureAndTint ``` Represents a white balance setting expressed as a color temperature and tint offset. This is a human-friendly way of expressing white balance compared to raw [`WhiteBalanceGains`](WhiteBalanceGains.mdx). #### See [`WhiteBalanceGains`](WhiteBalanceGains.mdx) ## Properties ### temperature ```ts temperature: number ``` The color temperature in Kelvin (e.g. `5500` for daylight, `3200` for tungsten). *** ### tint ```ts tint: number ``` The green/magenta tint offset away from the temperature's black-body curve. Positive values shift towards magenta, negative values shift towards green. --- # CommonDynamicRanges Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/variables/CommonDynamicRanges --- title: CommonDynamicRanges description: Common Dynamic Ranges for the Camera. --- ```ts const CommonDynamicRanges: object ``` Common Dynamic Ranges for the Camera. #### Type Declaration ##### ANY\_HDR ```ts readonly ANY_HDR: object ``` Any HDR profile, preferrably 10-bit HLG_BT2020. ###### ANY\_HDR.bitDepth ```ts readonly bitDepth: "hdr-10-bit" = 'hdr-10-bit' ``` ###### ANY\_HDR.colorRange ```ts readonly colorRange: "full" = 'full' ``` ###### ANY\_HDR.colorSpace ```ts readonly colorSpace: "hlg-bt2020" = 'hlg-bt2020' ``` ##### ANY\_SDR ```ts readonly ANY_SDR: object ``` Any SDR profile, preferrably 8-bit sRGB. ###### ANY\_SDR.bitDepth ```ts readonly bitDepth: "sdr-8-bit" = 'sdr-8-bit' ``` ###### ANY\_SDR.colorRange ```ts readonly colorRange: "full" = 'full' ``` ###### ANY\_SDR.colorSpace ```ts readonly colorSpace: "srgb" = 'srgb' ``` --- # CommonResolutions Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/variables/CommonResolutions --- title: CommonResolutions description: Common camera-centric resolution targets. --- ```ts const CommonResolutions: object ``` Common camera-centric resolution targets. 16:9 entries follow standard video tiers. 4:3 entries intentionally use common photo/sensor output sizes instead of mathematically scaling the 16:9 tiers, because actual camera formats are usually exposed in sensor-native 4:3 steps. #### Type Declaration ##### 8k\_16\_9 ```ts readonly 8k_16_9: object ``` 8k Resolution in 16:9 aspect ratio. ###### 8k\_16\_9.height ```ts readonly height: 8064 = 8064 ``` ###### 8k\_16\_9.width ```ts readonly width: 4536 = 4536 ``` ##### 8k\_4\_3 ```ts readonly 8k_4_3: object ``` 8k Resolution in 4:3 aspect ratio. ###### 8k\_4\_3.height ```ts readonly height: 8064 = 8064 ``` ###### 8k\_4\_3.width ```ts readonly width: 6048 = 6048 ``` ##### FHD\_16\_9 ```ts readonly FHD_16_9: object ``` Full-HD (1080p) Resolution in 16:9 aspect ratio. ###### FHD\_16\_9.height ```ts readonly height: 1920 = 1920 ``` ###### FHD\_16\_9.width ```ts readonly width: 1080 = 1080 ``` ##### FHD\_4\_3 ```ts readonly FHD_4_3: object ``` Common 4:3 camera target around the Full-HD tier. ###### FHD\_4\_3.height ```ts readonly height: 1920 = 1920 ``` ###### FHD\_4\_3.width ```ts readonly width: 1440 = 1440 ``` ##### HD\_16\_9 ```ts readonly HD_16_9: object ``` HD (720p) Resolution in 16:9 aspect ratio. ###### HD\_16\_9.height ```ts readonly height: 1280 = 1280 ``` ###### HD\_16\_9.width ```ts readonly width: 720 = 720 ``` ##### HD\_4\_3 ```ts readonly HD_4_3: object ``` Common low-resolution 4:3 camera target. ###### HD\_4\_3.height ```ts readonly height: 1024 = 1024 ``` ###### HD\_4\_3.width ```ts readonly width: 768 = 768 ``` ##### HIGHEST\_16\_9 ```ts readonly HIGHEST_16_9: object ``` The highest possible resolution in 16:9 aspect ratio. Useful when you want the maximum available quality. ###### HIGHEST\_16\_9.height ```ts readonly height: 16000 = 16000 ``` ###### HIGHEST\_16\_9.width ```ts readonly width: 9000 = 9000 ``` ##### HIGHEST\_4\_3 ```ts readonly HIGHEST_4_3: object ``` The highest possible resolution in 4:3 aspect ratio. Useful when you want the maximum available quality. ###### HIGHEST\_4\_3.height ```ts readonly height: 40000 = 40000 ``` ###### HIGHEST\_4\_3.width ```ts readonly width: 30000 = 30000 ``` ##### LOWEST\_16\_9 ```ts readonly LOWEST_16_9: object ``` The lowest possible resolution in 16:9 aspect ratio. Useful when you want the smallest/fastest capture. ###### LOWEST\_16\_9.height ```ts readonly height: 16 = 16 ``` ###### LOWEST\_16\_9.width ```ts readonly width: 9 = 9 ``` ##### LOWEST\_4\_3 ```ts readonly LOWEST_4_3: object ``` The lowest possible resolution in 4:3 aspect ratio. Useful when you want the smallest/fastest capture. ###### LOWEST\_4\_3.height ```ts readonly height: 4 = 4 ``` ###### LOWEST\_4\_3.width ```ts readonly width: 3 = 3 ``` ##### QHD\_16\_9 ```ts readonly QHD_16_9: object ``` Quad-HD (1440p) Resolution in 16:9 aspect ratio. ###### QHD\_16\_9.height ```ts readonly height: 2560 = 2560 ``` ###### QHD\_16\_9.width ```ts readonly width: 1440 = 1440 ``` ##### QHD\_4\_3 ```ts readonly QHD_4_3: object ``` Common 4:3 camera target around the Quad-HD tier. ###### QHD\_4\_3.height ```ts readonly height: 2592 = 2592 ``` ###### QHD\_4\_3.width ```ts readonly width: 1944 = 1944 ``` ##### UHD\_16\_9 ```ts readonly UHD_16_9: object ``` Ultra-HD (4k) Resolution in 16:9 aspect ratio. ###### UHD\_16\_9.height ```ts readonly height: 3840 = 3840 ``` ###### UHD\_16\_9.width ```ts readonly width: 2160 = 2160 ``` ##### UHD\_4\_3 ```ts readonly UHD_4_3: object ``` Common high-resolution 4:3 photo target. ###### UHD\_4\_3.height ```ts readonly height: 4032 = 4032 ``` ###### UHD\_4\_3.width ```ts readonly width: 3024 = 3024 ``` ##### VGA\_16\_9 ```ts readonly VGA_16_9: object ``` VGA (480p) Resolution in 16:9 aspect ratio. ###### VGA\_16\_9.height ```ts readonly height: 854 = 854 ``` ###### VGA\_16\_9.width ```ts readonly width: 480 = 480 ``` ##### VGA\_4\_3 ```ts readonly VGA_4_3: object ``` VGA (480p) Resolution in 4:3 aspect ratio. ###### VGA\_4\_3.height ```ts readonly height: 640 = 640 ``` ###### VGA\_4\_3.width ```ts readonly width: 480 = 480 ``` --- # HybridFrameConverter Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/variables/HybridFrameConverter --- title: HybridFrameConverter description: |- The HybridFrameConverter can be used to convert Frames and Depth frames to Images. --- ```ts const HybridFrameConverter: FrameConverter ``` The `HybridFrameConverter` can be used to convert [`Frame`](../hybrid-objects/Frame.mdx)s and [`Depth`](../hybrid-objects/Depth.mdx) frames to [`Image`](https://github.com/mrousavy/react-native-nitro-image)s. --- # VisionCamera Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/variables/VisionCamera --- title: VisionCamera description: The native VisionCamera module. --- ```ts const VisionCamera: CameraFactory ``` The native VisionCamera module. This is the entry point for the entire VisionCamera imperative API. --- # AutoFocusSystem Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/AutoFocusSystem --- title: AutoFocusSystem description: |- Represents the auto-focus algorithm used by the CameraDevice, either while continuously keeping a scene in focus (via auto-3A / AE/AF/AWB), or for a metering action via CameraController.focusTo(...). --- ```ts type AutoFocusSystem = "none" | "contrast-detection" | "phase-detection" ``` Represents the auto-focus algorithm used by the [`CameraDevice`](../hybrid-objects/CameraDevice.mdx), either while continuously keeping a scene in focus (via auto-3A / AE/AF/AWB), or for a metering action via [`CameraController.focusTo(...)`](../hybrid-objects/CameraController.mdx#focusto). - `'none'`: The [`CameraDevice`](../hybrid-objects/CameraDevice.mdx) does not support auto-focus at all. - `'contrast-detection'`: Finds focus by adjusting the lens until image contrast is highest. Commonly supported, but generally slower than phase-detection. - `'phase-detection'`: Finds focus by using phase information to predict the correct lens position. Generally the fastest and most reliable auto-focus system when available. --- # AuxilaryDepthType Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/AuxilaryDepthType --- title: AuxilaryDepthType --- ```ts type AuxilaryDepthType = "depth" | "disparity" ``` --- # CameraExtensionType Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/CameraExtensionType --- title: CameraExtensionType description: Represents the type of the CameraExtension. --- ```ts type CameraExtensionType = "bokeh" | "hdr" | "night" | "face-retouch" | "auto" ``` Represents the type of the [`CameraExtension`](../hybrid-objects/CameraExtension.mdx). - `'bokeh'`: Bokeh mode blurs the background of a photo. It is generally intended for taking portrait photos of people like what would be produced by a camera with a large lens. - `'hdr'`: HDR mode takes photos that keep a larger range of scene illumination levels visible in the final image. For example, when taking a picture of an object in front of a bright window, both the object and the scene through the window may be visible when using HDR mode, while in normal mode, one or the other may be poorly exposed. As a tradeoff, HDR mode generally takes much longer to capture a single image, has no user control, and may have other artifacts depending on the HDR method used. - `'night'`: Gets the best still images under low-light situations, typically at night time. - `'face-retouch'`: Retouches face skin tone, geometry and so on when taking still images. - `'auto'`: Automatically adjusts the final image with the surrounding scenery. For example, the vendor library implementation might do the low light detection and can switch to low light mode or HDR to take the picture. Or the face retouch mode can be automatically applied when taking a portrait image. This delegates modes to the vendor library implementation to decide. --- # CameraOrientation Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/CameraOrientation --- title: CameraOrientation description: Represents the orientation, relative to a base anchor. --- ```ts type CameraOrientation = "up" | "right" | "down" | "left" ``` Represents the orientation, relative to a base anchor. - `'up'`: The default orientation relative to your base anchor. aka no rotation at all. - `'down'`: Inverted upside down relative to your base anchor. Whatever was "top" before is now "bottom", whatever was "bottom" before is now "top". - `'left'`: Rotated 90° left. Whatever was "top" before is now "left", whatever was bottom before is now "right". - `'right'`: Rotated 90° right. Whatever was "top" before is now "right", whatever was bottom before is now "left". --- # CameraPosition Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/CameraPosition --- title: CameraPosition description: Represents the physical position of a CameraDevice on the device. --- ```ts type CameraPosition = TargetCameraPosition | "unspecified" ``` Represents the physical position of a [`CameraDevice`](../hybrid-objects/CameraDevice.mdx) on the device. - `'front'`: The Camera is located on the front of the device, typically used for selfies. - `'back'`: The Camera is located on the back of the device, typically used for capturing the scene. - `'external'`: The Camera is an external Camera (e.g. USB, Continuity Camera). - `'unspecified'`: The Camera's position is unknown or not applicable. --- # ColorRange Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/ColorRange --- title: ColorRange description: Represents the range of YUV color components. --- ```ts type ColorRange = "video" | "full" | "unknown" ``` Represents the range of YUV color components. - `'video'`: Limited Color Range, Y ranges from 16–235 and UV ranges from 16–240 - `'full'`: Full Color Range, both Y and UV range from 0-255. --- # ColorSpace Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/ColorSpace --- title: ColorSpace --- ```ts type ColorSpace = | "srgb" | "dolby-vision" | "p3-d65" | "hlg-bt2020" | "apple-log" | "apple-log-2" | "unknown" ``` --- # Constraint Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/Constraint --- title: Constraint description: |- Constraints are session configuration options that are negotiated by the CameraSession to find a closest-matching working Camera configuration. --- ```ts type Constraint = | FPSConstraint | VideoStabilizationModeConstraint | PreviewStabilizationModeConstraint | ResolutionBiasConstraint | VideoDynamicRangeConstraint | PhotoHDRConstraint | PixelFormatConstraint | BinnedConstraint ``` Constraints are session configuration options that are negotiated by the [`CameraSession`](../hybrid-objects/CameraSession.mdx) to find a closest-matching working Camera configuration. In other words, Constraints describe _intent_. #### See - [`CameraSessionConnection.constraints`](../interfaces/CameraSessionConnection.mdx#constraints) - [`CameraProps.constraints`](../interfaces/CameraProps.mdx#constraints) #### Examples If Photo capture is more important than Video capture, list a `{ resolutionBias: ... }` constraint (and potentially also a `{ photoHDR: ... }` constraint) above your video constraints: ```ts const contraints = [ { resolutionBias: photoOutput }, { photoHDR: true }, { resolutionBias: videoOutput } ] satisfies Constraint[] ``` To stream at 60 FPS, simply set an `{ fps: ... }` constraint to your target frame rate: ```ts const contraints = [ { fps: 60 }, ] satisfies Constraint[] ``` To prefer a specific `StabilizationMode`, use a `{ videoStabilizationMode: ... }` constraint: ```ts const contraints = [ { videoStabilizationMode: 'cinematic-extended' }, ] satisfies Constraint[] ``` --- # DepthDataAccuracy Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/DepthDataAccuracy --- title: DepthDataAccuracy --- ```ts type DepthDataAccuracy = "relative" | "absolute" | "unknown" ``` --- # DepthDataQuality Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/DepthDataQuality --- title: DepthDataQuality --- ```ts type DepthDataQuality = "low" | "high" | "unknown" ``` --- # DepthPixelFormat Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/DepthPixelFormat --- title: DepthPixelFormat description: Represents the pixel format of a depth image buffer. --- ```ts type DepthPixelFormat = | "depth-16-bit" | "depth-32-bit" | "depth-point-cloud-32-bit" | "disparity-16-bit" | "disparity-32-bit" | "unknown" ``` Represents the pixel format of a depth image buffer. In general, `depth-*` formats use actual depth sensors (like infra-red, time-of-flight or LiDAR), whereas `disparity-*` formats come from multiple constituent physical cameras and represents pixel shift between two or more cameras. | Format | Domain | Sample | Bit depth | Layout | |----------------------------|------------|----------------------------------|---------------|--------------| | `depth-16-bit` | Depth | `[depth]` | 16-bit Float | Planar | | `depth-32-bit` | Depth | `[depth]` | 32-bit Float | Planar | | `depth-point-cloud-32-bit` | PointCloud | `[x, y, z, confidence]` | 32-bit Float | Interleaved | | `disparity-16-bit` | Disparity | `[disparity]` | 16-bit Float | Planar | | `disparity-32-bit` | Disparity | `[disparity]` | 32-bit Float | Planar | | `unknown` | — | — | — | — | --- # DeviceType Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/DeviceType --- title: DeviceType description: Represents the type of a physical or logical Camera lens on the CameraDevice. --- ```ts type DeviceType = | "wide-angle" | "ultra-wide-angle" | "telephoto" | "dual" | "dual-wide" | "triple" | "quad" | "continuity" | "lidar-depth" | "true-depth" | "time-of-flight-depth" | "external" | "unknown" ``` Represents the type of a physical or logical Camera lens on the [`CameraDevice`](../hybrid-objects/CameraDevice.mdx). Physical Cameras are single hardware lenses: - `'wide-angle'`: The default Camera, with a wide field of view. - `'ultra-wide-angle'`: A very wide-angle lens, typically capturing a much larger field of view. - `'telephoto'`: A lens with a longer focal length, used for optical zoom. - `'continuity'`: An external Continuity Camera (iPhone used as a Camera on macOS). - `'lidar-depth'`: A LiDAR-based depth sensor. - `'true-depth'`: A structured-light based depth sensor (such as the FaceID front Camera). - `'time-of-flight-depth'`: A time-of-flight based depth sensor. - `'external'`: A generic external Camera (e.g. USB). - `'unknown'`: The Camera type is unknown or not reported. Logical Cameras are virtual Cameras that combine multiple physical Cameras into one: - `'dual'`: A logical combination of a wide-angle and a telephoto lens. - `'dual-wide'`: A logical combination of a wide-angle and an ultra-wide-angle lens. - `'triple'`: A logical combination of three physical Cameras (typically ultra-wide, wide, and telephoto). - `'quad'`: A logical combination of four physical Cameras. #### See [`CameraDevice.physicalDevices`](../hybrid-objects/CameraDevice.mdx#physicaldevices) --- # DynamicRangeBitDepth Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/DynamicRangeBitDepth --- title: DynamicRangeBitDepth description: Represents the bit-depth of a DynamicRange. --- ```ts type DynamicRangeBitDepth = "sdr-8-bit" | "hdr-10-bit" | "unknown" ``` Represents the bit-depth of a [`DynamicRange`](../interfaces/DynamicRange.mdx). - `'sdr-8-bit'`: Uses 8 bits per channel, often called "SDR" - `'hdr-10-bit'`: Uses 10 bits per channel, often called "HDR" --- # ExposureMode Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/ExposureMode --- title: ExposureMode description: Represents the exposure mode of a CameraDevice. --- ```ts type ExposureMode = "locked" | "auto-exposure" | "continuous-auto-exposure" | "custom" ``` Represents the exposure mode of a [`CameraDevice`](../hybrid-objects/CameraDevice.mdx). - `'locked'`: The exposure is locked at its current value and does not adapt to scene changes. - `'auto-exposure'`: The exposure is adjusted once to a suitable value for the current scene. - `'continuous-auto-exposure'`: The exposure is continuously adjusted as the scene changes. - `'custom'`: The exposure is manually controlled via custom ISO and shutter speed. --- # FlashMode Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/FlashMode --- title: FlashMode description: Configures flash for photo capture. --- ```ts type FlashMode = "off" | "on" | "auto" ``` Configures flash for photo capture. #### See [`capturePhoto(...)`](../hybrid-objects/CameraPhotoOutput.mdx#capturephoto) --- # FocusMode Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/FocusMode --- title: FocusMode description: Represents the focus mode of a CameraDevice. --- ```ts type FocusMode = "locked" | "auto-focus" | "continuous-auto-focus" ``` Represents the focus mode of a [`CameraDevice`](../hybrid-objects/CameraDevice.mdx). - `'locked'`: The lens position is locked at its current value and does not adapt to scene changes. - `'auto-focus'`: The lens is adjusted once to focus the current scene. - `'continuous-auto-focus'`: The lens is continuously adjusted as the scene changes. --- # FocusResponsiveness Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/FocusResponsiveness --- title: FocusResponsiveness description: Configures the responsiveness of a AE/AF/AWB focus operation. --- ```ts type FocusResponsiveness = "steady" | "snappy" ``` Configures the responsiveness of a AE/AF/AWB focus operation. - `'steady'`: Steadily focuses to the specified point of interest without disrupting. Most desireable for filming videos. - `'snappy'`: Snappily focuses to the specified point of interest as fast as possible, possibly resetting focus. Most desireable while not filming, or capturing photos. #### See - [`CameraController.focusTo(...)`](../hybrid-objects/CameraController.mdx#focusto) - [`FocusOptions`](../interfaces/FocusOptions.mdx) --- # FrameDroppedReason Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/FrameDroppedReason --- title: FrameDroppedReason description: Represents the reason why a Frame was dropped by the Camera pipeline. --- ```ts type FrameDroppedReason = "frame-was-late" | "out-of-buffers" | "discontinuity" | "unknown" ``` Represents the reason why a [`Frame`](../hybrid-objects/Frame.mdx) was dropped by the Camera pipeline. - `'frame-was-late'`: The Frame took too long to process and could not be delivered in time. - `'out-of-buffers'`: The Camera pipeline ran out of available buffers, most likely because previous Frames were not disposed ([`Frame.dispose()`](https://nitro.margelo.com/docs/hybrid-objects)) fast enough. - `'discontinuity'`: A discontinuity in the Frame stream occurred, typically when the Camera session was interrupted or reconfigured. - `'unknown'`: The Frame was dropped for an unknown reason. --- # FrameRendererView Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/FrameRendererView --- title: FrameRendererView description: The FrameRendererView Hybrid View. --- ```ts type FrameRendererView = HybridView ``` The `FrameRendererView` Hybrid View. A `FrameRendererView` can be rendered via the [`NativeFrameRendererView`](../views/NativeFrameRendererView.mdx) component. #### See - [`FrameRendererViewProps`](../interfaces/FrameRendererViewProps.mdx) - [`FrameRendererViewMethods`](../interfaces/FrameRendererViewMethods.mdx) - [`NativeFrameRendererView`](../views/NativeFrameRendererView.mdx) --- # InterruptionReason Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/InterruptionReason --- title: InterruptionReason --- ```ts type InterruptionReason = | "video-device-not-available-in-background" | "audio-device-in-use-by-another-client" | "video-device-in-use-by-another-client" | "video-device-not-available-with-multiple-foreground-apps" | "video-device-not-available-due-to-system-pressure" | "sensitive-content-mitigation-activated" | "unknown" ``` --- # MediaType Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/MediaType --- title: MediaType description: Represents the type of a media sample. --- ```ts type MediaType = "video" | "depth" | "metadata" | "other" ``` Represents the type of a media sample. - `'video'`: A pixel-based format suitable for recordings, each pixel contain a color. - `'depth'`: A pixel-based depth or disparity map, each pixel is a physical distance. - `'metadata'`: An object-based format, like QR codes. - `'other'`: An unknown media format. --- # MeteringMode Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/MeteringMode --- title: MeteringMode description: Specifies the metering mode, also known as the 3A operation. --- ```ts type MeteringMode = "AE" | "AF" | "AWB" ``` Specifies the metering mode, also known as the 3A operation. - `'AE'`: Auto-Exposure - requires [`CameraDevice.supportsExposureMetering`](../hybrid-objects/CameraDevice.mdx#supportsexposuremetering) - `'AF'`: Auto-Focus - requires [`CameraDevice.supportsFocusMetering`](../hybrid-objects/CameraDevice.mdx#supportsfocusmetering) - `'AWB'`: Auto-White-Balance - requires [`CameraDevice.supportsWhiteBalanceMetering`](../hybrid-objects/CameraDevice.mdx#supportswhitebalancemetering) #### See - [`CameraController.focusTo(...)`](../hybrid-objects/CameraController.mdx#focusto) - [`FocusOptions`](../interfaces/FocusOptions.mdx) --- # MirrorMode Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/MirrorMode --- title: MirrorMode description: Represents the target mirroring setting for a Camera Output. --- ```ts type MirrorMode = "on" | "off" | "auto" ``` Represents the target mirroring setting for a Camera Output. - `'on'`: Mirrors the Camera, e.g. for front Cameras. - `'off'`: Doesn't mirror anything. - `'auto'`: Automatically mirrors the Camera if the platform recommends it, such as for front Cameras. --- # OrientationSource Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/OrientationSource --- title: OrientationSource description: Represents the source of a CameraOrientation. --- ```ts type OrientationSource = "interface" | "device" ``` Represents the source of a [`CameraOrientation`](CameraOrientation.mdx). - `'interface'`: Uses the UI's orientation for setting output [`CameraOrientation`](CameraOrientation.mdx). If screen lock lock is on, the output orientation will also be locked to the screen's orientation. - `'device'`: Uses the physical device's orientation for setting output [`CameraOrientation`](CameraOrientation.mdx). Even if orientation lock is on, orientation will change when the device physically rotates. --- # OutputStreamType Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/OutputStreamType --- title: OutputStreamType description: |- Represents the type of an output stream, often related to CameraOutput. --- ```ts type OutputStreamType = "photo" | "video" | "stream" | "depth-photo" | "depth-stream" ``` Represents the type of an output stream, often related to [`CameraOutput`](../hybrid-objects/CameraOutput.mdx). This is used for getting available resolutions for a given `OutputStreamType` via [`CameraDevice.getSupportedResolutions(...)`](../hybrid-objects/CameraDevice.mdx#getsupportedresolutions) --- # PermissionStatus Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/PermissionStatus --- title: PermissionStatus description: Represents the status of a Permission - e.g. --- ```ts type PermissionStatus = "not-determined" | "authorized" | "denied" | "restricted" ``` Represents the status of a Permission - e.g. Camera or Microphone. - `'not-determined'`: The app may request permission right now. On iOS this means the permission has never been requested yet. On Android this can also mean the user denied once, but did not select "don't ask again". - `'authorized'`: The app is authorized to use said permission and can proceed. - `'denied'`: The permission has been requested previously, but has been denied by the user. The app can not proceed with using the service. To authorize the permission, your app must prompt the user to open settings and explicitly grant permission. - `'restricted'`: The permission has been restricted, e.g. via parenting controls and can not be requested. #### Discussion You can only request permission if the status is `'not-determined'`. --- # PhotoContainerFormat Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/PhotoContainerFormat --- title: PhotoContainerFormat description: Represents the container format of a captured Photo. --- ```ts type PhotoContainerFormat = "jpeg" | "heic" | "dng" | "tiff" | "dcm" | "unknown" ``` Represents the container format of a captured Photo. --- # PhysicalDeviceType Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/PhysicalDeviceType --- title: PhysicalDeviceType --- ```ts type PhysicalDeviceType = Extract ``` --- # PixelFormat Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/PixelFormat --- title: PixelFormat description: Represents any kind of pixel format for a media sample. --- ```ts type PixelFormat = | VideoPixelFormat | DepthPixelFormat | "private" ``` Represents any kind of pixel format for a media sample. - [`VideoPixelFormat`](VideoPixelFormat.mdx): A video-based Format - [`DepthPixelFormat`](DepthPixelFormat.mdx): A depth/disparity-based Format - `'private'`: An implementation-defined private Format, possibly only allowing GPU access. --- # PreviewImplementationMode Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/PreviewImplementationMode --- title: PreviewImplementationMode description: |- Represents the implementation mode for the PreviewView's surface on Android. platforms: - Android --- ```ts type PreviewImplementationMode = "performance" | "compatible" ``` Represents the implementation mode for the [`PreviewView`](PreviewView.mdx)'s surface on Android. - `'performance'`: Uses [`SurfaceView`](https://developer.android.com/reference/android/view/SurfaceView) for better GPU-accelerated performance. - `'compatible'`: Uses [`TextureView`](https://developer.android.com/reference/android/view/TextureView) for better compatibility and transforms support. > [!NOTE] Note > `'performance'` does not support transparency or view layering. #### See See [CameraX: `PreviewView.setImplementationMode(...)`](https://developer.android.com/reference/androidx/camera/view/PreviewView#setImplementationMode(androidx.camera.view.PreviewView.ImplementationMode)) for more information --- # PreviewResizeMode Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/PreviewResizeMode --- title: PreviewResizeMode description: Represents the resize mode for the PreviewView. --- ```ts type PreviewResizeMode = "cover" | "contain" ``` Represents the resize mode for the [`PreviewView`](PreviewView.mdx). - `'cover'`: Upscales the [`PreviewView`](PreviewView.mdx) to cover up the entire view and leave no blank space, possibly performing a center-crop transform to make up for aspect ratio differences. - `'contain'`: Centers the [`PreviewView`](PreviewView.mdx) inside the view, possibly leaving blank space around the top/bottom, or left/right edges to make up for aspect ratio differences. --- # PreviewView Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/PreviewView --- title: PreviewView description: The PreviewView Hybrid View. --- ```ts type PreviewView = HybridView ``` The `PreviewView` Hybrid View. A `PreviewView` can be rendered via the [`NativePreviewView`](../views/NativePreviewView.mdx) component, or by using the higher-level [`Camera`](../views/Camera.mdx) component. #### See - [`PreviewViewProps`](../interfaces/PreviewViewProps.mdx) - [`PreviewViewMethods`](../interfaces/PreviewViewMethods.mdx) - [`NativePreviewView`](../views/NativePreviewView.mdx) --- # QualityPrioritization Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/QualityPrioritization --- title: QualityPrioritization description: |- Specifies the prioritization between speed and quality for photo capture. --- ```ts type QualityPrioritization = "speed" | "balanced" | "quality" ``` Specifies the prioritization between speed and quality for photo capture. - `'speed'`: Captures photos as fast as possible, possibly with zero-shutter-lag (ZSL). - `'balanced'`: Usually the default, balances capture latency with quality. - `'quality'`: Ensures photos are well exposed and allows enough time for maximum quality. --- # RecorderFileType Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/RecorderFileType --- title: RecorderFileType description: Container file type for a CameraVideoOutput's recordings. --- ```ts type RecorderFileType = "mp4" | "mov" ``` Container file type for a [`CameraVideoOutput`](../hybrid-objects/CameraVideoOutput.mdx)'s recordings. --- # RecordingFinishedReason Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/RecordingFinishedReason --- title: RecordingFinishedReason description: |- Describes why a Recorder's recording finished, and was delivered to the `onRecordingFinished` callback passed to Recorder.startRecording(...). --- ```ts type RecordingFinishedReason = "stopped" | "max-duration-reached" | "max-file-size-reached" ``` Describes why a [`Recorder`](../hybrid-objects/Recorder.mdx)'s recording finished, and was delivered to the `onRecordingFinished` callback passed to [`Recorder.startRecording(...)`](../hybrid-objects/Recorder.mdx#startrecording). In all cases, the resulting video file is fully written and usable - this type only communicates _why_ the recording ended, so the caller can react accordingly (e.g. show a "max length reached" toast, or chain a follow-up recording). - `'stopped'`: The recording was stopped via a [`Recorder.stopRecording()`](../hybrid-objects/Recorder.mdx#stoprecording) call. - `'max-duration-reached'`: The recording automatically stopped because it reached the configured [`RecorderSettings.maxDuration`](../interfaces/RecorderSettings.mdx#maxduration) limit. - `'max-file-size-reached'`: The recording automatically stopped because it reached the configured [`RecorderSettings.maxFileSize`](../interfaces/RecorderSettings.mdx#maxfilesize) limit. --- # ScannedObjectType Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/ScannedObjectType --- title: ScannedObjectType description: Represents the type of a ScannedObject. --- ```ts type ScannedObjectType = | "codabar" | "code-39" | "code-39-mod-43" | "code-93" | "code-128" | "ean-8" | "ean-13" | "gs1-data-bar" | "gs1-data-bar-expanded" | "gs1-data-bar-limited" | "interleaved-2-of-5" | "itf-14" | "upc-e" | "aztec" | "data-matrix" | "micro-pdf-417" | "micro-qr" | "pdf-417" | "qr" | "human-body" | "human-full-body" | "dog-head" | "dog-body" | "cat-head" | "cat-body" | "face" | "salient-object" | "unknown" ``` Represents the type of a [`ScannedObject`](../hybrid-objects/ScannedObject.mdx). --- # SceneAdaptiveness Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/SceneAdaptiveness --- title: SceneAdaptiveness description: Configures the adaptiveness of the AE/AF/AWB pipeline after a metering operation has settled. --- ```ts type SceneAdaptiveness = "continuous" | "locked" ``` Configures the adaptiveness of the AE/AF/AWB pipeline after a metering operation has settled. - `'continuous'`: Continuously keeps the target point relative to the screen in focus, adapting AE/AF/AWB values if the subject area changes. - `'locked'`: Keeps the AE/AF/AWB values locked in-place after the metering operation has settled even if the subject area changes, until focus is manually reset via [`CameraController.resetFocus()`](../hybrid-objects/CameraController.mdx#resetfocus) or another focus metering operation starts. #### See - [`CameraController.focusTo(...)`](../hybrid-objects/CameraController.mdx#focusto) - [`FocusOptions`](../interfaces/FocusOptions.mdx) --- # StabilizationMode Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/StabilizationMode --- title: StabilizationMode description: Specifies the stabilization algorithm/mode to use. --- ```ts type StabilizationMode = | "standard" | "cinematic" | "cinematic-extended" | "preview-optimized" | "cinematic-extended-enhanced" | "low-latency" ``` Specifies the stabilization algorithm/mode to use. Stabilization uses software and/or hardware processing to reduce visible shake. Most software algorithms reduce the visible field of view (FoV) to account for rapid movements. Some modes may introduce additional latency by buffering frames for stronger stabilization. - `'standard'`: Enables general-purpose stabilization, typically best for recorded video. - `'cinematic'`: Uses stronger cinematic-style smoothing. - `'cinematic-extended'`: Uses an even stronger cinematic-style stabilization mode. - `'preview-optimized'`: Prioritizes stabilization for the live preview experience. - `'cinematic-extended-enhanced'`: Uses the strongest cinematic-style stabilization mode. - `'low-latency'`: Prioritizes lower stabilization processing latency. --- # TargetCameraPosition Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/TargetCameraPosition --- title: TargetCameraPosition description: Represents the target physical position of a CameraDevice on the device. --- ```ts type TargetCameraPosition = "front" | "back" | "external" ``` Represents the target physical position of a [`CameraDevice`](../hybrid-objects/CameraDevice.mdx) on the device. - `'front'`: Target Cameras located on the front of the device, typically used for selfies. - `'back'`: Target Cameras located on the back of the device, typically used for capturing the scene. - `'external'`: Target external Cameras (e.g. USB, Continuity Camera). --- # TargetColorRange Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/TargetColorRange --- title: TargetColorRange --- ```ts type TargetColorRange = Exclude ``` --- # TargetColorSpace Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/TargetColorSpace --- title: TargetColorSpace --- ```ts type TargetColorSpace = Exclude ``` --- # TargetDynamicRangeBitDepth Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/TargetDynamicRangeBitDepth --- title: TargetDynamicRangeBitDepth --- ```ts type TargetDynamicRangeBitDepth = Exclude ``` --- # TargetPhotoContainerFormat Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/TargetPhotoContainerFormat --- title: TargetPhotoContainerFormat description: |- Represents a PhotoContainerFormat that can be used to capture Photos in. --- ```ts type TargetPhotoContainerFormat = | Extract | "native" ``` Represents a [`PhotoContainerFormat`](PhotoContainerFormat.mdx) that can be used to capture Photos in. --- # TargetStabilizationMode Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/TargetStabilizationMode --- title: TargetStabilizationMode description: Specifies a target StabilizationMode. --- ```ts type TargetStabilizationMode = StabilizationMode | "off" | "auto" ``` Specifies a target [`StabilizationMode`](StabilizationMode.mdx). - [`StabilizationMode`](StabilizationMode.mdx): A specific [`StabilizationMode`](StabilizationMode.mdx) - this has to be supported by the [`CameraDevice`](../hybrid-objects/CameraDevice.mdx). - `'auto'`: Automatically chooses a suitable [`StabilizationMode`](StabilizationMode.mdx). - `'off'`: Disables stabilization entirely. --- # TargetVideoPixelFormat Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/TargetVideoPixelFormat --- title: TargetVideoPixelFormat description: |- Represents a desired pixel format for a video pipeline. --- ```ts type TargetVideoPixelFormat = "native" | "yuv" | "rgb" ``` Represents a desired pixel format for a video pipeline. Used to configure the format a [`CameraFrameOutput`](../hybrid-objects/CameraFrameOutput.mdx) streams [`Frame`](../hybrid-objects/Frame.mdx)s in. - `'native'`: Choose whatever the [`CameraSessionConfig`](../hybrid-objects/CameraSessionConfig.mdx)'s [`nativePixelFormat`](../hybrid-objects/CameraSessionConfig.mdx#nativepixelformat) is. This can be a YUV format, an RGB format like [`'rgb-bgra-8-bit'`](VideoPixelFormat.mdx), a RAW format like [`'raw-bayer-packed96-12-bit'`](VideoPixelFormat.mdx), or a private format ([`'private'`](PixelFormat.mdx)) and requires zero conversion. - `'yuv'`: Choose the YUV format closest to the Camera's native format. Often YUV 4:2:0 8-bit full-range like [`'yuv-420-8-bit-full'`](VideoPixelFormat.mdx). - `'rgb'`: Choose an RGB format. Often 8-bit BGRA like [`'rgb-bgra-8-bit'`](VideoPixelFormat.mdx). --- # TorchMode Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/TorchMode --- title: TorchMode description: Represents the setting for the device's torch. --- ```ts type TorchMode = "on" | "off" ``` Represents the setting for the device's torch. - `'on'`: Keep the flash unit always on. - `'off'`: Keep the flash unit off. It can still fire elsewhere (e.g. for photo capture). --- # VideoCodec Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/VideoCodec --- title: VideoCodec description: Represents a video codec for encoded video data. --- ```ts type VideoCodec = | "h264" | "h265" | "h265-with-alpha" | "pro-res-422-proxy" | "pro-res-422-lt" | "pro-res-422" | "pro-res-422-hq" | "pro-res-4444" | "pro-res-4444-xq" | "pro-res-raw" | "pro-res-raw-hq" | "jpeg" | "unknown" ``` Represents a video codec for encoded video data. | Identifier | Chroma | Bit Depth | Type | Alpha | Notes | |---------------------|-------------|-----------|-------------|-------|----------------------------------------------| | `h264` | 4:2:0/2:2 | 8-bit | AVC | No | Most widely supported video format. | | `h265` | 4:2:0/4:2:2 | 8/10-bit | HEVC | No | Higher efficiency than H.264. | | `h265-with-alpha` | 4:4:4 | 10-bit | HEVC | Yes | Used for rendered content with transparency. | | `pro-res-422-proxy` | 4:2:2 | 10-bit | ProRes | No | Lowest bitrate; proxy workflows. | | `pro-res-422-lt` | 4:2:2 | 10-bit | ProRes | No | Reduced bitrate version of 422. | | `pro-res-422` | 4:2:2 | 10-bit | ProRes | No | Standard 422 quality. | | `pro-res-422-hq` | 4:2:2 | 10-bit | ProRes | No | Highest-quality 422 variant. | | `pro-res-4444` | 4:4:4 | 12-bit | ProRes | Yes | Full chroma + optional alpha. | | `pro-res-4444-xq` | 4:4:4 | 12-bit | ProRes | Yes | Highest-bitrate non-RAW ProRes. | | `pro-res-422` | RAW | 12-bit | ProRes RAW | N/A | Compressed Bayer RAW. | | `pro-res-422-hq` | RAW | 12-bit | ProRes RAW | N/A | Higher-quality ProRes RAW. | | `jpeg` | 4:2:2 | 8-bit | JPEG/MJPEG | No | Legacy motion JPEG; Not very efficient. | | `unknown` | N/A | N/A | unknown | N/A | An unknown codec - it cannot be used. | --- # VideoPixelFormat Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/VideoPixelFormat --- title: VideoPixelFormat description: Represents the pixel format of a video image buffer. --- ```ts type VideoPixelFormat = | "yuv-420-8-bit-video" | "yuv-420-8-bit-full" | "yuv-420-10-bit-video" | "yuv-420-10-bit-full" | "yuv-422-8-bit-video" | "yuv-422-8-bit-full" | "yuv-422-10-bit-video" | "yuv-422-10-bit-full" | "yuv-444-8-bit-video" | "yuv-444-8-bit-full" | "rgb-bgra-8-bit" | "rgb-rgba-8-bit" | "rgb-rgb-8-bit" | "raw-bayer-packed96-12-bit" | "raw-bayer-unpacked-16-bit" | "unknown" ``` Represents the pixel format of a video image buffer. Video Formats are either **YUV** or **RGB**. The most commonly used format is `yuv-420-8-bit-video`. | Format | Colorspace | Sampling | Bit depth | Color Range | Layout | |-----------------------------|------------|----------|-----------|--------------|----------------------| | `yuv-420-8-bit-video` | YUV | 4:2:0 | 8-bit | Video | Planar | | `yuv-420-8-bit-full` | YUV | 4:2:0 | 8-bit | Full | Planar | | `yuv-420-10-bit-video` | YUV | 4:2:0 | 10-bit | Video | Planar | | `yuv-420-10-bit-full` | YUV | 4:2:0 | 10-bit | Full | Planar | | `yuv-422-8-bit-video` | YUV | 4:2:2 | 8-bit | Video | Planar | | `yuv-422-8-bit-full` | YUV | 4:2:2 | 8-bit | Full | Planar | | `yuv-422-10-bit-video` | YUV | 4:2:2 | 10-bit | Video | Planar | | `yuv-422-10-bit-full` | YUV | 4:2:2 | 10-bit | Full | Planar | | `yuv-444-8-bit-video` | YUV | 4:4:4 | 8-bit | Video | Planar | | `yuv-444-8-bit-full` | YUV | 4:4:4 | 8-bit | Full | Planar | | `rgb-bgra-8-bit` | RGB | 4:4:4 | 8-bit | Full | Interleaved BGRA | | `rgb-rgba-8-bit` | RGB | 4:4:4 | 8-bit | Full | Interleaved RGBA | | `rgb-rgb-8-bit` | RGB | 4:4:4 | 8-bit | Full | Interleaved RGB/RGBX | | `raw-bayer-packed96-12-bit` | RAW Bayer | Mosaic | 12-bit | Sensor | Packed96 Bayer | | `raw-bayer-unpacked-16-bit` | RAW Bayer | Mosaic | 16-bit | Sensor | Unpacked 16-bit | | `unknown` | — | — | — | — | Unknown | --- # WhiteBalanceMode Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/type-aliases/WhiteBalanceMode --- title: WhiteBalanceMode description: Represents the white balance mode of a CameraDevice. --- ```ts type WhiteBalanceMode = "locked" | "auto-white-balance" | "continuous-auto-white-balance" ``` Represents the white balance mode of a [`CameraDevice`](../hybrid-objects/CameraDevice.mdx). - `'locked'`: The white balance is locked at its current value and does not adapt to scene changes. - `'auto-white-balance'`: The white balance is adjusted once to match the current scene. - `'continuous-auto-white-balance'`: The white balance is continuously adjusted as the scene changes. --- # Camera Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/views/Camera --- title: Camera description: The `` component. --- ```ts const Camera: MemoExoticComponent<(__namedParameters: CameraViewProps) => ReactElement> ``` The `` component. This is a convenience wrapper around [`useCamera(...)`](../functions/useCamera.mdx) that adds a [`PreviewView`](../type-aliases/PreviewView.mdx), wraps methods in a [`CameraRef`](../interfaces/CameraRef.mdx), and supports updating [`zoom`](../interfaces/CameraViewProps.mdx#zoom) and [`exposure`](../interfaces/CameraViewProps.mdx#exposure) via Reanimated [`SharedValue`](https://docs.swmansion.com/react-native-reanimated/docs/core/useSharedValue)s. #### Example ```tsx function App() { const camera = useRef(null) const device = useCameraDevice('back') const photoOutput = usePhotoOutput() return ( ) } ``` --- # NativeFrameRendererView Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/views/NativeFrameRendererView --- title: NativeFrameRendererView description: The `` component. --- ```ts const NativeFrameRendererView: ReactNativeView ``` The `` component. #### See - [`FrameRendererView`](../type-aliases/FrameRendererView.mdx) - [`FrameRendererViewProps`](../interfaces/FrameRendererViewProps.mdx) - [`FrameRendererViewMethods`](../interfaces/FrameRendererViewMethods.mdx) --- # NativePreviewView Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera/views/NativePreviewView --- title: NativePreviewView description: The `` component. --- ```ts const NativePreviewView: ReactNativeView ``` The `` component. The higher-level [`Camera`](Camera.mdx) component renders this native component under the hood. The `` requires a [`CameraPreviewOutput`](../hybrid-objects/CameraPreviewOutput.mdx) that is also connected to a [`CameraSession`](../hybrid-objects/CameraSession.mdx) to display a live Camera feed. #### See - [`PreviewView`](../type-aliases/PreviewView.mdx) - [`PreviewViewProps`](../interfaces/PreviewViewProps.mdx) - [`PreviewViewMethods`](../interfaces/PreviewViewMethods.mdx) #### Example ```tsx function App() { const previewView = useRef(null) const previewOutput = usePreviewOutput() return ( { previewView.current = r })} /> ) } ``` --- # createLocation Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-location/functions/createLocation --- title: createLocation description: Creates a new fake Location. --- ```ts function createLocation(latitude: number, longitude: number): Location ``` Creates a new fake [`Location`](../../react-native-vision-camera/hybrid-objects/Location.mdx). You can use this API to generate a [`Location`](../../react-native-vision-camera/hybrid-objects/Location.mdx) object for use in EXIF data or video metadata, if you already have a known [`latitude`](#createlocation) or [`longitude`](#createlocation) from a different API or a hardcoded fake location. --- # createLocationManager Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-location/functions/createLocationManager --- title: createLocationManager description: |- Create a new LocationManager with the given LocationManagerOptions --- ```ts function createLocationManager(options: LocationManagerOptions): LocationManager ``` Create a new [`LocationManager`](../hybrid-objects/LocationManager.mdx) with the given [`LocationManagerOptions`](../interfaces/LocationManagerOptions.mdx) --- # useLocation Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-location/functions/useLocation --- title: useLocation description: Reactively use the current user Location. --- ```ts function useLocation(options?: Partial): LocationState ``` Reactively use the current user [`Location`](../../react-native-vision-camera/hybrid-objects/Location.mdx). #### Example ```tsx const location = useLocation() useEffect(() => { if (!location.hasPermission) { location.requestPermission() } }, [location.hasPermission]) if (location.hasPermission) { console.log(location.location) } ``` --- # useLocationManager Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-location/functions/useLocationManager --- title: useLocationManager description: |- Use a stable LocationManager with the given LocationManagerOptions. --- ```ts function useLocationManager(__namedParameters?: Partial): LocationManager ``` Use a stable [`LocationManager`](../hybrid-objects/LocationManager.mdx) with the given [`LocationManagerOptions`](../interfaces/LocationManagerOptions.mdx). --- # LocationManager Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-location/hybrid-objects/LocationManager --- title: LocationManager description: Streams device location updates and exposes the last known Location. --- ```ts interface LocationManager extends HybridObject ``` Streams device location updates and exposes the last known [`Location`](../../react-native-vision-camera/hybrid-objects/Location.mdx). Create a `LocationManager` via [`createLocationManager`](../functions/createLocationManager.mdx) or the [`useLocationManager`](../functions/useLocationManager.mdx) hook. For a React-friendly API that handles permissions and subscriptions automatically, use [`useLocation`](../functions/useLocation.mdx). #### See - [`useLocation`](../functions/useLocation.mdx) - [`useLocationManager`](../functions/useLocationManager.mdx) - [`createLocationManager(...)`](../functions/createLocationManager.mdx) ## Properties ### lastKnownLocation ```ts readonly lastKnownLocation: | Location | undefined ``` Get the last known [`Location`](../../react-native-vision-camera/hybrid-objects/Location.mdx), or `undefined` if no location is known. *** ### locationPermissionStatus ```ts readonly locationPermissionStatus: PermissionStatus ``` Get the current location permission status. The [`PermissionStatus`](../../react-native-vision-camera/type-aliases/PermissionStatus.mdx) depends on this `LocationManager`'s configuration, as properties like [`LocationAccuracy`](../type-aliases/LocationAccuracy.mdx) affect [`locationPermissionStatus`](#locationpermissionstatus). ## Methods ### addOnLocationChangedListener(...) ```ts addOnLocationChangedListener(callback: (location: Location) => void): ListenerSubscription ``` Adds a [`callback`](#addonlocationchangedlistener) to be called whenever the current [`Location`](../../react-native-vision-camera/hybrid-objects/Location.mdx) changes. *** ### requestLocationPermission() ```ts requestLocationPermission(): Promise ``` Request location permission. *** ### startUpdating() ```ts startUpdating(): Promise ``` Start updating location updates. > [!WARNING] Throws > If [`locationPermissionStatus`](#locationpermissionstatus) is not [`'authorized'`](../../react-native-vision-camera/type-aliases/PermissionStatus.mdx). *** ### stopUpdating() ```ts stopUpdating(): Promise ``` Stop updating location updates. --- # LocationManagerFactory Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-location/hybrid-objects/LocationManagerFactory --- title: LocationManagerFactory --- ```ts interface LocationManagerFactory extends HybridObject ``` ## Methods ### createLocation(...) ```ts createLocation(latitude: number, longitude: number): Location ``` Creates a new fake [`Location`](../../react-native-vision-camera/hybrid-objects/Location.mdx). You can use this API to generate a [`Location`](../../react-native-vision-camera/hybrid-objects/Location.mdx) object for use in EXIF data or video metadata, if you already have a known [`latitude`](#createlocation) or [`longitude`](#createlocation) from a different API or a hardcoded fake location. *** ### createLocationManager(...) ```ts createLocationManager(options: LocationManagerOptions): LocationManager ``` Create a new [`LocationManager`](LocationManager.mdx) with the given [`LocationManagerOptions`](../interfaces/LocationManagerOptions.mdx) --- # ListenerSubscription Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-location/interfaces/ListenerSubscription --- title: ListenerSubscription description: |- Represents a subscription to any kind of listener. --- ```ts interface ListenerSubscription ``` Represents a subscription to any kind of listener. You can remove the subscription by calling [`remove()`](#remove). ## Properties ### remove ```ts remove: () => void ``` Remove the listener subscription. You can call this in a `useEffect`'s cleanup function. --- # LocationManagerOptions Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-location/interfaces/LocationManagerOptions --- title: LocationManagerOptions tocPlatforms: updateInterval: - Android --- ```ts interface LocationManagerOptions ``` ## Properties ### accuracy ```ts accuracy: LocationAccuracy ``` Configures the accuracy of location updates. #### Default ```ts 'balanced' ``` *** ### distanceFilter ```ts distanceFilter: number ``` Configures the distance the last location has to change in order to fire a new location update event, in meters. #### Default ```ts 10 ``` *** ### updateInterval ```ts updateInterval: number ``` Specify the interval in which location updates should be requested from the system, in milliseconds. #### Default ```ts 10000 ``` --- # LocationState Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-location/interfaces/LocationState --- title: LocationState description: The current state of the useLocation hook. --- ```ts interface LocationState ``` The current state of the [`useLocation`](../functions/useLocation.mdx) hook. ## Properties ### currentLocation ```ts currentLocation: | Location | undefined ``` The last known user [`Location`](../../react-native-vision-camera/hybrid-objects/Location.mdx), or `undefined` if no location has been reported yet (e.g. because permission has not been granted, or because the device is still acquiring a fix). *** ### hasPermission ```ts hasPermission: boolean ``` Whether the app has been granted permission to access the user's location. If this is `false`, call [`requestPermission()`](#requestpermission) to prompt the user. ## Methods ### requestPermission() ```ts requestPermission(): Promise ``` Requests the location permission from the user. Resolves with whether the permission was granted after the request completed. --- # LocationAccuracy Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-location/type-aliases/LocationAccuracy --- title: LocationAccuracy description: The accuracy of a Location. --- ```ts type LocationAccuracy = "high" | "balanced" | "low" ``` The accuracy of a [`Location`](../../react-native-vision-camera/hybrid-objects/Location.mdx). - `'high'`: Typically ~3-10m accuracy. Uses GPS + WiFi + cell + sensors. - `'balanced'`: Typically ~10-50m accuracy. Uses WiFi + cell. - `'low'`: Typically ~ 100-1000m accuracy. Uses cell. --- # createBarcodeScanner Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-barcode-scanner/functions/createBarcodeScanner --- title: createBarcodeScanner description: Create a new BarcodeScanner. --- ```ts function createBarcodeScanner(options: BarcodeScannerOptions): BarcodeScanner ``` Create a new [`BarcodeScanner`](../hybrid-objects/BarcodeScanner.mdx). The [`BarcodeScanner`](../hybrid-objects/BarcodeScanner.mdx) can be used to scan [`Barcode`](../hybrid-objects/Barcode.mdx)s in a [`Frame`](../../react-native-vision-camera/hybrid-objects/Frame.mdx) or an existing [`Image`](https://github.com/mrousavy/react-native-nitro-image). --- # createBarcodeScannerOutput Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-barcode-scanner/functions/createBarcodeScannerOutput --- title: createBarcodeScannerOutput description: Create a new Barcode Scanner CameraOutput. --- ```ts function createBarcodeScannerOutput(options: BarcodeScannerOutputOptions): CameraOutput ``` Create a new Barcode Scanner [`CameraOutput`](../../react-native-vision-camera/hybrid-objects/CameraOutput.mdx). The Barcode Scanner [`CameraOutput`](../../react-native-vision-camera/hybrid-objects/CameraOutput.mdx) can be attached to a [`CameraSession`](../../react-native-vision-camera/hybrid-objects/CameraSession.mdx). --- # useBarcodeScanner Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-barcode-scanner/functions/useBarcodeScanner --- title: useBarcodeScanner description: Use a BarcodeScanner. --- ```ts function useBarcodeScanner(__namedParameters: BarcodeScannerOptions): BarcodeScanner ``` Use a [`BarcodeScanner`](../hybrid-objects/BarcodeScanner.mdx). A [`BarcodeScanner`](../hybrid-objects/BarcodeScanner.mdx) can be used to detect [`Barcode`](../hybrid-objects/Barcode.mdx)s in a [`Frame`](../../react-native-vision-camera/hybrid-objects/Frame.mdx) in a Frame Processor, or in an existing [`Image`](https://github.com/mrousavy/react-native-nitro-image). #### Example ```ts const barcodeScanner = useBarcodeScanner({ barcodeFormats: ['all-formats'] }) const frameOutput = useFrameOutput({ onFrame(frame) { 'worklet' const barcodes = barcodeScanner.scanCodes(frame) console.log(`Detected ${barcodes.length} barcodes!`) frame.dispose() } }) ``` --- # useBarcodeScannerOutput Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-barcode-scanner/functions/useBarcodeScannerOutput --- title: useBarcodeScannerOutput description: Use a Barcode Scanner CameraOutput. --- ```ts function useBarcodeScannerOutput(__namedParameters: BarcodeScannerOutputOptions): CameraOutput ``` Use a Barcode Scanner [`CameraOutput`](../../react-native-vision-camera/hybrid-objects/CameraOutput.mdx). The Barcode Scanner [`CameraOutput`](../../react-native-vision-camera/hybrid-objects/CameraOutput.mdx) can be attached to a [`CameraSession`](../../react-native-vision-camera/hybrid-objects/CameraSession.mdx) or [`Camera`](../../react-native-vision-camera/views/Camera.mdx) component. #### Examples Attach to a `` component: ```tsx const device = ... const scannerOutput = useBarcodeScannerOutput({ barcodeFormats: ['all-formats'], onBarcodeScanned(barcodes) { console.log(`Scanned ${barcodes.length} barcodes!`) }, onError(error) { console.error(`Failed to scan barcodes!`, error) } }) return ( ) ``` Attach to a `CameraSession`: ```ts const device = ... const scannerOutput = useBarcodeScannerOutput({ barcodeFormats: ['all-formats'], onBarcodeScanned(barcodes) { console.log(`Scanned ${barcodes.length} barcodes!`) }, onError(error) { console.error(`Failed to scan barcodes!`, error) } }) const camera = useCamera({ isActive: true, device: device, outputs: [scannerOutput] }) ``` --- # Barcode Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-barcode-scanner/hybrid-objects/Barcode --- title: Barcode description: Represents a single detected Barcode. --- ```ts interface Barcode extends HybridObject ``` Represents a single detected Barcode. A `Barcode` is produced via the [`BarcodeScanner`](BarcodeScanner.mdx) or the Barcode Scanner [`CameraOutput`](../functions/createBarcodeScannerOutput.mdx). See [`BarcodeScanner.scanCodes(...)`](BarcodeScanner.mdx#scancodes) and [`BarcodeScanner.scanCodesInImageAsync(...)`](BarcodeScanner.mdx#scancodesinimageasync) for information about Barcode coordinate systems. #### Example ```ts const barcode = ... console.log(`Barcode value: ${barcode.rawValue}`) ``` ## Properties ### boundingBox ```ts readonly boundingBox: Rect ``` Get the `Barcode`'s bounding box. The coordinates are relative to the input [`Frame`](../../react-native-vision-camera/hybrid-objects/Frame.mdx) or [`Image`](https://github.com/mrousavy/react-native-nitro-image). *** ### cornerPoints ```ts readonly cornerPoints: Point[] ``` Get the `Barcode`'s corner points. The coordinates are relative to the input [`Frame`](../../react-native-vision-camera/hybrid-objects/Frame.mdx) or [`Image`](https://github.com/mrousavy/react-native-nitro-image). *** ### displayValue ```ts readonly displayValue: string | undefined ``` Get the `Barcode`'s value in a user-friendly format. *** ### format ```ts readonly format: BarcodeFormat ``` Get the format of this `Barcode`. #### See [`BarcodeFormat`](../type-aliases/BarcodeFormat.mdx) *** ### rawBytes ```ts readonly rawBytes: | ArrayBuffer | undefined ``` Get the `Barcode`'s value in raw bytes. *** ### rawValue ```ts readonly rawValue: string | undefined ``` Get the `Barcode`'s raw value as a string. *** ### valueType ```ts readonly valueType: BarcodeValueType ``` Get the `Barcode`'s value's type. #### See [`BarcodeValueType`](../type-aliases/BarcodeValueType.mdx) --- # BarcodeScanner Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-barcode-scanner/hybrid-objects/BarcodeScanner --- title: BarcodeScanner description: Represents a Barcode Scanner that uses MLKit Barcodes. --- ```ts interface BarcodeScanner extends HybridObject ``` Represents a Barcode Scanner that uses MLKit Barcodes. The `BarcodeScanner` can be used in a Frame Processor by calling [`scanCodes(...)`](#scancodes), or for static images by calling [`scanCodesInImageAsync(...)`](#scancodesinimageasync). #### See - [`useBarcodeScanner(...)`](../functions/useBarcodeScanner.mdx) - [`createBarcodeScanner(...)`](../functions/createBarcodeScanner.mdx) ## Methods ### scanCodes(...) ```ts scanCodes(frame: Frame): Barcode[] ``` Synchronously detects [`Barcode`](Barcode.mdx)s in the given [`Frame`](../../react-native-vision-camera/hybrid-objects/Frame.mdx). All coordinates in the [`Barcode`](Barcode.mdx) are relative to the [`Frame`](../../react-native-vision-camera/hybrid-objects/Frame.mdx)'s coordinate system. You can convert [`Barcode`](Barcode.mdx) coordinates to Camera coordinates using [`Frame.convertFramePointToCameraPoint(...)`](../../react-native-vision-camera/hybrid-objects/Frame.mdx#convertframepointtocamerapoint), and then convert the Camera coordinates to Preview View coordinates using [`PreviewViewMethods.convertCameraPointToViewPoint(...)`](../../react-native-vision-camera/interfaces/PreviewViewMethods.mdx#convertcamerapointtoviewpoint). #### Example ```ts const scanner = // ... const frame = // ... const previewView = // ... const barcodes = scanner.scanCodes(frame) for (const barcode of barcodes) { console.log('Barcode value:', barcode.rawValue) for (const point of barcode.cornerPoints) { const cameraPoint = frame.convertFramePointToCameraPoint(point) const previewPoint = previewView.convertCameraPointToViewPoint(cameraPoint) console.log('Corner Point:', previewPoint) } } ``` *** ### scanCodesAsync(...) ```ts scanCodesAsync(frame: Frame): Promise ``` Asynchronously detects [`Barcode`](Barcode.mdx)s in the given [`Frame`](../../react-native-vision-camera/hybrid-objects/Frame.mdx). #### See [`scanCodes`](#scancodes) *** ### scanCodesInImageAsync(...) ```ts scanCodesInImageAsync(image: Image): Promise ``` Asynchronously detects [`Barcode`](Barcode.mdx)s in the given [`Image`](https://github.com/mrousavy/react-native-nitro-image). This can be used to scan codes in an existing still image, such as an image loaded from disk, bundled resources or a URL via `react-native-nitro-image`. All coordinates in the returned [`Barcode`](Barcode.mdx)s are relative to the given [`Image`](https://github.com/mrousavy/react-native-nitro-image)'s coordinate system. #### Example ```ts import { loadImage } from 'react-native-nitro-image' import { createBarcodeScanner } from 'react-native-vision-camera-barcode-scanner' const image = await loadImage({ url: 'https://example.com/barcode.png' }) const scanner = createBarcodeScanner({ barcodeFormats: ['all-formats'] }) try { const barcodes = await scanner.scanCodesInImageAsync(image) console.log('Barcode value:', barcodes[0]?.rawValue) } finally { image.dispose() scanner.dispose() } ``` --- # BarcodeScannerFactory Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-barcode-scanner/hybrid-objects/BarcodeScannerFactory --- title: BarcodeScannerFactory --- ```ts interface BarcodeScannerFactory extends HybridObject ``` ## Methods ### createBarcodeScanner(...) ```ts createBarcodeScanner(options: BarcodeScannerOptions): BarcodeScanner ``` Create a new [`BarcodeScanner`](BarcodeScanner.mdx). *** ### createBarcodeScannerOutput(...) ```ts createBarcodeScannerOutput(options: BarcodeScannerOutputOptions): CameraOutput ``` Create a new [`CameraOutput`](../../react-native-vision-camera/hybrid-objects/CameraOutput.mdx) that can detect Barcodes. --- # BarcodeScannerOptions Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-barcode-scanner/interfaces/BarcodeScannerOptions --- title: BarcodeScannerOptions --- ```ts interface BarcodeScannerOptions ``` ## Properties ### barcodeFormats ```ts barcodeFormats: TargetBarcodeFormat[] ``` Specifies the formats to be used for Barcode scanning. If you want to detect all kinds of barcodes, use [`['all-formats']`](../type-aliases/TargetBarcodeFormat.mdx) --- # BarcodeScannerOutputOptions Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-barcode-scanner/interfaces/BarcodeScannerOutputOptions --- title: BarcodeScannerOutputOptions --- ```ts interface BarcodeScannerOutputOptions ``` #### Extended by - [`CodeScannerOptions`](CodeScannerOptions.mdx) ## Properties ### barcodeFormats ```ts barcodeFormats: TargetBarcodeFormat[] ``` Specifies the formats to be used for Barcode scanning. If you want to detect all kinds of barcodes, use [`['all-formats']`](../type-aliases/TargetBarcodeFormat.mdx) *** ### onBarcodeScanned ```ts onBarcodeScanned: (barcodes: Barcode[]) => void ``` Called whenever barcodes have been detected. *** ### onError ```ts onError: (error: Error) => void ``` Called when there was an error detecting barcodes. *** ### outputResolution? ```ts optional outputResolution?: BarcodeScannerOutputResolution ``` Controls which camera buffer resolution should be used. - `'preview'`: Prefer preview-sized buffers for lower latency. - `'full'`: Prefer full/highest available buffers for better detail. #### Default ```ts 'preview' ``` --- # CodeScannerOptions Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-barcode-scanner/interfaces/CodeScannerOptions --- title: CodeScannerOptions --- ```ts interface CodeScannerOptions extends BarcodeScannerOutputOptions ``` ## Properties ### barcodeFormats ```ts barcodeFormats: TargetBarcodeFormat[] ``` Specifies the formats to be used for Barcode scanning. If you want to detect all kinds of barcodes, use [`['all-formats']`](../type-aliases/TargetBarcodeFormat.mdx) #### Inherited from [`BarcodeScannerOutputOptions`](BarcodeScannerOutputOptions.mdx).[`barcodeFormats`](BarcodeScannerOutputOptions.mdx#barcodeformats) *** ### isActive ```ts isActive: boolean ``` Whether the [`CodeScanner`](../views/CodeScanner.mdx) is active, or not. You can toggle [`isActive`](#isactive) to pause/resume the Camera if the app becomes inactive, or the user to a different screen. *** ### onBarcodeScanned ```ts onBarcodeScanned: (barcodes: Barcode[]) => void ``` Called whenever barcodes have been detected. #### Inherited from [`BarcodeScannerOutputOptions`](BarcodeScannerOutputOptions.mdx).[`onBarcodeScanned`](BarcodeScannerOutputOptions.mdx#onbarcodescanned) *** ### onError ```ts onError: (error: Error) => void ``` Called when there was an error detecting barcodes. #### Inherited from [`BarcodeScannerOutputOptions`](BarcodeScannerOutputOptions.mdx).[`onError`](BarcodeScannerOutputOptions.mdx#onerror) *** ### outputResolution? ```ts optional outputResolution?: BarcodeScannerOutputResolution ``` Controls which camera buffer resolution should be used. - `'preview'`: Prefer preview-sized buffers for lower latency. - `'full'`: Prefer full/highest available buffers for better detail. #### Default ```ts 'preview' ``` #### Inherited from [`BarcodeScannerOutputOptions`](BarcodeScannerOutputOptions.mdx).[`outputResolution`](BarcodeScannerOutputOptions.mdx#outputresolution) *** ### style ```ts style: StyleProp ``` Sets the style for this view. Most commonly, you would use `{ flex: 1 }`. --- # Point Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-barcode-scanner/interfaces/Point --- title: Point description: |- Represents a Point in the current context's coordinate system. --- ```ts interface Point ``` Represents a Point in the current context's coordinate system. ## Properties ### x ```ts x: number ``` The X coordinate of the Point. *** ### y ```ts y: number ``` The Y coordinate of the Point. --- # Rect Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-barcode-scanner/interfaces/Rect --- title: Rect description: |- Represents a Rectangle in the current context's coordinate system. --- ```ts interface Rect ``` Represents a Rectangle in the current context's coordinate system. ## Properties ### bottom ```ts bottom: number ``` The bottom value (max Y) of the Rectangle. *** ### left ```ts left: number ``` The left value (min X) of the Rectangle. *** ### right ```ts right: number ``` The right value (max X) of the Rectangle. *** ### top ```ts top: number ``` The top value (min Y) of the Rectangle. --- # BarcodeFormat Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-barcode-scanner/type-aliases/BarcodeFormat --- title: BarcodeFormat description: |- Represents a detected Barcode's format, or `'unknown'` if the format of a scanned Barcode could not be determined. --- ```ts type BarcodeFormat = | "unknown" | "code-128" | "code-39" | "code-93" | "codabar" | "data-matrix" | "ean-13" | "ean-8" | "itf" | "qr-code" | "upc-a" | "upc-e" | "pdf-417" | "aztec" ``` Represents a detected [`Barcode`](../hybrid-objects/Barcode.mdx)'s format, or `'unknown'` if the format of a scanned Barcode could not be determined. --- # BarcodeScannerOutputResolution Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-barcode-scanner/type-aliases/BarcodeScannerOutputResolution --- title: BarcodeScannerOutputResolution description: Controls the camera buffer resolution used for barcode scanning. --- ```ts type BarcodeScannerOutputResolution = "preview" | "full" ``` Controls the camera buffer resolution used for barcode scanning. - `'preview'`: Prefer preview-sized buffers for lower latency. - `'full'`: Prefer full/highest available buffers for better detail. --- # BarcodeValueType Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-barcode-scanner/type-aliases/BarcodeValueType --- title: BarcodeValueType description: Represents the semantic type of data encoded in a Barcode - e.g. --- ```ts type BarcodeValueType = | "unknown" | "contact-info" | "email" | "isbn" | "phone" | "product" | "sms" | "text" | "url" | "wifi" | "geo" | "calendar-event" | "driver-license" ``` Represents the semantic type of data encoded in a [`Barcode`](../hybrid-objects/Barcode.mdx) - e.g. a URL, a phone number, or a WiFi config - or `'unknown'` if the content type could not be classified. This describes **what** the barcode's content represents, not the barcode's visual format (see [`BarcodeFormat`](BarcodeFormat.mdx)). --- # TargetBarcodeFormat Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-barcode-scanner/type-aliases/TargetBarcodeFormat --- title: TargetBarcodeFormat description: |- Represents a target BarcodeFormat that the BarcodeScanner can be configured to scan for, or `'all-formats'` to scan for every supported format. --- ```ts type TargetBarcodeFormat = | Exclude | "all-formats" ``` Represents a target [`BarcodeFormat`](BarcodeFormat.mdx) that the [`BarcodeScanner`](../hybrid-objects/BarcodeScanner.mdx) can be configured to scan for, or `'all-formats'` to scan for every supported format. --- # CodeScanner Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-barcode-scanner/views/CodeScanner --- title: CodeScanner description: |- A view that detects Barcodes in a Camera using the default rear CameraDevice. --- ```ts function CodeScanner(__namedParameters: CodeScannerOptions): ReactElement ``` A view that detects [`Barcode`](../hybrid-objects/Barcode.mdx)s in a Camera using the default rear [`CameraDevice`](../../react-native-vision-camera/hybrid-objects/CameraDevice.mdx). #### Discussion All [`Barcode`](../hybrid-objects/Barcode.mdx) coordinates are in the [`Frame`](../../react-native-vision-camera/hybrid-objects/Frame.mdx)'s coordinate system. If you need to convert [`Barcode`](../hybrid-objects/Barcode.mdx) coordinates to view coordinates, either use [`useBarcodeScannerOutput(...)`](../functions/useBarcodeScannerOutput.mdx) or [`useBarcodeScanner(...)`](../functions/useBarcodeScanner.mdx) directly, and convert coordinates using your Preview View yourself. See [`scanCodes(...)`](../hybrid-objects/BarcodeScanner.mdx#scancodes) for more information about coordinate system conversions. #### Example ```tsx function App() { const isFocused = useIsFocused() const appState = useAppState() const isActive = isFocused && appState === 'active' return ( { console.log(`Scanned ${barcodes.length} barcodes!`) }} onError={(error) => { console.error(`Error scanning barcodes:`, error) }} /> ) } ``` --- # createResizer Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-resizer/functions/createResizer --- title: createResizer description: Create a new Resizer with the given ResizerOptions --- ```ts function createResizer(options: ResizerOptions): Promise ``` Create a new [`Resizer`](../hybrid-objects/Resizer.mdx) with the given [`ResizerOptions`](../interfaces/ResizerOptions.mdx) #### Example ```ts const resizer = await createResizer({ width: 192, height: 192, channelOrder: 'rgb', dataType: 'float32', scaleMode: 'cover', pixelLayout: 'planar' }) ``` --- # isResizerAvailable Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-resizer/functions/isResizerAvailable --- title: isResizerAvailable description: Returns whether the GPU-accelerated Resizer pipeline is available on this device. --- ```ts function isResizerAvailable(): boolean ``` Returns whether the GPU-accelerated Resizer pipeline is available on this device. - On iOS, this requires the Metal GPU framework, which is always available. - On Android, this requires the Vulkan GPU framework and `AHardwareBuffer*` extensions, which are only available on Android SDK 28. #### Example ```ts function getResizer(options: ResizerOptions): Resizer | CPUFallbackResizer { if (isResizerAvailable()) { // GPU accelerated Resizer pipeline is available! return createResizer(options) } else { // GPU accelerated Resizer pipeline is not available on this device, // fall back to a CPU implementation. return ... } } ``` --- # useResizer Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-resizer/functions/useResizer --- title: useResizer description: Use a Resizer with the given options. --- ```ts function useResizer(__namedParameters: ResizerOptions): ResizerState ``` Use a [`Resizer`](../hybrid-objects/Resizer.mdx) with the given options. The [`Resizer`](../hybrid-objects/Resizer.mdx) can be used to resize and convert [`Frame`](../../react-native-vision-camera/hybrid-objects/Frame.mdx)s for ML processing. #### Discussion Inspect the returned `error` if the [`Resizer`](../hybrid-objects/Resizer.mdx) couldn't be created successfully. #### Example ```ts function App() { const { resizer } = useResizer({ width: 192, height: 192, channelOrder: 'rgb', dataType: 'float32', scaleMode: 'cover', pixelLayout: 'planar', }) const frameOutput = useFrameOutput({ pixelFormat: 'yuv', onFrame(frame) { 'worklet' if (resizer != null) { const resized = resizer.resize(frame) const buffer = resized.getPixelBuffer() resized.dispose() } frame.dispose() } }) } ``` --- # GPUFrame Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-resizer/hybrid-objects/GPUFrame --- title: GPUFrame description: |- A GPUFrame represents a texture on the GPU, often the result of a Frame that has been resized with the Resizer. --- ```ts interface GPUFrame extends HybridObject ``` A `GPUFrame` represents a texture on the GPU, often the result of a [`Frame`](../../react-native-vision-camera/hybrid-objects/Frame.mdx) that has been resized with the [`Resizer`](Resizer.mdx). The `GPUFrame` exposes its underlying pixel buffer to the CPU via [`getPixelBuffer()`](#getpixelbuffer). #### Discussion It is recommended to [`dispose()`](https://nitro.margelo.com/docs/hybrid-objects) the `GPUFrame` once it is no longer used to free up resources as early as possible. ## Properties ### channelOrder? ```ts readonly optional channelOrder?: ChannelOrder ``` Represents the channel ordering of the `GPUFrame`. > [!NOTE] Note > If the `GPUFrame` has already been disposed, this returns `undefined`. *** ### dataType? ```ts readonly optional dataType?: DataType ``` Represents the scalar data type of the `GPUFrame`. > [!NOTE] Note > If the `GPUFrame` has already been disposed, this returns `undefined`. *** ### height ```ts readonly height: number ``` Represents the height of the `GPUFrame`, in pixels. > [!NOTE] Note > If the `GPUFrame` has already been disposed, this returns `0`. *** ### pixelLayout? ```ts readonly optional pixelLayout?: PixelLayout ``` Represents how the `GPUFrame`'s channels are laid out in memory. - `'interleaved'` corresponds to HWC / NHWC. - `'planar'` corresponds to CHW / NCHW. > [!NOTE] Note > If the `GPUFrame` has already been disposed, this returns `undefined`. *** ### width ```ts readonly width: number ``` Represents the width of the `GPUFrame`, in pixels. > [!NOTE] Note > If the `GPUFrame` has already been disposed, this returns `0`. ## Methods ### getPixelBuffer() ```ts getPixelBuffer(): ArrayBuffer ``` Get an `ArrayBuffer` representing the shared memory of this `GPUFrame`. While the `ArrayBuffer` allows reading pixels in JS, it is a GPU buffer, and reads are expected to be performed on the GPU for better performance. #### Discussion The returned `ArrayBuffer` is only valid as long as this `GPUFrame` is valid - once the `GPUFrame` has been [`dispose()`](https://nitro.margelo.com/docs/hybrid-objects)'d, the returned `ArrayBuffer` is no longer safe to access and may return "garbage data". --- # Resizer Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-resizer/hybrid-objects/Resizer --- title: Resizer description: Represents a GPU-accelerated Frame resizer and converter. --- ```ts interface Resizer extends HybridObject ``` Represents a GPU-accelerated [`Frame`](../../react-native-vision-camera/hybrid-objects/Frame.mdx) resizer and converter. You can create instances of the `Resizer` via [`ResizerFactory.createResizer(...)`](ResizerFactory.mdx#createresizer). #### Discussion The `Resizer` internally allocates a memory pool, which can grow quite large, depending on texture size. When you are done with the `Resizer`, it is recommended to [`dispose()`](https://nitro.margelo.com/docs/hybrid-objects) it to free up resources. ## Methods ### resize(...) ```ts resize(frame: Frame): GPUFrame ``` Resize the given [`frame`](#resize) using the options this `Resizer` was configured with. #### Returns A [`GPUFrame`](GPUFrame.mdx) of the converted and resized pixel data. The returned [`GPUFrame`](GPUFrame.mdx) must be disposed (via [`dispose()`](https://nitro.margelo.com/docs/hybrid-objects)) to ensure the pipeline can run continuously. #### Discussion - On iOS, the input [`Frame`](../../react-native-vision-camera/hybrid-objects/Frame.mdx)'s [`pixelFormat`](../../react-native-vision-camera/hybrid-objects/Frame.mdx#pixelformat) has to be [`'yuv-420-8-bit-full'`](../../react-native-vision-camera/type-aliases/VideoPixelFormat.mdx), which is configured on the [`CameraFrameOutput`](../../react-native-vision-camera/hybrid-objects/CameraFrameOutput.mdx) by setting [`FrameOutputOptions.pixelFormat`](../../react-native-vision-camera/interfaces/FrameOutputOptions.mdx#pixelformat) to [`'yuv'`](../../react-native-vision-camera/type-aliases/TargetVideoPixelFormat.mdx). - On Android, the input [`Frame`](../../react-native-vision-camera/hybrid-objects/Frame.mdx)'s [`pixelFormat`](../../react-native-vision-camera/hybrid-objects/Frame.mdx#pixelformat) can be any pixel format - even [`'private'`](../../react-native-vision-camera/type-aliases/PixelFormat.mdx). For maximum performance, the resolved [`CameraSessionConfig`](../../react-native-vision-camera/hybrid-objects/CameraSessionConfig.mdx)'s [`nativePixelFormat`](../../react-native-vision-camera/hybrid-objects/CameraSessionConfig.mdx#nativepixelformat) should be [`'yuv-420-8-bit-full'`](../../react-native-vision-camera/type-aliases/VideoPixelFormat.mdx) on iOS, and [`'private'`](../../react-native-vision-camera/type-aliases/PixelFormat.mdx) on Android. Then, set [`FrameOutputOptions.pixelFormat`](../../react-native-vision-camera/interfaces/FrameOutputOptions.mdx#pixelformat) to [`'native'`](../../react-native-vision-camera/type-aliases/TargetVideoPixelFormat.mdx) on Android, and [`'native'`](../../react-native-vision-camera/type-aliases/TargetVideoPixelFormat.mdx) if the config's [`nativePixelFormat`](../../react-native-vision-camera/hybrid-objects/CameraSessionConfig.mdx#nativepixelformat) really is [`'yuv-420-8-bit-full'`](../../react-native-vision-camera/type-aliases/VideoPixelFormat.mdx) (or [`'yuv'`](../../react-native-vision-camera/type-aliases/TargetVideoPixelFormat.mdx) otherwise) for iOS. To configure your session with the target Pixel Format, use a [`PixelFormatConstraint`](../../react-native-vision-camera/interfaces/PixelFormatConstraint.mdx). For ML models that expect CHW / NCHW tensors, configure the `Resizer` with `pixelLayout: 'planar'`. #### Examples Simple resize ```ts const resizer = ... const frameOutput = useFrameOutput({ pixelFormat: 'yuv', onFrame(frame) { 'worklet' if (resizer != null) { const resized = resizer.resize(frame) const buffer = resized.getPixelBuffer() resized.dispose() } frame.dispose() } }) ``` Maximum performance resize ```ts const targetPixelFormat = Platform.select({ ios: 'yuv-420-8-bit-full', android: 'private' }) const resizer = ... const frameOutput = useFrameOutput({ pixelFormat: 'native', onFrame(frame) { 'worklet' if (resizer != null) { const resized = resizer.resize(frame) const buffer = resized.getPixelBuffer() resized.dispose() } frame.dispose() } }) const constraints: Constraint[] = [ { pixelFormat: targetPixelFormat } ] ``` --- # ResizerFactory Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-resizer/hybrid-objects/ResizerFactory --- title: ResizerFactory description: The ResizerFactory creates instances of a Resizer. --- ```ts interface ResizerFactory extends HybridObject ``` The `ResizerFactory` creates instances of a [`Resizer`](Resizer.mdx). #### Example ```ts const factory = ... const resizer = await factory.createResizer({ width: 192, height: 192, channelOrder: 'rgb', dataType: 'float32', pixelLayout: 'planar' }) ``` ## Methods ### createResizer(...) ```ts createResizer(options: ResizerOptions): Promise ``` Creates a new [`Resizer`](Resizer.mdx) with the given [`ResizerOptions`](../interfaces/ResizerOptions.mdx). *** ### isAvailable() ```ts isAvailable(): boolean ``` Returns whether the GPU-accelerated resizer pipeline is supported on this device. - On iOS, this requires the Metal GPU framework, which is always available. - On Android, this requires the Vulkan GPU framework and `AHardwareBuffer*` extensions, which are only available on newer Android versions. --- # ResizerOptions Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-resizer/interfaces/ResizerOptions --- title: ResizerOptions description: Configures options for a Resizer. --- ```ts interface ResizerOptions ``` Configures options for a [`Resizer`](../hybrid-objects/Resizer.mdx). ## Properties ### channelOrder ```ts channelOrder: ChannelOrder ``` Configures the output [`ChannelOrder`](../type-aliases/ChannelOrder.mdx) the [`Resizer`](../hybrid-objects/Resizer.mdx) will write for each resized pixel. *** ### dataType ```ts dataType: DataType ``` Configures the scalar [`DataType`](../type-aliases/DataType.mdx) the [`Resizer`](../hybrid-objects/Resizer.mdx) will use for each output channel. *** ### height ```ts height: number ``` Configures the height the [`Resizer`](../hybrid-objects/Resizer.mdx) will resize [`Frame`](../../react-native-vision-camera/hybrid-objects/Frame.mdx)s to. *** ### pixelLayout ```ts pixelLayout: PixelLayout ``` Configures how the individual channels per pixel are arranged in memory. - Use [`'interleaved'`](../type-aliases/PixelLayout.mdx) if your ML model input tensor is (N)HWC shaped - e.g.: `[1, H, W, 3]` - Use [`'planar'`](../type-aliases/PixelLayout.mdx) if your ML model input tensor is (N)CHW shaped - e.g.: `[1, 3, H, W]`. #### See [`PixelLayout`](../type-aliases/PixelLayout.mdx) *** ### scaleMode ```ts scaleMode: ScaleMode ``` Configures the resize behavior when input and output aspect ratios differ. - `'cover'`: Perform a centered crop to fill the full output. - `'contain'`: Keep the full source image and pad remaining output areas with black bars. *** ### width ```ts width: number ``` Configures the width the [`Resizer`](../hybrid-objects/Resizer.mdx) will resize [`Frame`](../../react-native-vision-camera/hybrid-objects/Frame.mdx)s to. --- # ChannelOrder Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-resizer/type-aliases/ChannelOrder --- title: ChannelOrder description: Represents how the three output channels are ordered in memory. --- ```ts type ChannelOrder = "rgb" | "bgr" ``` Represents how the three output channels are ordered in memory. For example, `'rgb'` stores one pixel as `R, G, B`. --- # DataType Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-resizer/type-aliases/DataType --- title: DataType description: Represents the scalar encoding used for each output channel. --- ```ts type DataType = "int8" | "uint8" | "float16" | "float32" ``` Represents the scalar encoding used for each output channel. For example, `'float32'` stores each output value as a 32-bit float in the normalized range from `0.0` to `1.0`. --- # PixelLayout Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-resizer/type-aliases/PixelLayout --- title: PixelLayout description: Represents how the individual channels per pixel are arranged in memory. --- ```ts type PixelLayout = "interleaved" | "planar" ``` Represents how the individual channels per pixel are arranged in memory. - `'interleaved'` stores complete pixels next to each other, which corresponds to (N)HWC: ```text RGBRGBRGBRGB RGBRGBRGBRGB RGBRGBRGBRGB ``` - `'planar'` stores one full channel plane after the other, which corresponds to (N)CHW: ```text RRRRRRRRRRRR GGGGGGGGGGGG BBBBBBBBBBBB ``` --- # ResizerState Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-resizer/type-aliases/ResizerState --- title: ResizerState description: The current state of the useResizer hook. --- ```ts type ResizerState = | { error: undefined; resizer: undefined; state: "loading"; } | { error: undefined; resizer: Resizer; state: "ready"; } | { error: Error; resizer: undefined; state: "error"; } ``` The current state of the [`useResizer`](../functions/useResizer.mdx) hook. - `'loading'`: The [`Resizer`](../hybrid-objects/Resizer.mdx) is still being created. - `'ready'`: The [`Resizer`](../hybrid-objects/Resizer.mdx) has been created successfully and is ready to use. - `'error'`: Creating the [`Resizer`](../hybrid-objects/Resizer.mdx) failed. Inspect `error` for details. --- # ScaleMode Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-resizer/type-aliases/ScaleMode --- title: ScaleMode description: |- The mode tells the GPU resize pipeline how to map the input image into the output bounds when the aspect ratio doesn't match. --- ```ts type ScaleMode = "cover" | "contain" ``` The mode tells the GPU resize pipeline how to map the input image into the output bounds when the aspect ratio doesn't match. - `'cover'`: Fill the whole output and keep the input aspect ratio. This performs a centered crop on the longer source axis. - `'contain'`: Keep the full source image visible and preserve aspect ratio. This adds black bars (letterboxing/pillarboxing) where needed. --- # SkiaCameraProps Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-skia/interfaces/SkiaCameraProps --- title: SkiaCameraProps description: Represents props for a SkiaCamera. tocPlatforms: enableDistortionCorrection?: - iOS enableSmoothAutoFocus?: - iOS onSubjectAreaChanged()?: - iOS --- ```ts interface SkiaCameraProps extends CameraProps, Pick ``` Represents props for a [`SkiaCamera`](../views/SkiaCamera.mdx). ## Properties ### constraints? ```ts optional constraints?: Constraint[] ``` [`Constraint`](../../react-native-vision-camera/type-aliases/Constraint.mdx)s (e.g. `{ fps: 60 }`) that the Camera pipeline will try to match when configuring the [`CameraSession`](../../react-native-vision-camera/hybrid-objects/CameraSession.mdx). #### See [`CameraSessionConnection.constraints`](../../react-native-vision-camera/interfaces/CameraSessionConnection.mdx#constraints) #### Inherited from [`CameraProps`](../../react-native-vision-camera/interfaces/CameraProps.mdx).[`constraints`](../../react-native-vision-camera/interfaces/CameraProps.mdx#constraints) *** ### device ```ts device: | CameraDevice | CameraPosition ``` The [`CameraDevice`](../../react-native-vision-camera/hybrid-objects/CameraDevice.mdx) to open, or a [`CameraPosition`](../../react-native-vision-camera/type-aliases/CameraPosition.mdx) (e.g. `'back'`) to auto-pick a matching device via [`getCameraDevice(...)`](../../react-native-vision-camera/functions/getCameraDevice.mdx). #### See [`CameraSessionConnection.input`](../../react-native-vision-camera/interfaces/CameraSessionConnection.mdx#input) #### Inherited from [`CameraProps`](../../react-native-vision-camera/interfaces/CameraProps.mdx).[`device`](../../react-native-vision-camera/interfaces/CameraProps.mdx#device) *** ### enableDistortionCorrection? ```ts optional enableDistortionCorrection?: boolean ``` If `true`, geometric distortion at the edges (e.g. on ultra-wide-angle cameras) is corrected, at the cost of a small amount of field of view. #### See [`CameraControllerConfiguration.enableDistortionCorrection`](../../react-native-vision-camera/interfaces/CameraControllerConfiguration.mdx#enabledistortioncorrection) #### Default ```ts true ``` #### Inherited from [`CameraProps`](../../react-native-vision-camera/interfaces/CameraProps.mdx).[`enableDistortionCorrection`](../../react-native-vision-camera/interfaces/CameraProps.mdx#enabledistortioncorrection) *** ### enableLowLightBoost? ```ts optional enableLowLightBoost?: boolean ``` If `true`, the Camera pipeline may extend exposure times (effectively dropping frame rate) in low-light scenes to receive more light. #### See [`CameraControllerConfiguration.enableLowLightBoost`](../../react-native-vision-camera/interfaces/CameraControllerConfiguration.mdx#enablelowlightboost) #### Default ```ts false ``` #### Inherited from [`CameraProps`](../../react-native-vision-camera/interfaces/CameraProps.mdx).[`enableLowLightBoost`](../../react-native-vision-camera/interfaces/CameraProps.mdx#enablelowlightboost) *** ### enablePhysicalBufferRotation? ```ts optional enablePhysicalBufferRotation?: boolean ``` Physically rotates buffers to the desired target [`CameraOrientation`](../../react-native-vision-camera/type-aliases/CameraOrientation.mdx) and [`MirrorMode`](../../react-native-vision-camera/type-aliases/MirrorMode.mdx). By default, it is disabled as Skia rotates and mirrors the Frame via efficient GPU-based transforms. Enabling this results in the [`Frame`](../../react-native-vision-camera/hybrid-objects/Frame.mdx) always being upright and never mirrored. #### Default ```ts false ``` *** ### enablePreviewSizedOutputBuffers? ```ts optional enablePreviewSizedOutputBuffers?: boolean ``` Configures the underlying [`CameraVideoOutput`](../../react-native-vision-camera/hybrid-objects/CameraVideoOutput.mdx) to downscale [`Frame`](../../react-native-vision-camera/hybrid-objects/Frame.mdx)s to a size suitable for preview, such as the screen size. This may be more efficient if the [`CameraSession`](../../react-native-vision-camera/hybrid-objects/CameraSession.mdx) negotiated a high-resolution output, as Skia doesn't have to operate on high-resolution [`Frame`](../../react-native-vision-camera/hybrid-objects/Frame.mdx)s. Ideally, configure a matching [`ResolutionBiasConstraint`](../../react-native-vision-camera/interfaces/ResolutionBiasConstraint.mdx) upfront so no scaling would be necessary at any point in the pipeline. #### Default ```ts false ``` *** ### enableSmoothAutoFocus? ```ts optional enableSmoothAutoFocus?: boolean ``` If `true`, auto-focus transitions are performed slower and smoother to appear less intrusive in video recordings. #### See [`CameraControllerConfiguration.enableSmoothAutoFocus`](../../react-native-vision-camera/interfaces/CameraControllerConfiguration.mdx#enablesmoothautofocus) #### Default ```ts false ``` #### Inherited from [`CameraProps`](../../react-native-vision-camera/interfaces/CameraProps.mdx).[`enableSmoothAutoFocus`](../../react-native-vision-camera/interfaces/CameraProps.mdx#enablesmoothautofocus) *** ### getInitialExposureBias? ```ts optional getInitialExposureBias?: () => number | undefined ``` A getter for the initial exposure bias to apply when the [`CameraController`](../../react-native-vision-camera/hybrid-objects/CameraController.mdx) is created. Later, the exposure bias can be adjusted via [`CameraController.setExposureBias(...)`](../../react-native-vision-camera/hybrid-objects/CameraController.mdx#setexposurebias). #### See [`CameraSessionConnection.initialExposureBias`](../../react-native-vision-camera/interfaces/CameraSessionConnection.mdx#initialexposurebias) #### Inherited from [`CameraProps`](../../react-native-vision-camera/interfaces/CameraProps.mdx).[`getInitialExposureBias`](../../react-native-vision-camera/interfaces/CameraProps.mdx#getinitialexposurebias) *** ### getInitialZoom? ```ts optional getInitialZoom?: () => number | undefined ``` A getter for the initial zoom value to apply when the [`CameraController`](../../react-native-vision-camera/hybrid-objects/CameraController.mdx) is created. Later, the zoom can be adjusted via [`CameraController.setZoom(...)`](../../react-native-vision-camera/hybrid-objects/CameraController.mdx#setzoom). #### See [`CameraSessionConnection.initialZoom`](../../react-native-vision-camera/interfaces/CameraSessionConnection.mdx#initialzoom) #### Inherited from [`CameraProps`](../../react-native-vision-camera/interfaces/CameraProps.mdx).[`getInitialZoom`](../../react-native-vision-camera/interfaces/CameraProps.mdx#getinitialzoom) *** ### isActive ```ts isActive: boolean ``` Starts the [`CameraSession`](../../react-native-vision-camera/hybrid-objects/CameraSession.mdx) when set to `true`, and stops it when set back to `false`. #### See - [`CameraSession.start()`](../../react-native-vision-camera/hybrid-objects/CameraSession.mdx#start) - [`CameraSession.stop()`](../../react-native-vision-camera/hybrid-objects/CameraSession.mdx#stop) - [`CameraSession.isRunning`](../../react-native-vision-camera/hybrid-objects/CameraSession.mdx#isrunning) #### Inherited from [`CameraProps`](../../react-native-vision-camera/interfaces/CameraProps.mdx).[`isActive`](../../react-native-vision-camera/interfaces/CameraProps.mdx#isactive) *** ### mirrorMode? ```ts optional mirrorMode?: MirrorMode ``` Sets whether the [`CameraOutput`](../../react-native-vision-camera/hybrid-objects/CameraOutput.mdx)s are mirrored along the vertical axis. [`'auto'`](../../react-native-vision-camera/type-aliases/MirrorMode.mdx) mirrors automatically on selfie cameras. #### See [`CameraOutputConfiguration.mirrorMode`](../../react-native-vision-camera/interfaces/CameraOutputConfiguration.mdx#mirrormode) #### Default ```ts 'auto' ``` #### Inherited from [`CameraProps`](../../react-native-vision-camera/interfaces/CameraProps.mdx).[`mirrorMode`](../../react-native-vision-camera/interfaces/CameraProps.mdx#mirrormode) *** ### onConfigured? ```ts optional onConfigured?: () => void ``` Called whenever the [`CameraSession`](../../react-native-vision-camera/hybrid-objects/CameraSession.mdx) has been configured with new connections via [`configure(...)`](../../react-native-vision-camera/hybrid-objects/CameraSession.mdx#configure) and connections to the individual outputs are formed. This is a good place to check output capabilities, such as [`CameraVideoOutput.getSupportedVideoCodecs()`](../../react-native-vision-camera/hybrid-objects/CameraVideoOutput.mdx#getsupportedvideocodecs) #### Inherited from [`CameraProps`](../../react-native-vision-camera/interfaces/CameraProps.mdx).[`onConfigured`](../../react-native-vision-camera/interfaces/CameraProps.mdx#onconfigured) *** ### onError? ```ts optional onError?: (error: Error) => void ``` Called whenever the [`CameraSession`](../../react-native-vision-camera/hybrid-objects/CameraSession.mdx) has encountered an error. #### See [`CameraSession.addOnErrorListener`](../../react-native-vision-camera/hybrid-objects/CameraSession.mdx#addonerrorlistener) #### Inherited from [`CameraProps`](../../react-native-vision-camera/interfaces/CameraProps.mdx).[`onError`](../../react-native-vision-camera/interfaces/CameraProps.mdx#onerror) *** ### onFrame ```ts onFrame: (frame: Frame, render: (onDraw: (state: SkiaOnFrameState) => void) => void) => void ``` Called on every Frame with the current state. > [!NOTE] Note > You must render the Frame to the Canvas yourself > via [`render`](#onframe), otherwise it'll just be a black screen. #### Worklet #### Example ```ts onFrame(frame, render) { 'worklet' render(({ frameTexture, canvas }) => { canvas.drawImage(frameTexture, 0, 0) }) frame.dispose() } ``` *** ### onInterruptionEnded? ```ts optional onInterruptionEnded?: () => void ``` Called when a previous interruption has ended and the [`CameraSession`](../../react-native-vision-camera/hybrid-objects/CameraSession.mdx) is running uninterrupted again. #### See [`CameraSession.addOnInterruptionEndedListener`](../../react-native-vision-camera/hybrid-objects/CameraSession.mdx#addoninterruptionendedlistener) #### Inherited from [`CameraProps`](../../react-native-vision-camera/interfaces/CameraProps.mdx).[`onInterruptionEnded`](../../react-native-vision-camera/interfaces/CameraProps.mdx#oninterruptionended) *** ### onInterruptionStarted? ```ts optional onInterruptionStarted?: (interruption: InterruptionReason) => void ``` Called whenever the [`CameraSession`](../../react-native-vision-camera/hybrid-objects/CameraSession.mdx) has encountered an interruption of the given [`InterruptionReason`](../../react-native-vision-camera/type-aliases/InterruptionReason.mdx). Interruptions are temporarily. #### See [`CameraSession.addOnInterruptionStartedListener`](../../react-native-vision-camera/hybrid-objects/CameraSession.mdx#addoninterruptionstartedlistener) #### Inherited from [`CameraProps`](../../react-native-vision-camera/interfaces/CameraProps.mdx).[`onInterruptionStarted`](../../react-native-vision-camera/interfaces/CameraProps.mdx#oninterruptionstarted) *** ### onSessionConfigSelected? ```ts optional onSessionConfigSelected?: (config: CameraSessionConfig) => void ``` Called once the given [`constraints`](../../react-native-vision-camera/interfaces/CameraProps.mdx#constraints) have been fully resolved into a concrete [`CameraSessionConfig`](../../react-native-vision-camera/hybrid-objects/CameraSessionConfig.mdx). #### See [`CameraSessionConnection.onSessionConfigSelected`](../../react-native-vision-camera/interfaces/CameraSessionConnection.mdx#onsessionconfigselected) #### Inherited from [`CameraProps`](../../react-native-vision-camera/interfaces/CameraProps.mdx).[`onSessionConfigSelected`](../../react-native-vision-camera/interfaces/CameraProps.mdx#onsessionconfigselected) *** ### onStarted? ```ts optional onStarted?: () => void ``` Called when the [`CameraSession`](../../react-native-vision-camera/hybrid-objects/CameraSession.mdx) has been started. #### See [`CameraSession.addOnStartedListener`](../../react-native-vision-camera/hybrid-objects/CameraSession.mdx#addonstartedlistener) #### Inherited from [`CameraProps`](../../react-native-vision-camera/interfaces/CameraProps.mdx).[`onStarted`](../../react-native-vision-camera/interfaces/CameraProps.mdx#onstarted) *** ### onStopped? ```ts optional onStopped?: () => void ``` Called when the [`CameraSession`](../../react-native-vision-camera/hybrid-objects/CameraSession.mdx) has been stopped. #### See [`CameraSession.addOnStoppedListener`](../../react-native-vision-camera/hybrid-objects/CameraSession.mdx#addonstoppedlistener) #### Inherited from [`CameraProps`](../../react-native-vision-camera/interfaces/CameraProps.mdx).[`onStopped`](../../react-native-vision-camera/interfaces/CameraProps.mdx#onstopped) *** ### onSubjectAreaChanged? ```ts optional onSubjectAreaChanged?: () => void ``` Called when the subject area substantially changes, e.g. when the user pans away from a scene that was previously in focus. This is a good point to reset any locked AE/AF/AWB focus states back to continuously auto-focus. #### See [`CameraController.addSubjectAreaChangedListener`](../../react-native-vision-camera/hybrid-objects/CameraController.mdx#addsubjectareachangedlistener) #### Inherited from [`CameraProps`](../../react-native-vision-camera/interfaces/CameraProps.mdx).[`onSubjectAreaChanged`](../../react-native-vision-camera/interfaces/CameraProps.mdx#onsubjectareachanged) *** ### orientationSource? ```ts optional orientationSource?: | "custom" | OrientationSource ``` Set a desired [`OrientationSource`](../../react-native-vision-camera/type-aliases/OrientationSource.mdx) for automatically applying [`CameraOrientation`](../../react-native-vision-camera/type-aliases/CameraOrientation.mdx) to all [`outputs`](../../react-native-vision-camera/interfaces/CameraProps.mdx#outputs), or `'custom'` if you prefer to manually specify [`CameraOrientation`](../../react-native-vision-camera/type-aliases/CameraOrientation.mdx) yourself. #### See [`CameraOutput.outputOrientation`](../../react-native-vision-camera/hybrid-objects/CameraOutput.mdx#outputorientation) #### Inherited from [`CameraProps`](../../react-native-vision-camera/interfaces/CameraProps.mdx).[`orientationSource`](../../react-native-vision-camera/interfaces/CameraProps.mdx#orientationsource) *** ### outputs? ```ts optional outputs?: CameraOutput[] ``` The [`CameraOutput`](../../react-native-vision-camera/hybrid-objects/CameraOutput.mdx)s the [`device`](../../react-native-vision-camera/interfaces/CameraProps.mdx#device) will stream into. #### See - [`CameraSessionConnection.outputs`](../../react-native-vision-camera/interfaces/CameraSessionConnection.mdx#outputs) - [`CameraOutputConfiguration.output`](../../react-native-vision-camera/interfaces/CameraOutputConfiguration.mdx#output) #### Inherited from [`CameraProps`](../../react-native-vision-camera/interfaces/CameraProps.mdx).[`outputs`](../../react-native-vision-camera/interfaces/CameraProps.mdx#outputs) *** ### pixelFormat? ```ts optional pixelFormat?: TargetVideoPixelFormat ``` Selects the [`TargetVideoPixelFormat`](../../react-native-vision-camera/type-aliases/TargetVideoPixelFormat.mdx) for the Frame Output using the Skia rendering pipeline. It is recommended to use [`'native'`](../../react-native-vision-camera/type-aliases/TargetVideoPixelFormat.mdx) if the negotiated [`CameraSessionConfig`](../../react-native-vision-camera/hybrid-objects/CameraSessionConfig.mdx)'s [`nativePixelFormat`](../../react-native-vision-camera/hybrid-objects/CameraSessionConfig.mdx#nativepixelformat) is supported by Skia as this is a zero-copy GPU-only path. Only resort back to [`'yuv'`](../../react-native-vision-camera/type-aliases/TargetVideoPixelFormat.mdx) (or possibly even [`'rgb'`](../../react-native-vision-camera/type-aliases/TargetVideoPixelFormat.mdx)) if CPU-based Frame access is required. > [!NOTE] Note > Use [`'native'`](../../react-native-vision-camera/type-aliases/TargetVideoPixelFormat.mdx) with caution, > as the device's native format could be a format that is not > supported by Skia - for example > [`'raw-bayer-packed96-12-bit'`](../../react-native-vision-camera/type-aliases/VideoPixelFormat.mdx). > The [`'private'`](../../react-native-vision-camera/type-aliases/PixelFormat.mdx) pixel format is the > most efficient GPU-only pixel format supported by Skia. #### Default ```ts 'native' or 'yuv' ``` *** ### ref? ```ts optional ref?: Ref ``` A reference to a [`SkiaCamera`](../views/SkiaCamera.mdx). #### See [`SkiaCameraRef`](SkiaCameraRef.mdx) *** ### warnIfRenderSkipped? ```ts optional warnIfRenderSkipped?: boolean ``` Warns the developer if the [`onFrame(...)`](#onframe) callback did not call `render(...)`. Disable this if you intentionally want to skip a render. #### Default ```ts true ``` --- # SkiaCameraRef Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-skia/interfaces/SkiaCameraRef --- title: SkiaCameraRef description: A reference to a SkiaCamera. --- ```ts interface SkiaCameraRef extends Pick ``` A reference to a [`SkiaCamera`](../views/SkiaCamera.mdx). You can obtain a `SkiaCameraRef` via `useRef(...)`: #### Example ```tsx function App() { const camera = useRef(null) const onPress = async () => { const snapshot = await camera.current.takeSnapshot() console.log('Captured Skia snapshot!', snapshot.getImageInfo()) } return ( { 'worklet' render(({ canvas, frameTexture }) => { canvas.drawImage(frameTexture, 0, 0) }) frame.dispose() }} /> ) } ``` ## Methods ### convertViewPointToNormalizedPoint(...) ```ts convertViewPointToNormalizedPoint(viewPoint: Point): Point ``` Converts the given [`viewPoint`](#convertviewpointtonormalizedpoint) to a normalized [`Point`](../../react-native-vision-camera/interfaces/Point.mdx) with values ranging from `0...1`. *** ### focusTo(...) ```ts focusTo(viewPoint: Point, options?: FocusOptions): Promise ``` Focuses the Camera pipeline to the specified [`viewPoint`](#focusto) relative to the Camera Skia view's coordiante system, using the specified [`MeteringMode`](../../react-native-vision-camera/type-aliases/MeteringMode.mdx)s. #### Parameters ##### viewPoint The point in the view coordinate system to focus to. ##### options Options for the focus operation. #### Example ```tsx // Focus center await camera.current.focusTo({ x: width / 2, y: height / 2 }) ``` *** ### resetFocus() ```ts resetFocus(): Promise ``` Cancels any current focus operations from [`focusTo(...)`](#focusto), resets back all 3A focus modes to continuously auto-focus if they have been previously locked (e.g. via [`setFocusLocked(...)`](../../react-native-vision-camera/hybrid-objects/CameraController.mdx#setfocuslocked) or [`lockCurrentFocus()`](../../react-native-vision-camera/hybrid-objects/CameraController.mdx#lockcurrentfocus), and similar), and resets the focus point of interest to be in the center. #### Example ```ts await controller.resetFocus() ``` #### Inherited from ```ts Pick.resetFocus ``` *** ### takeSnapshot() ```ts takeSnapshot(): | SkImage | undefined ``` Takes a snapshot of the currently rendered content, or `undefined` if none are available. #### Example ```ts const snapshot = await camera.current.takeSnapshot() console.log('Captured Skia snapshot!', snapshot.getImageInfo()) ``` --- # SkiaOnFrameState Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-skia/interfaces/SkiaOnFrameState --- title: SkiaOnFrameState description: |- Represents the state for rendering a Frame. --- ```ts interface SkiaOnFrameState ``` Represents the state for rendering a Frame. ## Properties ### canvas ```ts canvas: SkCanvas ``` The GPU-canvas to draw the [`frameTexture`](#frametexture) in. #### Example ```ts canvas.drawImage(frameTexture, 0, 0) ``` *** ### frameTexture ```ts frameTexture: SkImage ``` The [`Frame`](../../react-native-vision-camera/hybrid-objects/Frame.mdx) wrapped as a drawable GPU-texture. The `frameTexture` can either be drawn to the [`canvas`](#canvas) directly in which case it will just be displayed as-is, or drawn with a `paint`, in which case it will be used as an input texture for sampling it inside a Skia Shader. #### Example ```ts // Draw as-is: canvas.drawImage(frameTexture, 0, 0) // Draw with shader: const paint = ... const shader = ... paint.setShader(shader) canvas.drawImage(frameTexture, 0, 0, paint) ``` --- # SkiaCamera Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-skia/views/SkiaCamera --- title: SkiaCamera description: |- Represents a Camera view component that uses [Skia](https://github.com/Shopify/react-native-skia) for rendering. --- ```ts const SkiaCamera: MemoExoticComponent<(__namedParameters: SkiaCameraProps) => ReactElement> ``` Represents a Camera view component that uses [Skia](https://github.com/Shopify/react-native-skia) for rendering. Instead of a native Preview View, the `SkiaCamera` uses a [`CameraFrameOutput`](../../react-native-vision-camera/hybrid-objects/CameraFrameOutput.mdx) to stream [`Frames`](../../react-native-vision-camera/hybrid-objects/Frame.mdx), which will be converted to Skia Textures (see [`SkImage`](https://shopify.github.io/react-native-skia/docs/images/)) to be renderable. You must ensure that the [`Frame`](../../react-native-vision-camera/hybrid-objects/Frame.mdx) is actually rendered to the [`SkCanvas`](https://shopify.github.io/react-native-skia/docs/canvas/overview/) inside your [`onFrame(...)`](../interfaces/SkiaCameraProps.mdx#onframe) callback. > [!NOTE] Note > Your [`onFrame(...)`](../interfaces/SkiaCameraProps.mdx#onframe) > callback must be a `'worklet'`. > [!NOTE] Note > It is recommended to manually set a > [`pixelFormat`](../interfaces/SkiaCameraProps.mdx#pixelformat), > for example [`'yuv'`](../../react-native-vision-camera/type-aliases/TargetVideoPixelFormat.mdx) for > efficiency, or [`'rgb'`](../../react-native-vision-camera/type-aliases/TargetVideoPixelFormat.mdx) > for compatibility with ML detection libraries. #### Examples Simple rendering _as-is_: ```tsx function App() { return ( { 'worklet' render(({ canvas, frameTexture }) => { canvas.drawImage(frameTexture, 0, 0) }) frame.dispose() }} /> ) } ``` Drawing Frames with a custom pass-through shader: ```tsx // Simple pass-through Shader (just renders pixels as-is) const effect = Skia.RuntimeEffect.Make(` uniform shader src; half4 main(float2 xy) { return src.eval(xy); } `)! const paint = Skia.Paint() function App() { return ( { 'worklet' render(({ canvas, frameTexture }) => { // Prepare the shader with the `frameTexture` as an input const imageShader = frameTexture.makeShaderOptions( TileMode.Clamp, TileMode.Clamp, FilterMode.Linear, MipmapMode.None, ) const shader = effect.makeShaderWithChildren([], [imageShader]) paint.setShader(shader) // Draw the Frame with the shader/paint canvas.drawImage(frameTexture, 0, 0, paint) }) frame.dispose() }} /> ) } ``` --- # createAsyncRunner Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-worklets/functions/createAsyncRunner --- title: createAsyncRunner description: Creates a new AsyncRunner backed by a dedicated NativeThread. --- ```ts function createAsyncRunner(): AsyncRunner ``` Creates a new [`AsyncRunner`](../../react-native-vision-camera/interfaces/AsyncRunner.mdx) backed by a dedicated [`NativeThread`](../../react-native-vision-camera/hybrid-objects/NativeThread.mdx). An [`AsyncRunner`](../../react-native-vision-camera/interfaces/AsyncRunner.mdx) can be used inside a Frame Processor to offload work to a separate thread without blocking the Camera pipeline. #### Discussion This is the Worklets-based implementation used by the default [`RuntimeThreadProvider`](../../react-native-vision-camera/interfaces/RuntimeThreadProvider.mdx). Most users should use [`useAsyncRunner()`](../../react-native-vision-camera/functions/useAsyncRunner.mdx) instead. #### See [`useAsyncRunner`](../../react-native-vision-camera/functions/useAsyncRunner.mdx) --- # createRuntimeThreadProvider Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-worklets/functions/createRuntimeThreadProvider --- title: createRuntimeThreadProvider description: |- Creates the default RuntimeThreadProvider implementation that bridges `react-native-vision-camera` with [react-native-worklets](https://docs.swmansion.com/react-native-worklets/docs/). --- ```ts function createRuntimeThreadProvider(): RuntimeThreadProvider ``` Creates the default [`RuntimeThreadProvider`](../../react-native-vision-camera/interfaces/RuntimeThreadProvider.mdx) implementation that bridges `react-native-vision-camera` with [react-native-worklets](https://docs.swmansion.com/react-native-worklets/docs/). `react-native-vision-camera` lazily requires this provider through its module proxy, so installing `react-native-vision-camera-worklets` is usually all that is needed to enable Worklet-based Frame Processors. #### See [`RuntimeThreadProvider`](../../react-native-vision-camera/interfaces/RuntimeThreadProvider.mdx) --- # createWorkletRuntimeForThread Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-worklets/functions/createWorkletRuntimeForThread --- title: createWorkletRuntimeForThread description: |- Creates a new `WorkletRuntime` that schedules its work on the given NativeThread. --- ```ts function createWorkletRuntimeForThread(thread: NativeThread): WorkletRuntime ``` Creates a new `WorkletRuntime` that schedules its work on the given [`NativeThread`](../../react-native-vision-camera/hybrid-objects/NativeThread.mdx). This wraps a Camera-owned [`NativeThread`](../../react-native-vision-camera/hybrid-objects/NativeThread.mdx) in a [react-native-worklets](https://docs.swmansion.com/react-native-worklets/docs/) `WorkletRuntime` so that Worklets (such as Frame Processors) can run directly on the Camera pipeline's thread without context switching. --- # getCurrentThreadMarker Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-worklets/functions/getCurrentThreadMarker --- title: getCurrentThreadMarker description: |- Returns a unique identifier for the thread this function is currently running on. --- ```ts function getCurrentThreadMarker(): number ``` Returns a unique identifier for the thread this function is currently running on. This is useful for debugging and asserting which thread a given Worklet is executing on (e.g. the UI thread, a Frame Processor thread, or an [`AsyncRunner`](../../react-native-vision-camera/interfaces/AsyncRunner.mdx)'s thread). #### Worklet --- # WorkletQueueFactory Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-worklets/hybrid-objects/WorkletQueueFactory --- title: WorkletQueueFactory description: |- The WorkletQueueFactory allows creating WorkletQueues from NativeThreads. --- ```ts interface WorkletQueueFactory extends HybridObject ``` The `WorkletQueueFactory` allows creating [`WorkletQueue`](../type-aliases/WorkletQueue.mdx)s from [`NativeThread`](../../react-native-vision-camera/hybrid-objects/NativeThread.mdx)s. ## Methods ### getCurrentThreadMarker() ```ts getCurrentThreadMarker(): number ``` Get a C++ Thread's incrementing marker. The first thread that calls this gets `1`. The second thread that calls this gets `2`. If the first thread calls it again, it gets `1` again. This is useful for rendering libraries that are Thread-confined (like OpenGL) to ensure state is cached per-Thread. A Thread Marker does not correlate to modern queues - a `DispatchQueue` might use multiple Threads from a pool, and therefore has different Thread Markers. *** ### wrapThreadInQueue(...) ```ts wrapThreadInQueue(thread: NativeThread): WorkletQueue ``` Wraps the given [`NativeThread`](../../react-native-vision-camera/hybrid-objects/NativeThread.mdx) in a [`WorkletQueue`](../type-aliases/WorkletQueue.mdx), which can later be used to create a Worklet Runtime that runs on the given [`NativeThread`](../../react-native-vision-camera/hybrid-objects/NativeThread.mdx). Typically you would use a [`NativeThread`](../../react-native-vision-camera/hybrid-objects/NativeThread.mdx) from an output, such as [`CameraFrameOutput.thread`](../../react-native-vision-camera/hybrid-objects/CameraFrameOutput.mdx#thread), but you can also create your own [`NativeThread`](../../react-native-vision-camera/hybrid-objects/NativeThread.mdx) via [`createNativeThread(...)`](../../react-native-vision-camera/hybrid-objects/NativeThreadFactory.mdx#createnativethread). #### Examples Creating a Worklet Runtime for a Frame Output's Thread: ```ts const frameOutput = ... const thread = frameOutput.thread const queue = WorkletQueueFactory.wrapThreadInQueue(thread) const runtime = createWorkletRuntime({ name: thread.id, customQueue: workletQueue, useDefaultQueue: false, }) ``` Creating a Worklet Runtime for a custom Thread: ```ts const thread = NativeThreadFactory.createNativeThread('my-thread') const queue = WorkletQueueFactory.wrapThreadInQueue(thread) const runtime = createWorkletRuntime({ name: thread.id, customQueue: workletQueue, useDefaultQueue: false, }) ``` --- # WorkletQueue Source: API Reference URL: https://visioncamera.margelo.com/api/react-native-vision-camera-worklets/type-aliases/WorkletQueue --- title: WorkletQueue --- ```ts type WorkletQueue = CustomType", { canBePassedByReference: true; include: "JSIConverter+AsyncQueue.hpp"; }> ```