🐛 Camera Preview sometimes hangs in landscape view on iPadOS

[marcinnexudus]

What's happening?

Some users have reported crashes when they land on the screen where the Camera preview is. This is a tablet app. Looking at the Bugsnag reports it happens only in the landscape orientation and only on iPadOS . This seems to be an issue:

0 libsystem_kernel.dylib +0x1598 ___ulock_wait2
1 libsystem_platform.dylib +0x1d98 __os_unfair_lock_lock_slow
2 libobjc.A.dylib +0xb5d4 _objc_sync_enter
3 AVFCapture +0x20d40 -[AVCaptureVideoPreviewLayer layerDidBecomeVisible:]

The full stack trace is on pastebin: https://pastebin.com/YUwXzp4U

I have not been able to reproduce the hang but each time I land on the Camera screen I've got this warning about unsupported layout (it only appears in landscape mode), which may or may not be related.

14:05:54.727: [info] 📸 VisionCamera.didSetProps(_:): Updating 25 props: [onInitialized, cameraId, codeScannerOptions, enableBufferCompression, onOutputOrientationChanged, onStarted, onCodeScanned, position, preview, top, right, isActive, isMirrored, resizeMode, onError, onStopped, onViewReady, onPreviewOrientationChanged, onPreviewStopped, enableFrameProcessor, onPreviewStarted, left, bottom, outputOrientation, onShutter]
14:05:54.729: [info] 📸 VisionCamera.configurePreviewOrientation(_:): Updating Preview rotation: landscapeRight...
14:05:54.730: [info] 📸 VisionCamera.configureOutputOrientation(_:): Updating Outputs rotation: landscapeRight...
14:05:54.730: [info] 📸 VisionCamera.configure(_:): configure { ... }: Waiting for lock...
14:05:54.736: [info] 📸 VisionCamera.configure(_:): configure { ... }: Updating CameraSession Configuration... Difference(inputChanged: true, outputsChanged: true, videoStabilizationChanged: true, orientationChanged: true, formatChanged: true, sidePropsChanged: true, torchChanged: true, zoomChanged: true, exposureChanged: true, audioSessionChanged: true, locationChanged: true)
14:05:54.736: [info] 📸 VisionCamera.configureDevice(configuration:): Configuring Input Device...
14:05:54.737: [info] 📸 VisionCamera.configureDevice(configuration:): Configuring Camera com.apple.avfoundation.avcapturedevice.built-in_video:1...
14:05:54.745: [info] 📸 VisionCamera.configureDevice(configuration:): Successfully configured Input Device!
14:05:54.745: [info] 📸 VisionCamera.configureOutputs(configuration:): Configuring Outputs...
14:05:54.745: [info] 📸 VisionCamera.configureOutputs(configuration:): Adding Code Scanner output...
14:05:54.748: [info] 📸 VisionCamera.configurePreviewOrientation(_:): Updating Preview rotation: landscapeRight...
2025-01-06 14:05:54.748494+0000 NexIO[776:73188] [LayoutConstraints] Unsupported layout off the main thread for VisionCamera.PreviewView with nearest ancestor view controller, RNSScreen
14:05:54.749: [info] 📸 VisionCamera.configureOutputOrientation(_:): Updating Outputs rotation: landscapeRight...
14:05:54.749: [info] 📸 VisionCamera.configureOutputs(configuration:): Successfully configured all outputs!
14:05:54.753: [info] 📸 VisionCamera.setTargetOutputOrientation(_:): Setting target output orientation from device to preview...
14:05:54.865: [info] 📸 VisionCamera.init(frame:session:): Preview Layer started previewing.
14:05:54.866: [info] 📸 VisionCamera.configure(_:): Beginning AudioSession configuration...
14:05:54.866: [info] 📸 VisionCamera.configureAudioSession(configuration:): Configuring Audio Session...
14:05:54.867: [info] 📸 VisionCamera.configure(_:): Committed AudioSession configuration!
14:05:54.873: [info] 📸 VisionCamera.configure(_:): Beginning Location Output configuration...
14:05:54.906: [info] 📸 VisionCamera.configure(_:): Finished Location Output configuration!

Please advise. Also in my RN component, am I doing anything that can lead to crashes/hangs?

Reproduceable Code

import { t } from 'i18next';
import { useCallback, useEffect, useRef, useState } from 'react';
import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
import {
  Camera,
  CameraRuntimeError,
  useCameraDevice,
  useCameraPermission,
  useCodeScanner,
} from 'react-native-vision-camera';
import useOrientation from '../../hooks/useGetOrientation.ts';

interface Props {
  style?: StyleProp<ViewStyle>;
  previewSize: { width: number; height: number };
  member?: boolean;
  eventId?: number;
}

const CameraComponent = ({ style, previewSize }: Props) => {
  const { hasPermission, requestPermission } = useCameraPermission();
  const device = useCameraDevice('front');
  const orientation = useOrientation();
  const camera = useRef<Camera>(null);
  const [cameraActive, setCameraActive] = useState(false);

  const readyForCamera = !!orientation && !!device;

  const restartCameraPreview = () => {
    setCameraActive(false);
    setTimeout(() => {
      setCameraActive(true);
    }, 500);
  };

  const onError = useCallback((error: CameraRuntimeError) => {
    restartCameraPreview();
  }, []);

  const codeScanner = useCodeScanner({
    codeTypes: ['qr'],
    onCodeScanned: codes => {
      const scannedCode = codes[0]?.value;
      // proceess code
    },
  });

  const [cameraVisible, setCameraVisible] = useState(false);

  useEffect(() => {
    if (!hasPermission) {
      requestPermission();
    }
    if (hasPermission && device) {
      setTimeout(() => {
        setCameraVisible(true);
        setCameraActive(true);
      }, 500);
    }
  }, [hasPermission, device]);

  return (
    <>
      {cameraVisible && (
        <View
          style={[
            { width: previewSize.width, height: previewSize.height, borderRadius: 16, overflow: 'hidden' },
            style,
          ]}>
          {readyForCamera ? (
            <Camera
              ref={camera}
              style={StyleSheet.absoluteFill}
              device={device}
              isActive={cameraActive}
              outputOrientation={'preview'}
              preview={true}
              codeScanner={codeScanner}
              resizeMode="cover"
              onError={onError}
            />
          ) : (
            <Text>{t('No camera detected')}</Text>
          )}
        </View>
      )}
    </>
  );
};

export default CameraComponent;

Relevant log output

14:05:54.727: [info] 📸 VisionCamera.didSetProps(_:): Updating 25 props: [onInitialized, cameraId, codeScannerOptions, enableBufferCompression, onOutputOrientationChanged, onStarted, onCodeScanned, position, preview, top, right, isActive, isMirrored, resizeMode, onError, onStopped, onViewReady, onPreviewOrientationChanged, onPreviewStopped, enableFrameProcessor, onPreviewStarted, left, bottom, outputOrientation, onShutter]
14:05:54.729: [info] 📸 VisionCamera.configurePreviewOrientation(_:): Updating Preview rotation: landscapeRight...
14:05:54.730: [info] 📸 VisionCamera.configureOutputOrientation(_:): Updating Outputs rotation: landscapeRight...
14:05:54.730: [info] 📸 VisionCamera.configure(_:): configure { ... }: Waiting for lock...
14:05:54.736: [info] 📸 VisionCamera.configure(_:): configure { ... }: Updating CameraSession Configuration... Difference(inputChanged: true, outputsChanged: true, videoStabilizationChanged: true, orientationChanged: true, formatChanged: true, sidePropsChanged: true, torchChanged: true, zoomChanged: true, exposureChanged: true, audioSessionChanged: true, locationChanged: true)
14:05:54.736: [info] 📸 VisionCamera.configureDevice(configuration:): Configuring Input Device...
14:05:54.737: [info] 📸 VisionCamera.configureDevice(configuration:): Configuring Camera com.apple.avfoundation.avcapturedevice.built-in_video:1...
14:05:54.745: [info] 📸 VisionCamera.configureDevice(configuration:): Successfully configured Input Device!
14:05:54.745: [info] 📸 VisionCamera.configureOutputs(configuration:): Configuring Outputs...
14:05:54.745: [info] 📸 VisionCamera.configureOutputs(configuration:): Adding Code Scanner output...
14:05:54.748: [info] 📸 VisionCamera.configurePreviewOrientation(_:): Updating Preview rotation: landscapeRight...
2025-01-06 14:05:54.748494+0000 NexIO[776:73188] [LayoutConstraints] Unsupported layout off the main thread for VisionCamera.PreviewView with nearest ancestor view controller, RNSScreen
14:05:54.749: [info] 📸 VisionCamera.configureOutputOrientation(_:): Updating Outputs rotation: landscapeRight...
14:05:54.749: [info] 📸 VisionCamera.configureOutputs(configuration:): Successfully configured all outputs!
14:05:54.753: [info] 📸 VisionCamera.setTargetOutputOrientation(_:): Setting target output orientation from device to preview...
14:05:54.865: [info] 📸 VisionCamera.init(frame:session:): Preview Layer started previewing.
14:05:54.866: [info] 📸 VisionCamera.configure(_:): Beginning AudioSession configuration...
14:05:54.866: [info] 📸 VisionCamera.configureAudioSession(configuration:): Configuring Audio Session...
14:05:54.867: [info] 📸 VisionCamera.configure(_:): Committed AudioSession configuration!
14:05:54.873: [info] 📸 VisionCamera.configure(_:): Beginning Location Output configuration...
14:05:54.906: [info] 📸 VisionCamera.configure(_:): Finished Location Output configuration!

Camera Device

n/a - I don't have access to the customers' devices.

Device

iPad Mini 6 (WiFi) (iPad14,1),iPad 9 (WiFi) (iPad12,1), iPad 5 (iPad6,11)

VisionCamera Version

4.5.2

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)
• 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.

[maintenance-hans]

Guten Tag, Hans here! 🍻

Thanks for providing detailed information about your issue. It's great that you've shared the logs and a reproducible code snippet. However, I noticed you mentioned you haven't tried reproducing the issue in the VisionCamera Example app. This is crucial, as it helps determine if it’s an issue with your implementation or the library itself.

Please try to run the example app and see if you can replicate the behavior there. If you can, that information would be really helpful for mrousavy to investigate further. Additionally, if you can get any more logs from Xcode or adb logcat while trying to reproduce the issue, that would be fantastic as well!

Let us know how it goes!

Note: If you think I made a mistake, please ping @mrousavy to take a look.

[marcinnexudus]

@mrousavy Would you be able to identify what the issue might be? Thank you