Working solution for Can't close connection beetween peer on peerjs

Issue

I'm trying to make video chat app, and it works with peerjs. Now I want to add some functionality to handle scenarios like if connection is destroyed by user, the other user that connected to him gets a notification.

Here's my code for calling other user:

 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;
    })
  }

Here's how other user answers:

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;
        })
      })
    })

  }

What I want is peers disconnect or destroyed if 1 peer hangs up, and it automatically closes their video. Anyone know how to do that?

Solution

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);
      });
    }
  });
}

Then when you want to hang up you should be able to call this.mediaConnection.close()

Update 1

To have it working on the caller end you have to store mediaConnection there as well.

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;
  });
}

Answered By - Sergey