react-native-vision-camera/README.md
Marc Rousavy 9add0eb571
feat: Use C++ OpenGL GPU VideoPipeline again (#1836)
1. Reverts 4e96eb77e0 (PR #1789) to bring the C++ OpenGL GPU Pipeline back.
2. Fixes the "initHybrid JNI not found" error by loading the native JNI/C++ library in `VideoPipeline.kt`.

This PR has two downsides:

1. `pixelFormat="yuv"` does not work on Android. OpenGL only works in RGB
2. OpenGL rendering is fast, but it has an overhead. I think for Camera -> Video Recording we shouldn't be using an entire OpenGL rendering pipeline.

The original plan was to use something similar to how it works on iOS by just passing GPU buffers around, but the android.media APIs just aren't as advanced yet. `ImageReader`/`ImageWriter` is way too buggy and doesn't really work with `MediaRecorder`/`MediaCodec`.

This sucks, I hope in the future we can use something like `AHardwareBuffer`s.
2023-09-22 17:22:31 +02:00

3.2 KiB

VisionCamera

Features

VisionCamera is a powerful and fast Camera component for React Native. It features:

  • 📸 Photo and Video capture
  • 📱 Customizable devices and multi-cameras ("fish-eye" zoom)
  • 🎞️ Customizable resolutions and aspect-ratios (4k/8k images)
  • ⏱️ Customizable FPS (30..240 FPS)
  • 🧩 Frame Processors (JS worklets to run QR-Code scanning, facial recognition, AI object detection, realtime video chats, ...)
  • 🔍 Smooth zooming (Reanimated)
  • ⏯️ Fast pause and resume
  • 🌓 HDR & Night modes
  • Custom C++/GPU accelerated video pipeline (OpenGL)

Install VisionCamera from npm:

yarn add react-native-vision-camera
cd ios && pod install

..and get started by setting up permissions!

Documentation

V3

You're looking at the V3 version of VisionCamera, which features a full rewrite on the Android codebase and a huge refactor on the iOS codebase. If you encounter issues on V3, you can also downgrade to V2, which is still partially supported.

Example

function App() {
  const devices = useCameraDevices('wide-angle-camera')
  const device = devices.back

  if (device == null) return <LoadingView />
  return (
    <Camera
      style={StyleSheet.absoluteFill}
      device={device}
      isActive={true}
    />
  )
}

See the example app

Adopting at scale

This library helped you? Consider sponsoring!

VisionCamera is provided as is, I work on it in my free time.

If you're integrating VisionCamera in a production app, consider funding this project and contact me to receive premium enterprise support, help with issues, prioritize bugfixes, request features, help at integrating VisionCamera and/or Frame Processors, and more.

Socials