Video track accessed by multiple <AgoraVideoPlayer /> components: track.stop() / track.close() does not turn off camera light

[sunweiyang]

For my company's web app, we need to have the local camera's video accessible by both our main video chat interface and our video chat settings popup modal (see screenshot below).

To try to accomplish this, we create tracks in our parent component using

const useMicrophoneAndCameraTracks = createMicrophoneAndCameraTracks(
  { AEC: true, ANS: true },
  { optimizationMode: "motion" }
);

and

const { ready, tracks } = useMicrophoneAndCameraTracks();

From this, our video track is tracks[1], which is used in both our main video chat interface's component and our video chat settings popup modal's <AgoraVideoPlayer /> component (passed in as props).

However, the problem is that we then fail to turn off the camera (and camera light) after we dismount the parent component:

  useEffect(() => {
    ...
    return () => {
        for (const track of tracks) {
          track.stop();
          track.close();
        }
    }, []);

We do confirm that the camera and camera light does turn off if we only use the track in only one single <AgoraVideoPlayer />

How can we ensure that the light turns off when the parent component is dismounted? Or if this is not the right approach, what should we do instead?

[EkaanshArora]

can you submit a simple reproduction?

[jonah-katz]

+1

[Muhammad406]

@jonah-katz @sunweiyang you need to manually turn off local video and local audio tracks.

localVideoTrack.close() localAudioTrack.close()

[jonah-katz]

@Muhammad406 Ya, I have that. Still green light

[Muhammad406]

@jonah-katz could you share the leaveChannel() (the part where you end the call) code snippet?

[jonah-katz]

@Muhammad406 sure

[Muhammad406]

@jonah-katz try replicating this form, and see if this works.

` const leaveChannel = async () => {

await client.leave()
client.removeAllListeners()

tracks && tracks[0].close()
tracks && tracks[1].close()

setHasJoined(false)
setIsScreenSharing(false)
setInCall(false)

localAudioTrack?.close()
localVideoTrack?.close()

}`

[jonah-katz]

@Muhammad406 What are setHasJoined, setIsScreenSharing, and setInCall? Also, what is localAudioTrack? Isn't that the same as tracks[0]?

[Muhammad406]

@jonah-katz those are the state hooks i used for joining the call or turning on the screen-sharing. Also make the client leave first and removeAllListeners. Then close the tracks.

yes, but i did this because i had to pass it as prop to screensharing component as well. So i needed to close those tracks as well. The reason your green light dont go off is because your tracks arent getting removed, which means it is still persisting somewhere, thats where you to close it. Also try changing the order of the code line in onleaveGame()