Fix peer connexion for two player with screen sharing

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<string>;
     private nbClientsPerRoomGauge: Gauge<string>;
 
+    private offerScreenSharingByClient: Map<string, Map<string, unknown>> = new Map<string, Map<string, unknown>>();
+
     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<string, unknown>();
+            }
+            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 {

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

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

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;