react-native-vision-camera/example
Marc Rousavy ea3686cb9a
feat: Create C++/OpenGL-based Video Pipeline for more efficient Recording and Frame Processing (#1721)
* Create `VideoPipeline` c++

* Remove folly C++ dependency

* Create `VideoPipeline` HybridClass

* Set up OpenGL

* Add outputs

* Update VideoPipeline.kt

* Bum `minSdkVersion` to `26`

* Create `VideoPipelineOutput`

* Create output funcs

* Set output pipelines

* Add FP/Recording on Output change

* Update VideoPipeline.cpp

* Create `PassThroughShader`

* Try to draw? I have honestly no idea

* fix: Fix `setFrameProcessor` nameclash

* fix: Fix `high-res-sizes` being null

* Add preview output

* Create `OpenGLContext.cpp`

* Make screen red

* This _should_ work (MESSY)

* FINALLY RENDER TEXTURE

* Rotate

* Mirror

* Clean up a bit

* Add `getWidth()`/`getHeight()`

* Cleanup

* fix: Use uniforms instead of attributes

* Draw with passed rotation/mirror mode

* feat: Use SurfaceTexture's transformMatrix in OpenGL pipeline (#1727)

* feat: Use Transform Matrix from SurfaceTexture

* Renam

* feat: Fix OpenGL Shader

* Update VideoPipeline.kt

* Measure elapsed time

* fix: Fix low resolution

* Render to offscreen

* Render to every context

* Release `SurfaceTexture` on close

* Use one OpenGL context to render to multiple EGLSurfaces

* Clean up a bit

* fix: Fix recording pipeline not triggering

* fix: Synchronize close to prevent nulls

* Update OpenGLRenderer.cpp

* fix: Hardcode Android recorder size
2023-08-29 17:52:03 +02:00
..
android feat: Create C++/OpenGL-based Video Pipeline for more efficient Recording and Frame Processing (#1721) 2023-08-29 17:52:03 +02:00
ios chore: Bump version 2023-08-24 15:54:17 +02:00
src feat: Add enableShutterSound prop to takePhoto() 🔊 (#1702) 2023-08-21 15:27:42 +02:00
.eslintrc.js chore: Upgrade Skia to new Ganesh Rendering Pipeline and RN to 0.72 (#1638) 2023-07-03 12:40:07 +02:00
app.json Bootstrap 2021-02-19 16:07:53 +01:00
babel.config.js feat: Full Android rewrite (CameraX -> Camera2) (#1674) 2023-08-21 12:50:14 +02:00
clean.sh feat: Frame Processors for Android (#196) 2021-06-27 12:37:54 +02:00
index.js feat: Add React Native 0.66 support (#490) 2021-10-05 12:22:14 +02:00
metro.config.js feat: Full Android rewrite (CameraX -> Camera2) (#1674) 2023-08-21 12:50:14 +02:00
package.json feat: Full Android rewrite (CameraX -> Camera2) (#1674) 2023-08-21 12:50:14 +02:00
README.md chore: fix typo in README.md (#718) 2022-01-05 14:51:44 +01:00
tsconfig.json feat: Add React Native 0.66 support (#490) 2021-10-05 12:22:14 +02:00
yarn.lock feat: Full Android rewrite (CameraX -> Camera2) (#1674) 2023-08-21 12:50:14 +02:00

Vision Camera playground

Overview

This is a demo application featuring some of the many features of the Vision Camera:

  • Photo capture
  • Video capture
  • Flipping device (back camera <-> front camera)
  • Device filtering (ultra-wide-angle, wide-angle, telephoto, or even combined virtual multi-cameras)
  • Format filtering (targeting 60 FPS, best capture size, best matching aspect ratio, etc.)
  • Zooming using react-native-gesture-handler and react-native-reanimated
  • Smoothly switching between constituent camera devices (see demo on my Twitter)
  • HDR mode
  • Night mode
  • Flash for photo capture
  • Flash for video capture
  • Activating/Pausing the Camera but keeping it "warm"
  • Using the Example Frame Processor Plugin

Get started

To try the playground out for yourself, run the following commands:

git clone https://github.com/mrousavy/react-native-vision-camera
cd react-native-vision-camera
yarn bootstrap

iOS

  1. Open the example/ios/VisionCameraExample.xcworkspace file with Xcode
  2. Change signing configuration to your developer account
  3. Select your device in the devices drop-down
  4. Hit run

Android

  1. Open the example/android/ folder with Android Studio
  2. Select your device in the devices drop-down
  3. Hit run