🐛 Camera is still active after unmounting #905
Comments
|
Was just trying some different things out and I was able to expose a This doesn't solve the issue really but just wanted to give some more info. |
|
Hey! Hmm, interesting. Are you maybe using React Freeze? Try doing |
|
Hey @mrousavy thanks for getting back to me! We are not currently using react freeze in our project. To expand on the changes I made above, it would only work when I changed EDIT: For your iOS implementation, would using a |
|
I am using enableFreeze and I can confirm that the green light indicator will still be on for me occasionally. |
|
UIKit works a bit differently, |
|
Same here on the latest version. We're not using DeviceAndroid Device VisionCamera Version2.13.0 |
|
Dug in a bit and to help clarify, react-native-screens built react freeze and use it under the hood, but still they specify that it is opt in and one would need to call @mrousavy thanks for the feed back on |
|
I have some more insights here. I am pretty sure that the main issue is coming from react native screens (but not enableFreeze). I have other cases, where popped and unmounted Videos keep playing in the background even when the lifecycle methods report they have been unmounted. RNS is somehow always keeping the last view in the "system". And I think that is exactly what is happening here with the Camera. This is also explaining why memory is never freed again fully after the camera or a video was loaded. I think what we all have in common is that we are using enableScreens or native stack. Only the js-Stack with enableScreens disabled (extremely bad performance) is not having this issues. It looks like the detach mechanism is doing something bad. I wish I had the knowledge to find the issue, but I think that's where the problem is coming from. I found plenty of issues on the react-native-video repo and I think this is all connected to the same root problem (I am using expo-av though). The problem only happens with nested navigators. Screens inside a tab stack for example do not have this issue, but a modal or "overlayed" navigator (hierarchy above tabs) does introduce this issue. |
|
@Cavallando are you using, by any chance, I found the root cause - at least for me. It was enough for my App to have a single mounted element which has |
|
This worked for me (using
Hope this helps to you as well!! |
|
any proper solution here! |
|
I'm using version 2.14.1 and also have this issue. Looking at logcat, it seems as if the camera is running the whole time, although the screen is not visible. To my surprise, tapping the hardware button "Recent Apps" twice closes the camera properly. I attached the Log on pastebin. It would be nice if you could expose a ReactMethod to close the camera on Android side. Log excerpt: |
|
I solved this issue with the help of the suggestions in this thread, namely moving the camera component from a modal dialog into its own activity that can be navigated to and adding a 'beforeRemove' listener to @react-navigation/native: |
|
I think it would be helpful for a workaround if you could disable the camera using the ref. |
|
Hi, i am with the same error, any solutions? |
|
facing same error, tried @BdN3504 solution but didn't work. |
|
If you want off camera on unmounted component (blurred screen in react navigation) you need set isActive to false before unmount (navigating back) you component, very important wait for one render before unmount, so you need define close handler like this
Also I set All frameProcessor are shut down after that |
|
I'll investigate this more in the V3 efforts so that you don't need such a workaround and it unmounts smoothly. :) |
|
Using a tiny timeout after setting |
|
Thanks @andreyboberskiy - that helped in most cases for me. It doesn't seem to work when an error is thrown in the component that has the camera though, i've tried moving the camera component up the tree into an error boundary component but it still doesn't want to close. @mrousavy is there any hacky way of killing all camera instances without leaving the app? |
|
I ended up having to set the fallback to a component that renders a new camera component and then kill that one the same way as @andreyboberskiy described above - not a great solution but it will do for now |
|
hey! I'm hoping that V3 solves this, if the lifecycle gets killed, so should the Camera. React Freeze is always a culprit for me. |
|
I just simply did this thing
|
I confirm, this the clean solution to have fresh Camera state on each focus/blur event. |
|
This is now fixed in V3! 🥳 |
iOS green dot is still active on react navigation page back even with using useIsFocused (useIsFocused is not changes on page back). react-native-vision-camera: 3.6.4 |
|
That's weird - I am pretty sure I tested that... I'll try again later |
|
I'm having a similar problem, I cant get the camera to unmount. None of the above fixes unmounts the camera for me. Downgrading to 3.2.2 fixes the issue for me with the above fixes. react-native-vision-camera: 3.6.4 |
|
Hey! I just found out that I really forgot to close and dispose the locked Camera resources, so I just fixed that in this PR: #2174 There is still a small issue that causes once Camera component to turn into a blackscreen when navigating back and forth between two Camera components, that's a pretty rare edge case but I will still try to fix that soon when I have some free time. If you appreciate my time, expertise and dedication to this project, pleas 💖 consider sponsoring me on GitHub 💖 to support the development of this project. |
|
Is this fix (#2174) only for Android? What about iOS? |
|
I don't think the issue exists on iOS at the moment. At least for me, the Camera closes when I minimize the app. |
|
Finally, because import { useEffect, useState } from 'react';
import { useNavigation } from '@react-navigation/native';
const useIsFocused = () => {
const navigation = useNavigation();
const [isFocused, setIsFocused] = useState(false);
useEffect(() => {
return navigation.addListener('transitionEnd', () => {
setIsFocused(state => !state);
});
}, [navigation]);
return isFocused;
};
export default useIsFocused;I don't know how the camera works under the hood, but it seems like all camera instances are keep existing on page unmount. |
|
My project version is const device = useCameraDevice('back')
const [isActive, setIsActive] = useState(false);
const isFocused = useIsFocused()
const appState = useAppState()
useEffect(() => {
if (device) {
// Delaying the camera by one second to solve the black screen problem
const timeout = setTimeout(() => {
setIsActive(
isFocused && appState === "active")
}, 1000)
return () => clearTimeout(timeout)
}
}, [isFocused, appState])
<Camera
ref={camera}
style={[StyleSheet.absoluteFill, { backgroundColor: 'black', }]}
resizeMode='cover'
isActive={isActive}
device={device}
codeScanner={codeScanner}
torch={isLight ? 'on' : 'off'}
/> |
What were you trying to do?
We noticed that the Camera is still streaming frames even after the component is unmounted. This is made apparent by the green dot indicator in iOS. This appears to happen after we capture a video, take a snapshot or navigate away from the screen entirely.
I noticed an existing issue and docs where it was advised to set
isActiveto false which wouldn't work for us since we're using React navigation modals so the screen becomes unmounted.I confirmed the screen is actually getting unmounted through a useEffect cleanup function on our Camera component.
I also noticed from Vision Camera's API docs for
isActivethat unmounting should destroy the camera.Reproduceable Code
No response
What happened instead?
The camera never appears to stop using the devices camera unless we put the app in the background. After closing the modal and confirming it is no longer mounted, the green dot indicator still appears.
From the logs I see for Vision camera, it does not appear that
self.captureSession.stopRunning()ever gets called because when the screen unmounts I do not see the logs:Relevant log output
Device
iOS Devices
VisionCamera Version
2.11.2, 2.12.2
Additional information
The text was updated successfully, but these errors were encountered: