javascript - PeerJs close video call not firing close event - Stack Overflow

admin管理员组

文章数量:1303063

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?

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?

• javascript
• webrtc
• peerjs

Share Improve this question Follow asked Nov 2, 2020 at 19:15 maximus1127maximus1127 1,0361616 silver badges3636 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

I ran into the issue after discovering my peerConnections continued to send stream data using chrome://webrtc-internals. I am currently using the public peerjs server. The MediaConnection does not fire the close event, but the DataConnection still class does. My particular flow waits for the remote to initiate a (data)connection and then starts a call.

I was able too close the MediaConnection by:

1. opening both a DataConnection and a MediaConnection to a remote peer
2. monitoring the MediaConnection close event
3. Closing all WebRTCpeerConnections after as part of the DataConnection close handler

This looks like:

function handlePeerDisconnect() {
  // manually close the peer connections
  for (let conns in peer.connections) {
    peer.connections[conns].forEach((conn, index, array) => {
      console.log(`closing ${conn.connectionId} peerConnection (${index + 1}/${array.length})`, conn.peerConnection);
      conn.peerConnection.close();

      // close it using peerjs methods
      if (conn.close)
        conn.close();
    });
  }
}

peer.on('connection', conn => {
    let call = peer.call(peerToCall, localStream);
   
    // peerjs bug prevents this from firing: https://github./peers/peerjs/issues/636
    call.on('close', () => {
        console.log("call close event");
        handlePeerDisconnect();
    });
}

    // this one works
    conn.on('close', () => {
        console.log("conn close event");
        handlePeerDisconnect();
    });
});

Update on 7 Mar 2021

I found that is an issue, PeerJs hasn't fixed yet. (Issue link: https://github./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
   });

No, it fires the close event. but you first do as follows:

1. server

     socket.on('disconnect', () =>{
            socket.broadcast.to(roomId).emit('user-disconnected', userId);
        })
   

2. client

    const peers = {};
        function connectToNewUser (userId, stream){
        ...

        call.on('close', () =>{
            video.remove();
        })

      
        
        peers[userId] = call;

    }

and then in client emit the event:

socket.on('user-disconnected', userId =>{
        console.log(userId);
        if (peers[userId]){
            peers[userId].close();
        }
        
    })

本文标签： javascriptPeerJs close video call not firing close eventStack Overflow