From 2ee6d43274b4f9703488cb893f2b57b06f339f74 Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Tue, 20 Oct 2020 20:39:33 +0200 Subject: [PATCH] Fix sharing peer connection --- front/src/WebRtc/ScreenSharingPeer.ts | 25 ++++++++++++++ front/src/WebRtc/SimplePeer.ts | 48 ++++++++++++--------------- front/src/WebRtc/VideoPeer.ts | 4 +-- 3 files changed, 49 insertions(+), 28 deletions(-) diff --git a/front/src/WebRtc/ScreenSharingPeer.ts b/front/src/WebRtc/ScreenSharingPeer.ts index 3cbc4154..3efee1c3 100644 --- a/front/src/WebRtc/ScreenSharingPeer.ts +++ b/front/src/WebRtc/ScreenSharingPeer.ts @@ -13,6 +13,8 @@ export class ScreenSharingPeer extends Peer { * Whether this connection is currently receiving a video stream from a remote user. */ private isReceivingStream:boolean = false; + public toClose: boolean = false; + public _connected: boolean = false; constructor(private userId: number, initiator: boolean, private connection: RoomConnection) { super({ @@ -42,6 +44,8 @@ export class ScreenSharingPeer extends Peer { }); this.on('close', () => { + this._connected = false; + this.toClose = true; this.destroy(); }); @@ -62,11 +66,16 @@ export class ScreenSharingPeer extends Peer { }); this.on('connect', () => { + this._connected = true; // FIXME: we need to put the loader on the screen sharing connection mediaManager.isConnected("" + this.userId); console.info(`connect => ${this.userId}`); }); + this.once('finish', () => { + this._onFinish(); + }); + this.pushScreenSharingToRemoteUser(); } @@ -100,6 +109,10 @@ export class ScreenSharingPeer extends Peer { public destroy(error?: Error): void { try { + this._connected = false + if(!this.toClose){ + return; + } mediaManager.removeActiveScreenSharingVideo("" + this.userId); // FIXME: I don't understand why "Closing connection with" message is displayed TWICE before "Nb users in peerConnectionArray" // I do understand the method closeConnection is called twice, but I don't understand how they manage to run in parallel. @@ -111,6 +124,18 @@ export class ScreenSharingPeer extends Peer { } } + _onFinish () { + if (this.destroyed) return + const destroySoon = () => { + this.destroy(); + } + if (this._connected) { + destroySoon(); + } else { + this.once('connect', destroySoon); + } + } + private pushScreenSharingToRemoteUser() { const localScreenCapture: MediaStream | null = mediaManager.localScreenCapture; if(!localScreenCapture){ diff --git a/front/src/WebRtc/SimplePeer.ts b/front/src/WebRtc/SimplePeer.ts index 4039e10b..eb2ee42b 100644 --- a/front/src/WebRtc/SimplePeer.ts +++ b/front/src/WebRtc/SimplePeer.ts @@ -108,44 +108,30 @@ export class SimplePeer { this.createPeerConnection(user); } - /** - * server has two people connected, start the meet - */ - private startWebRtc() { - console.warn('startWebRtc startWebRtc'); - this.Users.forEach((user: UserSimplePeerInterface) => { - //if it's not an initiator, peer connection will be created when gamer will receive offer signal - if(!user.initiator){ - return; - } - this.createPeerConnection(user); - }); - } - /** * create peer connection to bind users */ - private createPeerConnection(user : UserSimplePeerInterface) : VideoPeer | null{ + private createPeerConnection(user : UserSimplePeerInterface) : VideoPeer | null { const peerConnection = this.PeerConnectionArray.get(user.userId) - if(peerConnection){ - if(peerConnection.destroyed){ + if (peerConnection) { + if (peerConnection.destroyed) { peerConnection.toClose = true; peerConnection.destroy(); const peerConnexionDeleted = this.PeerConnectionArray.delete(user.userId); - if(!peerConnexionDeleted){ + if (!peerConnexionDeleted) { throw 'Error to delete peer connection'; } this.createPeerConnection(user); - }else { + } else { peerConnection.toClose = false; } return null; } let name = user.name; - if(!name){ + if (!name) { const userSearch = this.Users.find((userSearch: UserSimplePeerInterface) => userSearch.userId === user.userId); - if(userSearch) { + if (userSearch) { name = userSearch.name; } } @@ -153,8 +139,8 @@ export class SimplePeer { mediaManager.removeActiveVideo("" + user.userId); const reportCallback = this.enableReporting ? (comment: string) => { - this.reportUser(user.userId, comment); - }: undefined; + this.reportUser(user.userId, comment); + } : undefined; mediaManager.addActiveVideo("" + user.userId, reportCallback, name); @@ -179,9 +165,19 @@ export class SimplePeer { * create peer connection to bind users */ private createPeerScreenSharingConnection(user : UserSimplePeerInterface) : ScreenSharingPeer | null{ - if( - this.PeerScreenSharingConnectionArray.has(user.userId) - ){ + const peerConnection = this.PeerScreenSharingConnectionArray.get(user.userId); + if(peerConnection){ + if(peerConnection.destroyed){ + peerConnection.toClose = true; + peerConnection.destroy(); + const peerConnexionDeleted = this.PeerScreenSharingConnectionArray.delete(user.userId); + if(!peerConnexionDeleted){ + throw 'Error to delete peer connection'; + } + this.createPeerConnection(user); + }else { + peerConnection.toClose = false; + } return null; } diff --git a/front/src/WebRtc/VideoPeer.ts b/front/src/WebRtc/VideoPeer.ts index aa8a5d17..fb34f29e 100644 --- a/front/src/WebRtc/VideoPeer.ts +++ b/front/src/WebRtc/VideoPeer.ts @@ -39,13 +39,13 @@ export class VideoPeer extends Peer { urls: 'stun:stun.l.google.com:19302' }, { - urls: TURN_SERVER, + urls: TURN_SERVER.split(','), username: TURN_USER, credential: TURN_PASSWORD }, ] } - }) + }); //start listen signal for the peer connection this.on('signal', (data: unknown) => {