Continue screen sharing

front/dist/index.html

@@ -108,12 +108,11 @@
                     <img id="monitor" src="resources/logos/monitor.svg">
                     <img id="monitor-close" src="resources/logos/monitor-close.svg">
                 </div>
-                <!--<div class="btn-call">
-                    <img src="resources/logos/phone.svg">
-                </div>-->
             </div>
         </div>
         -->
+        <div id="activeScreenSharing" class="active-screen-sharing active">
+        </div>
         <div id="webRtcSetup" class="webrtcsetup">
                 <img id="webRtcSetupNoVideo" class="background-img" src="resources/logos/cinema-close.svg">
                 <video id="myCamVideoSetup" autoplay muted></video>

front/dist/resources/style/style.css

@@ -365,3 +365,33 @@ body {
 .chat-mode > div:last-child {
     flex-grow: 5;
 }
+
+/*SCREEN SHARING*/
+.active-screen-sharing video{
+    transform: scaleX(1);
+}
+.active-screen-sharing .screen-sharing-video-container video:hover{
+    width: 50%;
+}
+.active-screen-sharing .screen-sharing-video-container video{
+    position: absolute;
+    width: 25%;
+    height: auto;
+    left: 0;
+    top: 0;
+    transition: all 0.2s ease;
+}
+
+.active-screen-sharing .screen-sharing-video-container video:nth-child(1){
+    /*this is for camera of user*/
+    top: 0%;
+}
+.active-screen-sharing .screen-sharing-video-container video:nth-child(2){
+    top: 25%;
+}
+.active-screen-sharing .screen-sharing-video-container video:nth-child(3){
+    top: 50%;
+}
+.active-screen-sharing .screen-sharing-video-container video:nth-child(4) {
+    top: 75%;
+}

front/src/WebRtc/SimplePeer.ts

@@ -289,14 +289,22 @@ export class SimplePeer {
      */
     private addMedia (userId : string) {
         try {
-            let localStream: MediaStream | null = mediaManager.localStream;
-            let localScreenCapture: MediaStream | null = mediaManager.localScreenCapture;
             let PeerConnection = this.PeerConnectionArray.get(userId);
-
+            if (!PeerConnection) {
-            if (!PeerConnection || PeerConnection === undefined) {
                 throw new Error('While adding media, cannot find user with ID ' + userId);
             }
-            PeerConnection.write(new Buffer(JSON.stringify(Object.assign(mediaManager.constraintsMedia, {screen: localScreenCapture !== null}))));
+
+            if(userId.indexOf("screenSharing") > -1 && mediaManager.localScreenCapture){
+                for (const track of mediaManager.localScreenCapture.getTracks()) {
+                    PeerConnection.addTrack(track, mediaManager.localScreenCapture);
+                }
+                return;
+            }
+
+            let localStream: MediaStream | null = mediaManager.localStream;
+            let localScreenCapture: MediaStream | null = mediaManager.localScreenCapture;
+
+            PeerConnection.write(new Buffer(JSON.stringify(Object.assign(this.MediaManager.constraintsMedia, {screen: localScreenCapture !== null}))));
 
             if(!localStream){
                 return;
@@ -321,15 +329,21 @@ export class SimplePeer {
         if (this.MediaManager.localScreenCapture) {
             let screenSharingUser: UserSimplePeerInterface = {
                 userId: `screenSharing-${this.Connection.userId}`,
+                name: 'screenSharing',
                 initiator: true
             };
             let PeerConnectionScreenSharing = this.createPeerConnection(screenSharingUser);
             if (!PeerConnectionScreenSharing) {
                 return;
             }
-            for (const track of this.MediaManager.localScreenCapture.getTracks()) {
+            try {
-                PeerConnectionScreenSharing.addTrack(track, this.MediaManager.localScreenCapture);
+                for (const track of this.MediaManager.localScreenCapture.getTracks()) {
+                    PeerConnectionScreenSharing.addTrack(track, this.MediaManager.localScreenCapture);
+                }
+            }catch (e) {
+                console.error("updatedScreenSharing => ", e);
             }
+            this.MediaManager.addStreamRemoteVideo(screenSharingUser.userId, this.MediaManager.localScreenCapture);
         } else {
             if (!this.PeerConnectionArray.has(`screenSharing-${this.Connection.userId}`)) {
                 return;