javascriptwebrtcpeerjs

PeerJs close video call not firing close event


I am trying to create a one-directional video app with PeerJs. I've succesfully been able to run my own peer server and connect on a button click, but I'm unable to close the connection so that the peers can receive/establish a new connection with a new peer.

Every user will either be a host or a client, it will never be backwards. So the host can choose which client to connect to and the client will start to stream its camera feed back to the host. The closeCon() function is called with a button click.

    $(document).ready(function(){
      peer = new Peer('100001', {host: 'my.url', port: '9900', path: '/peerjs', key: 'peerjs', secure: true, debug: 3});
      peer.on("open", function(id) {
          console.log("My peer ID is: " + id);
      });
        video = document.getElementById('vidSrc');
    })


    function callTheGuy(id){
      var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
      getUserMedia({video: true, audio: false}, function(stream) {
        window.call = peer.call(id, stream);
        localStream = stream;
        window.call.on('stream', function(remoteStream) {
          let video = document.getElementById('vidArea');
          video.srcObject = remoteStream;
          video.play();
          $("#videoModal").modal('show')
        });
      }, function(err) {
        console.log('Failed to get local stream' ,err);
      });
      }

      function closeCon(){
        window.call.close();
      }

This all works great, i get my video feed, no problem. Here is my client code:

peer = new Peer(serverId, {
    host: "my.url",
    port: "9900",
    path: "/peerjs",
    key: "peerjs",
    debug: 3,
    secure: true
});

peer.on("open", function(id) {
    console.log("My peer ID is: " + id);
});

var getUserMedia =
    navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia;
peer.on("call", function(call) {
    getUserMedia(
        { video: true, audio: false },
        function(stream) {
            localStream = stream;
            call.answer(stream); // Answer the call with an A/V stream.
        },
        function(err) {
            console.log("Failed to get local stream", err);
        }
    );
    call.on("close", function() {
        console.log("closing");
    });
});

The issue is that when I call closeCon(), the client file is not receiving the close event. The part of

call.on("close", function() {
        console.log("closing");
    });

never gets fired. I'm not really sure why this is happening but unless that close event gets processed, the client stays connected to the original host and can't accept connections from subsequent host requests. Does anyone have any advice?


Solution

  • Update on 7 Mar 2021

    I found that is an issue, PeerJs hasn't fixed yet. (Issue link: https://github.com/peers/peerjs/issues/636)

    You can trigger the close event in Socketio "disconnect" for a workaround solution

    Server

    socket.on("disconnect", (reason)=>{
            socket.broadcast.emit("user-disconnected", userId); 
        });
    

    Client

    socket.on("user-disconnected", (userId)=>{
            // remove video or add your code here
       });