无法关闭 peerjs 上的对等方之间的连接

Question

我正在尝试制作视频聊天应用，它适用于 peerjs。现在我想添加一些功能来处理一些场景，比如如果连接被用户破坏，连接到他的其他用户会收到通知。

这是我调用其他用户的代码：

 call(userId: string, partnerId: string) {
    const conn = this.peer.connect(partnerId);
    conn.on('open', () => {
      conn.on('data', (data) => {
        console.log(data);
      })
      conn.send(userId);
    })
    if (this.peer.destroyed) {
      this.createPeer(this.userId);
    }

    if (this.myEl.classList.contains('disableCall')) {
      console.log('Show');
      this.myEl.classList.add('showCall');
      this.partnerEl.classList.add('showCall');
      this.myEl.classList.remove('disableCall');
      this.partnerEl.classList.remove('disableCall');
    }
    this.hideCallLogin = false;
    const call = this.peer.call(partnerId, this.myStream);
    this.mediaConnection = call;
    call.on('stream', (stream) => {
      this.partnerEl.srcObject = stream;
      this.hideCall = true;
      this.hideCallLogin = false;
      if (call.peerConnection.connectionState == 'connecting') {
        this.swapVideo('my-video');
      }
    });
    call.on('close', () => {
      console.log('Di hentikan oleh penerima');
      this.mediaConnection.close();
      this.myEl.classList.remove('showCall');
      this.partnerEl.classList.remove('showCall');
      this.myEl.classList.add('disableCall');
      this.partnerEl.classList.add('disableCall');
      this.hideCall = false;
      this.hideCallLogin = false;
    })
  }

其他用户的回答如下：

wait() {
    this.peer.on('call', (call) => {
      this.mediaConnection = call;
      //change this to a modal for confirm a call
      var acceptsCall = confirm(partner + " is calling, do you want to accept it ?");
      if (acceptsCall) {
        call.answer(this.myStream); // Answer the call with an A/V stream.
        call.on('stream', (stream) => {
          if (this.myEl.classList.contains('disableCall')) {
            console.log('Show');
            this.partnerEl.classList.add('showCall');
            this.myEl.classList.add('showCall');
            this.partnerEl.classList.remove('disableCall');
            this.myEl.classList.remove('disableCall');
          }
          this.partnerEl.srcObject = stream;
          this.status = 'Connected';
          this.hideCallLogin = false;
          this.swapVideo('my-video');
        });
        call.on('close', () => {
          console.log('Di hentikan oleh penelpon');
          this.myEl.classList.remove('showCall');
          this.partnerEl.classList.remove('showCall');
          this.myEl.classList.add('disableCall');
          this.partnerEl.classList.add('disableCall');
          console.log(this.status);
          this.hideCall = false;
          this.hideCallLogin = false;
        })
      }
    });
    //getting partner id
    let partner = '';
    this.peer.on('connection', (conn) => {
      conn.on('open', () => {
        conn.on('data', (data) => {
          partner = data;
        })
      })
    })

  }

如果 1 个对等方挂断，我想要的是对等方断开连接或销毁，并自动关闭他们的视频。有人知道怎么做吗？

Answer 1

wait() {
  this.peer.on('call', (call) => {
    this.mediaConnection = call; // Save reference to the `mediaConnection` object

    var acceptsCall = confirm("Videocall incoming, do you want to accept it ?");
    if (acceptsCall) {
      call.answer(this.myStream); // Answer the call with an A/V stream.
      call.on('stream', (stream) => {
        this.partnerEl.srcObject = stream;
        this.status = 'Connected';
        console.log(this.status);
      });
    }
  });
}

那么当你想挂断电话时应该可以拨打this.mediaConnection.close()

更新 1

要让它在调用方工作，您还必须将 mediaConnection 存储在那里。

call(partnerId: string) {
  this.partnerId = partnerId;
  console.log(this.peer.destroyed);

  if (this.peer.destroyed) {
    this.createPeer(this.userId);
  }
  
  const call = this.peer.call(partnerId, this.myStream);
  this.mediaConnection = call; // Save reference to the `mediaConnection` object

  call.on('stream', (stream) => {
    this.partnerEl.srcObject = stream;
    this.hideCall = true;
    this.hideCallLogin = false;
  });
}

Answer 2

如果上述解决方案不适合您，我还有另一个适合我的解决方案。 Peerjs 库提供数据连接来发送其他类型的数据。所以我创建了一个数据连接，您可以通过call 方法设置它。

这是一些代码 - thisPeer 和 otherPeer 是全局变量，用于存储对两个客户端上数据连接的引用：

var otherPeer;
var thisPeer;

这是调用发起者代码：

navigator.mediaDevices
    .getUserMedia(mediaConstraints)
    .then((s) => {
      .....

      const call = peer.call(remoteUserId, s);
      thisPeer = peer.connect(remoteUserId);
      thisPeer.on("data", (data) => {
        if (data == "end") {
          thisPeer.close();
          if (peer != null) {
            peer.destroy();
          }
          console.log("the caller ended the call", data);
        }
      });

      call.on("stream", (remoteStream) => {
        .....
      });
    })
    .catch((err) => console.log("Error on starting a call: ", err));

这是调用接受器代码：

peer.on("open", () => {
    console.log("Connected to other peer");

    peer.on("connection", (conn) => {  // listen for data connection here
      console.log("the caller sent message", conn);
      otherPeer = conn;
      conn.on("data", (data) => {
        if (data == "end") {
          conn.close();
          if (peer != null) {
            peer.destroy();
          }
          console.log("the caller ended the call", data);
        }
      });
    });
  });

最后，任一端都可以使用endCall函数关闭连接并通知另一端：

function endCall() {
  if (otherPeer != null) {
     otherPeer.send("end");
  }
  if (thisPeer != null) {
     thisPeer.send("end");
  }
  if (peer != null) {
     peer.destroy();
  }
}