🐛 Enabling video causes black flash freeze issue

[Jonovono]

What were you trying to do?

When I enable video on the Camera component the screen freezes for a moment and turns dark

Is this expected?

Thanks

Reproduceable Code

    <ReanimatedCamera
    ref={camera}
    style={StyleSheet.absoluteFill}
    device={device}
    isActive={true}
    photo={true}
    video={true}
    audio={hasMicrophonePermission}

What happened instead?

I expect the video to continue smoothly instead of freezing and turning black

Relevant log output

No response

Device

iPhone 12 Mini

VisionCamera Version

^2.10.0

Additional information

• [ ] I am using Expo
• [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.

[Jonovono]

https://user-images.githubusercontent.com/775808/147172964-a616f377-917b-4333-a1f5-d92c944652f6.mov

Here is a video recording of it happening

[mrousavy]

why did you not fill out the "Relevant Log Output" field?

[mrousavy]

Hold on, do you mean it freezes for a second and works again afterwards, or does it not work anymore? Not clear to me

[Jonovono]

@mrousavy it works afterwards fine ! It's just freezes momentarily. It's not a huge issue but doesn't seem ideal. Does this happen to you? It's pretty easy repo on mine. I just set video = true. It's a little laggy when switching front / back cameras as well. I just wanted to check if this was expected I assumed others have seen this ?

I can post additional logs if that helps but didn't notice any output.

[mrousavy]

lol no that's how cameras work

[mrousavy]

just leave video on if it's an issue for you 🤷‍♂️ you can see the same behaviour in any Camera app if you switch from photo to video

[Jonovono]

@mrousavy what are you talking about? Look at the video I posted, that is not how "every camera works" are you serious? Launch the default camera app it does not freeze for a second and turn black

[Jonovono]

@mrousavy I think you are confused. Video is left on. I'm not toggling video on/off. This is with 'video=true' always. On launch the video freezes and turns black. Look at the video I posted, this is not normal camera behaviour at all.

[Jonovono]

https://user-images.githubusercontent.com/775808/147415343-10f1af76-8f90-48b2-a517-dbd5adb1c0b4.mov

Here is a video of launching the app with 'video=true' no switching anything. Notice how it freezes and turns black momentarily?

[mrousavy]

are you serious? why did you not explain it better then?

in all seriousness - share me the logs (like I already said three comments ago) and I can take a look. But I am sure you are changing the formats or enabling/disabling a field that reconfigures the camera on the fly - otherwise this would not happen.

[mrousavy]

and share the full component without leaving anything out.

[Jonovono]

@mrousavy thanks, and sorry I wasn't very clear. Here is a full example with logs

Example:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * Generated with the TypeScript template
 * https://github.com/react-native-community/react-native-template-typescript
 *
 * @format
 */
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { Camera, useCameraDevices } from 'react-native-vision-camera';

const App = () => {
    const devices = useCameraDevices();

    const device = devices.back;

    if (device == null) return null;

    return (
        <View style={styles.container}>
            <Camera
                style={StyleSheet.absoluteFill}
                device={device}
                isActive={true}
                enableZoomGesture={false}
                photo={true}
                video={true}
            />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        // backgroundColor: 'blue',
    },
});

export default App;

Logs:

flipper: FlipperClient::addPlugin Inspector
flipper: FlipperClient::addPlugin Preferences
flipper: FlipperClient::addPlugin React
flipper: FlipperClient::addPlugin Network
2021-12-27 09:27:05.416424-0700 CameraVisionTest[456:15649] [native] Running application CameraVisionTest ({
    initialProps =     {
    };
    rootTag = 1;
})
2021-12-27 09:27:05.444661-0700 CameraVisionTest[456:15886] FrameProcessorBindings: Creating Runtime Manager...
2021-12-27 09:27:05.445489-0700 CameraVisionTest[456:15886] FrameProcessorBindings: Runtime Manager created!
2021-12-27 09:27:05.445510-0700 CameraVisionTest[456:15886] FrameProcessorBindings: Installing Frame Processor plugins...
2021-12-27 09:27:05.445524-0700 CameraVisionTest[456:15886] FrameProcessorBindings: Frame Processor plugins installed!
2021-12-27 09:27:05.445606-0700 CameraVisionTest[456:15907] FrameProcessorBindings: Installing Frame Processor Bindings for Bridge...
2021-12-27 09:27:05.445779-0700 CameraVisionTest[456:15907] FrameProcessorBindings: Installing global functions...
2021-12-27 09:27:05.445840-0700 CameraVisionTest[456:15907] FrameProcessorBindings: Finished installing bindings.
2021-12-27 09:27:09.108403-0700 CameraVisionTest[456:15907] [javascript] Running "CameraVisionTest" with {"rootTag":1,"initialProps":{}}
2021-12-27 09:27:09.170417-0700 CameraVisionTest[456:15649] [native] VisionCamera.didSetProps(_:): Updating 15 prop(s)...
2021-12-27 09:27:09.170507-0700 CameraVisionTest[456:15882] [native] VisionCamera.configureCaptureSession(): Configuring Session...
2021-12-27 09:27:09.170573-0700 CameraVisionTest[456:15882] [native] VisionCamera.configureCaptureSession(): Initializing Camera with device com.apple.avfoundation.avcapturedevice.built-in_video:6...
2021-12-27 09:27:09.170589-0700 CameraVisionTest[456:15882] [native] VisionCamera.configureCaptureSession(): Adding Video input...
2021-12-27 09:27:09.215747-0700 CameraVisionTest[456:15886] [connection] nw_socket_handle_socket_event [C5:1] Socket SO_ERROR [61: Connection refused]
2021-12-27 09:27:09.215926-0700 CameraVisionTest[456:15881] [connection] nw_connection_get_connected_socket [C5] Client called nw_connection_get_connected_socket on unconnected nw_connection
2021-12-27 09:27:09.215955-0700 CameraVisionTest[456:15881] TCP Conn 0x2814fcdc0 Failed : error 0:61 [61]
2021-12-27 09:27:09.223079-0700 CameraVisionTest[456:15882] [native] VisionCamera.configureCaptureSession(): Adding Photo output...
2021-12-27 09:27:09.226491-0700 CameraVisionTest[456:15882] [native] VisionCamera.configureCaptureSession(): Adding Video Data output...
2021-12-27 09:27:09.226927-0700 CameraVisionTest[456:15882] [native] VisionCamera.invokeOnInitialized(): Camera initialized!
2021-12-27 09:27:09.226995-0700 CameraVisionTest[456:15882] [native] VisionCamera.configureCaptureSession(): Session successfully configured!
2021-12-27 09:27:09.227586-0700 CameraVisionTest[456:15882] [native] VisionCamera.configureFormat(): Configuring Format...
2021-12-27 09:27:09.227592-0700 CameraVisionTest[456:15882] [native] VisionCamera.configureDevice(): Configuring Device...
2021-12-27 09:27:09.227623-0700 CameraVisionTest[456:15882] [native] VisionCamera.configureDevice(): Device successfully configured!
2021-12-27 09:27:09.227738-0700 CameraVisionTest[456:15882] [native] VisionCamera.didSetProps(_:): Starting Session...
2021-12-27 09:27:09.901664-0700 CameraVisionTest[456:15882] [native] VisionCamera.didSetProps(_:): Started Session!

Recording:

https://user-images.githubusercontent.com/775808/147490213-3c7c3207-0361-496d-9e66-b3d8606a7e80.mov

Notice how when it launches the video feed is dark and freezes momentarily. I'm really just curious if this is expected. If in the component I set video = false it works as expected (no freeze, or dark) but in the example both are set to true so I assume that should be fine to do?

This happens on a release build for me as well. I am re-writing an existing app from react-native-camera to this library. Loving this library much more but just noticed this which hasn't happened on the other library.

Again, thanks for your help, love all your work and repos :)

[mrousavy]

Okay from your logs it looks like it is correctly only starting the session once, not sure why there is a flicker here then. Maybe that's really just the behaviour of the Triple-Camera you are using here because it has to initialize in serial and the queue is blocked by the other 2 cameras then?

[Jonovono]

Thanks! @mrousavy ah that could be, I have a few other devices laying around. I'll test around on them a bit.

Can you think of any workaround I could do or something I could look into?

[mrousavy]

You can use a single camera device instead of the triple camera, that should definitely initialize faster. (useCameraDevices('wide-angle'))

[Jonovono]

@mrousavy oh got it, amazing thanks so much for your help. Working very smooth now :)