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