Camera disabling on Component Unmount

[Herman]

I have a case when i need to switch off WebCamera after user leave chat page. Switched on green light is annoying and scares my users.

So i've tried:

// ... somewhere in my Session component
  const useMicrophoneAndCameraTracks = useMemo(
    _ => createMicrophoneAndCameraTracks()
  , [])

  const {
    ready,
    tracks,
    error } = useMicrophoneAndCameraTracks()

// Disable camera on component unmount
useEffect(_ => 
   _ => {
       await client.leave()
       client.removeAllListeners()
       // here i try to disable them
       tracks[0].close()
       tracks[1].close()   
   }
)

But the tracks are also null... because:

Somewhere in index.tsx

      return () => {
        tracks = null
      }

... So what is better to create PR or just to make a local fix. And if creating a PR would it be ok i disable tracks manually in Effect?

[Ekaansh Arora]

The return statement contains useEffect cleanup which is triggered when component is unmounted. You should be able to close the tracks in your application lifecycle. In the sample app we do this:

const leaveChannel = async () => {
    await client.leave();
    client.removeAllListeners();
    // we close the tracks to perform cleanup
    tracks[0].close();
    tracks[1].close();
    // the camera light should go off
    setStart(false);
    setInCall(false);
   // you can now unmount the component if required
  };

The API is designed to set the tracks to null so that if the component is unmounted and mounted again, it'll create the tracks again. We let the user handle closing the tracks depending on their app's lifecycle.

[Herman]

The return statement contains useEffect cleanup which is triggered when component is unmounted. You should be able to close the tracks in your application lifecycle. In the sample app we do this:

const leaveChannel = async () => {
    await client.leave();
    client.removeAllListeners();
    // we close the tracks to perform cleanup
    tracks[0].close();
    tracks[1].close();
    // the camera light should go off
    setStart(false);
    setInCall(false);
   // you can now unmount the component if required
  };

The API is designed to set the tracks to null so that if the component is unmounted and mounted again, it'll create the tracks again. We let the user handle closing the tracks depending on their app's lifecycle.

But you actually call it on button click while component is mounted, when the component will unmount the tracks are null, because in useEffect hook you set tracks = null, as i showed a message below. And after you leave the page where useMicrophoneAndCameraTracks is mounted the camera is still works. I can't make users have to push "end button" every time they want to navigate other page.