From d7d7be9ed0a4c4a30ede92adcdc9af95480203d5 Mon Sep 17 00:00:00 2001 From: gparant Date: Sun, 26 Apr 2020 19:12:01 +0200 Subject: [PATCH] Web visio, add and remove video element --- back/src/Controller/IoSocketController.ts | 38 ++++++++++++++--------- front/src/Connexion.ts | 5 +-- front/src/WebRtc/MediaManager.ts | 16 ++++++++-- front/src/WebRtc/SimplePeer.ts | 34 +++++++++----------- 4 files changed, 56 insertions(+), 37 deletions(-) diff --git a/back/src/Controller/IoSocketController.ts b/back/src/Controller/IoSocketController.ts index cd715bb8..42906851 100644 --- a/back/src/Controller/IoSocketController.ts +++ b/back/src/Controller/IoSocketController.ts @@ -85,7 +85,6 @@ export class IoSocketController{ (socket as ExSocketInterface).roomId = data.roomId; //if two persone in room share - console.log("nb user => " + data.roomId, this.Io.sockets.adapter.rooms[data.roomId].length); if(this.Io.sockets.adapter.rooms[data.roomId].length < 2) { return; } @@ -93,25 +92,36 @@ export class IoSocketController{ //send start at one client to initialise offer webrtc //send all users in room to create PeerConnection in front - let clientsId = clients.reduce((tabs : Array, client: ExtWebSocket) => { - if(!client.userId){ - return tabs; - } - tabs.push(client.userId); - return tabs; - }, []); clients.forEach((client: ExtWebSocket, index : number) => { - client.emit('webrtc-start', JSON.stringify({ - usersId: clientsId.filter((userId : any) => userId !== client.userId), - initiator : index === 0 - })); + + let clientsId = clients.reduce((tabs : Array, clientId: ExtWebSocket, indexClientId: number) => { + if(!clientId.userId || clientId.userId === client.userId){ + return tabs; + } + tabs.push({ + userId: clientId.userId, + initiator : index <= indexClientId + }); + return tabs; + }, []); + + client.emit('webrtc-start', JSON.stringify(clientsId)); }); }); socket.on('webrtc-signal', (message : string) => { let data : any = JSON.parse(message); - console.info('webrtc-signal', message); - socket.to(data.roomId).emit('webrtc-signal', message); + + //send only at user + let clients: Array = Object.values(this.Io.sockets.sockets); + for(let i = 0; i < clients.length; i++){ + let client : ExtWebSocket = clients[i]; + if(client.userId !== data.receiverId){ + continue + } + client.emit('webrtc-signal', message); + break; + } }); }); } diff --git a/front/src/Connexion.ts b/front/src/Connexion.ts index 35dbd068..a9c10df5 100644 --- a/front/src/Connexion.ts +++ b/front/src/Connexion.ts @@ -129,7 +129,7 @@ export interface ConnexionInterface { /*webrtc*/ sendWebrtcRomm(roomId: string): void; - sendWebrtcSignal(signal: any, roomId: string, userId?: string): void; + sendWebrtcSignal(signal: any, roomId: string, userId?: string, receiverId?: string): void; receiveWebrtcSignal(callBack: Function): void; @@ -230,9 +230,10 @@ export class Connexion implements ConnexionInterface { }); } - sendWebrtcSignal(signal: any, roomId: string, userId? : string ) { + sendWebrtcSignal(signal: any, roomId: string, userId? : string, receiverId? : string) { this.socket.emit(EventMessage.WEBRTC_SIGNAL, JSON.stringify({ userId: userId ? userId : this.userId, + receiverId: receiverId ? receiverId : this.userId, roomId: roomId, signal: signal })); diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts index 56e02d44..7363f155 100644 --- a/front/src/WebRtc/MediaManager.ts +++ b/front/src/WebRtc/MediaManager.ts @@ -116,10 +116,22 @@ export class MediaManager { * * @param userId */ - addActiveVideo(userId : any){ + addActiveVideo(userId : string){ let elementRemoteVideo = document.getElementById("activeCam"); elementRemoteVideo.insertAdjacentHTML('beforeend', ''); - this.remoteVideo[userId] = document.getElementById(userId); + this.remoteVideo[(userId as any)] = document.getElementById(userId); + } + + /** + * + * @param userId + */ + removeActiveVideo(userId : string){ + let element = document.getElementById(userId); + if(!element){ + return; + } + element.remove(); } } \ No newline at end of file diff --git a/front/src/WebRtc/SimplePeer.ts b/front/src/WebRtc/SimplePeer.ts index fabc876e..a410906b 100644 --- a/front/src/WebRtc/SimplePeer.ts +++ b/front/src/WebRtc/SimplePeer.ts @@ -7,7 +7,6 @@ export class SimplePeer { MediaManager: MediaManager; RoomId: string; - PeerConnexion: any; PeerConnexionArray: Array = new Array(); constructor(Connexion: ConnexionInterface, roomId: string = "test-webrtc") { @@ -55,38 +54,35 @@ export class SimplePeer { * @param users */ createPeerConnexion(users : Array) { - console.log("createPeerConnexion", users); users.forEach((user: any) => { if(this.PeerConnexionArray[user.userId]){ return; } this.MediaManager.addActiveVideo(user.userId); - this.PeerConnexion = new Peer({initiator: user.initiator}); + this.PeerConnexionArray[user.userId] = new Peer({initiator: user.initiator}); - this.PeerConnexion.on('signal', (data: any) => { - this.sendWebrtcSignal(data); + this.PeerConnexionArray[user.userId].on('signal', (data: any) => { + this.sendWebrtcSignal(data, user.userId); }); - this.PeerConnexion.on('stream', (stream: MediaStream) => { + this.PeerConnexionArray[user.userId].on('stream', (stream: MediaStream) => { this.stream(user.userId, stream); }); - this.PeerConnexionArray[user.userId] = this.PeerConnexion; + this.PeerConnexionArray[user.userId].on('close', () => { + this.closeConnexion(user.userId); + }); + this.addMedia(user.userId); }); - /*let elements = document.getElementById("activeCam"); - console.log("element.childNodes", elements.childNodes); - elements.childNodes.forEach((element : any) => { - if(!element.id){ - return; - } - if(users.find((user) => user.userId === element.id)){ - return; - } - elements.removeChild(element); - });*/ + } + + closeConnexion(userId : string){ + // @ts-ignore + this.PeerConnexionArray[userId] = null; + this.MediaManager.removeActiveVideo(userId) } /** @@ -95,7 +91,7 @@ export class SimplePeer { * @param data */ sendWebrtcSignal(data: any, userId : string) { - this.Connexion.sendWebrtcSignal(data, this.RoomId, userId); + this.Connexion.sendWebrtcSignal(data, this.RoomId, null, userId); } /**