mrousavy
🐛 In the demo, using the navigation.navigate('CodeScannerPage') to enter the page will not scan the content
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.
Same here, xiaomi redmi note 10. Delaying the setIsCameraInitialized(true); for 2000 ms works, but seems hacky.
3.6.16 works.
Is there nothing being logged after those logs for multiple seconds? This seems weird..
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)...
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! ❤️