peer.on('call', function() ) not working.

[Vishmay11]

When I try to add a user to the room, The video of the new User does not appear on the screen, also my my video is not visible on the new User side. When I printed the each step, the print statement in the peer.on('call') event didn't work. Please help. Heres the full code.

Zoom-Clone-With-WebRTC-master.zip

[pradeepkpanja]

Hey I also have the same issue and going throgh inspect I found that the peerjs include libraray script file is not loading properly.

[thvphuc246]

I encounter this problem as well, it looks like the peer.call('another-peers-id', stream) command doesn't work. Is this still a case?

[sheikx1221]

The best way to solve this will be wait for open event on both ends. Although the docs says you can ignore the open event, waiting for this event ensures every client has peer id and call can be made. I have faced this issue and waiting for the open event solves this issue.

            console.log('Web Admin Peer Id: ',peer.id);
            navigator.mediaDevices.getUserMedia({
                video: true,
                audio: true
            }).then((stream)=>{
                console.log('LOCAL STREAM OF AUDIO ONLY!');
                console.log("CAlling DRIVER PEER ID: ",request.peerId);
                stream.getVideoTracks().forEach((track)=>{
                    track.stop();
                    track.enabled = false;
                });
                call = peer.call(request?.peerId as string, stream);
                call.on('stream',(UserMediaStream: MediaStream)=>{
                    console.log('stream received!');
                    setStreamReceived(true);
                    getDriverStream(UserMediaStream);
                });
                call.on('error',(error)=>{
                    console.log(error);
                })
                peer.on('call',(call)=>{
                    call.answer();
                });
                peer.on('error',(err)=>{
                    console.log(err);
                });
            }).catch(err=>{
                console.log(err);
                alert('Cannot get local microphone!');
            });
        });

[ASKNJ]

Hey , I am facing the same issue, everything like dataconnection is good but there is a problem in on call event listener. It is not triggering. Can you please explain something more on that. It would really be great. Thanks in advance!

The best way to solve this will be wait for open event on both ends. Although the docs says you can ignore the open event, waiting for this event ensures every client has peer id and call can be made. I have faced this issue and waiting for the open event solves this issue.

            console.log('Web Admin Peer Id: ',peer.id);
            navigator.mediaDevices.getUserMedia({
                video: true,
                audio: true
            }).then((stream)=>{
                console.log('LOCAL STREAM OF AUDIO ONLY!');
                console.log("CAlling DRIVER PEER ID: ",request.peerId);
                stream.getVideoTracks().forEach((track)=>{
                    track.stop();
                    track.enabled = false;
                });
                call = peer.call(request?.peerId as string, stream);
                call.on('stream',(UserMediaStream: MediaStream)=>{
                    console.log('stream received!');
                    setStreamReceived(true);
                    getDriverStream(UserMediaStream);
                });
                call.on('error',(error)=>{
                    console.log(error);
                })
                peer.on('call',(call)=>{
                    call.answer();
                });
                peer.on('error',(err)=>{
                    console.log(err);
                });
            }).catch(err=>{
                console.log(err);
                alert('Cannot get local microphone!');
            });
        });

[matiasmm]

I had this problem as well, and figured out I was not passing the stream object correctly to the peer.call('another-peers-id', stream). Instead, I was passing null. If you see this problem, add a console.log(stream) right before it and check whether It's a MediaStream object or not.

[manabsaha]

I hope you are doing this while a new user connects

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

You can add a timeout to make your code listen to 'stream' event of peer.

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

But this doesn't seem to be a good solution.

The reason 'stream' event is missed because it is fired before the new user completes the navigator media promise. When a new user connects, we are getting an userId from socket and we immediately call connectToNewUser(userId,stream) without waiting till the time new client finishes the promise.

One solution other than timeout could be emitting an socket event when the promise is fulfilled and sending another event from server to listen to it for (userId,roomId). This will then call the peer.on('stream',......) and finally we have the new client on the 'stream' we can listen to peer.on('call',....) for answering the call.

video.js

.then(stream=>{
...
....
socket.on('new-user-connected',userId =>{
        if(userId!=myPeer.id){
            console.log("New user: "+userId);
            connectToNewUser(userId,stream);
        }
})
....
...
 socket.emit('connection-request',roomId,myPeer.id);
});

And server.js New event added 'connection-request'.

socket.on('connection-request',(roomId,userId)=>{
        io.to(roomId).emit('new-user-connected',userId);
})

Remove the 'user-connected' socket event and replace it with new one in 'video.js' And you can also remove the io.to(roomId).emit('user-connected',userId); from 'server.js'

[ShinJustinHolly3317]

You

I hope you are doing this while a new user connects

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

You can add a timeout to make your code listen to 'stream' event of peer.

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

But this doesn't seem to be a good solution.

The reason 'stream' event is missed because it is fired before the new user completes the navigator media promise. When a new user connects, we are getting an userId from socket and we immediately call connectToNewUser(userId,stream) without waiting till the time new client finishes the promise.

One solution other than timeout could be emitting an socket event when the promise is fulfilled and sending another event from server to listen to it for (userId,roomId). This will then call the peer.on('stream',......) and finally we have the new client on the 'stream' we can listen to peer.on('call',....) for answering the call.

video.js

.then(stream=>{
...
....
socket.on('new-user-connected',userId =>{
        if(userId!=myPeer.id){
            console.log("New user: "+userId);
            connectToNewUser(userId,stream);
        }
})
....
...
 socket.emit('connection-request',roomId,myPeer.id);
});

And server.js New event added 'connection-request'.

socket.on('connection-request',(roomId,userId)=>{
        io.to(roomId).emit('new-user-connected',userId);
})

Remove the 'user-connected' socket event and replace it with new one in 'video.js' And you can also remove the io.to(roomId).emit('user-connected',userId); from 'server.js'

You are a life saver.

[Fanreza]

mine was work, but that if i focus on tab new users, if i still on the host screen, it wont run the call event

[mmarcmartins]

This really workout, thank you very much man.

I hope you are doing this while a new user connects

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

You can add a timeout to make your code listen to 'stream' event of peer.

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

But this doesn't seem to be a good solution.

The reason 'stream' event is missed because it is fired before the new user completes the navigator media promise. When a new user connects, we are getting an userId from socket and we immediately call connectToNewUser(userId,stream) without waiting till the time new client finishes the promise.

One solution other than timeout could be emitting an socket event when the promise is fulfilled and sending another event from server to listen to it for (userId,roomId). This will then call the peer.on('stream',......) and finally we have the new client on the 'stream' we can listen to peer.on('call',....) for answering the call.

video.js

.then(stream=>{
...
....
socket.on('new-user-connected',userId =>{
        if(userId!=myPeer.id){
            console.log("New user: "+userId);
            connectToNewUser(userId,stream);
        }
})
....
...
 socket.emit('connection-request',roomId,myPeer.id);
});

And server.js New event added 'connection-request'.

socket.on('connection-request',(roomId,userId)=>{
        io.to(roomId).emit('new-user-connected',userId);
})

Remove the 'user-connected' socket event and replace it with new one in 'video.js' And you can also remove the io.to(roomId).emit('user-connected',userId); from 'server.js'

[bharathmuppa]

this is still a issue for me. did anyone has a working project with peerjs and dpocker based peerjs server?