Deprecating react-native-camera

[sibelius]

react-native-camera RNCamera started as a "fork" of expo-camera, as it was hard to use any Expo modules outside Expo.

Right now things changed a lot, and we can easily use any expo module outside expo.

react-native-camera diverged a lot from expo-camera, and I think the only way to converge the implementation is to deprecate this package, and let people contribute the "missing" parts of react-native-camera to expo-camera

expo-camera also has support to web using react-native-web

add the following emojis to what do you think

👍 I'm in favor of deprecating this package
👎 I rather keep this package

[GleidsonDaniel]

The name of the project is something very important for its maintenance.
If the expo camera continues to call expo camera, even though there is no need to use all things related to expo, as it contains the name expo and does not react native camera, users may want to not use it.
You search google for "react native camera" not "expo camera".

[brentvatne]

@GleidsonDaniel - i think this react-native-* naming is increasingly becoming less meaningful. a confusing issue for beginners is always clarifying that many libraries that don't being with the react-native-* prefix also work with their react-native apps, eg: formik, redux, mobx, etc. does react-native-* mean it supports ios, tvos, android, web, windows, and macos? no, it is some subset of that. so if the author of react-native-camera only wants to support ios and android, does that mean someone using windows and macos need to go create react-native-other-camera? would you be be able to find that on google or would you just go to the first result with the exact match? there are a lot of other issues with package discovery based off of including all of the keywords in the package name, it just doesn't scale, and so this is part of why we have been working on a package directory: https://reactnative.directory/?search=camera. it's recommended in the https://reactnative.dev docs and will eventually become a key piece of react-native developer workflow. this should solve the issue of discovering react-native packages based off of functionality.

even though there is no need to use all things related to expo

expo-* packages are react-native libraries that support ios, android, and web (perhaps more in the future, depending on what we decide to support). in my opinion, it's in the best interest of every developer in the ecosystem to find out for themselves sooner than later that they can use expo packages in their apps. i agree it's confusing to people due to historical baggage of expo being a monolith, it has some unfortunate additional installation steps the first time you install an expo-* package (we hope to get rid of these when converting to turbomodules), and it literally does not include react-native in the name. we could potentially rename to @expo/react-native-camera but it's not clear to me that this has a benefit beyond seo. maybe it's time for the react-native-* package name convention to die and people can just call things whatever they want and use a package directory to aid discoverability.

[ide]

One of the basic features of expo-camera is that it works with Expo. Naturally, Expo developers do search for "expo camera" and naming the package after the platform it's designed for communicates a lot of things accurately I think.

expo-camera also works with React Native. If we were to go down the path suggested in the first post, perhaps to communicate RN compatibility we could (1) make react-native-camera be a one-file package that imports and re-exports expo-camera and (2) improve the SEO of expo-camera for when people search for "react native camera".

[tcodes0]

It does make sense

sorry i clicked the close button by mistake.

[sibelius]

would expo-camera support windows? react-native-camera has windows support right now
would expo-camera support mlkit or something similar like this pull request #2931?

[brentvatne]

would expo-camera support windows?

we don't have any plans to support windows, so this may be a blocker.

that said, i think the ecosystem needs some solution for packages that provide an implementation for a given module for a different platform than those supported by the canonical package. eg: the react-native-camera windows implementation could live on the microsoft org. it seems that it would slow development down immensely if it was necessary to make changes synchronously for ios, android, web, windows, macos, tvos, and whatever comes next. it's certainly worth exploring what other options could be available here. i imagine as an author of a package that supports a bunch of platforms you've felt this pain @sibelius.

would expo-camera support mlkit or something similar like this pull request #2931?

we switched to mlkit over a year ago (for facedetector): expo/expo#4056

[hosseinmd]

I think we should not separate react-native and expo. It is best to add support for different platforms to react-native packages.
We can use react-native and react-native-web in any way other than expo like monorepo, and the expo does not give us a good sense.
Add platform support for react-native packages is the best choice.

[safaiyeh]

There is also Wix's react-native-camera-kit https://github.com/wix/react-native-camera-kit

They expressed some community help in a reddit thread here: https://www.reddit.com/r/reactnative/comments/i1dsxx/what_react_native_componentsapis_do_you_feel_are/fzxq6j3?utm_source=share&utm_medium=web2x

[cristianoccazinsp]

While I understand the hassle of maintaining two libraries, in my experience, I try to avoid expo modules as much as I can if the project is not expo-based. There's really no need to incur in the massive overhead and extra dependencies and install steps that are required to setup expo just to use one library. Also expo tends to keep behind RN updates, but that's just me.

In my case, I will probably stick to a react-native-camera fork until I have no other option to migrate to a new camera library.

[scarlac]

New react-native-camera-kit maintainer here: We are open to talking about options. However, I am not sure how a collaboration or merger would look like in reality.

[MSchmidt]

Having only one well maintained library sounds good but react-native-camera supports text recognition while expo-camera and react-native-camera-kit do not (yet). But maybe this could be extracted into an addon-package for different ML features.

[sibelius]

I think the current problem with Camera implementation is that they are doing too much

The API is too big, you can take a picture, you can record a video, you can do face recognition, you can do text recognition

We need a small core and related packages that extend the camera functionally on both native and js side

Tensorflow for react-native is a wrapper of expo camera https://js.tensorflow.org/api_react_native/0.2.1/

[MateusAndrade]

This should still be open @sibelius ?

[jonthysell]

This should still be open @sibelius ?

Sorry about that, off by one in my commit.

That said, RN developer at MSFT here invested in making sure Windows has a camera implementation that lines up with other platforms. We're trying really hard to not fork things over here.

[fabOnReact]

I think the current problem with Camera implementation is that they are doing too much

The API is too big, you can take a picture, you can record a video, you can do face recognition, you can do text recognition

We need a small core and related packages that extend the camera functionally on both native and js side

Tensorflow for react-native is a wrapper of expo camera https://js.tensorflow.org/api_react_native/0.2.1/

I think the challenge is keeping as much of the logic on the Native side to avoid limitations from the react-native-bridge (below quotation). I believe tensor-flow-react-native has the limitation of having to serialize video data through the react-native-bridge so that it can be transferred to a model for inference. Resizing the image and reduce the data transferred to JavaScript may also give less accurate results.

https://blog.tensorflow.org/2020/02/tensorflowjs-for-react-native-is-here.html

Image & Video Handling: Utilities are provided for JPEG decoding (our first external PR!) and video handling. Handling real time video is particularly tricky to support because of the serialization penalty of moving data from native to JavaScript threads in React Native. We thus provide functionality to do image resizing on GPU before a tensor is created. This allows developers to reduce the data that needs to be transferred from the camera stream to a Javascript algorythm/model for inference. We even provide a React higher-order-component to make this integration feel natural to React Native developers.

I did not use tensorflow.js with react-native so I don't know if it is a good alternative to react-native-camera for AI functionalities. This is the list of tensorflow javascript models available for use and it is limited number of functionalities

https://github.com/tensorflow/tfjs-models

react-native-camera as a single package has the advantage of building all the functionalities on Native side. I am sorry for this deprecation

UPDATE

I read now that expo-camera integrated face detection in their library and probably will keep adding the missing native MLKit functionalities, so maybe expo-camera one day will include all the MLkit functionalities from react-native-camera, additionally is used with tensor-flow-js as a high order component to read data from the Camera so.. I believe expo-camera offers a lot of functionalities. expo/expo#4056

[airam666]

react-native-camera is still crashing on ios.

[zoontek]

I personally would rather keep this package until, at least, expo-camera get rid of unimodules 😕
Also, the name react-native-camera is important for discoverability.

[aliraza-noon]

I have nothing against expo but I feel this package should be maintained as a separate option, what about react-native-camera-kit maybe both can merged more resources available to maintain

[hosseinmd]

Everything's is ok, if this package should support react-native-web too.

[MarcoScabbiolo]

Closing in favor of #3100

[fabOnReact]

will react-native-camera be deprecated in favor of react-native-camera-v4?
Or will be given advice to users in the README to migrate to react-native-camera-v4?
I ask because react-native-camera-v4 is written in kotlin. Thanks a lot 🙏 ☮️

[cristianoccazinsp]

There was also the option to not create yet another react-native-camera repo, but rather use https://github.com/cuvent/react-native-vision-camera and implement the missing features there. That project already uses Kotlin and Swift.

[mrousavy]

Hey, author of react-native-vision-camera here 👋

I spent a ton of hours on VisionCamera (mostly in my free time) and I am extremely satisfied with the result. My mission in the beginning was to create a Camera for React Native that is as good as, or better than, Snapchat's and Instagram's camera. Pretty tough mission, since both of those are "camera companies". However, I feel like I solved it since it supports all of those features and is extremely fast in those use-cases.

• VisionCamera is written using strict code guidelines, code style, and CI build testing to ensure maximum DX (allow high quality contributions)
• VisionCamera is written in modern Swift and Kotlin, and uses the latest native APIs:
  • latest CameraX library on Android. I am keeping up to date with their release cycle. Latest version: 32 (e.g. used new CameraX Recorder API for faster and more stable recording)
  • latest AV Foundation features. I am keeping up to date on every WWDC to integrate new features (e.g. 10-bit HDR mode 😄)
• Instead of shipping a predefined QR code scanner, VisionCamera provides an easy to use plugin API called "Frame Processors" where users can create custom Frame Processor Plugins for any kind of realtime Frame Processing. This is pretty revolutional since it is a JS API where your JS code runs on a separate Thread (like Reanimated Worklets), and it uses JSI to pass the entire 10 MB Frame/Image through to JS and back without every copying. It's amazingly fast and you can create face detectors, qr code scanners, WebRTC video chats, and more with it.
• Performance critical parts are written in C++ to ensure maximum performance (Frame Processors)
• VisionCamera allows you to use every camera device on your phone (e.g. iPhones nowadays have 3 cameras), and even combine them for a smooth fish-eye zoom out effect.
• You can also use custom formats to have full control over desired resolution (1080p, 4k, ...), FPS (30 FPS, 60 FPS, even 240 FPS, ...), pixel format (10-bit HDR, 8-bit, ...), color spaces, and more.
• I always keep an eye on performance to ensure VisionCamera starts as quickly as possible (currently measured it to be faster than expo-camera, react-native-camera and react-native-camera-kit! 🔥)
• I use VisionCamera in 3 of my production apps out there. A lot of clients at my agency also use VisionCamera, so it is actively maintained (supported by my GitHub sponsors 💖) and in use by a lot of apps.
• It works with Expo 😄

If you guys think about deprecating react-native-camera in favor of VisionCamera (as mentioned in the README), I'm here to answer any questions or talk about details. :)

Here's an app I built with React Native + VisionCamera: mrousavy/Colorwaver

[joebernard]

@mrousavy Do you have a migration guide for react-native-camera to react-native-vision-camera? It would be helpful to see how functionality maps over and to know what might be still missing or supported differently. I didn't see one in the docs and am interested in transitioning my app.

[mrousavy]

@joebernard here's a step by step "migration guide":

1. yarn add react-native-vision-camera (Follow installation guide, either Expo or bare RN)
2. Use useCameraDevices() hook to get Camera Devices. Pass one of these devices to the <Camera> component.
3. photo, video and audio have to be enabled separately. Enable only what you use (e.g. video={true} for video only, no photo capture)
4. Instead of unmounting and remounting the camera, pass true or false to isActive if you want to keep the session warm. (e.g. to disable while app is in background)

Next steps:

• VisionCamera does not have a QR code scanner by design - you have to install a QR code scanner Frame Processor Plugin and use that instead. (I think there are 2 community plugins available for that? One Google MLKit and one Apple Vision?)
• If you want to use Frame Processors, install Reanimated v2

[mrousavy]

A few caveats:

• VisionCamera does not have react-native-windows support. I have talked to the guys at Microsoft before, and I'm strongly convinced that a Windows implementation for VisionCamera should not be part of my repository, but instead be a separate repository maintained by Microsoft + my help. (react-native-vision-camera-windows). This way, the bundle size for VisionCamera is smaller, npm package size is smaller, Windows-only updates don't get confusing, it's easier to maintain, less code, etc. etc.
• VisionCamera always outputs photos in the orientation they are being shot at. If your phone is rotated to landscape, it shoots photos in landscape. There is no orientation parameter in the takePhoto(...) function - by design!

If you strongly rely on Windows support, then stick with react-native-camera for now. I would love to help the efforts of bringing a Windows implementation alive though 😄

[tobzy]

Hello @mrousavy Please how am I able to do Text recognition with react-native-vision-camera?. I've searched and I couldn't find any guide. I found this plugin https://github.com/rodgomesc/vision-camera-ocr, but it only contains boilerplate code and I can't use it.

[mrousavy]

@tobzy The whole point of react-native-vision-camera is to build a super awesome foundation for apps using cameras in React Native - with the addition of the "Frame Processors" feature that lets you use the image data in a javascript context - or create more advanced plugins in native code for processing the same data.

As a consequence this library shouldn't implement a feature like text recognition, barcode reading, face recognition, etc - but it should continue to provide a foundation for others to build upon. Text recognition is a good example - use react-native-vision-camera and build a Frame Processor Plugin that you support and maintain that offers this functionality.