title: Problem with STUN/TURN servers in WEBRTC video app made in MERN stack
body: <p>I have hosted a peer to peer meeting react app on netlify. I have used Peerjs for my video purpose. Everything is working as expected except the video. For some networks the video of the the remote person is working and for some others it is not working. I looked up and found out that it may be a STUN/TURN issue. I then implemented all the STUN/TURN servers in my code. However the video is still not getting setup in some cases. In some cases it is working fine, in others the video is not showing up. Herewith, I am attaching th code for the video and the link to the site.</p>
  <pre><code>import React,{useEffect,useState} from 'react';
  import {io} from &quot;socket.io-client&quot;;
  import {useParams} from 'react-router-dom';
  import {Grid} from &quot;@material-ui/core&quot;;
  import Peer from 'peerjs';
  var connectionOptions =  {
  &quot;force new connection&quot; : true,
  &quot;reconnectionAttempts&quot;: &quot;Infinity&quot;, 
  &quot;timeout&quot; : 10000,                  
  &quot;transports&quot; : [&quot;websocket&quot;]
  };
  const Videobox = ({isVideoMute,isAudioMute}) =&gt; {
  
  
  var myPeer = new Peer(
    {
      config: {'iceServers': [
        {urls:'stun:stun01.sipphone.com'},
        {urls:'stun:stun.ekiga.net'},
        {urls:'stun:stun.fwdnet.net'},
        {urls:'stun:stun.ideasip.com'},
        {urls:'stun:stun.iptel.org'},
        {urls:'stun:stun.rixtelecom.se'},
        {urls:'stun:stun.schlund.de'},
        {urls:'stun:stun.l.google.com:19302'},
        {urls:'stun:stun1.l.google.com:19302'},
        {urls:'stun:stun2.l.google.com:19302'},
        {urls:'stun:stun3.l.google.com:19302'},
        {urls:'stun:stun4.l.google.com:19302'},
        {urls:'stun:stunserver.org'},
        {urls:'stun:stun.softjoys.com'},
        {urls:'stun:stun.voiparound.com'},
        {urls:'stun:stun.voipbuster.com'},
        {urls:'stun:stun.voipstunt.com'},
        {urls:'stun:stun.voxgratia.org'},
        {urls:'stun:stun.xten.com'},
        {
          urls: 'turn:numb.viagenie.ca',
          credential: 'muazkh',
          username: 'webrtc@live.com'
        },
        {
          urls: 'turn:192.158.29.39:3478?transport=udp',
          credential: 'JZEOEt2V3Qb0y27GRntt2u2PAYA=',
          username: '28224511:1379330808'
        },
        {
          urls: 'turn:192.158.29.39:3478?transport=tcp',
          credential: 'JZEOEt2V3Qb0y27GRntt2u2PAYA=',
          username: '28224511:1379330808'
        }
      ]} /* Sample servers, please use appropriate ones */
    }
  );
  const peers = {}
  const [socket, setSocket] = useState()
  const {id:videoId} = useParams();
  const videoGrid = document.getElementById('video-grid')
  
  useEffect(()=&gt; {
      const s=io(&quot;https://weconnectbackend.herokuapp.com&quot;,connectionOptions);
      setSocket(s);
      return () =&gt; {
        s.disconnect();
      }
    },[])
  
  // let myVideoStream;
  const [myVideoStream, setmyVideoStream] = useState()
  const muteUnmute = () =&gt; {
    const enabled = myVideoStream.getAudioTracks()[0].enabled;
    if (enabled) {
      myVideoStream.getAudioTracks()[0].enabled = false;
      //setUnmuteButton();
    } else {
      //setMuteButton();
      myVideoStream.getAudioTracks()[0].enabled = true;
    }
  }
  
  const playStop = () =&gt; {
    //console.log('object')
    let enabled = myVideoStream.getVideoTracks()[0].enabled;
    if (enabled) {
      myVideoStream.getVideoTracks()[0].enabled = false;
      //setPlayVideo()
    } else {
      //setStopVideo()
      myVideoStream.getVideoTracks()[0].enabled = true;
    }
  }
  useEffect(() =&gt; {
    if(myVideoStream)
      playStop()
  }, [isVideoMute])
  useEffect(() =&gt; {
    if(myVideoStream)
      muteUnmute()
  }, [isAudioMute])
  
  useEffect(() =&gt; {
      
    if(socket== null)
        return;
    myPeer.on('open',id=&gt;{
      socket.emit('join-room',videoId,id);
    })
    const myVideo = document.createElement('video')
    myVideo.muted = true
    navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    }).then(stream =&gt; {
      // myVideoStream = stream;
      window.localStream=stream;
      setmyVideoStream(stream);
      console.log(myVideoStream,&quot;myvideostream&quot;);
      addVideoStream(myVideo, stream)
      myPeer.on('call', call =&gt; {
        call.answer(stream)
        const video = document.createElement('video')
        call.on('stream', userVideoStream =&gt; {
          addVideoStream(video, userVideoStream)
        })
      })
    
      socket.on('user-connected',userId =&gt;{
        connectToNewUser(userId, stream)
      })
  
      socket.on('user-disconnected', userId =&gt; {
        if (peers[userId]) peers[userId].close()
      })
    })
    
  }, [socket,videoId])
  
  
  function addVideoStream(video, stream) {
    video.srcObject = stream
    video.addEventListener('loadedmetadata', () =&gt; {
      video.play()
    })
    videoGrid.append(video)
  }
  
  function connectToNewUser(userId, stream) {
    const call = myPeer.call(userId, stream)
    const video = document.createElement('video')
    
    call.on('stream', userVideoStream =&gt; {
      addVideoStream(video, userVideoStream)
    })
    call.on('close', () =&gt; {
      video.remove()
    })
  
    peers[userId] = call
  }
  
  return (
  
      &lt;div id=&quot;video-grid&quot; className=&quot;videoStyleFromDiv&quot;&gt;
          {/* &lt;Video srcObject={srcObject}/&gt; */}
      &lt;/div&gt;
    
  )
  }
  
  export default Videobox
  </code></pre>
  <p><a href="https://we-con-nect.netlify.app/" rel="nofollow noreferrer">Website Link</a></p>