title: Even when i have closed my PeerConnection I am seeing the black screen. Please help me with this problem
body: <p>Here's the Room.js Code on the Client Side of the Application!.
  I am maintaining two arrays one is peersRef and another is peers and all the videos are rendered from peers. While onClick button is called in destroying the peer but i guess some problem is there.</p>
  <pre><code>import React, { useEffect, useRef, useState } from &quot;react&quot;;
  import io from &quot;socket.io-client&quot;;
  import Peer from &quot;simple-peer&quot;;
  import styled from &quot;styled-components&quot;;
  
  const Container = styled.div`
      padding: 20px;
      display: flex;
      height: 100vh;
      width: 90%;
      margin: auto;
      flex-wrap: wrap;
  `;
  
  const StyledVideo = styled.video`
      height: 40%;
      width: 50%;
  `;
  
  const Video = (props) =&gt; {
      const ref = useRef();
  
      useEffect(() =&gt; {
          props.peer.on(&quot;stream&quot;, stream =&gt; {
              // console.log();
              ref.current.srcObject = stream;
          })
          // eslint-disable-next-line react-hooks/exhaustive-deps
      }, []);
  
      return (
              &lt;StyledVideo playsInline autoPlay ref={ref} /&gt;
      );
  }
  
  
  const videoConstraints = {
      height: window.innerHeight / 2,
      width: window.innerWidth / 2
  };
  
  const Room = (props) =&gt; {
  
  
      const{email} = props;
  
      console.log(email);
  
      const [peers, setPeers] = useState([]);
      const [audiomute,setAudioMute] = useState(true);
      const [videomute,setVideoMute]= useState(true);
      const [myID,setMyID] = useState('');
  
      const socketRef = useRef();
      const userVideo = useRef();
      const peersRef = useRef([]);
      const roomID = props.match.params.roomID;
  
      useEffect(() =&gt; {
          socketRef.current = io.connect(&quot;/&quot;);
          navigator.mediaDevices.getUserMedia({ video: videoConstraints, audio: false }).then(stream =&gt; {
              userVideo.current.srcObject = stream;
              socketRef.current.emit(&quot;join room&quot;, roomID);
              socketRef.current.on(&quot;all users&quot;, users =&gt; {
                  const peers = [];
                  users.forEach(userID =&gt; {
                      const peer = createPeer(userID, socketRef.current.id, stream);
                      peersRef.current.push({
                          peerID: userID,
                          peer,
                      })
                      peers.push(peer);
                  })
                  setPeers(peers);
              })
  
              socketRef.current.on(&quot;user joined&quot;, payload =&gt; {
                  const peer = addPeer(payload.signal, payload.callerID, stream);
                  peersRef.current.push({
                      peerID: payload.callerID,
                      peer,
                  })
  
                  setPeers(users =&gt; [...users, peer]);
              });
  
              socketRef.current.on(&quot;receiving returned signal&quot;, payload =&gt; {
                  const item = peersRef.current.find(p =&gt; p.peerID === payload.id);
                  item.peer.signal(payload.signal);
  
              });
  
              socketRef.current.on('user-disconnected',users=&gt;{
                  console.log(&quot;Event is called&quot;);
                  peers = users;  
              })
  
          });
          // eslint-disable-next-line react-hooks/exhaustive-deps
      }, []);
  
      function createPeer(userToSignal, callerID, stream) {
          const peer = new Peer({
              initiator: true,
              trickle: false,
              stream,
          });
          setMyID(userToSignal);
          peer.on(&quot;signal&quot;, signal =&gt; {
              socketRef.current.emit(&quot;sending signal&quot;, { userToSignal, callerID, signal })
          })
          // console.log(peer);
          console.log(peersRef.current);
          return peer;
      }
  
      function addPeer(incomingSignal, callerID, stream) {
          const peer = new Peer({
              initiator: false,
              trickle: false,
              stream,
          })
  
          peer.on(&quot;signal&quot;, signal =&gt; {
              socketRef.current.emit(&quot;returning signal&quot;, { signal, callerID })
          })
  
          peer.signal(incomingSignal);
          console.log(peersRef.current);
          return peer;
      }
  
      console.log(peers);
  
      const leavecall = ()=&gt;{
  
          for(let i =0;i&lt;peersRef.length;i++){
              if(peersRef.current[i].peerID===myID){
                  peersRef.current[i].peer.destroy();
                  peersRef.current.splice(i,1);
                  peers[i].destroy();
                  peers.splice(i,1);
                  break;
              }
          }
  
          console.log(peers);
          window.location = &quot;http://localhost:3000/&quot;;
      }
  
      const muteAudio=(e)=&gt;{
          e.preventDefault();
          console.log(&quot;Called&quot;)
          if(audiomute){
              navigator.mediaDevices.getUserMedia({ video: videoConstraints, audio: true });
          }
          else{
              navigator.mediaDevices.getUserMedia({ video: videoConstraints, audio: false })
          }
          setAudioMute(!audiomute);
          
      }
  
      // const MuteVideo=(e)=&gt;{
      //     e.preventDefault();
      //     setVideoMute(!videomute);
      //     navigator.mediaDevices.getUserMedia({ video: variable, audio: false })
      // }
  
  
      return (
          &lt;Container&gt;
              &lt;StyledVideo muted ref={userVideo} autoPlay playsInline /&gt;
              {peers.map((peer, index) =&gt; {
                  return (
                      &lt;&gt;
                          &lt;Video key={index++} peer={peer} /&gt;
                      &lt;/&gt;
                  );
              })}
  
                          &lt;button className=&quot;btn btn-danger&quot; onClick={leavecall}&gt;Hangup&lt;/button&gt;
          &lt;/Container&gt;
      );
  };
  
  export default Room;
  </code></pre>
  <p>Here is the Server side code!</p>
  <pre><code>require('dotenv').config();
  const express = require(&quot;express&quot;);
  const http = require(&quot;http&quot;);
  const app = express();
  const server = http.createServer(app);
  const socket = require(&quot;socket.io&quot;);
  const cors = require(&quot;cors&quot;);
  const io = socket(server);
  
  
  app.use(cors());
  const users = {};
  
  const socketToRoom = {};
  
  io.on('connection', socket =&gt; {
      socket.on(&quot;join room&quot;, roomID =&gt; {
          if (users[roomID]) {
              const length = users[roomID].length;
              if (length === 4) {
                  socket.emit(&quot;room full&quot;);
                  return;
              }
              users[roomID].push(socket.id);
          } else {
              users[roomID] = [socket.id];
          }
          socketToRoom[socket.id] = roomID;
          const usersInThisRoom = users[roomID].filter(id =&gt; id !== socket.id);
  
          socket.emit(&quot;all users&quot;, usersInThisRoom);
      });
  
      socket.on(&quot;sending signal&quot;, payload =&gt; {
          io.to(payload.userToSignal).emit('user joined', { signal: payload.signal, callerID: payload.callerID });
      });
  
      socket.on(&quot;returning signal&quot;, payload =&gt; {
          io.to(payload.callerID).emit('receiving returned signal', { signal: payload.signal, id: socket.id });
      });
  
      socket.on('disconnect', () =&gt; {
          const roomID = socketToRoom[socket.id];
          let room = users[roomID];
          console.log(users);
          if (room) {
              room = room.filter(id =&gt; id !== socket.id);
              users[roomID] = room;
          }
          io.to(roomID).broadcast.emit('user-disconnected',users);
          console.log(users);
  
      });
  
  });
  
  server.listen(process.env.PORT || 8000, () =&gt; console.log('server is running on port 8000'));
  
  
  
  </code></pre>
  <p><a href="https://i.stack.imgur.com/7wayr.png" rel="nofollow noreferrer">Here's what is seen when i disconnect from other tab the video element should completely gone but this isn't happening</a></p>
  <p>Your help is much appreciated.</p>