A Frame's NativeBuffer

Understanding a Frame's NativeBuffer and using it with third-party APIs

A 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 exposes it's underlying NativeBuffer.

What is a NativeBuffer

A NativeBuffer is a simple JS-object holding a pointer with a +1 retain count, and a release() function. After you are done using the NativeBuffer, you must release it again via release(), otherwise you'll leak memory and stall the Camera pipeline.

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 is a bigint (uint64_t/uintptr), which corresponds to the following platform types:

See @Shopify/react-native-skia's implementation of NativeBuffer for reference: JsiSkImageFactory.h

Getting a Frame's NativeBuffer

To get a Frame's underlying NativeBuffer, use getNativeBuffer():

const frame = ...
const nativeBuffer = frame.getNativeBuffer()
// ...processing...
nativeBuffer.release()
frame.dispose()