SkiaCamera | VisionCamera

const SkiaCamera: MemoExoticComponent<(__namedParameters: SkiaCameraProps) => ReactElement>

Represents a Camera view component that uses Skia for rendering.

Instead of a native Preview View, the SkiaCamera uses a CameraFrameOutput to stream Frames, which will be converted to Skia Textures (see SkImage) to be renderable.

You must ensure that the Frame is actually rendered to the SkCanvas inside your onFrame(...) callback.

Note

Your onFrame(...) callback must be a 'worklet'.

Note

It is recommended to manually set a pixelFormat, for example 'yuv' for efficiency, or 'rgb' for compatibility with ML detection libraries.

Examples

Simple rendering as-is:

function App() {
  return (
    <SkiaCamera
      device="back"
      isActive={true}
      onFrame={(frame, render) => {
        'worklet'
        render(({ canvas, frameTexture }) => {
          canvas.drawImage(frameTexture, 0, 0)
        })
        frame.dispose()
      }}
    />
  )
}

Drawing Frames with a custom pass-through shader:

// 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 (
    <SkiaCamera
      device="back"
      isActive={true}
      onFrame={(frame, render) => {
        '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()
      }}
    />
  )
}