Camera active even on route change

[rahuld109]

Hi all, could somebody please help me determine the root cause of this behavior? I have gone through the wiki for any fix but have not been able to figure it out.

How to replicate the issue?

1. Checkout the sandbox I have created Sandbox
2. Open the output in a new window
3. Navigate to the Human route ( wait for the webcam to be active )
4. Get back to the Home route

After these steps, you will find that the webcam indicator is still active even though we have navigated to a different route.

[vladmandic]

its a sandbox dev, it doesn't behave like a proper browser tab. when you navigate away from the page using browser location, camera turns off. even in sandbox, it turns off first time i click "home", but not second which means sandbox is trying to be "clever". its a sandbox thing, i don't see library doing anything wrong here.
if you see anything like that in a real environment, report an issue and i'll look into it asap.

[rahuld109]

Thanks for the response but I got this behavior in my local and production codebase. Hence, I replicated it in the sandbox for easy sharing and confirmation. If I'm not missing something in my implementation then I can file the issue.

[vladmandic]

just like what i wrote about sandbox, framework such as react fake a lot of stuff to achieve what they consider better user experience, so even if you navigate to different route, react may choose to still keep original one cached and thus as far as library is concerned, you never navigated somewhere else. and yes, react is notorios for that.

there are tons of articles how you should use react-router and subscribe to events so component can deactive itself, etc...
react sometimes makes things just unnecessarily complicated

[rahuld109]

The problem was caused by React 18's useEffect function triggering a double mount, which resulted in the getUserMedia function being called twice and creating separate streams. To fix this, I implemented a caching system for the streams and stopped them on each unmount. Feel free to check out the sandbox

[vladmandic]

Ahh, the infamous double mount in dev mode, but doesn't happen in prod. Yeah, not a fan of React.

[rahuld109]

On production i have a brightness detection running whose stream was not being cleared properly. I’m not a fan either but its not a bad choice either. By the way, do have any suggestions of library working with audio for sentiment analysis and flaw detection with tfjs? I would like to couple it with human.

[vladmandic]

i don't, sorry. haven't done much work with audio.