diff --git a/front/src/Connection.ts b/front/src/Connection.ts index 2ac81f30..f2c72d64 100644 --- a/front/src/Connection.ts +++ b/front/src/Connection.ts @@ -197,8 +197,8 @@ export class Connection implements Connection { }); } - sendWebrtcScreenSharingSignal(signal: any, roomId: string, userId? : string|null) { - return this.getSocket().emit(EventMessage.WEBRTC_SCREEN_SHARING_SIGNAL, { + public sendWebrtcScreenSharingSignal(signal: unknown, roomId: string, userId? : string|null) { + return this.socket.emit(EventMessage.WEBRTC_SCREEN_SHARING_SIGNAL, { userId: userId, roomId: roomId, signal: signal @@ -213,21 +213,8 @@ export class Connection implements Connection { return this.socket.on(EventMessage.WEBRTC_SIGNAL, callback); } - receiveWebrtcScreenSharingSignal(callback: Function) { - return this.getSocket().on(EventMessage.WEBRTC_SCREEN_SHARING_SIGNAL, callback); - } - - private errorMessage(): void { - this.getSocket().on(EventMessage.MESSAGE_ERROR, (message: string) => { - console.error(EventMessage.MESSAGE_ERROR, message); - }) - } - - private disconnectServer(): void { - this.getSocket().on(EventMessage.CONNECT_ERROR, () => { - this.GameManager.switchToDisconnectedScene(); - }); - + public receiveWebrtcScreenSharingSignal(callback: Function) { + return this.socket.on(EventMessage.WEBRTC_SCREEN_SHARING_SIGNAL, callback); } public onServerDisconnected(callback: (reason: string) => void): void { diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index c4517545..3c3a6536 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -18,7 +18,7 @@ import {PlayerMovement} from "./PlayerMovement"; import {PlayersPositionInterpolator} from "./PlayersPositionInterpolator"; import {RemotePlayer} from "../Entity/RemotePlayer"; import {Queue} from 'queue-typescript'; -import {SimplePeer, UserSimplePeer} from "../../WebRtc/SimplePeer"; +import {SimplePeer, UserSimplePeerInterface} from "../../WebRtc/SimplePeer"; import {ReconnectingSceneName} from "../Reconnecting/ReconnectingScene"; import {FourOFourSceneName} from "../Reconnecting/FourOFourScene"; import {loadAllLayers} from "../Entity/body_character"; @@ -229,7 +229,7 @@ export class GameScene extends Phaser.Scene { this.simplePeer = new SimplePeer(this.connection); const self = this; this.simplePeer.registerPeerConnectionListener({ - onConnect(user: UserSimplePeer) { + onConnect(user: UserSimplePeerInterface) { self.presentationModeSprite.setVisible(true); self.chatModeSprite.setVisible(true); }, diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts index 167faded..d7b40c39 100644 --- a/front/src/WebRtc/MediaManager.ts +++ b/front/src/WebRtc/MediaManager.ts @@ -11,6 +11,7 @@ interface MediaServiceInterface extends MediaDevices{ } type UpdatedLocalStreamCallback = (media: MediaStream) => void; +type UpdatedScreenSharingCallback = (media: MediaStream) => void; // TODO: Split MediaManager in 2 classes: MediaManagerUI (in charge of HTML) and MediaManager (singleton in charge of the camera only) // TODO: verify that microphone event listeners are not triggered plenty of time NOW (since MediaManager is created many times!!!!) @@ -31,11 +32,10 @@ export class MediaManager { video: videoConstraint }; updatedLocalStreamCallBacks : Set = new Set(); - // TODO: updatedScreenSharingCallBack should have same signature as updatedLocalStreamCallBacks - updatedScreenSharingCallBack : Function; + updatedScreenSharingCallBacks : Set = new Set(); - constructor(updatedScreenSharingCallBack : Function) { - this.updatedScreenSharingCallBack = updatedScreenSharingCallBack; + + constructor() { this.myCamVideo = this.getElementByIdOrFail('myCamVideo'); this.webrtcInAudio = this.getElementByIdOrFail('audio-webrtc-in'); @@ -69,14 +69,14 @@ export class MediaManager { //update tracking }); - this.monitorClose = document.getElementById('monitor-close'); + this.monitorClose = this.getElementByIdOrFail('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 = this.getElementByIdOrFail('monitor'); this.monitor.style.display = "none"; this.monitor.addEventListener('click', (e: any) => { e.preventDefault(); @@ -90,6 +90,11 @@ export class MediaManager { this.updatedLocalStreamCallBacks.add(callback); } + onUpdateScreenSharing(callback: UpdatedScreenSharingCallback): void { + + this.updatedScreenSharingCallBacks.add(callback); + } + removeUpdateLocalStreamEventListener(callback: UpdatedLocalStreamCallback): void { this.updatedLocalStreamCallBacks.delete(callback); } @@ -100,6 +105,12 @@ export class MediaManager { } } + private triggerUpdatedScreenSharingCallbacks(stream: MediaStream): void { + for (const callback of this.updatedScreenSharingCallBacks) { + callback(stream); + } + } + activeVisio(){ const gameOverlay = this.getElementByIdOrFail('game-overlay'); gameOverlay.classList.add('active'); @@ -156,7 +167,7 @@ export class MediaManager { this.monitorClose.style.display = "none"; this.monitor.style.display = "block"; this.getScreenMedia().then((stream) => { - this.updatedScreenSharingCallBack(stream); + this.triggerUpdatedScreenSharingCallbacks(stream); }); } @@ -168,7 +179,7 @@ export class MediaManager { }); this.localScreenCapture = null; this.getCamera().then((stream) => { - this.updatedScreenSharingCallBack(stream); + this.triggerUpdatedScreenSharingCallbacks(stream); }); } diff --git a/front/src/WebRtc/SimplePeer.ts b/front/src/WebRtc/SimplePeer.ts index e0dbe4a6..582b8eb2 100644 --- a/front/src/WebRtc/SimplePeer.ts +++ b/front/src/WebRtc/SimplePeer.ts @@ -15,7 +15,7 @@ export interface UserSimplePeerInterface{ } export interface PeerConnectionListener { - onConnect(user: UserSimplePeer): void; + onConnect(user: UserSimplePeerInterface): void; onDisconnect(userId: string): void; } @@ -138,7 +138,7 @@ export class SimplePeer { mediaManager.addActiveVideo(user.userId, name); } - const peerOption : SimplePeerNamespace.Instance = new Peer({ + const peer : SimplePeerNamespace.Instance = new Peer({ initiator: user.initiator ? user.initiator : false, reconnectTimer: 10000, config: { @@ -153,9 +153,7 @@ export class SimplePeer { }, ] } - }; - console.log("peerOption", peerOption); - let peer : SimplePeerNamespace.Instance = new Peer(peerOption); + }); if(screenSharing){ this.PeerScreenSharingConnectionArray.set(user.userId, peer); }else { @@ -434,11 +432,12 @@ export class SimplePeer { //this.Connection.sendWebrtcScreenSharingStart(this.WebRtcRoomId); - if(!this.Connection.userId){ + const userId = this.Connection.getUserId(); + if(!userId){ return; } let screenSharingUser: UserSimplePeerInterface = { - userId: this.Connection.userId, + userId, initiator: true }; let PeerConnectionScreenSharing = this.createPeerConnection(screenSharingUser, true); @@ -454,16 +453,17 @@ export class SimplePeer { } mediaManager.addStreamRemoteScreenSharing(screenSharingUser.userId, mediaManager.localScreenCapture); } else { - if (!this.Connection.userId || !this.PeerScreenSharingConnectionArray.has(this.Connection.userId)) { + const userId = this.Connection.getUserId(); + if (!userId || !this.PeerScreenSharingConnectionArray.has(userId)) { return; } - let PeerConnectionScreenSharing = this.PeerScreenSharingConnectionArray.get(this.Connection.userId); + let PeerConnectionScreenSharing = this.PeerScreenSharingConnectionArray.get(userId); console.log("updatedScreenSharing => destroy", PeerConnectionScreenSharing); if (!PeerConnectionScreenSharing) { return; } PeerConnectionScreenSharing.destroy(); - this.PeerScreenSharingConnectionArray.delete(this.Connection.userId); + this.PeerScreenSharingConnectionArray.delete(userId); } } }