🐛 Focus on tap

[TasigurIshtar]

What were you trying to do?

Hello,

I am trying to simulate focus on tap, but the location where I tapped is newer focussed correctly.

Fresh project - ("react-native": "0.66.4", "react-native-vision-camera": "^2.12.0", ...android device)
Locked portrait orientation,
Camera component has marginTop:60, marginLeft:60 to better check of tap coordinates.
I am using coordinates relative to Camera component rectangle as mentiond here https://mrousavy.com/react-native-vision-camera/docs/guides/focusing/

I made demo project where this problem is ilustrated.
https://github.com/TasigurIshtar/RNVisionCameraTest

Thanks for your time.

Reproduceable Code

const touchII = async (event: NativeTouchEvent) => {
    let point: Point = {
      x: Math.round(event.pageX - camLocation.x),
      y: Math.round(event.pageY - camLocation.y),
    };
    await cameraRef?.current?.focus(point)     
  };

.....
 <Camera
      ref={cameraRef}
      style={{
        marginTop: 60,
        marginLeft: 60,
        width: window.width - 60,
        height: window.height - 60,
      }}
      onLayout={event => {
        const layout = event.nativeEvent.layout;
        setCamLocation({x: layout.x, y: layout.y});
      }}
      device={device}
      isActive={true}
      onTouchEnd={x => device.supportsFocus && touchII(x.nativeEvent)}
    />

What happened instead?

after tapping to the top of the bottle .focus({"x": 53, "y": 393}) -> the bottle doesn't seems to be focused. (when I was tapping more on the right site around the grayish mat, occasionaly the top of the bottle was super sharp. )

Relevant log output

No response

Device

Samsung Galaxy S10

VisionCamera Version

2.12.0

Additional information

• I am using Expo
• I have read the Troubleshooting Guide
• I agree to follow this project's Code of Conduct
• I searched for similar issues in this repository and found none.

[mrousavy]

Is the behaviour the same on iOS?

[savv]

Are you sure you are getting the coordinates right? Try:

    <TapGestureHandler onHandlerStateChange={({nativeEvent}) => {
      camera.current?.focus({x: nativeEvent.x, y: nativeEvent.y});}}>
  (your camera here)
    </TapGestureHandler>

[Hajan39]

@mrousavy on iOS, the focus is not doing anything in my case
@savv it is doing the same thing

[Angelk90]

@TasigurIshtar , @Hajan39 : Do both front / back cameras work on android?

[Hajan39]

Yes, both of them - any progress on this? I think this is crucial functionality ...

[mrousavy]

Does it also not work in the Example app when you translate the Camera component a bit to the right?

[Hajan39]

The example app has no touch to focus event, but I have added what @savv said, and here is the video result. I think it is somehow shifted. I am not sure how

WhatsApp.Video.2022-02-09.at.11.12.30.mp4

[savv]

There probably needs to be a pixel ratio translation, but I never managed to figure it out.

https://reactnative.dev/docs/pixelratio

[Menardi]

I've created a PR to fix this issue (#958). I would appreciate if anyone else could test it out to make sure it fixes the issue for them too. The easiest way to test it is probably to use the patch below (which is the same code as the PR) with patch-package.

patches/react-native-vision-camera+2.13.1.patch

diff --git a/node_modules/react-native-vision-camera/android/src/main/java/com/mrousavy/camera/CameraView+Focus.kt b/node_modules/react-native-vision-camera/android/src/main/java/com/mrousavy/camera/CameraView+Focus.kt
index da68003..c945c0b 100644
--- a/node_modules/react-native-vision-camera/android/src/main/java/com/mrousavy/camera/CameraView+Focus.kt
+++ b/node_modules/react-native-vision-camera/android/src/main/java/com/mrousavy/camera/CameraView+Focus.kt
@@ -1,9 +1,9 @@
 package com.mrousavy.camera
 
 import androidx.camera.core.FocusMeteringAction
-import androidx.camera.core.SurfaceOrientedMeteringPointFactory
 import com.facebook.react.bridge.ReadableMap
 import kotlinx.coroutines.guava.await
+import kotlinx.coroutines.withContext
 import java.util.concurrent.TimeUnit
 
 suspend fun CameraView.focus(pointMap: ReadableMap) {
@@ -16,8 +16,11 @@ suspend fun CameraView.focus(pointMap: ReadableMap) {
   val x = pointMap.getDouble("x") * dpi
   val y = pointMap.getDouble("y") * dpi
 
-  val factory = SurfaceOrientedMeteringPointFactory(this.width.toFloat(), this.height.toFloat())
-  val point = factory.createPoint(x.toFloat(), y.toFloat())
+  // Getting the point from the previewView needs to be run on the UI thread
+  val point = withContext(coroutineScope.coroutineContext) {
+    previewView.meteringPointFactory.createPoint(x.toFloat(), y.toFloat());
+  }
+
   val action = FocusMeteringAction.Builder(point, FocusMeteringAction.FLAG_AF or FocusMeteringAction.FLAG_AE)
     .setAutoCancelDuration(5, TimeUnit.SECONDS) // auto-reset after 5 seconds
     .build()
diff --git a/node_modules/react-native-vision-camera/android/src/main/java/com/mrousavy/camera/CameraView.kt b/node_modules/react-native-vision-camera/android/src/main/java/com/mrousavy/camera/CameraView.kt
index 16eb4dc..507e9fd 100644
--- a/node_modules/react-native-vision-camera/android/src/main/java/com/mrousavy/camera/CameraView.kt
+++ b/node_modules/react-native-vision-camera/android/src/main/java/com/mrousavy/camera/CameraView.kt
@@ -121,7 +121,7 @@ class CameraView(context: Context, private val frameProcessorThread: ExecutorSer
   private val cameraExecutor = Executors.newSingleThreadExecutor()
   internal val takePhotoExecutor = Executors.newSingleThreadExecutor()
   internal val recordVideoExecutor = Executors.newSingleThreadExecutor()
-  private var coroutineScope = CoroutineScope(Dispatchers.Main)
+  internal var coroutineScope = CoroutineScope(Dispatchers.Main)
 
   internal var camera: Camera? = null
   internal var imageCapture: ImageCapture? = null

[brascene]

@Hajan39 did you resolve this on iOS? In my case it's also doing nothing, it's not throwing error but nothing happens on the screen. I'm using TapGestureHandler wrapper to get coordinates, as @savv suggested.