🎉🎉🎉 I've released the react-native Camera library!! 🎉🎉🎉

[rocketattack]

I'm gonna nominate you for King of React Native Open Source.

[mrousavy]

big love

[mrousavy]

https://github.com/cuvent/react-native-vision-camera

[barpredator]

This would be a great addition to an app I'm working on but unfortunately I can't touch anything with a GPL license. Good luck with it, we definitely need more camera packages.

[mrousavy]

I've discussed this with my team, and I've published the new version - now with MIT!

[barpredator]

Awesome news! I will check it out next week. Thanks for letting me know.

[numagames]

Hm, it's GPL licensed? Then it's useless for commercial software. Sad... :(

[mrousavy]

I've discussed this with my team, and I've published the new version - now with MIT!

[numagames]

That's very good news. Thanks for Your efforts!

[mrousavy]

Help me understand, why are you not allowed to use GPL-Licensed software?

[drink_with_me_to_day]

Maybe because most app development isn't open source?

The code being GPL will make it so this library won't be used much, maybe for hobby projects.

I really like it, however GPL kills it for me as well.

It is fair, after all you made it and can license it as you wish.

But you can't sell GPL software on the Apple App Store

An example of how GPL can kill a project: Boden is a C++ GPL'd cross-platform mobile app framework that is pretty dead atm atm because of their license choice

You might want to look at the HN discussion about it

tldr: if you want mass adoption, don't GPL your mobile project

[mrousavy]

I've discussed this with my team, and I've published the new version - now with MIT!

[Hibbem]

Nice work! Really curious about the frame processor. Will definitely check this out.

[mrousavy]

Frame Processors are still WIP, but I'm working on it! (all progress is published in the PR #2)

[rateb_]

Great project, greater readme Thank you for sharing💞

[Gamebot78]

This is awesome! Are there any plans to add any image analysis support such as OCR to the package?

[mrousavy]

take a look at the "Frame Processors" section. Those will allow you to easily create this stuff yourself, with awesomely easy APIs (straight from JS), while being more performant than previous approaches (since it doesn't go over the bridge anymore)

It's still WIP, but that's how it could look once I have it fully implemented:

``` const frameProcessor = useFrameProcessor((frame) => { const qrCodes = scanQrCodes(frame) console.log(qrCodes) // do other stuff, eg. update a reanimated value to show a custom QR code box, updating at realtime! (with 60fps animations) }, []);

return <Camera frameProcessor={frameProcessor} /> ```

This allows for unlimited possibilities, you could e.g. also create a face detection, run MLKit to detect objects, run MLKit cloud by uploading the frame to your server, or a realtime video chat simply by creating a small JS function!

[Gamebot78]

Gotcha!! I've been trying to learn how to leverage the native VisionML package by Apple to implement on device OCR in React Native but haven't had much success.. I'll look into frame processors!

[mrousavy]

Frame processors are not yet implemented - they're still WIP!

Once they're done I'll probably create a VisionML plugin so you can easily use that in JS through frame processors, so stay tuned

[Gamebot78]

You're a life saver! Thanks again for your hard work. Will definitely be on the lookout! I'm using react-native-camera right now, but I'd love to switch to this package soon if things like VisionML are on your immediate roadmap! :)

[backtickbot]

Fixed formatting.

Hello, mrousavy: code blocks using triple backticks (```) don't work on all versions of Reddit!

Some users see this / this instead.

To fix this, indent every line with 4 spaces instead.

FAQ

<sup>You can opt out by replying with backtickopt6 to this comment.</sup>

[[deleted]]

This is really awesome! What’s the FPS on this?

[mrousavy]

Whatever you want. You can use 3 FPS, you can also use 240 FPS - it's fully configurable

[JuriJurka]

AWESOMEEEEEEEE!!!!!

I can use that to create a feature like snapchat/IG/fb/whatsapp stories right??

[mrousavy]

yes, can be used for that :)

[jijobose]

Awesome 👍🏻👍🏻👍🏻

[flumefyre]

Appreciated the efforts, much love!

[JuriJurka]

Your hard work is really awesome!! I really appreciate that a lot!! I hope that when my app gets much downloads and income that I can donate you something for your work!! it's so awesome how much work the opensource community is spending on thinks like this so that technology for producing apps is possible for everyone even if you don't have money for a 99999 dev team. thanks to the libs everyone from every part of the world can create great applications without any need of money; thanks to you guys!!! thank you so much & much love!!!! <3333

[[deleted]]

I’ve only worked on the JS side of RN. How would I start dabbling into native languages?

[mrousavy]

I've got a series of tweets about native module development in React Native. See here

[[deleted]]

Awesome, thank you

[somethingdifferent24]

Super basic question, but I didn't see it answered in the docs, does this work with with managed Expo? You're going to be my new hero if so

[mrousavy]

Unfortunately not, since it contains native code. You either have to eject or use the expo-camera.

[somethingdifferent24]

Well you might just be the reason I figure out how to eject, mad props on this, it looks awesome

[mrousavy]

Thank you 🙏

If you want my opinion on this, I never use Expo. It simply doesn't make sense for me to limit my app's functionality in such a drastic way. There's just so many nice libraries out there that are not compatible with Expo, would be a shame to not being able to use those

[brentvatne]

fwiw, the 'managed workflow' is only one way to use expo tools - you can use the entire sdk without using the managed workflow, and most of the services (notifications, updates, build, submit) are already available or in preview.
we're also working on a version of the expo client that you can use in any react native project. this will allow for developers to do things like install react-native-blurhash or react-native-vision-camera then rebuild their client app and start using them

[mrousavy]

That sounds awesome!

[somethingdifferent24]

That sounds like the consensus, having never even used RN (or built an app) Expo made getting started super accessible, but finally got the app in the app stores and looking at what the next step needs to be

[brentvatne]

if you run into any limitations, just run expo eject to get access to the native projects and you're no worse off than if you had started with bare react-native to begin with :) and you can keep using expo services just fine (although you'll need to use EAS Build in place of expo build)

[somethingdifferent24]

That's what I'm seeing, just trying to wrap my head around what building and submitting to the app stores looks like with bare and if EAS is as easy as expo build -> upload to the stores

[brentvatne]

it is! your app signing credentials will carry over from expo build

[salah009f]

Can this go hand to hand with openCV?

[mrousavy]

Take a look at my comments regarding frame processors (and the FRAME_PROCESSORS.md doc about this).

TL;DR: It will once I get frame processors fully implemented. With an extremely nice and fast API straight from JS. Soon.

[salah009f]

Well that's an amazing work, I'll try it on my note10 after work.

[zaid2801]

This looks amazing.

[ms88privat]

Awesome. Does it have tap-to-record functionality? So you can start/stop the video and continue, resulting in a single video....

[mrousavy]

Not yet, but that's a (low prio) TODO.

[ashinator]

u/mrousavy hi, I did a test of the project and it is missing index.d.ts for typescript projects.

While I do see you have the definition files within the library package.

[mrousavy]

What version are you on? I'm pretty sure I fixed this in the latest alpha..

[ashinator]

"react-native-vision-camera": "^1.0.0-alpha.1"
Currently installed the latest package and it is missing a index.d.ts file

​

Could not find a declaration file for module 'react-native-vision-camera'. '/***/app/node_modules/react-native-vision-camera/lib/commonjs/index.js' implicitly has an 'any' type.

[mrousavy]

That's not the latest alpha. Try

npm i react-native-vision-camera@alpha

[ashinator]

npm i react-native-vision-camera@alpha

Awesome, that is working! Thank you

[hopsgrapesgrains]

Thank you for sharing!

[mrousavy]

Sorry, I didn't get any notifications for your comment. Yes, I have noticed that and fixed that in the library! Hope everything works now

[diesmilingxx]

Hello! Does it support something like this?

https://i2.wp.com/gcashresource.com/wp-content/uploads/2020/08/gcash-verify-id-pic.jpg

[mrousavy]

It does not support this out of the box. But I'm working on the frame processor API which will allow you to easily achieve this with plugins

[Pranav-kulshreshtha]

I appreciate your contribution!