0

Using expo-camera and have set up video recording. App also uses react-navigation. When recording (i.e. calling camera.recordAsync()), if I navigate away, the app becomes completely unresponsive. Expo Go's interface also is completely unresponsive so I have to hard close both the app and Expo Go.

I'm assuming this is some form of memory leak/unresolved promise issue but I'm not quite an expert in react/JS yet.

Relevant code (with extraneous items stripped out, e.g. styling or irrelevant props):

function RecordingBlock({navigation}) {
const [camera, setCamera] = useState(null)
const [record, setRecord] = useState(null) //uri used for preview video playback, left for reference
const [recording, setRecording] = useState(false)
const screenIsFocused = useIsFocused()


useEffect(()=>{
    const unsubscribe = navigation.addListener('blur', ()=>{
        try{
            stopVideo()
            setCamera(null)
            setRecord(null)
            setRecording(false)
        }
        catch(error){
            console.log(error)
        }
    })
    return (unsubscribe)
},[navigation])


const takeVideo = async () => {
    if(camera){
        setRecording(true)
        const data = await camera.recordAsync({
            quality: Camera.Constants.VideoQuality['4:3'],
        })
        setRecord(data.uri)
    }
    return(
        setRecording(false),
        setRecord(null)
    )
}

const stopVideo = async () =>{
    setRecording(false)
    camera.stopRecording()
}

return (

        <View>
            {screenIsFocused && <Camera 
                ref={ref => setCamera(ref)}
                style={styles.fixedRatio} 
                type={type}
                ratio={'4:3'} 
                />}

            <View>
                {recording?
                <IconButton 
                    onPress={()=>{
                        stopVideo()
                    }}/>
                :
                <IconButton 

                    onPress={()=>{
                        takeVideo()
                        setTimeout(()=>{stopVideo()}, 30000)
                    }}/>
                    }
            
            </View>
        </View>

)}

I think I've successfully gotten the useEffect call to fire on navigating away (blur). At least, it seems to enter the function and successfully resolve (when using console logs to track progress). I probably should look more into better debugging tools but... it's been 'good enough' so far.

I've not found any other examples close to this anywhere online. Closest has been issues with previewing when returning to the screen but that has been resolved and never froze the app, even if the camera would not re-mount before the fix.

Charlie
  • 21
  • 3
  • Did you ever figure this out? I'm navigating away from an open camera in a react web app, and the camera just stays open - even when I navigate away from the page... – zero_cool May 11 '23 at 23:00
  • 1
    Yes, actually. Sorry for the late reply... lol I tried many different ways to save the reference and such but ultimately... it appears it was a bug in expo or expo-camera or expo-av. One of the libraries after upgrading to the latest version fixed the error. Else, make sure you're demounting the component in any hook calls. Similar to preventing memory leaks in general. I think otherwise the unsubscribe as above worked for me. Not sure if it's evolved in my code since... been a while since I've looked at this. – Charlie Jun 10 '23 at 21:31

0 Answers0