partey_workadventure/front/src/WebRtc/SimplePeer.ts

427 lines
17 KiB
TypeScript
Raw Normal View History

import {
WebRtcDisconnectMessageInterface,
WebRtcSignalReceivedMessageInterface,
2020-09-25 18:29:22 +02:00
} from "../Connexion/ConnexionModels";
import {
mediaManager,
StartScreenSharingCallback,
StopScreenSharingCallback,
UpdatedLocalStreamCallback
} from "./MediaManager";
import {ScreenSharingPeer} from "./ScreenSharingPeer";
2020-10-25 21:59:14 +01:00
import {MESSAGE_TYPE_CONSTRAINT, MESSAGE_TYPE_MESSAGE, VideoPeer} from "./VideoPeer";
2020-09-25 18:29:22 +02:00
import {RoomConnection} from "../Connexion/RoomConnection";
import {connectionManager} from "../Connexion/ConnectionManager";
import {GameConnexionTypes} from "../Url/UrlManager";
2020-04-25 16:05:33 +02:00
export interface UserSimplePeerInterface{
userId: number;
name?: string;
initiator?: boolean;
}
export interface PeerConnectionListener {
onConnect(user: UserSimplePeerInterface): void;
onDisconnect(userId: number): void;
}
/**
* This class manages connections to all the peers in the same group as me.
*/
2020-06-03 22:32:43 +02:00
export class SimplePeer {
private Users: Array<UserSimplePeerInterface> = new Array<UserSimplePeerInterface>(); //todo: this array should be fusionned with PeerConnectionArray
private PeerScreenSharingConnectionArray: Map<number, ScreenSharingPeer> = new Map<number, ScreenSharingPeer>();
private PeerConnectionArray: Map<number, VideoPeer> = new Map<number, VideoPeer>();
private readonly sendLocalVideoStreamCallback: UpdatedLocalStreamCallback;
private readonly sendLocalScreenSharingStreamCallback: StartScreenSharingCallback;
private readonly stopLocalScreenSharingStreamCallback: StopScreenSharingCallback;
private readonly peerConnectionListeners: Array<PeerConnectionListener> = new Array<PeerConnectionListener>();
2020-04-25 16:05:33 +02:00
2020-11-10 13:00:14 +01:00
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.
this.sendLocalVideoStreamCallback = this.sendLocalVideoStream.bind(this);
this.sendLocalScreenSharingStreamCallback = this.sendLocalScreenSharingStream.bind(this);
this.stopLocalScreenSharingStreamCallback = this.stopLocalScreenSharingStream.bind(this);
mediaManager.onUpdateLocalStream(this.sendLocalVideoStreamCallback);
mediaManager.onStartScreenSharing(this.sendLocalScreenSharingStreamCallback);
mediaManager.onStopScreenSharing(this.stopLocalScreenSharingStreamCallback);
2020-04-29 01:40:32 +02:00
this.initialise();
}
public registerPeerConnectionListener(peerConnectionListener: PeerConnectionListener) {
this.peerConnectionListeners.push(peerConnectionListener);
}
public getNbConnections(): number {
return this.PeerConnectionArray.size;
}
2020-04-29 01:40:32 +02:00
/**
* permit to listen when user could start visio
*/
2020-05-02 20:46:02 +02:00
private initialise() {
2020-04-25 16:05:33 +02:00
//receive signal by gemer
this.Connection.receiveWebrtcSignal((message: WebRtcSignalReceivedMessageInterface) => {
this.receiveWebrtcSignal(message);
});
2020-04-25 16:05:33 +02:00
2020-06-11 23:18:06 +02:00
//receive signal by gemer
this.Connection.receiveWebrtcScreenSharingSignal((message: WebRtcSignalReceivedMessageInterface) => {
2020-06-11 23:18:06 +02:00
this.receiveWebrtcScreenSharingSignal(message);
});
mediaManager.showGameOverlay();
mediaManager.getCamera().then(() => {
2020-05-02 20:46:02 +02:00
//receive message start
2020-09-29 16:01:22 +02:00
this.Connection.receiveWebrtcStart((message: UserSimplePeerInterface) => {
2020-05-02 20:46:02 +02:00
this.receiveWebrtcStart(message);
});
}).catch((err) => {
console.error("err", err);
2020-04-25 16:05:33 +02:00
});
this.Connection.disconnectMessage((data: WebRtcDisconnectMessageInterface): void => {
this.closeConnection(data.userId);
2020-05-02 20:46:02 +02:00
});
2020-04-25 16:05:33 +02:00
}
2020-09-29 16:01:22 +02:00
private receiveWebrtcStart(user: UserSimplePeerInterface) {
//this.WebRtcRoomId = data.roomId;
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)
// This would be symmetrical to the way we handle disconnection.
//start connection
2020-09-29 16:01:22 +02:00
console.log('receiveWebrtcStart. Initiator: ', user.initiator)
if(!user.initiator){
return;
}
this.createPeerConnection(user);
2020-04-25 16:05:33 +02:00
}
2020-05-02 20:46:02 +02:00
/**
* create peer connection to bind users
2020-05-02 20:46:02 +02:00
*/
2020-10-20 20:39:33 +02:00
private createPeerConnection(user : UserSimplePeerInterface) : VideoPeer | null {
2020-10-20 18:02:44 +02:00
const peerConnection = this.PeerConnectionArray.get(user.userId)
2020-10-20 20:39:33 +02:00
if (peerConnection) {
if (peerConnection.destroyed) {
2020-10-20 18:02:44 +02:00
peerConnection.toClose = true;
peerConnection.destroy();
2020-10-20 18:03:10 +02:00
const peerConnexionDeleted = this.PeerConnectionArray.delete(user.userId);
2020-10-20 20:39:33 +02:00
if (!peerConnexionDeleted) {
2020-10-20 18:02:44 +02:00
throw 'Error to delete peer connection';
}
this.createPeerConnection(user);
2020-10-20 20:39:33 +02:00
} else {
2020-10-20 18:02:44 +02:00
peerConnection.toClose = false;
}
return null;
2020-05-02 20:46:02 +02:00
}
let name = user.name;
2020-10-20 20:39:33 +02:00
if (!name) {
const userSearch = this.Users.find((userSearch: UserSimplePeerInterface) => userSearch.userId === user.userId);
2020-10-20 20:39:33 +02:00
if (userSearch) {
name = userSearch.name;
}
}
mediaManager.removeActiveVideo("" + user.userId);
2020-10-15 12:12:11 +02:00
mediaManager.addActiveVideo("" + user.userId, name, connectionManager.getConnexionType === GameConnexionTypes.anonymous);
2020-05-02 20:46:02 +02:00
2020-08-20 22:29:14 +02:00
const peer = new VideoPeer(user.userId, user.initiator ? user.initiator : false, this.Connection);
2020-10-25 21:59:14 +01:00
//permit to send message
2020-10-26 14:13:51 +01:00
mediaManager.addSendMessageCallback(user.userId,(message: string) => {
2020-11-10 13:00:14 +01:00
peer.write(new Buffer(JSON.stringify({type: MESSAGE_TYPE_MESSAGE, name: this.myName.toUpperCase(), message: message})));
2020-10-25 21:59:14 +01:00
});
2020-10-20 18:02:44 +02:00
peer.toClose = false;
// When a connection is established to a video stream, and if a screen sharing is taking place,
// the user sharing screen should also initiate a connection to the remote user!
2020-06-03 22:32:43 +02:00
peer.on('connect', () => {
if (mediaManager.localScreenCapture) {
this.sendLocalScreenSharingStreamToUser(user.userId);
}
2020-05-02 20:46:02 +02:00
});
this.PeerConnectionArray.set(user.userId, peer);
2020-05-02 20:46:02 +02:00
for (const peerConnectionListener of this.peerConnectionListeners) {
peerConnectionListener.onConnect(user);
}
return peer;
}
/**
* create peer connection to bind users
*/
private createPeerScreenSharingConnection(user : UserSimplePeerInterface) : ScreenSharingPeer | null{
2020-10-20 20:39:33 +02:00
const peerConnection = this.PeerScreenSharingConnectionArray.get(user.userId);
if(peerConnection){
if(peerConnection.destroyed){
peerConnection.toClose = true;
peerConnection.destroy();
const peerConnexionDeleted = this.PeerScreenSharingConnectionArray.delete(user.userId);
if(!peerConnexionDeleted){
throw 'Error to delete peer connection';
}
this.createPeerConnection(user);
}else {
peerConnection.toClose = false;
}
return null;
}
// We should display the screen sharing ONLY if we are not initiator
if (!user.initiator) {
mediaManager.removeActiveScreenSharingVideo("" + user.userId);
mediaManager.addScreenSharingActiveVideo("" + user.userId);
2020-06-11 23:18:06 +02:00
}
2020-08-20 22:29:14 +02:00
const peer = new ScreenSharingPeer(user.userId, user.initiator ? user.initiator : false, this.Connection);
this.PeerScreenSharingConnectionArray.set(user.userId, peer);
2020-08-17 16:18:39 +02:00
for (const peerConnectionListener of this.peerConnectionListeners) {
peerConnectionListener.onConnect(user);
}
return peer;
}
/**
* This is triggered twice. Once by the server, and once by a remote client disconnecting
*/
private closeConnection(userId : number) {
mediaManager.playWebrtcOutSound();
2020-05-02 20:46:02 +02:00
try {
2020-06-09 23:13:26 +02:00
const peer = this.PeerConnectionArray.get(userId);
if (peer === undefined) {
2020-10-20 18:02:44 +02:00
console.warn("closeConnection => Tried to close connection for user "+userId+" but could not find user");
2020-05-02 20:46:02 +02:00
return;
}
2020-10-20 18:02:44 +02:00
//create temp perr to close
peer.toClose = true;
peer.destroy();
// 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.
2020-10-20 18:02:44 +02:00
this.closeScreenSharingConnection(userId);
2020-10-20 18:02:44 +02:00
2020-08-17 16:18:39 +02:00
for (const peerConnectionListener of this.peerConnectionListeners) {
peerConnectionListener.onDisconnect(userId);
}
const userIndex = this.Users.findIndex(user => user.userId === userId);
if(userIndex < 0){
throw 'Couln\'t delete user';
} else {
this.Users.splice(userIndex, 1);
}
2020-05-02 20:46:02 +02:00
} catch (err) {
console.error("closeConnection", err)
2020-05-02 20:46:02 +02:00
}
//if user left discussion, clear array peer connection of sharing
if(this.Users.length === 0) {
for (const userId of this.PeerScreenSharingConnectionArray.keys()) {
this.closeScreenSharingConnection(userId);
this.PeerScreenSharingConnectionArray.delete(userId);
}
}
2020-04-25 16:05:33 +02:00
}
2020-06-11 23:18:06 +02:00
/**
* This is triggered twice. Once by the server, and once by a remote client disconnecting
*/
private closeScreenSharingConnection(userId : number) {
2020-06-11 23:18:06 +02:00
try {
mediaManager.removeActiveScreenSharingVideo("" + userId);
2020-08-18 14:59:50 +02:00
const peer = this.PeerScreenSharingConnectionArray.get(userId);
2020-06-11 23:18:06 +02:00
if (peer === undefined) {
2020-10-20 18:02:44 +02:00
console.warn("closeScreenSharingConnection => Tried to close connection for user "+userId+" but could not find user")
2020-06-11 23:18:06 +02:00
return;
}
// 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.
peer.destroy();
//Comment this peer connexion because if we delete and try to reshare screen, the RTCPeerConnection send renegociate event. This array will be remove when user left circle discussion
/*if(!this.PeerScreenSharingConnectionArray.delete(userId)){
throw 'Couln\'t delete peer screen sharing connexion';
}*/
2020-06-11 23:18:06 +02:00
//console.log('Nb users in peerConnectionArray '+this.PeerConnectionArray.size);
} catch (err) {
console.error("closeConnection", err)
}
}
public closeAllConnections() {
for (const userId of this.PeerConnectionArray.keys()) {
this.closeConnection(userId);
}
for (const userId of this.PeerScreenSharingConnectionArray.keys()) {
this.closeScreenSharingConnection(userId);
}
}
/**
* Unregisters any held event handler.
*/
public unregister() {
mediaManager.removeUpdateLocalStreamEventListener(this.sendLocalVideoStreamCallback);
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
private receiveWebrtcSignal(data: WebRtcSignalReceivedMessageInterface) {
2020-05-02 20:46:02 +02:00
try {
//if offer type, create peer connection
2020-05-02 20:46:02 +02:00
if(data.signal.type === "offer"){
this.createPeerConnection(data);
2020-05-02 20:46:02 +02:00
}
2020-06-09 23:13:26 +02:00
const peer = this.PeerConnectionArray.get(data.userId);
2020-06-03 22:32:43 +02:00
if (peer !== undefined) {
peer.signal(data.signal);
} else {
console.error('Could not find peer whose ID is "'+data.userId+'" in PeerConnectionArray');
}
2020-05-02 20:46:02 +02:00
} catch (e) {
console.error(`receiveWebrtcSignal => ${data.userId}`, e);
2020-04-25 16:05:33 +02:00
}
}
private receiveWebrtcScreenSharingSignal(data: WebRtcSignalReceivedMessageInterface) {
2020-06-11 23:18:06 +02:00
console.log("receiveWebrtcScreenSharingSignal", data);
try {
//if offer type, create peer connection
if(data.signal.type === "offer"){
this.createPeerScreenSharingConnection(data);
2020-06-11 23:18:06 +02:00
}
2020-08-18 14:59:50 +02:00
const peer = this.PeerScreenSharingConnectionArray.get(data.userId);
2020-06-11 23:18:06 +02:00
if (peer !== undefined) {
peer.signal(data.signal);
} else {
console.error('Could not find peer whose ID is "'+data.userId+'" in receiveWebrtcScreenSharingSignal');
console.info('tentative to create new peer connexion');
this.sendLocalScreenSharingStreamToUser(data.userId);
2020-06-11 23:18:06 +02:00
}
} catch (e) {
console.error(`receiveWebrtcSignal => ${data.userId}`, e);
//Comment this peer connexion because if we delete and try to reshare screen, the RTCPeerConnection send renegociate event. This array will be remove when user left circle discussion
//this.PeerScreenSharingConnectionArray.delete(data.userId);
this.receiveWebrtcScreenSharingSignal(data);
2020-06-11 23:18:06 +02:00
}
}
private pushVideoToRemoteUser(userId : number) {
2020-05-02 20:46:02 +02:00
try {
2020-08-18 14:59:50 +02:00
const PeerConnection = this.PeerConnectionArray.get(userId);
2020-06-08 22:52:25 +02:00
if (!PeerConnection) {
throw new Error('While adding media, cannot find user with ID ' + userId);
2020-06-03 22:57:00 +02:00
}
2020-08-18 14:59:50 +02:00
const localStream: MediaStream | null = mediaManager.localStream;
2020-10-25 21:59:14 +01:00
PeerConnection.write(new Buffer(JSON.stringify({type: MESSAGE_TYPE_CONSTRAINT, ...mediaManager.constraintsMedia})));
2020-06-06 19:52:34 +02:00
if(!localStream){
return;
}
for (const track of localStream.getTracks()) {
//todo: this is a ugly hack to reduce the amount of error in console. Find a better way.
if ((track as any).added !== undefined) continue; // eslint-disable-line @typescript-eslint/no-explicit-any
(track as any).added = true; // eslint-disable-line @typescript-eslint/no-explicit-any
PeerConnection.addTrack(track, localStream);
2020-06-03 22:57:00 +02:00
}
2020-05-02 20:46:02 +02:00
}catch (e) {
console.error(`pushVideoToRemoteUser => ${userId}`, e);
}
2020-04-26 20:55:20 +02:00
}
2020-05-03 17:19:42 +02:00
private pushScreenSharingToRemoteUser(userId : number) {
2020-08-18 14:59:50 +02:00
const PeerConnection = this.PeerScreenSharingConnectionArray.get(userId);
2020-06-11 23:18:06 +02:00
if (!PeerConnection) {
throw new Error('While pushing screen sharing, cannot find user with ID ' + userId);
2020-06-11 23:18:06 +02:00
}
2020-08-18 14:59:50 +02:00
const localScreenCapture: MediaStream | null = mediaManager.localScreenCapture;
2020-06-11 23:18:06 +02:00
if(!localScreenCapture){
return;
}
for (const track of localScreenCapture.getTracks()) {
2020-06-11 23:18:06 +02:00
PeerConnection.addTrack(track, localScreenCapture);
}
2020-06-11 23:18:06 +02:00
return;
}
public sendLocalVideoStream(){
for (const user of this.Users) {
this.pushVideoToRemoteUser(user.userId);
}
2020-05-03 17:19:42 +02:00
}
/**
* Triggered locally when clicking on the screen sharing button
*/
public sendLocalScreenSharingStream() {
if (!mediaManager.localScreenCapture) {
console.error('Could not find localScreenCapture to share')
return;
}
for (const user of this.Users) {
this.sendLocalScreenSharingStreamToUser(user.userId);
}
}
/**
* Triggered locally when clicking on the screen sharing button
*/
public stopLocalScreenSharingStream(stream: MediaStream) {
for (const user of this.Users) {
this.stopLocalScreenSharingStreamToUser(user.userId, stream);
}
}
private sendLocalScreenSharingStreamToUser(userId: number): void {
// 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);
return;
}
const screenSharingUser: UserSimplePeerInterface = {
userId,
initiator: true
};
const PeerConnectionScreenSharing = this.createPeerScreenSharingConnection(screenSharingUser);
if (!PeerConnectionScreenSharing) {
return;
}
}
private stopLocalScreenSharingStreamToUser(userId: number, stream: MediaStream): void {
const PeerConnectionScreenSharing = this.PeerScreenSharingConnectionArray.get(userId);
if (!PeerConnectionScreenSharing) {
throw new Error('Weird, screen sharing connection to user ' + userId + 'not found')
}
console.log("updatedScreenSharing => destroy", PeerConnectionScreenSharing);
// Stop sending stream and close peer connection if peer is not sending stream too
PeerConnectionScreenSharing.stopPushingScreenSharingToRemoteUser(stream);
if (!PeerConnectionScreenSharing.isReceivingScreenSharingStream()) {
PeerConnectionScreenSharing.destroy();
//Comment this peer connexion because if we delete and try to reshare screen, the RTCPeerConnection send renegociate event. This array will be remove when user left circle discussion
//this.PeerScreenSharingConnectionArray.delete(userId);
}
}
2020-05-14 22:00:31 +02:00
}