workadventure/front/src/WebRtc/SimplePeer.ts

323 lines
11 KiB
TypeScript
Raw Normal View History

import {
Connection,
WebRtcDisconnectMessageInterface,
WebRtcSignalMessageInterface,
WebRtcStartMessageInterface
} from "../Connection";
import { mediaManager } from "./MediaManager";
2020-06-03 22:32:43 +02:00
import * as SimplePeerNamespace from "simple-peer";
2020-06-09 23:13:26 +02:00
const Peer: SimplePeerNamespace.SimplePeer = require('simple-peer');
2020-04-25 16:05:33 +02:00
export interface UserSimplePeer{
userId: string;
name?: string;
initiator?: boolean;
}
export interface PeerConnectionListener {
onConnect(user: UserSimplePeer): void;
onDisconnect(userId: string): 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 Connection: Connection;
private WebRtcRoomId: string;
2020-06-03 22:32:43 +02:00
private Users: Array<UserSimplePeer> = new Array<UserSimplePeer>();
2020-06-03 22:32:43 +02:00
private PeerConnectionArray: Map<string, SimplePeerNamespace.Instance> = new Map<string, SimplePeerNamespace.Instance>();
private readonly updateLocalStreamCallback: (media: MediaStream) => void;
private readonly peerConnectionListeners: Array<PeerConnectionListener> = new Array<PeerConnectionListener>();
2020-04-25 16:05:33 +02:00
constructor(Connection: Connection, WebRtcRoomId: string = "test-webrtc") {
this.Connection = Connection;
2020-04-29 17:49:40 +02:00
this.WebRtcRoomId = WebRtcRoomId;
// We need to go through this weird bound function pointer in order to be able to "free" this reference later.
this.updateLocalStreamCallback = this.updatedLocalStream.bind(this);
mediaManager.onUpdateLocalStream(this.updateLocalStreamCallback);
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: WebRtcSignalMessageInterface) => {
this.receiveWebrtcSignal(message);
});
2020-04-25 16:05:33 +02:00
mediaManager.activeVisio();
mediaManager.getCamera().then(() => {
2020-05-02 20:46:02 +02:00
//receive message start
this.Connection.receiveWebrtcStart((message: WebRtcStartMessageInterface) => {
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
}
private receiveWebrtcStart(data: WebRtcStartMessageInterface) {
2020-04-29 17:49:40 +02:00
this.WebRtcRoomId = data.roomId;
2020-04-29 01:40:32 +02:00
this.Users = data.clients;
// Note: the clients array contain the list of all clients (event 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)
// TODO: refactor this to only send a message to connect to one user (rather than several users).
// This would be symmetrical to the way we handle disconnection.
//console.log('Start message', data);
2020-04-25 16:05:33 +02:00
//start connection
this.startWebRtc();
2020-04-25 16:05:33 +02:00
}
2020-05-02 20:46:02 +02:00
/**
* server has two people connected, start the meet
2020-05-02 20:46:02 +02:00
*/
private startWebRtc() {
2020-06-03 22:32:43 +02:00
this.Users.forEach((user: UserSimplePeer) => {
//if it's not an initiator, peer connection will be created when gamer will receive offer signal
2020-05-02 20:46:02 +02:00
if(!user.initiator){
2020-04-25 17:14:05 +02:00
return;
}
this.createPeerConnection(user);
2020-05-02 20:46:02 +02:00
});
}
2020-04-25 20:29:03 +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-06-03 22:32:43 +02:00
private createPeerConnection(user : UserSimplePeer) {
if(this.PeerConnectionArray.has(user.userId)) {
2020-05-02 20:46:02 +02:00
return;
}
//console.log("Creating connection with peer "+user.userId);
let name = user.name;
if(!name){
2020-06-09 23:13:26 +02:00
const userSearch = this.Users.find((userSearch: UserSimplePeer) => userSearch.userId === user.userId);
if(userSearch) {
name = userSearch.name;
}
}
mediaManager.removeActiveVideo(user.userId);
mediaManager.addActiveVideo(user.userId, name);
2020-05-02 20:46:02 +02:00
2020-06-09 23:13:26 +02:00
const peer : SimplePeerNamespace.Instance = new Peer({
2020-05-02 20:46:02 +02:00
initiator: user.initiator ? user.initiator : false,
reconnectTimer: 10000,
config: {
iceServers: [
{
urls: 'stun:stun.l.google.com:19302'
},
{
urls: 'turn:numb.viagenie.ca',
username: 'g.parant@thecodingmachine.com',
2020-05-03 17:19:42 +02:00
credential: 'itcugcOHxle9Acqi$'
2020-05-02 20:46:02 +02:00
},
]
},
});
this.PeerConnectionArray.set(user.userId, peer);
2020-04-25 17:14:05 +02:00
//start listen signal for the peer connection
peer.on('signal', (data: unknown) => {
2020-05-02 20:46:02 +02:00
this.sendWebrtcSignal(data, user.userId);
});
2020-04-25 16:05:33 +02:00
2020-06-03 22:32:43 +02:00
peer.on('stream', (stream: MediaStream) => {
let videoActive = false;
let microphoneActive = false;
stream.getTracks().forEach((track : MediaStreamTrack) => {
if(track.kind === "audio"){
microphoneActive = true;
}
if(track.kind === "video"){
videoActive = true;
}
});
2020-05-02 20:46:02 +02:00
this.stream(user.userId, stream);
});
2020-04-25 16:05:33 +02:00
2020-06-03 22:32:43 +02:00
/*peer.on('track', (track: MediaStreamTrack, stream: MediaStream) => {
});*/
2020-05-02 20:46:02 +02:00
2020-06-03 22:32:43 +02:00
peer.on('close', () => {
this.closeConnection(user.userId);
2020-05-02 20:46:02 +02:00
});
// eslint-disable-next-line @typescript-eslint/no-explicit-any
2020-06-03 22:32:43 +02:00
peer.on('error', (err: any) => {
2020-05-02 20:46:02 +02:00
console.error(`error => ${user.userId} => ${err.code}`, err);
mediaManager.isError(user.userId);
2020-04-25 16:05:33 +02:00
});
2020-05-02 20:46:02 +02:00
2020-06-03 22:32:43 +02:00
peer.on('connect', () => {
mediaManager.isConnected(user.userId);
2020-05-02 20:46:02 +02:00
console.info(`connect => ${user.userId}`);
});
2020-06-03 22:32:43 +02:00
peer.on('data', (chunk: Buffer) => {
let constraint = JSON.parse(chunk.toString('utf8'));
if (constraint.audio) {
mediaManager.enabledMicrophoneByUserId(user.userId);
} else {
mediaManager.disabledMicrophoneByUserId(user.userId);
}
if (constraint.video) {
mediaManager.enabledVideoByUserId(user.userId);
} else {
this.stream(user.userId);
mediaManager.disabledVideoByUserId(user.userId);
}
});
2020-05-02 20:46:02 +02:00
this.addMedia(user.userId);
2020-08-17 16:18:39 +02:00
for (const peerConnectionListener of this.peerConnectionListeners) {
peerConnectionListener.onConnect(user);
}
}
/**
* This is triggered twice. Once by the server, and once by a remote client disconnecting
*
* @param userId
*/
private closeConnection(userId : string) {
2020-05-02 20:46:02 +02:00
try {
mediaManager.removeActiveVideo(userId);
2020-06-09 23:13:26 +02:00
const peer = this.PeerConnectionArray.get(userId);
if (peer === undefined) {
console.warn("Tried to close connection for user "+userId+" but could not find user")
2020-05-02 20:46:02 +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.
//console.log('Closing connection with '+userId);
peer.destroy();
this.PeerConnectionArray.delete(userId)
//console.log('Nb users in peerConnectionArray '+this.PeerConnectionArray.size);
2020-08-17 16:18:39 +02:00
for (const peerConnectionListener of this.peerConnectionListeners) {
peerConnectionListener.onDisconnect(userId);
}
2020-05-02 20:46:02 +02:00
} catch (err) {
console.error("closeConnection", err)
2020-05-02 20:46:02 +02:00
}
2020-04-25 16:05:33 +02:00
}
public closeAllConnections() {
for (const userId of this.PeerConnectionArray.keys()) {
this.closeConnection(userId);
}
}
/**
* Unregisters any held event handler.
*/
public unregister() {
mediaManager.removeUpdateLocalStreamEventListener(this.updateLocalStreamCallback);
}
2020-04-25 16:05:33 +02:00
/**
2020-04-26 17:42:49 +02:00
*
* @param userId
2020-04-25 16:05:33 +02:00
* @param data
*/
private sendWebrtcSignal(data: unknown, userId : string) {
2020-05-02 20:46:02 +02:00
try {
this.Connection.sendWebrtcSignal(data, this.WebRtcRoomId, null, userId);
2020-05-02 20:46:02 +02:00
}catch (e) {
console.error(`sendWebrtcSignal => ${userId}`, e);
}
2020-04-25 16:05:33 +02:00
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
private receiveWebrtcSignal(data: WebRtcSignalMessageInterface) {
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
}
}
/**
2020-04-25 20:29:03 +02:00
*
* @param userId
2020-04-25 16:05:33 +02:00
* @param stream
*/
private stream(userId : string, stream?: MediaStream) {
if(!stream){
mediaManager.disabledVideoByUserId(userId);
mediaManager.disabledMicrophoneByUserId(userId);
return;
}
mediaManager.addStreamRemoteVideo(userId, stream);
2020-04-25 16:05:33 +02:00
}
/**
2020-04-25 20:29:03 +02:00
*
* @param userId
2020-04-25 16:05:33 +02:00
*/
private addMedia (userId : string) {
2020-05-02 20:46:02 +02:00
try {
let localStream: MediaStream | null = mediaManager.localStream;
let localScreenCapture: MediaStream | null = mediaManager.localScreenCapture;
let peer = this.PeerConnectionArray.get(userId);
2020-06-03 22:57:00 +02:00
if (peer === undefined) {
throw new Error('While adding media, cannot find user with ID ' + userId);
2020-06-03 22:57:00 +02:00
}
peer.write(new Buffer(JSON.stringify(mediaManager.constraintsMedia)));
if (localScreenCapture !== null) {
for (const track of localScreenCapture.getTracks()) {
peer.addTrack(track, localScreenCapture);
}
} else if (localStream) {
for (const track of localStream.getTracks()) {
peer.addTrack(track, localStream);
}
2020-06-03 22:57:00 +02:00
}
2020-05-02 20:46:02 +02:00
}catch (e) {
console.error(`addMedia => addMedia => ${userId}`, e);
}
2020-04-26 20:55:20 +02:00
}
2020-05-03 17:19:42 +02:00
updatedLocalStream(){
2020-06-03 22:32:43 +02:00
this.Users.forEach((user: UserSimplePeer) => {
2020-05-03 17:19:42 +02:00
this.addMedia(user.userId);
})
}
2020-05-14 22:00:31 +02:00
}