need to add breakpoint or setTimeout method to get it work

[monthAndEclipse]

I run the code locally, use chrome to vist http://localhost:3000/ , and it redirect to the room address 'http://localhost:3000/fe3b88cb-8749-44a4-ab6e-aed79bd23fe4' .
then I open another tab in incognito mode with the same room address, but I can only see one video element in each tab .

F12, open my devtool , and add breakpoint on this line (in both two tab) ,refresh one of the page.

  socket.on('user-connected', userId => {
   connectToNewUser(userId, stream) //add breakpoint 
  })

the program stop at this line ,I resume. then there are two video element, it works!

I was thinking there migth be a race problem. the connectToNewUser get executed before the myPeer.on('call') , so I add a setTimeout method.

  socket.on('user-connected', userId => {
    setTimeout(connectToNewUser,1000,userId,stream)
  })

function connectToNewUser(userId, stream) {
  //send my own stream to other user
  const call = myPeer.call(userId, stream)
  const video = document.createElement('video')
  //receive remotestream from someone else 
  call.on('stream', userVideoStream => {
    addVideoStream(video, userVideoStream)
  })
  call.on('close', () => {
    video.remove()
  })

  peers[userId] = call
}

and this time , without adding the breakpoint , there are two video elements in each tab.

does anyone have any ideas about what's happening here or is there a better solution in this case?
cause it seems setTimeout it's a bad practice .

[ArmanHZ]

Thanks. I was also facing the same problem. The myPeer.on("call") methods was also not getting triggered so I taught there was a problem with PeerJS.

This fixes the issue.

[ssshake]

I believe the issue is a race condition between then the peer connection is ready and when the webcam/usermedia promise resolved.

Because of this, the other peers try to call the new users before they've subscribed to the on.call event.

A cheap solution is moving the entire user media promise chain into the on.open event.

myPeer.on('open', id => {
    navigator.mediaDevices.getUserMedia({
        video: true,
        audio: true
      }).then(stream => {
          console.log("__Webcam Ready")
          
          addVideoStream(myVideo, stream)
      
        myPeer.on('call', call => {
          console.log("INCOMING CALL")
          call.answer(stream)
          const video = document.createElement('video')
          call.on('stream', userVideoStream => {
            addVideoStream(video, userVideoStream)
          })
        })
      
        socket.on('user-connected', userId => {
          connectToNewUser(userId, stream)
        })

        console.log("__Peer Open")
        socket.emit('join-room', ROOM_ID, id)
      })    
})

[antonio-leblanc]

Thanks. I was facing the same problem, your Timeout solution fixed it :)

  socket.on('user-connected', userId => {
    setTimeout(connectToNewUser,1000,userId,stream)
  })

[igorumeda]

I believe the issue is a race condition between then the peer connection is ready and when the webcam/usermedia promise resolved.

Because of this, the other peers try to call the new users before they've subscribed to the on.call event.

A cheap solution is moving the entire user media promise chain into the on.open event.

myPeer.on('open', id => {
    navigator.mediaDevices.getUserMedia({
        video: true,
        audio: true
      }).then(stream => {
          console.log("__Webcam Ready")
          
          addVideoStream(myVideo, stream)
      
        myPeer.on('call', call => {
          console.log("INCOMING CALL")
          call.answer(stream)
          const video = document.createElement('video')
          call.on('stream', userVideoStream => {
            addVideoStream(video, userVideoStream)
          })
        })
      
        socket.on('user-connected', userId => {
          connectToNewUser(userId, stream)
        })

        console.log("__Peer Open")
        socket.emit('join-room', ROOM_ID, id)
      })    
})

God

[KsHuyZ]

I believe the issue is a race condition between then the peer connection is ready and when the webcam/usermedia promise resolved.

Because of this, the other peers try to call the new users before they've subscribed to the on.call event.

A cheap solution is moving the entire user media promise chain into the on.open event.

myPeer.on('open', id => {
    navigator.mediaDevices.getUserMedia({
        video: true,
        audio: true
      }).then(stream => {
          console.log("__Webcam Ready")
          
          addVideoStream(myVideo, stream)
      
        myPeer.on('call', call => {
          console.log("INCOMING CALL")
          call.answer(stream)
          const video = document.createElement('video')
          call.on('stream', userVideoStream => {
            addVideoStream(video, userVideoStream)
          })
        })
      
        socket.on('user-connected', userId => {
          connectToNewUser(userId, stream)
        })

        console.log("__Peer Open")
        socket.emit('join-room', ROOM_ID, id)
      })    
})

It's working with me, but create 1 video undefined