react-native-vision-camera: 🐛 Camera.onError(device/no-device)

I ran into this situation as well and got a solution.

Device Android 14, Pixel 8

App structure My app has a screen for the barcode scanner (camera). For apps displaying <Camera/> conditionally, check @chengcheng1231 's solution.

// ...
const device = useCameraDevice('back');
const [hasInitialized, setHasInitialized] = useState(false);
// ...
<Camera
  codeScanner={codeScanner}
  style={...}
  device={device}
  isActive={hasInitialized}
  onInitialized={() => {
    setHasInitialized(true);
  }}
></Camera>

Previous logic I followed the doc to request camera permission on the screen of barcode scanner.

Issues For the first time of using the barcode scanner, the app requests camera permission, I pressed Allow , then the app gave black/blank screen and no-device error.

Solution/Workaround The core idea is to ensure both of the permission and device are ready for the <Camera/> component. Maybe isActive/hasInitialized relates too but I’m not sure and didn’t test. My solution was moving camera permission request prior to going to the barcode scanner screen. So check and request camera permission first, then go to the barcode scanner screen only if the user grants the permission. The issue hasn’t happened since.

I use version 3.9.1 and also got Camera.onError(device/no-device) error, but i added below to get permission within my camera screen and it works! Hope it could help someone.

...
  const [cameraPermission, setCameraPermission] = useState(false);

  const requestCameraPermission = async () => {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.CAMERA,
        {
          title: 'App Camera Permission',
          message: 'App needs access to your camera ',
          buttonNeutral: 'Ask Me Later',
          buttonNegative: 'Cancel',
          buttonPositive: 'OK',
        },
      );
      console.log('granted', granted);
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        setCameraPermission(true);
        console.log('You can use the camera');
      } else {
        setCameraPermission(false);
        console.log('Camera permission denied');
      }
    } catch (err) {
      console.warn(err);
    }
  };

  useLayoutEffect(() => {
    requestCameraPermission();
  }, []);
...

and render the camera view

{cameraPermission && device ? (
      <Camera
        style={styles.cameraContainer}
        codeScanner={codeScanner}
        device={device}
        isActive
        resizeMode="cover"
      />
    ) : (
      <Text style={styles.noCameraText}>No camera device available</Text>
    )}

I got this error with the production build only, on SM-S901N. Did you guys see this issue with the debug build?

yes debug build also

again

fixed it, will release a new beta in the coming days

no new V4 beta yet. maybe later today

Im still having the issue even on the beta version "react-native-vision-camera": "^4.0.0-beta.10",

When i try to change the device position from front to back and back to front i have this error:

Camera.onError(unknown/unknown): Use case Preview:androidx.camera.core.Preview-16f8634e-5f04-4737-8405-40c8f1888af7 already bound to a different lifecycle. [unknown/unknown: Use case Preview:androidx.camera.core.Preview-16f8634e-5f04-4737-8405-40c8f1888af7 already bound to a different lifecycle.]

UPDATED : It’s now working after setting format

 const format = useCameraFormat(device, [
    { fps: 60 },
    { videoAspectRatio: window.height / window.width },
    { videoResolution: "max" },
    { photoAspectRatio: window.height / window.width },
    { photoResolution: "max" },
  ]);

But the quality of front camera is really bad. any tips to optimize it ?

My Android SDK is not the latest one, which is a pain in the ass to upgrade. But if you are advising using the last beta release, that might fix the screen access for android phone, then I’ll try to upgrade it.

I’ll keep you update with the results.

Hey! I just released a new V4 beta (v4.0.0-beta.7) where I fixed a bunch of issues! 💪🚀 Can you test that and see if that fixes the issue for you? 😅

yarn add react-native-vision-camera@beta

You might need to increase the compileSdk to the newest Android SDK (34) if you are behind.

I have the same issue on Android after upgrading to 3.9.0, although it happens intermittently making it all the harder to debug.

Some useful information however, this happens in the debug build, even with react-native-worklets-core not installed (and frame processors disabled) and camera permissions enabled. Therefore I do not believe it is related to the build type, frame processors, or device permissions. Perhaps a race condition since the camera still loads and works fine?

same issue