How is the video stream still making it to the peerConnection although I disabled it?

Question

I'm working on a peer to peer webrtc project using react, hooks, and redux. When I make modifications such as disabling the video, I don't see it on the local video, but I continue to see the stream on the remote video as if I never disbaled anything. If I disable my video, then my screen should be black and so should my peer's screen, but instead, my screen is black, but I'm still streaming video from the camera to the peer. What am I doing wrong?

useEffect(()=>{
    (async ()=>{

      let stream = await navigator.mediaDevices.getUserMedia({audio:false, video: true})
      console.log('RAN!');

      // {hide} being handled by redux
      if(hide) stream.getVideoTracks()[0].enabled = false;
      
      //LOCAL VIDEO BLANK AS IT SHOULD BE
      if(localRef?.current) localRef.current.srcObject = stream;
      
      stream.getTracks().forEach(track =>{
        peerConnection.addTrack(track, stream)
      })
  
      peerConnection.ontrack = (e) =>{
        //REMOTE VIDEO IS NOT BLANK. But I'm disabling it using {hide} 
        if(remoteVideoRef) remoteVideoRef.current.srcObject = e.streams[0] 
    }
    })()
  },[hide])

Answer 1

Thanks Philipp. That suggestion worked wonders. I had to set the stream outside and make changes to it inside the hook. Here's the working version for anyone that may need it in the future:

const [mediaStream, setMediaStream] = useState<MediaStream | null>(null);

useEffect(() => {
    // peerConnection.getSenders()[0].replaceTrack(track) 
    navigator.mediaDevices
        .getUserMedia({ video: true, audio: false })
        .then((stream) => {
            setMediaStream(stream);
        });

    //needed to trigger re-render so we get get the new stream;
}, [hide, muted]);

useEffect(() => {
    if (mediaStream) mediaStream.getVideoTracks()[0].enabled = !hide;
    //handle hiding
    mediaStream?.getVideoTracks().forEach((track) => {
        if (peerConnection.getSenders().length) {
            peerConnection.getSenders()[0].replaceTrack(track);
        } else {
            peerConnection.addTrack(track, mediaStream);
        }
    });

    localRef.current.srcObject = mediaStream;
    peerConnection.ontrack = (e) => {
        let [remoteStream] = e.streams;
        remoteVideoRef.current.srcObject = remoteStream;
    };
});