🐛 session/invalid-output-configuration in android

[react-native-xicom]

What's happening?

Getting Error

"react-native-vision-camera": "^4.7.1"
"react-native": "0.78.0"

Reproduceable Code

import React, { useMemo, useEffect } from 'react';
import { View, StyleSheet } from 'react-native';
import { Camera, CameraDevice } from 'react-native-vision-camera';
import Reanimated, { useAnimatedProps, AnimatedStyle, useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';
import styles from '../styles';

const ReanimatedCamera = Reanimated.createAnimatedComponent(Camera);

interface CameraPreviewProps {
    device: CameraDevice | undefined;
    format: any;
    cameraRef: React.RefObject<Camera | null>;
    cameraKey: number;
    isCameraInitialized: boolean;
    cameraPermission: { hasPermission: boolean };
    microphonePermission: { hasPermission: boolean } | null;
    zoomAnimated: { value: number };
    flash: 'on' | 'off';
    cameraPosition: 'back' | 'front';
    hasFlash: boolean;
    isRecording: boolean;
    exposure: number;
    onInitialized: () => void;
    onError: (error: any) => void;
    cameraPreviewTop: number;
    cameraScaleStyle: AnimatedStyle;
}

export const CameraPreview: React.FC<CameraPreviewProps> = ({
    device,
    format,
    cameraRef,
    cameraKey,
    isCameraInitialized,
    cameraPermission,
    microphonePermission,
    zoomAnimated,
    flash,
    cameraPosition,
    hasFlash,
    isRecording,
    exposure,
    onInitialized,
    onError,
    cameraPreviewTop,
    cameraScaleStyle,
}) => {
    // Optimized opacity transition for camera flips
    // Very minimal dimming and ultra-fast transition
    const cameraOpacity = useSharedValue(1);
    
    useEffect(() => {
        if (!isCameraInitialized) {
            // Barely noticeable dimming (0.95 instead of 0.85) with instant transition
            cameraOpacity.value = withTiming(0.95, { duration: 30 });
        } else {
            // Instant fade back to full opacity
            cameraOpacity.value = withTiming(1, { duration: 50 });
        }
    }, [isCameraInitialized, cameraOpacity]);
    
    const cameraOpacityStyle = useAnimatedStyle(() => ({
        opacity: cameraOpacity.value,
    }));
    
    // Animated props for smooth zoom using Reanimated
    const animatedProps = useAnimatedProps(() => ({
        zoom: zoomAnimated.value,
    }), [zoomAnimated]);

    const shouldUseTorch = useMemo(() => {
        const useTorch = cameraPosition === 'back' && hasFlash && flash === 'on';
        return useTorch;
    }, [cameraPosition, hasFlash, flash]);

    const renderFlashOverlay = useMemo(() => {
        const shouldShow = cameraPosition === 'front' && flash === 'on' && isRecording;
        return shouldShow ? <View style={styles.flashOverlay} /> : null;
    }, [cameraPosition, flash, isRecording]);

    if (!device) {
        return null;
    }

    return (
        <Reanimated.View style={[
            styles.cameraPreviewContainer,
            { top: cameraPreviewTop },
            cameraScaleStyle
        ]}>
            <Reanimated.View style={[StyleSheet.absoluteFill, cameraOpacityStyle]}>
                <ReanimatedCamera 
                    key={cameraKey}
                    ref={cameraRef} 
                    style={StyleSheet.absoluteFill} 
                    fps={30}
                    device={device} 
                    format={format} 
                    isActive={cameraPermission.hasPermission && !!device}
                    animatedProps={animatedProps} 
                    video={cameraPermission.hasPermission}
                    torch={shouldUseTorch ? 'on' : 'off'}
                    audio={microphonePermission?.hasPermission} 
                    outputOrientation='preview'
                    videoStabilizationMode="cinematic"
                    enableZoomGesture={false}
                    enableFpsGraph={false}
                    exposure={exposure}
                    resizeMode="cover"
                    photoQualityBalance={"speed"}
                    onInitialized={onInitialized}
                    onError={(e) => {
                        console.log("CAMERA ERROR >>>", JSON.stringify(e, null, 2));
                        onError(e)
                    }}
                />
            </Reanimated.View>
            {renderFlashOverlay}
        </Reanimated.View>
    );
};

Relevant log output

CAMERA ERROR >>> {
  "name": "session/invalid-output-configuration",
  "_code": "session/invalid-output-configuration",
  "_message": "Failed to configure the Camera Session because the output/stream configurations are invalid!",
  "_cause": {
    "stacktrace": "java.util.concurrent.TimeoutException: Future[androidx.camera.core.impl.utils.futures.ListFuture@4628970] is not done within 5000 ms.\n\tat androidx.camera.core.impl.utils.futures.Futures.lambda$makeTimeoutFuture$1(Futures.java:437)\n\tat androidx.camera.core.impl.utils.futures.Futures$$ExternalSyntheticLambda7.call(D8$$SyntheticClass:0)\n\tat androidx.camera.core.impl.utils.executor.HandlerScheduledExecutorService$HandlerScheduledFuture.run(HandlerScheduledExecutorService.java:243)\n\tat android.os.Handler.handleCallback(Handler.java:938)\n\tat android.os.Handler.dispatchMessage(Handler.java:99)\n\tat android.os.Looper.loop(Looper.java:223)\n\tat android.os.HandlerThread.run(HandlerThread.java:67)\n",
    "message": "Future[androidx.camera.core.impl.utils.futures.ListFuture@4628970] is not done within 5000 ms."
  }
}

Camera Device

{
  "formats": [],
  "sensorOrientation": "landscape-left",
  "hardwareLevel": "full",
  "maxZoom": 8,
  "minZoom": 1,
  "maxExposure": 12,
  "supportsLowLightBoost": false,
  "neutralZoom": 1,
  "physicalDevices": [
    "wide-angle-camera"
  ],
  "supportsFocus": true,
  "supportsRawCapture": false,
  "isMultiCam": false,
  "minFocusDistance": 10,
  "minExposure": -12,
  "name": "0 (BACK) androidx.camera.camera2",
  "hasFlash": true,
  "hasTorch": true,
  "position": "back",
  "id": "0"
}

Device

Nokia 4.2

VisionCamera Version

4.7.1

Can you reproduce this issue in the VisionCamera Example app?

No, I cannot reproduce the issue in the Example app

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.

Note

New features, bugfixes, updates and other improvements are all handled mostly by @mrousavy in his free time.
To support @mrousavy, please consider 💖 sponsoring him on GitHub 💖.
Sponsored issues will be prioritized.

[iamrohitagg]

@react-native-xicom Were you able to fix this?

[jhideki]

Running into the same bug... Lmk if anyone's able to fix it.