feat: support react-native-vision-camera v3

[rkmackinnon]

react-native-vision-camera is currently undergoing a rewrite to a new major version, v3: https://github.com/mrousavy/react-native-vision-camera/issues/1376. This pull request would update vision-camera-code-scanner to support it. This code was tested against commit af4e366 from March 21, 2023 in the v3 branch of react-native-vision-camera.

[rocket13011]

Hello,

Be careful a self in an override, I'm not sure swift likes that.

just replace self by the class name ;)

[rkmackinnon]

Hi @rocket13011, thanks for the tip. I have not done too much Swift programming, so I welcome any advice.

It seems like self in this situation is just specifying that the code calls other methods on the same instance of the VisionCameraCodeScanner class. Is there something more complicated happening there?

React-native-vision-camera v3's approach no longer expects a static callback method in frame processor plugins, so I removed the static keywords from this class. Replacing self by the class name wouldn't seem to work anymore with that change, but if it is more idiomatic Swift to avoid using self unnecessarily then just removing it altogether is an option.

[bglgwyng]

@rkmackinnon I tried installing this branch and got the following error message.

/asdf/node_modules/@bglgwyng/vision-camera-code-scanner/ios/VisionCameraCodeScanner-Bridging-Header.h:1:9: error: include of non-modular header inside framework module 'VisionCameraCodeScanner.VisionCameraCodeScanner_Bridging_Header': '/asdf/ios/Pods/Headers/Public/VisionCamera/FrameProcessorPlugin.h'
#import <VisionCamera/FrameProcessorPlugin.h>

I published the build of this branch to my private npm registry and installed it from the registry. I suppose the 'example` in this repo would work, but have you tested it with a new project?

[rkmackinnon]

@bglgwyng I am not familiar with publishing packages to a private npm registry. For the time being I am using this branch without modification by cloning the repo/branch, running npm pack, and referencing the resultant *.tgz file in my project's package.json like so:

"vision-camera-code-scanner": "file:/./packages/vision-camera-code-scanner.tgz"

I don't get any errors using this method. I would assume this *.tgz file is the same as would be generated and used by the npm publish command. Would you be able to give more detail on the exact steps you took to get that error message?

[bglgwyng]

@rkmackinnon I found the same error occurs using the local zipped package as you suggested. I suppose that the error is related to my use of use_frameworks! :linkage => :static in Podfile. The project without that option is built well with this branch. However, the old 'vision-camera-code-scanner' worked fine with use_frameworks! :linkage => :static, so I think we need to figure out which change you made caused this difference.

Do you have any idea?

[rkmackinnon]

@bglgwyng I suspect you're right. I am using Flipper so I do not have use_frameworks! :linkage => :static in my Podfile. It looks like react-native-skia did not add support for use_frameworks! :linkage => :static until https://github.com/Shopify/react-native-skia/commit/96168570e0ff1594e57419cbadb5a7bab528e5ee, which the oldest supported release is 0.1.176. I based this pull request off of 0.1.175 due to this other issue which to my knowledge hasn't been fixed yet: https://github.com/mrousavy/react-native-vision-camera/pull/1466#issuecomment-1460395999.

Regardless, I tried to bump the version of react-native-skia to the latest on my branch in case it contained the fix, enabled the static frameworks option in the example project and unfortunately ran into a bunch of other compilation errors. Despite ostensibly having the new frameworks compatible version of react-native-skia, I was seeing errors akin to https://github.com/Shopify/react-native-skia/issues/652#issuecomment-1208569391, where if I removed the path prefix I could get a bit further along in the compilation. That seems to be the wrong way to go about fixing the problem though.

If you were able to get a message specific to vision-camera-code-scanner, you must be doing something differently since skia doesn't seem to be a problem for you. What customizations did you make to the repo after cloning it to get your error message?

[rocket13011]

For skia patch :

diff --git a/node_modules/@shopify/react-native-skia/cpp/rnskia/dom/base/DerivedNodeProp.h b/node_modules/@shopify/react-native-skia/cpp/rnskia/dom/base/DerivedNodeProp.h
index 64b817e..3a9ecb4 100644
--- a/node_modules/@shopify/react-native-skia/cpp/rnskia/dom/base/DerivedNodeProp.h
+++ b/node_modules/@shopify/react-native-skia/cpp/rnskia/dom/base/DerivedNodeProp.h
@@ -72,7 +72,7 @@ public:
    Adds a property to the derived property child props.
    */
   template <class _Tp, class... _Args,
-            class = std::_EnableIf<!std::is_array<_Tp>::value>>
+            class = std::enable_if_t<!std::is_array<_Tp>::value>>
   _Tp *defineProperty(_Args &&...__args) {
     auto prop =
         std::make_shared<_Tp>(std::forward<_Args>(__args)..., _onChange);
diff --git a/node_modules/@shopify/react-native-skia/cpp/rnskia/dom/base/NodePropsContainer.h b/node_modules/@shopify/react-native-skia/cpp/rnskia/dom/base/NodePropsContainer.h
index 380764c..10f1ac9 100644
--- a/node_modules/@shopify/react-native-skia/cpp/rnskia/dom/base/NodePropsContainer.h
+++ b/node_modules/@shopify/react-native-skia/cpp/rnskia/dom/base/NodePropsContainer.h
@@ -106,7 +106,7 @@ public:
    Defines a property that will be added to the container
    */
   template <class _Tp, class... _Args,
-            class = std::_EnableIf<!std::is_array<_Tp>::value>>
+            class = std::enable_if_t<!std::is_array<_Tp>::value>>
   _Tp *defineProperty(_Args &&...__args) {
     // Create property and set onChange callback
     auto prop =

[bglgwyng]

The patch @rocket13011 provides was already applied to the project. I think that's why I didn't see the error related to react-native-skia. Here I have made a reproducible scenario. Unfortunately, I am unable to determine why the error message is slightly different, and it appears as follows:

/Users/sojaegyeong/Documents/GitHub/RNVC3Sandbox/node_modules/vision-camera-code-scanner/ios/VisionCameraCodeScanner-Bridging-Header.h:1:9: error: 'VisionCamera/FrameProcessorPlugin.h' file not found
#import <VisionCamera/FrameProcessorPlugin.h>
        ^
<unknown>:0: error: could not build Objective-C module 'VisionCameraCodeScanner'

Regardless, it is still true that the use of use_frameworks! :linkage => :static is the determining factor in the successful build.

@rkmackinnon Could you please test this repo and tell me if you can see the same error message? I'll let you know as soon as I succeed at reproducing the exact same error message I reported yesterday.

[rkmackinnon]

Hi @bglgwyng, I can confirm I see the same error message while testing your repo. Thanks for taking the time to put that together. I will have to look at the differences between your repo and the example project in the vision-camera-code-scanner to figure out the skia errors I was getting, but I will move forward with working on the error message in your repo first.

[rkmackinnon]

Hi again @bglgwyng. I was able to fix the error you were getting. There is a missing dependency on the VisionCamera library in the podspec file for VisionCameraCodeScanner. I will push a new commit to my branch to fix this. Unfortunately, the code still doesn't compile though. Now your project and mine are both experiencing the same errors I was talking about with skia. Maybe you'll have some more luck than I have been having fixing that, but I have not given up on it yet!

[bglgwyng]

@rkmackinnon, thank you very much for your prompt response! I gave your latest commit a try, and the first time I ran it, I noticed that the error I previously reported was no longer present. However, it was replaced with a new issue related to 'react-native-skia'. Luckily, I was already familiar with how to resolve this type of problem, and I found a solution in this link: https://github.com/Shopify/react-native-skia/issues/652#issuecomment-1280278930.

Nevertheless, the strange thing is that even after I applied the fix, I encountered the 'error: could not build Objective-C module 'VisionCameraCodeScanner' again. You can observe this behavior in the following commit: https://github.com/bglgwyng/RNVC3Sandbox/commit/4c65b2fff9edef969d56d4aa0a0fd30d60a31d99.

[rkmackinnon]

@bglgwyng It has been pleasant going back and forth with you on this as well. I believe I have fixed the latest issue you reported. If you pull from my branch again and re-run npm pack the package should be able to be used with use_frameworks! :linkage => :static or without it.

I added a patch to the react-native-vision-camera library that essentially added an empty VisionCamera.h file to satisfy its complaints. I'm not sure if that's the best way to solve the problem, but it works! I tested it in the example project with use_frameworks! :linkage => :static as well as in my private repo that doesn't currently have that option.

[bglgwyng]

@rkmackinnon, I followed your instructions as directed, but unfortunately, it did not work. Here is the commit. I have included the same patch file for 'react-native-vision-camera'. Can you please tell me what I may have done incorrectly?

Furthermore, it would be nice to report the 'VisionCamera.h' issue on the V3 issue tracker (https://github.com/mrousavy/react-native-vision-camera/issues/1376), since it appears to be a general problem across all frame processor modules.

[rkmackinnon]

Hi @bglgwyng, I took a look at your patch. I see you have patched the podspec file to include the reference to VisionCamera.h, but it looks like you maybe forgot to create the empty VisionCamera.h file in the patch as well? My patch from https://github.com/rodgomesc/vision-camera-code-scanner/blob/4dcfeabd3cd41564257e3ec1b0824f3a39b15014/.yarn/patches/react-native-vision-camera-https-95cda75d0b.patch also includes this part:

diff --git a/VisionCamera.h b/VisionCamera.h
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391

That is a good suggestion about commenting on the VisionCamera.h file on the V3 issue tracker. There is actually an older issue https://github.com/mrousavy/react-native-vision-camera/issues/1043 about it that I could comment on as well, but I think I should probably do both as that older one might not be actively monitored anymore.

[bglgwyng]

Your fix works. Thank you!

[AnomalousLLC]

Register plugin(s) outside of AppDelegate: https://github.com/AnomalousLLC/vision-camera-code-scanner/commit/5d372922af7702cbc235020d3268646e0ec9e48f

No need to register Swift plugins manually after installation, maintains out of the box Expo support without prebuild/ejecting.

[lBroth]

Hello everyone, are there any updates on this PR? The vision camera v3 has just been released.

[OnurGuersoy]

Hey @rkmackinnon does this PR need some more work? How can we assist to merge it soon?

[rkmackinnon]

Hi @OnurGuersoy

This PR does need some more work. There is a fix already merged to main in react-native-vision-camera since the latest v3.0.0 release that is required for this plugin to work properly on Android. I am just waiting for a new npm release that contains the fix to make the required updates for Android.

I will post a message in here when I think the PR is ready.

[OnurGuersoy]

Hi @OnurGuersoy

This PR does need some more work. There is a fix already merged to main in react-native-vision-camera since the latest v3.0.0 release that is required for this plugin to work properly on Android. I am just waiting for a new npm release that contains the fix to make the required updates for Android.

I will post a message in here when I think the PR is ready.

Cool thank you!

[deeeed]

Looking forward to a fix, I tried 3.0.0 but the issue is still there.

[KristianSelnas]

Has anyone looked at this recently? react-native-vision-camera v3.1 is released now. Support for v3.x would be much appreciated.

[RikSchefferOberon]

can someone publish this fix, so we can use v3?

[rkmackinnon]

@RikSchefferOberon, the previous fix for Android was incomplete, so it would be inappropriate to publish it.

@KristianSelnas Frame processors still do not work on Android in the latest v3.1.0. This time we are potentially waiting on new PRs: https://github.com/mrousavy/react-native-vision-camera/pull/1873, https://github.com/mrousavy/react-native-vision-camera/pull/1874, perhaps others, and a new published version of react-native-vision-camera that includes them. See also: https://github.com/mrousavy/react-native-vision-camera/issues/1837, specifically the point about being restricted to rgb pixel format on Android and the implications that may have on the results returned from MLKit.

When a new version of react-native-vision-camera is released I would appreciate another head's up in case I miss it. In the meantime, please be patient.

[muratulashozturk]

Does anyone know another library I can use for using a camera and reading QR? I need to implement this feature in my project ASAP. Since we don't know how many days this fix will take to get published, I need a workaround.

[KristianSelnas]

Does anyone know another library I can use for using a camera and reading QR? I need to implement this feature in my project ASAP. Since we don't know how many days this fix will take to get published, I need a workaround.

https://github.com/teslamotors/react-native-camera-kit is an option, but personally I'm a bit dubious about the quality and maintenance of that library.

[muratulashozturk]

Does anyone know another library I can use for using a camera and reading QR? I need to implement this feature in my project ASAP. Since we don't know how many days this fix will take to get published, I need a workaround.

https://github.com/teslamotors/react-native-camera-kit is an option, but personally I'm a bit dubious about the quality and maintenance of that library.

Thanks. What about the expo managed workflow?

[joacub]

@RikSchefferOberon, the previous fix for Android was incomplete, so it would be inappropriate to publish it.

@KristianSelnas Frame processors still do not work on Android in the latest v3.1.0. This time we are potentially waiting on new PRs: mrousavy/react-native-vision-camera#1873, mrousavy/react-native-vision-camera#1874, perhaps others, and a new published version of react-native-vision-camera that includes them. See also: mrousavy/react-native-vision-camera#1837, specifically the point about being restricted to rgb pixel format on Android and the implications that may have on the results returned from MLKit.

When a new version of react-native-vision-camera is released I would appreciate another head's up in case I miss it. In the meantime, please be patient.

vision camera already publish antoher version and frameprocessor works now in android

[rkmackinnon]

@joacub

... and frameprocessor works now in android

Are you sure? When I tried it it didn't compile for Android.

[joacub]

@joacub

... and frameprocessor works now in android

Are you sure? When I tried it it didn't compile for Android.

Vision camera is working in android and iOS perfectly no problems