From 90176da8886b4a311c05f5e0bef8f6e62acdfb2b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com> Date: Sat, 29 May 2021 22:34:38 +0200 Subject: [PATCH] MediaManager cleanup - Removing the last reference to the local video stream. Everything is now fetched from the store. - Remvoing commented code --- front/src/WebRtc/MediaManager.ts | 43 -------------------------------- front/src/WebRtc/SimplePeer.ts | 26 +++++++++++++------ front/src/WebRtc/VideoPeer.ts | 7 +++--- 3 files changed, 22 insertions(+), 54 deletions(-) diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts index 5ddc4905..5ab603d2 100644 --- a/front/src/WebRtc/MediaManager.ts +++ b/front/src/WebRtc/MediaManager.ts @@ -8,33 +8,11 @@ import {SoundMeter} from "../Phaser/Components/SoundMeter"; import {DISABLE_NOTIFICATIONS} from "../Enum/EnvironmentVariable"; import { gameOverlayVisibilityStore, localStreamStore, - mediaStreamConstraintsStore, - requestedCameraState, - requestedMicrophoneState } from "../Stores/MediaStore"; import { - requestedScreenSharingState, - screenSharingAvailableStore, screenSharingLocalStreamStore } from "../Stores/ScreenSharingStore"; -declare const navigator:any; // eslint-disable-line @typescript-eslint/no-explicit-any - -const videoConstraint: boolean|MediaTrackConstraints = { - width: { min: 640, ideal: 1280, max: 1920 }, - height: { min: 400, ideal: 720 }, - frameRate: { ideal: localUserStore.getVideoQualityValue() }, - facingMode: "user", - resizeMode: 'crop-and-scale', - aspectRatio: 1.777777778 -}; -const audioConstraint: boolean|MediaTrackConstraints = { - //TODO: make these values configurable in the game settings menu and store them in localstorage - autoGainControl: false, - echoCancellation: true, - noiseSuppression: true -}; - export type UpdatedLocalStreamCallback = (media: MediaStream|null) => void; export type StartScreenSharingCallback = (media: MediaStream) => void; export type StopScreenSharingCallback = (media: MediaStream) => void; @@ -43,7 +21,6 @@ export type ShowReportCallBack = (userId: string, userName: string|undefined) => export type HelpCameraSettingsCallBack = () => void; export class MediaManager { - localStream: MediaStream|null = null; private remoteVideo: Map<string, HTMLVideoElement> = new Map<string, HTMLVideoElement>(); webrtcInAudio: HTMLAudioElement; //FIX ME SOUNDMETER: check stalability of sound meter calculation @@ -91,24 +68,8 @@ export class MediaManager { }, this.userInputManager); return; } - - /*if (result.constraints.video !== false) { - HtmlUtils.getElementByIdOrFail('div-myCamVideo').classList.remove('hide'); - } else { - HtmlUtils.getElementByIdOrFail('div-myCamVideo').classList.add('hide'); - } - if (result.constraints.audio !== false) { - this.enableMicrophoneStyle(); - } else { - this.disableMicrophoneStyle(); - }*/ - - this.localStream = result.stream; - //this.myCamVideo.srcObject = this.localStream; - }); - //let screenSharingStream : MediaStream|null; screenSharingLocalStreamStore.subscribe((result) => { if (result.type === 'error') { console.error(result.error); @@ -119,14 +80,10 @@ export class MediaManager { } if (result.stream !== null) { - //screenSharingStream = result.stream; - this.addScreenSharingActiveVideo('me', DivImportance.Normal); HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('screen-sharing-me').srcObject = result.stream; } else { this.removeActiveScreenSharingVideo('me'); - - //screenSharingStream = null; } }); diff --git a/front/src/WebRtc/SimplePeer.ts b/front/src/WebRtc/SimplePeer.ts index ba2cb05e..caec53c5 100644 --- a/front/src/WebRtc/SimplePeer.ts +++ b/front/src/WebRtc/SimplePeer.ts @@ -128,13 +128,19 @@ export class SimplePeer { if(!user.initiator){ return; } - this.createPeerConnection(user); + const streamResult = get(localStreamStore); + let stream : MediaStream | null = null; + if (streamResult.type === 'success' && streamResult.stream) { + stream = streamResult.stream; + } + + this.createPeerConnection(user, stream); } /** * create peer connection to bind users */ - private createPeerConnection(user : UserSimplePeerInterface) : VideoPeer | null { + private createPeerConnection(user : UserSimplePeerInterface, localStream: MediaStream | null) : VideoPeer | null { const peerConnection = this.PeerConnectionArray.get(user.userId) if (peerConnection) { if (peerConnection.destroyed) { @@ -144,11 +150,11 @@ export class SimplePeer { if (!peerConnexionDeleted) { throw 'Error to delete peer connection'; } - this.createPeerConnection(user); + //return this.createPeerConnection(user, localStream); } else { peerConnection.toClose = false; + return null; } - return null; } let name = user.name; @@ -166,7 +172,7 @@ export class SimplePeer { this.lastWebrtcUserName = user.webRtcUser; this.lastWebrtcPassword = user.webRtcPassword; - const peer = new VideoPeer(user, user.initiator ? user.initiator : false, this.Connection); + const peer = new VideoPeer(user, user.initiator ? user.initiator : false, this.Connection, localStream); //permit to send message mediaManager.addSendMessageCallback(user.userId,(message: string) => { @@ -208,7 +214,7 @@ export class SimplePeer { if(!peerConnexionDeleted){ throw 'Error to delete peer connection'; } - this.createPeerConnection(user); + this.createPeerConnection(user, stream); }else { peerConnection.toClose = false; } @@ -327,7 +333,13 @@ export class SimplePeer { try { //if offer type, create peer connection if(data.signal.type === "offer"){ - this.createPeerConnection(data); + const streamResult = get(localStreamStore); + let stream : MediaStream | null = null; + if (streamResult.type === 'success' && streamResult.stream) { + stream = streamResult.stream; + } + + this.createPeerConnection(data, stream); } const peer = this.PeerConnectionArray.get(data.userId); if (peer !== undefined) { diff --git a/front/src/WebRtc/VideoPeer.ts b/front/src/WebRtc/VideoPeer.ts index 32e8e97f..5ca8952c 100644 --- a/front/src/WebRtc/VideoPeer.ts +++ b/front/src/WebRtc/VideoPeer.ts @@ -27,7 +27,7 @@ export class VideoPeer extends Peer { private onBlockSubscribe: Subscription; private onUnBlockSubscribe: Subscription; - constructor(public user: UserSimplePeerInterface, initiator: boolean, private connection: RoomConnection) { + constructor(public user: UserSimplePeerInterface, initiator: boolean, private connection: RoomConnection, localStream: MediaStream | null) { super({ initiator: initiator ? initiator : false, //reconnectTimer: 10000, @@ -107,7 +107,7 @@ export class VideoPeer extends Peer { this._onFinish(); }); - this.pushVideoToRemoteUser(); + this.pushVideoToRemoteUser(localStream); this.onBlockSubscribe = blackListManager.onBlockStream.subscribe((userId) => { if (userId === this.userId) { this.toggleRemoteStream(false); @@ -190,9 +190,8 @@ export class VideoPeer extends Peer { } } - private pushVideoToRemoteUser() { + private pushVideoToRemoteUser(localStream: MediaStream | null) { try { - const localStream: MediaStream | null = mediaManager.localStream; this.write(new Buffer(JSON.stringify({type: MESSAGE_TYPE_CONSTRAINT, ...get(obtainedMediaConstraintStore)}))); if(!localStream){