toggle remote camera is not update

[Mrezagolbaba]

we want to toggle remote participants for show their avatar id disable in first attempt but when we want to enable again it doesn’t work I think this useEffect doesn’t trigger for next time do we have any other properties when the remote participant change the camera or mic?

useEffect(() => {   
      if (room) {
        setParticipants([]);
    
        const participantConnected = (participant: any) => {
          setParticipants((prevParticipants): any => [...prevParticipants, participant]);
        };
    
        const participantDisconnected = (participant: any) => {
          setParticipants((prevParticipants) => prevParticipants.filter((p) => p !== participant));
        };
    
        let trackDisabledEnabled = false; // Flag to control event registration
    
        const trackDisabled = (track: any, participant: any) => {
          if (track.kind === 'video') {
            // Handle the remote user disabling their video
            setRemoteCamStatus(true);
          }
        };
    
        const trackEnabled = (track: any, participant: any) => {
          if (track.kind === 'video') {
            // Handle the remote user enabling their video
            setRemoteCamStatus(false);
          }
        };
    
        room.on('participantConnected', participantConnected);
        room.on('participantDisconnected', participantDisconnected);
    
        // Register trackDisabled and trackEnabled event listeners conditionally
        if (!trackDisabledEnabled) {
          room.on('trackDisabled', trackDisabled);
          room.on('trackEnabled', trackEnabled);
          trackDisabledEnabled = true;
        }
    
        room?.participants.forEach(participantConnected);
    
        return () => {
          room.off('participantConnected', participantConnected);
          room.off('participantDisconnected', participantDisconnected);
          room.off('trackDisabled', trackDisabled);
          room.off('trackEnabled', trackEnabled);
        };
      }
    }, [room])

we used Next js and Typescript in this code

[manjeshbhargav]

Hi @Mrezagolbaba ,

Sorry for the delayed response. Can you try listening to the enabled and disabled events on the RemoteVideoTrack instead of the events on the Room? Please let me know if that works.

[Mrezagolbaba]

Hi @manjeshbhargav thanks I check this method but it doesn’t work

      const trackDisabled = (track, participant) => {
            if (track.kind === 'video') {
                // Handle the remote user disabling their video
                setRemoteCamStatus(true);
            }
        };
        const trackEnabled = (track, participant) => {
            if (track.kind === 'video') {
                // Handle the remote user enabling their video
                setRemoteCamStatus(false);
            }
        };
        RemoteVideoTrack.on( 'enabled' , trackEnabled );
        RemoteVideoTrack.on( 'disabled' , trackDisabled );

[Mrezagolbaba]

based on documentation, I found this solution it works on my code

   const handleTrackDisabled=(track:any)=> {
           track.on('disabled', () => {
             
             setRemoteCamStatus(true);
           });
           track.on('enabled', () => {
               setRemoteCamStatus(false);
             });
         }
         
         room.participants.forEach((participant: { tracks: any[]; }) => {
           participant.tracks.forEach(publication => {
             if (publication.isSubscribed) {
               handleTrackDisabled(publication.track);
             }

             publication.on('subscribed', handleTrackDisabled);
           });
         });
         ```