Camera preview make app crashes when using react-navigation

[flavioribeirojr]

Hi y'all!

I am facing an issue when using the camera preview. The camera works at first, but if I try to navigate back from screen B to screen A(which contains the camera preview) the app crashes.

Could someone provide me guidance on how to fix this?

[moschap]

Hi @flavioribeirojr, please were you able to fix this? My situation is that i have a HomeScreen from where i launch the StreamScreen. The Stream seems to work ok but after i stop it and navigate back to the HomeScreen the app crashes and there is no logs printed.

Environment details:

• react-navigation: 5.9.4
• react-native-nodemediaclient: 0.2.17

[flavioribeirojr]

@moschap I could not found a solution using react-navigation. For now I have switch to react-router(native)

[Vercjames]

Still a major issue

[Vercjames]

Here's a work around is to destroy the NodeCameraView with a conditional and remount it when you revisit the page/route/stack.

export const StreamingRoute =  (props: any) => {
  const [renderHack, setRenderHack] = React.useState(false)

  useFocusEffect(
    React.useCallback(() => {
      // This event fires when the component is focused
      setRenderHack(true)

      return () => {
        // This event fires when the component is unfocused
        setRenderHack(false)
      }
    }, [])
  )

  // camera controllers here like stop, start, flip, etc... 
  ...
  

  return (
    <View style={[{ flex: 1, }]}>
      { renderHack ? (
        <NodeCameraView
          outputUrl={""}
          ref={(vb: any) => {setNodeCamera(vb)}}
          camera={{ cameraId: 0, cameraFrontMirror: true }}
          audio={{ bitrate: 32000, profile: 1, samplerate: 44100 }}
          video={{ preset: 1, bitrate: 400000, profile: 1, fps: 15, videoFrontMirror: false }}
          autopreview={renderHack}
        />
      ) : null }
    </View>
  )
}

[tu-nd]

same problem! Anyone got any solution, please :((

[tuannguyen0410]

Here's a work around is to destroy the NodeCameraView with a conditional and remount it when you revisit the page/route/stack.

export const StreamingRoute =  (props: any) => {
  const [renderHack, setRenderHack] = React.useState(false)

  useFocusEffect(
    React.useCallback(() => {
      // This event fires when the component is focused
      setRenderHack(true)

      return () => {
        // This event fires when the component is unfocused
        setRenderHack(false)
      }
    }, [])
  )

  // camera controllers here like stop, start, flip, etc... 
  ...
  

  return (
    <View style={[{ flex: 1, }]}>
      { renderHack ? (
        <NodeCameraView
          outputUrl={""}
          ref={(vb: any) => {setNodeCamera(vb)}}
          camera={{ cameraId: 0, cameraFrontMirror: true }}
          audio={{ bitrate: 32000, profile: 1, samplerate: 44100 }}
          video={{ preset: 1, bitrate: 400000, profile: 1, fps: 15, videoFrontMirror: false }}
          autopreview={renderHack}
        />
      ) : null }
    </View>
  )
}

It's work sometimes, When I try it again It's crash

[9amcoder]

same issue here