2020-04-25 16:05:33 +02:00
|
|
|
import {ConnexionInterface} from "../Connexion";
|
|
|
|
import {MediaManager} from "./MediaManager";
|
|
|
|
let Peer = require('simple-peer');
|
|
|
|
|
2020-05-14 20:39:30 +02:00
|
|
|
class UserSimplePear{
|
|
|
|
userId: string;
|
|
|
|
name?: string;
|
|
|
|
initiator?: boolean;
|
2020-04-26 19:59:51 +02:00
|
|
|
}
|
2020-05-14 20:39:30 +02:00
|
|
|
export class SimplePeerInterface {}
|
|
|
|
export class SimplePeer implements SimplePeerInterface{
|
2020-05-01 21:15:00 +02:00
|
|
|
private Connexion: ConnexionInterface;
|
|
|
|
private WebRtcRoomId: string;
|
2020-05-14 20:39:30 +02:00
|
|
|
private Users: Array<UserSimplePear> = new Array<UserSimplePear>();
|
2020-05-01 21:15:00 +02:00
|
|
|
|
2020-05-02 20:46:02 +02:00
|
|
|
private MediaManager: MediaManager;
|
2020-04-25 16:05:33 +02:00
|
|
|
|
2020-05-14 20:39:30 +02:00
|
|
|
private PeerConnexionArray: Map<string, any> = new Map<string, any>();
|
2020-04-25 16:05:33 +02:00
|
|
|
|
2020-04-29 17:49:40 +02:00
|
|
|
constructor(Connexion: ConnexionInterface, WebRtcRoomId: string = "test-webrtc") {
|
2020-04-25 16:05:33 +02:00
|
|
|
this.Connexion = Connexion;
|
2020-04-29 17:49:40 +02:00
|
|
|
this.WebRtcRoomId = WebRtcRoomId;
|
2020-05-03 17:19:42 +02:00
|
|
|
this.MediaManager = new MediaManager((stream : MediaStream) => {
|
|
|
|
this.updatedLocalStream();
|
|
|
|
});
|
2020-04-29 01:40:32 +02:00
|
|
|
this.initialise();
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 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
|
|
|
|
2020-05-01 21:15:00 +02:00
|
|
|
//receive signal by gemer
|
2020-05-15 22:04:49 +02:00
|
|
|
this.Connexion.receiveWebrtcSignal((message: any) => {
|
2020-05-01 21:15:00 +02:00
|
|
|
this.receiveWebrtcSignal(message);
|
|
|
|
});
|
2020-04-25 16:05:33 +02:00
|
|
|
|
2020-05-02 20:46:02 +02:00
|
|
|
this.MediaManager.activeVisio();
|
|
|
|
this.MediaManager.getCamera().then(() => {
|
|
|
|
|
|
|
|
//receive message start
|
2020-05-15 22:04:49 +02:00
|
|
|
this.Connexion.receiveWebrtcStart((message: any) => {
|
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
|
|
|
});
|
2020-05-01 21:15:00 +02:00
|
|
|
|
2020-05-02 20:46:02 +02:00
|
|
|
//receive signal by gemer
|
2020-05-16 16:07:38 +02:00
|
|
|
this.Connexion.disconnectMessage((data: any) => {
|
2020-05-02 20:46:02 +02:00
|
|
|
this.closeConnexion(data.userId);
|
|
|
|
});
|
2020-04-25 16:05:33 +02:00
|
|
|
}
|
|
|
|
|
2020-05-16 16:07:38 +02:00
|
|
|
private receiveWebrtcStart(data: any) {
|
2020-04-29 17:49:40 +02:00
|
|
|
this.WebRtcRoomId = data.roomId;
|
2020-04-29 01:40:32 +02:00
|
|
|
this.Users = data.clients;
|
2020-04-25 16:05:33 +02:00
|
|
|
|
2020-05-01 21:15:00 +02:00
|
|
|
//start connexion
|
|
|
|
this.startWebRtc();
|
2020-04-25 16:05:33 +02:00
|
|
|
}
|
|
|
|
|
2020-05-02 20:46:02 +02:00
|
|
|
/**
|
|
|
|
* server has two person connected, start the meet
|
|
|
|
*/
|
|
|
|
private startWebRtc() {
|
2020-05-14 20:39:30 +02:00
|
|
|
this.Users.forEach((user: UserSimplePear) => {
|
2020-05-02 20:46:02 +02:00
|
|
|
//if it's not an initiator, peer connexion will be created when gamer will receive offer signal
|
|
|
|
if(!user.initiator){
|
2020-04-25 17:14:05 +02:00
|
|
|
return;
|
|
|
|
}
|
2020-05-02 20:46:02 +02:00
|
|
|
this.createPeerConnexion(user);
|
|
|
|
});
|
|
|
|
}
|
2020-04-25 20:29:03 +02:00
|
|
|
|
2020-05-02 20:46:02 +02:00
|
|
|
/**
|
|
|
|
* create peer connexion to bind users
|
|
|
|
*/
|
2020-05-14 20:39:30 +02:00
|
|
|
private createPeerConnexion(user : UserSimplePear) {
|
|
|
|
if(this.PeerConnexionArray.has(user.userId)) {
|
2020-05-02 20:46:02 +02:00
|
|
|
return;
|
|
|
|
}
|
2020-05-01 21:15:00 +02:00
|
|
|
|
2020-05-14 20:39:30 +02:00
|
|
|
let name = user.name;
|
|
|
|
if(!name){
|
|
|
|
let userSearch = this.Users.find((userSearch: UserSimplePear) => userSearch.userId === user.userId);
|
|
|
|
if(userSearch) {
|
|
|
|
name = userSearch.name;
|
|
|
|
}
|
|
|
|
}
|
2020-05-02 20:46:02 +02:00
|
|
|
this.MediaManager.removeActiveVideo(user.userId);
|
2020-05-14 20:39:30 +02:00
|
|
|
this.MediaManager.addActiveVideo(user.userId, name);
|
2020-05-02 20:46:02 +02:00
|
|
|
|
2020-05-14 20:39:30 +02:00
|
|
|
let peer : any = 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
|
|
|
},
|
|
|
|
]
|
|
|
|
},
|
|
|
|
});
|
2020-05-14 20:39:30 +02:00
|
|
|
this.PeerConnexionArray.set(user.userId, peer);
|
2020-04-25 17:14:05 +02:00
|
|
|
|
2020-05-02 20:46:02 +02:00
|
|
|
//start listen signal for the peer connexion
|
2020-05-14 20:39:30 +02:00
|
|
|
this.PeerConnexionArray.get(user.userId).on('signal', (data: any) => {
|
2020-05-02 20:46:02 +02:00
|
|
|
this.sendWebrtcSignal(data, user.userId);
|
|
|
|
});
|
2020-04-25 16:05:33 +02:00
|
|
|
|
2020-05-14 20:39:30 +02:00
|
|
|
this.PeerConnexionArray.get(user.userId).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;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
if(microphoneActive){
|
|
|
|
this.MediaManager.enabledMicrophoneByUserId(user.userId);
|
|
|
|
}else{
|
|
|
|
this.MediaManager.disabledMicrophoneByUserId(user.userId);
|
|
|
|
}
|
|
|
|
|
|
|
|
if(videoActive){
|
|
|
|
this.MediaManager.enabledVideoByUserId(user.userId);
|
|
|
|
}else{
|
|
|
|
this.MediaManager.disabledVideoByUserId(user.userId);
|
|
|
|
}
|
2020-05-02 20:46:02 +02:00
|
|
|
this.stream(user.userId, stream);
|
|
|
|
});
|
2020-04-25 16:05:33 +02:00
|
|
|
|
2020-05-14 20:39:30 +02:00
|
|
|
this.PeerConnexionArray.get(user.userId).on('track', (track: MediaStreamTrack, stream: MediaStream) => {
|
2020-05-02 20:46:02 +02:00
|
|
|
this.stream(user.userId, stream);
|
|
|
|
});
|
|
|
|
|
2020-05-14 20:39:30 +02:00
|
|
|
this.PeerConnexionArray.get(user.userId).on('close', () => {
|
2020-05-02 20:46:02 +02:00
|
|
|
this.closeConnexion(user.userId);
|
|
|
|
});
|
2020-04-26 19:12:01 +02:00
|
|
|
|
2020-05-14 20:39:30 +02:00
|
|
|
this.PeerConnexionArray.get(user.userId).on('error', (err: any) => {
|
2020-05-02 20:46:02 +02:00
|
|
|
console.error(`error => ${user.userId} => ${err.code}`, err);
|
2020-04-25 16:05:33 +02:00
|
|
|
});
|
2020-05-02 20:46:02 +02:00
|
|
|
|
2020-05-14 20:39:30 +02:00
|
|
|
this.PeerConnexionArray.get(user.userId).on('connect', () => {
|
2020-05-02 20:46:02 +02:00
|
|
|
console.info(`connect => ${user.userId}`);
|
|
|
|
});
|
|
|
|
|
|
|
|
this.addMedia(user.userId);
|
2020-04-26 19:12:01 +02:00
|
|
|
}
|
|
|
|
|
2020-05-02 20:46:02 +02:00
|
|
|
private closeConnexion(userId : string) {
|
|
|
|
try {
|
|
|
|
this.MediaManager.removeActiveVideo(userId);
|
2020-05-14 20:39:30 +02:00
|
|
|
if (!this.PeerConnexionArray.get(userId)) {
|
2020-05-02 20:46:02 +02:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
// @ts-ignore
|
2020-05-14 20:39:30 +02:00
|
|
|
this.PeerConnexionArray.get(userId).destroy();
|
|
|
|
this.PeerConnexionArray.delete(userId)
|
2020-05-02 20:46:02 +02:00
|
|
|
} catch (err) {
|
|
|
|
console.error("closeConnexion", err)
|
|
|
|
}
|
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
|
|
|
|
*/
|
2020-05-01 21:15:00 +02:00
|
|
|
private sendWebrtcSignal(data: any, userId : string) {
|
2020-05-02 20:46:02 +02:00
|
|
|
try {
|
|
|
|
this.Connexion.sendWebrtcSignal(data, this.WebRtcRoomId, null, userId);
|
|
|
|
}catch (e) {
|
|
|
|
console.error(`sendWebrtcSignal => ${userId}`, e);
|
|
|
|
}
|
2020-04-25 16:05:33 +02:00
|
|
|
}
|
|
|
|
|
2020-05-16 16:07:38 +02:00
|
|
|
private receiveWebrtcSignal(data: any) {
|
2020-05-02 20:46:02 +02:00
|
|
|
try {
|
|
|
|
//if offer type, create peer connexion
|
|
|
|
if(data.signal.type === "offer"){
|
|
|
|
this.createPeerConnexion(data);
|
|
|
|
}
|
2020-05-14 20:39:30 +02:00
|
|
|
this.PeerConnexionArray.get(data.userId).signal(data.signal);
|
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
|
|
|
|
*/
|
2020-05-01 21:15:00 +02:00
|
|
|
private stream(userId : any, stream: MediaStream) {
|
2020-05-02 20:46:02 +02:00
|
|
|
this.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
|
|
|
*/
|
2020-05-01 21:15:00 +02:00
|
|
|
private addMedia (userId : any = null) {
|
2020-05-02 20:46:02 +02:00
|
|
|
try {
|
|
|
|
let transceiver : any = null;
|
2020-05-14 20:39:30 +02:00
|
|
|
if(!this.MediaManager.localStream){
|
|
|
|
return;
|
|
|
|
}
|
2020-05-02 20:46:02 +02:00
|
|
|
this.MediaManager.localStream.getTracks().forEach(
|
2020-05-14 20:39:30 +02:00
|
|
|
transceiver = (track: MediaStreamTrack) => this.PeerConnexionArray.get(userId).addTrack(track, this.MediaManager.localStream)
|
2020-05-02 20:46:02 +02:00
|
|
|
)
|
|
|
|
}catch (e) {
|
|
|
|
console.error(`addMedia => addMedia => ${userId}`, e);
|
2020-05-01 21:15:00 +02:00
|
|
|
}
|
2020-04-26 20:55:20 +02:00
|
|
|
}
|
2020-05-03 17:19:42 +02:00
|
|
|
|
|
|
|
updatedLocalStream(){
|
2020-05-14 20:39:30 +02:00
|
|
|
this.Users.forEach((user: UserSimplePear) => {
|
2020-05-03 17:19:42 +02:00
|
|
|
this.addMedia(user.userId);
|
|
|
|
})
|
|
|
|
}
|
2020-05-14 22:00:31 +02:00
|
|
|
}
|