Feature screen sharing

- Send stream of screen sharing in peer connexion
 - Add button for share your screen

front/src/WebRtc/MediaManager.ts

@@ -3,12 +3,18 @@ const videoConstraint: {width : any, height: any, facingMode : string} = {
     height: { ideal: 720 },
     facingMode: "user"
 };
+interface MediaServiceInterface extends MediaDevices{
+    getDisplayMedia(constrain: any) : Promise<any>;
+}
 export class MediaManager {
     localStream: MediaStream|null = null;
+    localScreenCapture: MediaStream|null = null;
     remoteVideo: Array<any> = new Array<any>();
     myCamVideo: HTMLVideoElement;
     cinemaClose: any = null;
     cinema: any = null;
+    monitorClose: any = null;
+    monitor: any = null;
     microphoneClose: any = null;
     microphone: any = null;
     webrtcInAudio: HTMLAudioElement;
@@ -52,6 +58,21 @@ export class MediaManager {
             this.disabledCamera();
             //update tracking
         });
+
+        this.monitorClose = document.getElementById('monitor-close');
+        this.monitorClose.style.display = "block";
+        this.monitorClose.addEventListener('click', (e: any) => {
+            e.preventDefault();
+            this.enabledMonitor();
+            //update tracking
+        });
+        this.monitor = document.getElementById('monitor');
+        this.monitor.style.display = "none";
+        this.monitor.addEventListener('click', (e: any) => {
+            e.preventDefault();
+            this.disabledMonitor();
+            //update tracking
+        });
     }
 
     activeVisio(){
@@ -106,6 +127,58 @@ export class MediaManager {
         });
     }
 
+    enabledMonitor() {
+        this.monitorClose.style.display = "none";
+        this.monitor.style.display = "block";
+        this.getScreenMedia().then((stream) => {
+            this.updatedLocalStreamCallBack(stream);
+        });
+    }
+
+    disabledMonitor() {
+        this.monitorClose.style.display = "block";
+        this.monitor.style.display = "none";
+        this.localScreenCapture?.getTracks().forEach((track: MediaStreamTrack) => {
+            track.stop();
+        });
+        this.localScreenCapture = null;
+        this.getCamera().then((stream) => {
+            this.updatedLocalStreamCallBack(stream);
+        });
+    }
+
+    //get screen
+    getScreenMedia() : Promise<MediaStream>{
+        try {
+            return this._startScreenCapture()
+                .then((stream: MediaStream) => {
+                    this.localScreenCapture = stream;
+                    return stream;
+                })
+                .catch((err: any) => {
+                    console.error("Error => getScreenMedia => " + err);
+                    throw err;
+                });
+        }catch (err) {
+            return new Promise((resolve, reject) => { // eslint-disable-line no-unused-vars
+                reject(err);
+            });
+        }
+    }
+
+    private _startScreenCapture() {
+        if ((navigator as any).getDisplayMedia) {
+            return (navigator as any).getDisplayMedia({video: true});
+        } else if ((navigator.mediaDevices as any).getDisplayMedia) {
+            return (navigator.mediaDevices as any).getDisplayMedia({video: true});
+        } else {
+            //return navigator.mediaDevices.getUserMedia(({video: {mediaSource: 'screen'}} as any));
+            return new Promise((resolve, reject) => { // eslint-disable-line no-unused-vars
+                reject("error sharing screen");
+            });
+        }
+    }
+
     //get camera
     getCamera() {
         let promise = null;