title: can't do video chat with peer.js
body: <p>I'm following <a href="https://dev.to/arjhun777/video-chatting-and-screen-sharing-with-react-node-webrtc-peerjs-18fg" rel="nofollow noreferrer">this website</a> to make a video call in react.
  I slightly changed the code in connection.js for my pure javascript project, but other files are same as the tutorial.
  Here is my connection.js</p>
  <pre><code>import openSocket from 'socket.io-client';
  import Peer from 'peerjs';
  
  
  let socketInstance = null;
  let peers = {};
  
  
  const initializePeerConnection = () =&gt; {
      return new Peer('', {
          host: 'localhost', 
          port: 9000,                
          secure: false //secure=true is https and wss. secure=false is http and ws
      });
      //return new Peer()
  }
  const initializeSocketConnection = () =&gt; {
      const socket = openSocket('http://localhost:5000');
      return socket
  }
  class Connection {
      videoContainer = {};
      message = [];
      settings;
      streaming = false;
      myPeer;
      socket;
      myID = '';
      constructor(settings) {
          this.settings = settings;
          this.myPeer = initializePeerConnection();
          this.socket = initializeSocketConnection();
          this.initializeSocketEvents();
          this.initializePeersEvents();
      }
      initializeSocketEvents = () =&gt; {
          this.socket.on('connect', () =&gt; {
              console.log('socket connected');
          });
          this.socket.on('user-disconnected', (userID) =&gt; {
              console.log('user disconnected-- closing peers', userID);
              peers[userID] &amp;&amp; peers[userID].close();
              this.removeVideo(userID);
          });
          this.socket.on('disconnect', () =&gt; {
              console.log('socket disconnected --');
          });
          this.socket.on('error', (err) =&gt; {
              console.log('socket error --', err);
          });
      }
      initializePeersEvents = () =&gt; {
          this.myPeer.on('open', (id) =&gt; {
              this.myID = id;
              const roomID = window.location.pathname.split('/')[2];
              const userData = {
                  userID: id, roomID
              }
              console.log('mydata::', userData)
              this.socket.emit('join-room', userData);
              this.setNavigatorToStream();
          });
          this.myPeer.on('error', (err) =&gt; {
              console.log('peer connection error', err);
              this.myPeer.reconnect();
          })
      }
      setNavigatorToStream = () =&gt; {
          this.getVideoAudioStream().then((stream) =&gt; {
              if (stream) {
                  this.streaming = true;
                  this.createVideo({ id: this.myID, stream });
                  this.setPeersListeners(stream);
                  this.newUserConnection(stream);
              }
          })
      }
      getVideoAudioStream = (video=true, audio=true) =&gt; {
          let quality = this.settings.params?.quality;
          if (quality) quality = parseInt(quality);
          const myNavigator = navigator.mediaDevices.getUserMedia || 
          navigator.mediaDevices.webkitGetUserMedia || 
          navigator.mediaDevices.mozGetUserMedia || 
          navigator.mediaDevices.msGetUserMedia;
          return myNavigator({
              video: video ? {
                  frameRate: quality ? quality : 12,
                  noiseSuppression: true,
                  width: {min: 640, ideal: 1280, max: 1920},
                  height: {min: 480, ideal: 720, max: 1080}
              } : false,
              audio: audio,
          });
      }
      createVideo = (createObj) =&gt; {
          console.log('video created')
          if (!this.videoContainer[createObj.id]) {
              this.videoContainer[createObj.id] = {
                  ...createObj,
              };
              const roomContainer = document.getElementById('room-container');
              const videoContainer = document.createElement('div');
              const video = document.createElement('video');
              video.srcObject = this.videoContainer[createObj.id].stream;
              video.id = createObj.id;
              video.autoplay = true;
              if (this.myID === createObj.id) {
                  video.muted = true;
                  video.className = 'my_video'
              }
              videoContainer.appendChild(video)
              roomContainer.append(videoContainer);
          } else {
              const video = document.getElementById(createObj.id)
              video.srcObject = createObj.stream
          }
      }
      setPeersListeners = (stream) =&gt; {
          //stream is my stream
          this.myPeer.on('call', function(call) {
              console.log('answered!!')
              call.answer(stream);
              call.on('stream', (userVideoStream) =&gt; {
                  console.log('user stream data', userVideoStream)
                  this.createVideo({ id: call.metadata.id, stream: userVideoStream });
              });
              call.on('close', () =&gt; {
                  console.log('closing peers listeners', call.metadata.id);
                  this.removeVideo(call.metadata.id);
              });
              call.on('error', () =&gt; {
                  console.log('peer error ------');
                  this.removeVideo(call.metadata.id);
              });
              peers[call.metadata.id] = call;
          });
      }
      newUserConnection = (stream) =&gt; {
          //stream is my stream
          this.socket.on('new-user-connect', (userData) =&gt; {
              this.connectToNewUser(userData, stream);
          });
      }
      connectToNewUser(userData, stream) {
          console.log('connectTonewUser is called')
          const { userID } = userData;
          const call = this.myPeer.call(userID, stream, { metadata: { id: this.myID }} );
          console.log('your data:: new user connected', userData)
          call.on('stream', (userVideoStream) =&gt; {
              //userVideoStream is your stream
              console.log('your stream::', userVideoStream)
              this.createVideo({ id: userID, stream: userVideoStream, userData });
          });
          call.on('close', () =&gt; {
              console.log('closing new user', userID);
              this.removeVideo(userID);
          });
          call.on('error', () =&gt; {
              console.log('peer error ------')
              this.removeVideo(userID);
          })
          peers[userID] = call;
      }
      removeVideo = (id) =&gt; {
          delete this.videoContainer[id];
          const video = document.getElementById(id);
          if (video) video.remove();
      }
      destroyConnection = () =&gt; {
          const myMediaTracks = this.videoContainer[this.myID]?.stream.getTracks();
          myMediaTracks?.forEach((track) =&gt; {
              track.stop();
          })
          socketInstance?.socket.disconnect();
          this.myPeer.destroy();
      }
  }
  
  export default function createSocketConnectionInstance(settings={}) {
      return socketInstance = new Connection(settings);
  }
  </code></pre>
  <p>It is confirmed that both two clients are connected to peer.js and the sockets are also connected.</p>
  <p>However, after I called in connectToNewUser, it seems to not answer in setPeersListeners.</p>
  <p>I think the shape of video call function is quite same as <a href="https://peerjs.com/docs.html" rel="nofollow noreferrer">peerjs doc</a></p>
  <p>Do you have any ideas why it doesn't work?
  Thank you :)</p>