From 4b729581938dbf417cebe6c1589acdcbc9c083f6 Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Sun, 14 Jun 2020 20:53:18 +0200 Subject: [PATCH] Fix peer connexion for two player with screen sharing --- back/src/Controller/IoSocketController.ts | 23 +++++----- front/dist/resources/style/style.css | 18 +++++--- front/src/Connection.ts | 12 ----- front/src/WebRtc/SimplePeer.ts | 56 +++++++++-------------- 4 files changed, 45 insertions(+), 64 deletions(-) diff --git a/back/src/Controller/IoSocketController.ts b/back/src/Controller/IoSocketController.ts index 81a7b16b..0c1956f3 100644 --- a/back/src/Controller/IoSocketController.ts +++ b/back/src/Controller/IoSocketController.ts @@ -30,7 +30,6 @@ enum SockerIoEvent { WEBRTC_SIGNAL = "webrtc-signal", WEBRTC_SCREEN_SHARING_SIGNAL = "webrtc-screen-sharing-signal", WEBRTC_START = "webrtc-start", - WEBRTC_SCREEN_SHARING_START = "webrtc-screen-sharing-start", WEBRTC_DISCONNECT = "webrtc-disconect", MESSAGE_ERROR = "message-error", GROUP_CREATE_UPDATE = "group-create-update", @@ -45,6 +44,8 @@ export class IoSocketController { private nbClientsGauge: Gauge; private nbClientsPerRoomGauge: Gauge; + private offerScreenSharingByClient: Map> = new Map>(); + constructor(server: http.Server) { this.Io = socketIO(server); this.nbClientsGauge = new Gauge({ @@ -235,16 +236,6 @@ export class IoSocketController { this.emitScreenSharing((socket as ExSocketInterface), data, SockerIoEvent.WEBRTC_SCREEN_SHARING_SIGNAL); }); - socket.on(SockerIoEvent.WEBRTC_SCREEN_SHARING_START, (data: unknown) => { - console.log(SockerIoEvent.WEBRTC_SCREEN_SHARING_START, data); - if (!isWebRtcScreenSharingStartMessageInterface(data)) { - socket.emit(SockerIoEvent.MESSAGE_ERROR, {message: 'Invalid WEBRTC_SIGNAL message.'}); - console.warn('Invalid WEBRTC_SIGNAL message received: ', data); - return; - } - this.Io.in(data.roomId).emit(SockerIoEvent.WEBRTC_SCREEN_SHARING_START, data); - }); - socket.on(SockerIoEvent.DISCONNECT, () => { const Client = (socket as ExSocketInterface); try { @@ -310,8 +301,16 @@ export class IoSocketController { console.warn('Invalid WEBRTC_SIGNAL message received: ', data); return; } + if(data && data.signal && (data.signal as any).type === "offer"){ + let roomOffer = this.offerScreenSharingByClient.get(data.roomId); + if(!roomOffer){ + roomOffer = new Map(); + } + roomOffer.set(data.userId, data.signal); + this.offerScreenSharingByClient.set(data.roomId, roomOffer); + } //share at all others clients send only at user - return socket.broadcast.emit(event, data); + return socket.in(data.roomId).emit(event, data); } searchClientByIdOrFail(userId: string): ExSocketInterface { diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css index d0dc2cd4..ac1b1527 100644 --- a/front/dist/resources/style/style.css +++ b/front/dist/resources/style/style.css @@ -370,28 +370,34 @@ body { .active-screen-sharing video{ transform: scaleX(1); } +.screen-sharing-video-container { + width: 25%; + position: absolute; +} .active-screen-sharing .screen-sharing-video-container video:hover{ - width: 50%; + width: 200%; + z-index: 11; } .active-screen-sharing .screen-sharing-video-container video{ position: absolute; - width: 25%; + width: 100%; height: auto; left: 0; top: 0; transition: all 0.2s ease; + z-index: 1; } -.active-screen-sharing .screen-sharing-video-container video:nth-child(1){ +.active-screen-sharing .screen-sharing-video-container:nth-child(1){ /*this is for camera of user*/ top: 0%; } -.active-screen-sharing .screen-sharing-video-container video:nth-child(2){ +.active-screen-sharing .screen-sharing-video-container:nth-child(2){ top: 25%; } -.active-screen-sharing .screen-sharing-video-container video:nth-child(3){ +.active-screen-sharing .screen-sharing-video-container:nth-child(3){ top: 50%; } -.active-screen-sharing .screen-sharing-video-container video:nth-child(4) { +.active-screen-sharing .screen-sharing-video-container:nth-child(4) { top: 75%; } diff --git a/front/src/Connection.ts b/front/src/Connection.ts index 50750c59..2ac81f30 100644 --- a/front/src/Connection.ts +++ b/front/src/Connection.ts @@ -13,7 +13,6 @@ enum EventMessage{ WEBRTC_SIGNAL = "webrtc-signal", WEBRTC_SCREEN_SHARING_SIGNAL = "webrtc-screen-sharing-signal", WEBRTC_START = "webrtc-start", - WEBRTC_SCREEN_SHARING_START = "webrtc-screen-sharing-start", JOIN_ROOM = "join-room", // bi-directional USER_POSITION = "user-position", // bi-directional USER_MOVED = "user-moved", // From server to client @@ -198,13 +197,6 @@ export class Connection implements Connection { }); } - sendWebrtcScreenSharingStart(roomId: string) { - return this.getSocket().emit(EventMessage.WEBRTC_SCREEN_SHARING_START, { - userId: this.userId, - roomId: roomId - }); - } - sendWebrtcScreenSharingSignal(signal: any, roomId: string, userId? : string|null) { return this.getSocket().emit(EventMessage.WEBRTC_SCREEN_SHARING_SIGNAL, { userId: userId, @@ -217,10 +209,6 @@ export class Connection implements Connection { this.socket.on(EventMessage.WEBRTC_START, callback); } - public receiveWebrtcScreenSharingStart(callback: (message: WebRtcDisconnectMessageInterface) => void) { - this.socket.on(EventMessage.WEBRTC_SCREEN_SHARING_START, callback); - } - public receiveWebrtcSignal(callback: (message: WebRtcSignalMessageInterface) => void) { return this.socket.on(EventMessage.WEBRTC_SIGNAL, callback); } diff --git a/front/src/WebRtc/SimplePeer.ts b/front/src/WebRtc/SimplePeer.ts index 0377ea1a..e0dbe4a6 100644 --- a/front/src/WebRtc/SimplePeer.ts +++ b/front/src/WebRtc/SimplePeer.ts @@ -63,14 +63,6 @@ export class SimplePeer { this.receiveWebrtcSignal(message); }); - this.Connection.receiveWebrtcScreenSharingStart((message: WebRtcDisconnectMessageInterface) => { - console.log("receiveWebrtcScreenSharingStart => initiator", message.userId === this.Connection.userId); - if(message.userId === this.Connection.userId) { - console.log("receiveWebrtcScreenSharingStart => initiator => create peer connexion"); - this.receiveWebrtcScreenSharingStart(message); - } - }); - //receive signal by gemer this.Connection.receiveWebrtcScreenSharingSignal((message: WebRtcDisconnectMessageInterface) => { this.receiveWebrtcScreenSharingSignal(message); @@ -106,31 +98,6 @@ export class SimplePeer { this.startWebRtc(); } - private receiveWebrtcScreenSharingStart(data: WebRtcDisconnectMessageInterface) { - console.log("receiveWebrtcScreenSharingStart", data); - let screenSharingUser: UserSimplePeerInterface = { - userId: data.userId, - initiator: this.Connection.userId === data.userId - }; - let PeerConnectionScreenSharing = this.createPeerConnection(screenSharingUser, true); - if (!PeerConnectionScreenSharing) { - console.error("receiveWebrtcScreenSharingStart => cannot create peer connexion", PeerConnectionScreenSharing); - return; - } - console.log(`receiveWebrtcScreenSharingStart => ${screenSharingUser.initiator}`, mediaManager.localScreenCapture) - if (!mediaManager.localScreenCapture) { - return; - } - try { - for (const track of mediaManager.localScreenCapture.getTracks()) { - PeerConnectionScreenSharing.addTrack(track, mediaManager.localScreenCapture); - } - } catch (e) { - console.error("updatedScreenSharing => ", e); - } - mediaManager.addStreamRemoteScreenSharing(screenSharingUser.userId, mediaManager.localScreenCapture); - } - /** * server has two people connected, start the meet */ @@ -464,7 +431,28 @@ export class SimplePeer { updatedScreenSharing() { if (mediaManager.localScreenCapture) { - this.Connection.sendWebrtcScreenSharingStart(this.WebRtcRoomId); + + //this.Connection.sendWebrtcScreenSharingStart(this.WebRtcRoomId); + + if(!this.Connection.userId){ + return; + } + let screenSharingUser: UserSimplePeerInterface = { + userId: this.Connection.userId, + initiator: true + }; + let PeerConnectionScreenSharing = this.createPeerConnection(screenSharingUser, true); + if (!PeerConnectionScreenSharing) { + return; + } + try { + for (const track of mediaManager.localScreenCapture.getTracks()) { + PeerConnectionScreenSharing.addTrack(track, mediaManager.localScreenCapture); + } + }catch (e) { + console.error("updatedScreenSharing => ", e); + } + mediaManager.addStreamRemoteScreenSharing(screenSharingUser.userId, mediaManager.localScreenCapture); } else { if (!this.Connection.userId || !this.PeerScreenSharingConnectionArray.has(this.Connection.userId)) { return;