- ` +
- ((anonymous === false)?`
-
- `:''
- )
- +
- `
+
+
+
+ 
`;
layoutManager.add(DivImportance.Normal, userId, html);
-
+
this.remoteVideo.set(userId, HtmlUtils.getElementByIdOrFail
@@ -532,7 +526,11 @@ export class MediaManager {
this.remoteVideo.set(userId, HtmlUtils.getElementByIdOrFail(userId));
}
-
+
+ private getScreenSharingId(userId: string): string {
+ return `screen-sharing-${userId}`;
+ }
+
disabledMicrophoneByUserId(userId: number){
const element = document.getElementById(`microphone-${userId}`);
if(!element){
@@ -571,6 +569,10 @@ export class MediaManager {
}
}
+ toggleBlockLogo(userId: number, show: boolean): void {
+ const blockLogoElement = HtmlUtils.getElementByIdOrFail('blocking-'+userId);
+ show ? blockLogoElement.classList.add('active') : blockLogoElement.classList.remove('active');
+ }
addStreamRemoteVideo(userId: string, stream : MediaStream): void {
const remoteVideo = this.remoteVideo.get(userId);
if (remoteVideo === undefined) {
@@ -580,12 +582,12 @@ export class MediaManager {
}
addStreamRemoteScreenSharing(userId: string, stream : MediaStream){
// In the case of screen sharing (going both ways), we may need to create the HTML element if it does not exist yet
- const remoteVideo = this.remoteVideo.get(`screen-sharing-${userId}`);
+ const remoteVideo = this.remoteVideo.get(this.getScreenSharingId(userId));
if (remoteVideo === undefined) {
this.addScreenSharingActiveVideo(userId);
}
- this.addStreamRemoteVideo(`screen-sharing-${userId}`, stream);
+ this.addStreamRemoteVideo(this.getScreenSharingId(userId), stream);
}
removeActiveVideo(userId: string){
@@ -596,7 +598,7 @@ export class MediaManager {
this.removeParticipant(userId);
}
removeActiveScreenSharingVideo(userId: string) {
- this.removeActiveVideo(`screen-sharing-${userId}`)
+ this.removeActiveVideo(this.getScreenSharingId(userId))
}
playWebrtcOutSound(): void {
@@ -632,7 +634,7 @@ export class MediaManager {
errorDiv.style.display = 'block';
}
isErrorScreenSharing(userId: string): void {
- this.isError(`screen-sharing-${userId}`);
+ this.isError(this.getScreenSharingId(userId));
}
diff --git a/front/src/WebRtc/SimplePeer.ts b/front/src/WebRtc/SimplePeer.ts
index bc2590d7..98f83b0c 100644
--- a/front/src/WebRtc/SimplePeer.ts
+++ b/front/src/WebRtc/SimplePeer.ts
@@ -9,10 +9,11 @@ import {
UpdatedLocalStreamCallback
} from "./MediaManager";
import {ScreenSharingPeer} from "./ScreenSharingPeer";
-import {MESSAGE_TYPE_CONSTRAINT, MESSAGE_TYPE_MESSAGE, VideoPeer} from "./VideoPeer";
+import {MESSAGE_TYPE_BLOCKED, MESSAGE_TYPE_CONSTRAINT, MESSAGE_TYPE_MESSAGE, VideoPeer} from "./VideoPeer";
import {RoomConnection} from "../Connexion/RoomConnection";
import {connectionManager} from "../Connexion/ConnectionManager";
import {GameConnexionTypes} from "../Url/UrlManager";
+import {blackListManager} from "./BlackListManager";
export interface UserSimplePeerInterface{
userId: number;
@@ -38,6 +39,7 @@ export class SimplePeer {
private readonly sendLocalScreenSharingStreamCallback: StartScreenSharingCallback;
private readonly stopLocalScreenSharingStreamCallback: StopScreenSharingCallback;
private readonly peerConnectionListeners: Array = new Array();
+ private readonly userId: number;
constructor(private Connection: RoomConnection, private enableReporting: boolean, private myName: string) {
// We need to go through this weird bound function pointer in order to be able to "free" this reference later.
@@ -48,6 +50,7 @@ export class SimplePeer {
mediaManager.onUpdateLocalStream(this.sendLocalVideoStreamCallback);
mediaManager.onStartScreenSharing(this.sendLocalScreenSharingStreamCallback);
mediaManager.onStopScreenSharing(this.stopLocalScreenSharingStreamCallback);
+ this.userId = Connection.getUserId();
this.initialise();
}
@@ -91,8 +94,7 @@ export class SimplePeer {
});
}
- private receiveWebrtcStart(user: UserSimplePeerInterface) {
- //this.WebRtcRoomId = data.roomId;
+ private receiveWebrtcStart(user: UserSimplePeerInterface): void {
this.Users.push(user);
// Note: the clients array contain the list of all clients (even the ones we are already connected to in case a user joints a group)
// So we can receive a request we already had before. (which will abort at the first line of createPeerConnection)
@@ -136,13 +138,13 @@ export class SimplePeer {
mediaManager.removeActiveVideo("" + user.userId);
- mediaManager.addActiveVideo("" + user.userId, name, connectionManager.getConnexionType === GameConnexionTypes.anonymous);
+ mediaManager.addActiveVideo(user, name);
- const peer = new VideoPeer(user.userId, user.initiator ? user.initiator : false, this.Connection);
+ const peer = new VideoPeer(user, user.initiator ? user.initiator : false, this.Connection);
//permit to send message
mediaManager.addSendMessageCallback(user.userId,(message: string) => {
- peer.write(new Buffer(JSON.stringify({type: MESSAGE_TYPE_MESSAGE, name: this.myName.toUpperCase(), message: message})));
+ peer.write(new Buffer(JSON.stringify({type: MESSAGE_TYPE_MESSAGE, name: this.myName.toUpperCase(), userId: this.userId, message: message})));
});
peer.toClose = false;
@@ -298,6 +300,7 @@ export class SimplePeer {
}
private receiveWebrtcScreenSharingSignal(data: WebRtcSignalReceivedMessageInterface) {
+ if (blackListManager.isBlackListed(data.userId)) return;
console.log("receiveWebrtcScreenSharingSignal", data);
try {
//if offer type, create peer connection
@@ -390,6 +393,7 @@ export class SimplePeer {
}
private sendLocalScreenSharingStreamToUser(userId: number): void {
+ if (blackListManager.isBlackListed(userId)) return;
// If a connection already exists with user (because it is already sharing a screen with us... let's use this connection)
if (this.PeerScreenSharingConnectionArray.has(userId)) {
this.pushScreenSharingToRemoteUser(userId);
diff --git a/front/src/WebRtc/VideoPeer.ts b/front/src/WebRtc/VideoPeer.ts
index cc5ac62e..b2df80c2 100644
--- a/front/src/WebRtc/VideoPeer.ts
+++ b/front/src/WebRtc/VideoPeer.ts
@@ -2,19 +2,30 @@ import * as SimplePeerNamespace from "simple-peer";
import {mediaManager} from "./MediaManager";
import {STUN_SERVER, TURN_PASSWORD, TURN_SERVER, TURN_USER} from "../Enum/EnvironmentVariable";
import {RoomConnection} from "../Connexion/RoomConnection";
+import {blackListManager} from "./BlackListManager";
+import {Subscription} from "rxjs";
+import {UserSimplePeerInterface} from "./SimplePeer";
const Peer: SimplePeerNamespace.SimplePeer = require('simple-peer');
export const MESSAGE_TYPE_CONSTRAINT = 'constraint';
export const MESSAGE_TYPE_MESSAGE = 'message';
+export const MESSAGE_TYPE_BLOCKED = 'blocked';
+export const MESSAGE_TYPE_UNBLOCKED = 'unblocked';
/**
* A peer connection used to transmit video / audio signals between 2 peers.
*/
export class VideoPeer extends Peer {
public toClose: boolean = false;
public _connected: boolean = false;
+ private remoteStream!: MediaStream;
+ private blocked: boolean = false;
+ private userId: number;
+ private userName: string;
+ private onBlockSubscribe: Subscription;
+ private onUnBlockSubscribe: Subscription;
- constructor(public userId: number, initiator: boolean, private connection: RoomConnection) {
+ constructor(public user: UserSimplePeerInterface, initiator: boolean, private connection: RoomConnection) {
super({
initiator: initiator ? initiator : false,
reconnectTimer: 10000,
@@ -31,35 +42,15 @@ export class VideoPeer extends Peer {
]
}
});
-
- console.log('PEER SETUP ', {
- initiator: initiator ? initiator : false,
- reconnectTimer: 10000,
- config: {
- iceServers: [
- {
- urls: STUN_SERVER.split(',')
- },
- {
- urls: TURN_SERVER.split(','),
- username: TURN_USER,
- credential: TURN_PASSWORD
- },
- ]
- }
- });
+ this.userId = user.userId;
+ this.userName = user.name || '';
//start listen signal for the peer connection
this.on('signal', (data: unknown) => {
this.sendWebrtcSignal(data);
});
- this.on('stream', (stream: MediaStream) => {
- this.stream(stream);
- });
-
- /*peer.on('track', (track: MediaStreamTrack, stream: MediaStream) => {
- });*/
+ this.on('stream', (stream: MediaStream) => this.stream(stream));
this.on('close', () => {
this._connected = false;
@@ -70,7 +61,7 @@ export class VideoPeer extends Peer {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.on('error', (err: any) => {
console.error(`error => ${this.userId} => ${err.code}`, err);
- mediaManager.isError("" + userId);
+ mediaManager.isError("" + this.userId);
});
this.on('connect', () => {
@@ -81,8 +72,6 @@ export class VideoPeer extends Peer {
this.on('data', (chunk: Buffer) => {
const message = JSON.parse(chunk.toString('utf8'));
- console.log("data", message);
-
if(message.type === MESSAGE_TYPE_CONSTRAINT) {
if (message.audio) {
mediaManager.enabledMicrophoneByUserId(this.userId);
@@ -95,8 +84,19 @@ export class VideoPeer extends Peer {
} else {
mediaManager.disabledVideoByUserId(this.userId);
}
- } else if(message.type === 'message') {
- mediaManager.addNewMessage(message.name, message.message);
+ } else if(message.type === MESSAGE_TYPE_MESSAGE) {
+ if (!blackListManager.isBlackListed(message.userId)) {
+ mediaManager.addNewMessage(message.name, message.message);
+ }
+ } else if(message.type === MESSAGE_TYPE_BLOCKED) {
+ //FIXME when A blacklists B, the output stream from A is muted in B's js client. This is insecure since B can manipulate the code to unmute A stream.
+ // Find a way to block A's output stream in A's js client
+ //However, the output stream stream B is correctly blocked in A client
+ this.blocked = true;
+ this.toggleRemoteStream(false);
+ } else if(message.type === MESSAGE_TYPE_UNBLOCKED) {
+ this.blocked = false;
+ this.toggleRemoteStream(true);
}
});
@@ -105,6 +105,31 @@ export class VideoPeer extends Peer {
});
this.pushVideoToRemoteUser();
+ this.onBlockSubscribe = blackListManager.onBlockStream.subscribe((userId) => {
+ if (userId === this.userId) {
+ this.toggleRemoteStream(false);
+ this.sendBlockMessage(true);
+ }
+ });
+ this.onUnBlockSubscribe = blackListManager.onUnBlockStream.subscribe((userId) => {
+ if (userId === this.userId) {
+ this.toggleRemoteStream(true);
+ this.sendBlockMessage(false);
+ }
+ });
+
+ if (blackListManager.isBlackListed(this.userId)) {
+ this.sendBlockMessage(true)
+ }
+ }
+
+ private sendBlockMessage(blocking: boolean) {
+ this.write(new Buffer(JSON.stringify({type: blocking ? MESSAGE_TYPE_BLOCKED : MESSAGE_TYPE_UNBLOCKED, name: this.userName.toUpperCase(), userId: this.userId, message: ''})));
+ }
+
+ private toggleRemoteStream(enable: boolean) {
+ this.remoteStream.getTracks().forEach(track => track.enabled = enable);
+ mediaManager.toggleBlockLogo(this.userId, !enable);
}
private sendWebrtcSignal(data: unknown) {
@@ -120,13 +145,13 @@ export class VideoPeer extends Peer {
*/
private stream(stream: MediaStream) {
try {
+ this.remoteStream = stream;
+ if (blackListManager.isBlackListed(this.userId) || this.blocked) {
+ this.toggleRemoteStream(false);
+ }
mediaManager.addStreamRemoteVideo("" + this.userId, stream);
}catch (err){
console.error(err);
- //Force add streem video
- /*setTimeout(() => {
- this.stream(stream);
- }, 500);*/ //todo: find a way to prevent infinite regression.
}
}
@@ -139,6 +164,8 @@ export class VideoPeer extends Peer {
if(!this.toClose){
return;
}
+ this.onBlockSubscribe.unsubscribe();
+ this.onUnBlockSubscribe.unsubscribe();
mediaManager.removeActiveVideo("" + this.userId);
// FIXME: I don't understand why "Closing connection with" message is displayed TWICE before "Nb users in peerConnectionArray"
// I do understand the method closeConnection is called twice, but I don't understand how they manage to run in parallel.
diff --git a/front/yarn.lock b/front/yarn.lock
index fd34cd6d..0b85ad88 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -4094,7 +4094,7 @@ run-queue@^1.0.0, run-queue@^1.0.3:
dependencies:
aproba "^1.1.1"
-rxjs@^6.6.0:
+rxjs@^6.6.0, rxjs@^6.6.3:
version "6.6.3"
resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.3.tgz#8ca84635c4daa900c0d3967a6ee7ac60271ee552"
integrity sha512-trsQc+xYYXZ3urjOiJOuCOa5N3jAZ3eiSpQB5hIT8zGlL2QfnHLJ2r7GMkBGuIausdJN1OneaI6gQlsqNHHmZQ==