🐛 In the demo, using the navigation.navigate('CodeScannerPage') to enter the page will not scan the content

q9liyan commented 8 months ago

What's happening?

Navigation.navigate ('CodeScannerPage ') method will not immediately work when entering the scanning page. If the screen is locked and the page is re-entered from the background, it will trigger an update to initiate scanning recognition

pdating CameraSession Configuration...

Reproduceable Code

type Props = NativeStackScreenProps<Routes, 'CodeScannerPage'>
export function CodeScannerPage({ navigation }: Props): React.ReactElement {
  // 1. Use a simple default back camera
  const device = useCameraDevice('back')

  // 2. Only activate Camera when the app is focused and this screen is currently opened
  const isFocused = useIsFocused()
  const isForeground = useIsForeground()
  const isActive = isFocused && isForeground && isCameraInitialized

  // 3. (Optional) enable a torch setting
  const [torch, setTorch] = useState(false)
  const [isCameraInitialized, setIsCameraInitialized] = useState(false);
  // 4. On code scanned, we show an aler to the user
  const isShowingAlert = useRef(false)
  const onCodeScanned = useCallback((codes: Code[]) => {
    console.log(`Scanned ${codes.length} codes:`, codes)
    const value = codes[0]?.value
    if (value == null) return
    if (isShowingAlert.current) return
    showCodeAlert(value, () => {
      isShowingAlert.current = false
    })
    isShowingAlert.current = true
  }, [])

  // 5. Initialize the Code Scanner to scan QR codes and Barcodes
  const codeScanner = useCodeScanner({
    codeTypes: ['qr', 'ean-13'],
    onCodeScanned: onCodeScanned,
  })

  const onInitialized = useCallback(() => {
    setIsCameraInitialized(true);
}, []);

  return (
    <View style={styles.container}>
      {device != null && (
        <Camera
          style={StyleSheet.absoluteFill}
          device={device}
          isActive={ isFocused && isForeground && isCameraInitialized}
          codeScanner={codeScanner}
          torch={torch ? 'on' : 'off'}
          onInitialized={onInitialized}
          enableZoomGesture={true}
        />
      )}

      <StatusBarBlurBackground />

      <View style={styles.rightButtonRow}>
        <PressableOpacity style={styles.button} onPress={() => setTorch(!torch)} disabledOpacity={0.4}>
          <IonIcon name={torch ? 'flash' : 'flash-off'} color="white" size={24} />
        </PressableOpacity>
      </View>

      {/* Back Button */}
      <PressableOpacity style={styles.backButton} onPress={navigation.goBack}>
        <IonIcon name="chevron-back" color="white" size={35} />
      </PressableOpacity>
    </View>
  )
}

Relevant log output

2023-12-26 15:55:26.054 12468-12585 CameraSession           com.mrousavy.camera.example          I  Updating CameraSession Configuration...
2023-12-26 15:55:26.055 12468-12585 CameraSession           com.mrousavy.camera.example          I  Updating CameraSession Configuration...
2023-12-26 15:55:26.060 12468-12585 CameraSession           com.mrousavy.camera.example          I  Successfully configured Camera #0!
2023-12-26 15:55:26.063 12468-12585 CameraSession           com.mrousavy.camera.example          I  Configuring Session for Camera #0...
2023-12-26 15:55:26.067 12468-12585 CameraSession           com.mrousavy.camera.example          I  Adding 1280 x 720 CodeScanner Output in Format #35...
2023-12-26 15:55:26.164 12468-12585 CameraSession           com.mrousavy.camera.example          I  Camera Session android.hardware.camera2.impl.CameraCaptureSessionImpl@dab1a73 has been closed!
2023-12-26 15:55:26.164 12468-12585 CameraSession           com.mrousavy.camera.example          I  Successfully configured Session with 1 outputs for Camera #0!
2023-12-26 15:55:26.165 12468-12585 CameraSession           com.mrousavy.camera.example          I  Successfully updated CameraSession Configuration! isActive: false
2023-12-26 15:55:26.166 12468-12585 CameraSession           com.mrousavy.camera.example          I  Configuring Session for Camera #0...
2023-12-26 15:55:26.169 12468-12585 CameraSession           com.mrousavy.camera.example          I  Adding 1920 x 1080 Preview Output...
2023-12-26 15:55:26.173 12468-12468 CameraView              com.mrousavy.camera.example          I  Updating CameraSession...
2023-12-26 15:55:26.386 12468-12585 CameraSession           com.mrousavy.camera.example          I  Updating CameraSession Configuration...
2023-12-26 15:55:26.387 12468-12585 CameraSession           com.mrousavy.camera.example          I  Successfully configured Session with 1 outputs for Camera #0!
2023-12-26 15:55:26.387 12468-12585 CameraSession           com.mrousavy.camera.example          I  Successfully updated CameraSession Configuration! isActive: false
2023-12-26 15:55:26.393 12468-12585 CameraSession           com.mrousavy.camera.example          I  Successfully updated CameraSession Configuration! isActive: true

Camera Device

{"minFps": 1, "minISO": 100, "photoHeight": 3024, "photoWidth": 4032, "pixelFormats": [Array], "supportsDepthCapture": false, "supportsPhotoHdr": false, "supportsVideoHdr": false, "videoHeight": 96, "videoStabilizationModes": [Array], "videoWidth": 160}], "hardwareLevel": "full", "hasFlash": true, "hasTorch": true, "id": "0", "isMultiCam": false, "maxExposure": 200, "maxZoom": 10, "minExposure": -200, "minZoom": 1, "name": "BACK (0)", "neutralZoom": 1, "physicalDevices": ["wide-angle-camera"], "position": "back", "sensorOrientation": "landscape-right", "supportsFocus": true, "supportsLowLightBoost": false, "supportsRawCapture": true}

Device

Android 11

VisionCamera Version

3.6.17

Can you reproduce this issue in the VisionCamera Example app?

I didn't try (⚠️ your issue might get ignored & closed if you don't try this)

Additional information

[ ] I am using Expo
[ ] I have enabled Frame Processors (react-native-worklets-core)
[X] I have read the Troubleshooting Guide
[X] I agree to follow this project's Code of Conduct
[X] I searched for similar issues in this repository and found none.

mrousavy commented 8 months ago

Android 11

which phone?

q9liyan commented 8 months ago

Android 11

which phone?

honor play5 android 12

klabusta commented 8 months ago

Same here, xiaomi redmi note 10. Delaying the setIsCameraInitialized(true); for 2000 ms works, but seems hacky.

3.6.16 works.

mrousavy commented 7 months ago

Is there nothing being logged after those logs for multiple seconds? This seems weird..

mrousavy commented 7 months ago

Working on a fix for this issue here: https://github.com/mrousavy/react-native-vision-camera/pull/2494 👀

Still in development, so don't test yet. Long way to go, this is a really complicated issue (as you can see in the changes/Files of that PR)...

mrousavy commented 7 months ago

Just released VisionCamera 3.9.0-beta.1, which includes the big PersistentCaptureSession PR that aims to fix all the blackscreen issues.... :eyes::tada:

You can try that new beta out yourself and let me know if you still encounter blackscreen issues. I'll continue to test on more devices in the meantime, organize the code a bit better, and then I'll tackle the preview stretching, focus, and flash issues!

If that fixes the blackscreen issues for you, please consider sponsoring me on GitHub to say thanks! ❤️

mrousavy / react-native-vision-camera