2020-04-25 16:05:33 +02:00
|
|
|
import {ConnexionInterface} from "../Connexion";
|
|
|
|
import {MediaManager} from "./MediaManager";
|
|
|
|
let Peer = require('simple-peer');
|
|
|
|
|
2020-04-26 19:59:51 +02:00
|
|
|
export interface SimplePeerInterface {
|
|
|
|
}
|
2020-05-01 21:15:00 +02:00
|
|
|
enum PeerConnexionStatus{
|
|
|
|
DISABLED = 1,
|
|
|
|
ACTIVATED = 2
|
|
|
|
}
|
2020-04-25 16:05:33 +02:00
|
|
|
export class SimplePeer {
|
2020-05-01 21:15:00 +02:00
|
|
|
private Connexion: ConnexionInterface;
|
|
|
|
private MediaManager: MediaManager;
|
|
|
|
private WebRtcRoomId: string;
|
|
|
|
private Users: Array<any>;
|
|
|
|
|
|
|
|
private PeerConnexionArray: Array<any> = new Array<any>();
|
2020-04-25 16:05:33 +02:00
|
|
|
|
2020-05-01 21:15:00 +02:00
|
|
|
private PeerConnexionStatus : number = PeerConnexionStatus.DISABLED;
|
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-04-26 20:55:20 +02:00
|
|
|
this.MediaManager = new MediaManager();
|
2020-04-29 01:40:32 +02:00
|
|
|
this.initialise();
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* permit to listen when user could start visio
|
|
|
|
*/
|
|
|
|
private initialise(){
|
|
|
|
|
|
|
|
//receive message start
|
|
|
|
this.Connexion.receiveWebrtcStart((message: string) => {
|
|
|
|
this.receiveWebrtcStart(message);
|
|
|
|
});
|
|
|
|
|
|
|
|
//when button to call is clicked, start video
|
2020-05-01 21:15:00 +02:00
|
|
|
/*this.MediaManager.getElementActivePhone().addEventListener("click", () => {
|
2020-04-26 20:55:20 +02:00
|
|
|
this.startWebRtc();
|
|
|
|
this.disablePhone();
|
2020-05-01 21:15:00 +02:00
|
|
|
});*/
|
|
|
|
|
|
|
|
return this.MediaManager.getCamera().then((stream: MediaStream) => {
|
|
|
|
this.MediaManager.activeVisio();
|
|
|
|
this.MediaManager.localStream = stream;
|
2020-04-26 20:55:20 +02:00
|
|
|
});
|
2020-04-25 16:05:33 +02:00
|
|
|
}
|
|
|
|
/**
|
|
|
|
* server has two person connected, start the meet
|
|
|
|
*/
|
2020-05-01 21:15:00 +02:00
|
|
|
private startWebRtc() {
|
|
|
|
//create pear connexion
|
|
|
|
this.createPeerConnexion();
|
2020-04-25 16:05:33 +02:00
|
|
|
|
2020-05-01 21:15:00 +02:00
|
|
|
//receive signal by gemer
|
|
|
|
this.Connexion.receiveWebrtcSignal((message: string) => {
|
|
|
|
this.receiveWebrtcSignal(message);
|
|
|
|
});
|
2020-04-25 16:05:33 +02:00
|
|
|
|
2020-05-01 21:15:00 +02:00
|
|
|
// add media or new media for all peer connexion
|
|
|
|
this.Users.forEach((user: any) => {
|
|
|
|
this.addMedia(user.userId);
|
2020-04-25 16:05:33 +02:00
|
|
|
});
|
2020-05-01 21:15:00 +02:00
|
|
|
|
|
|
|
//change status to manage other user
|
|
|
|
this.PeerConnexionStatus = PeerConnexionStatus.ACTIVATED;
|
2020-04-25 16:05:33 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
*
|
2020-04-26 17:42:49 +02:00
|
|
|
* @param message
|
2020-04-25 16:05:33 +02:00
|
|
|
*/
|
2020-05-01 21:15:00 +02:00
|
|
|
private receiveWebrtcStart(message: string) {
|
2020-04-25 16:05:33 +02:00
|
|
|
let data = JSON.parse(message);
|
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
|
|
|
console.log("receiveWebrtcStart", this.Users);
|
|
|
|
|
|
|
|
//start connexion
|
|
|
|
this.startWebRtc();
|
2020-04-25 16:05:33 +02:00
|
|
|
}
|
|
|
|
|
2020-04-29 01:40:32 +02:00
|
|
|
|
2020-05-01 21:15:00 +02:00
|
|
|
private createPeerConnexion() {
|
2020-04-29 01:40:32 +02:00
|
|
|
this.Users.forEach((user: any) => {
|
2020-05-01 21:15:00 +02:00
|
|
|
if (this.PeerConnexionArray[user.userId]) {
|
2020-04-25 17:14:05 +02:00
|
|
|
return;
|
|
|
|
}
|
2020-04-26 17:42:49 +02:00
|
|
|
this.MediaManager.addActiveVideo(user.userId);
|
2020-04-25 20:29:03 +02:00
|
|
|
|
2020-05-01 21:15:00 +02:00
|
|
|
console.info("createPeerConnexion => create peerConexion", user);
|
|
|
|
this.PeerConnexionArray[user.userId] = new Peer({
|
|
|
|
initiator: user.initiator,
|
|
|
|
config: { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }, { urls: 'stun:global.stun.twilio.com:3478?transport=udp' }] }
|
|
|
|
});
|
|
|
|
|
|
|
|
//add lof info PeerConnexionArray
|
|
|
|
this.PeerConnexionArray[user.userId]._debug = console.info;
|
2020-04-25 17:14:05 +02:00
|
|
|
|
2020-04-26 19:12:01 +02:00
|
|
|
this.PeerConnexionArray[user.userId].on('signal', (data: any) => {
|
2020-05-01 21:15:00 +02:00
|
|
|
console.info("createPeerConnexion => sendWebrtcSignal : "+user.userId, data);
|
2020-04-26 19:12:01 +02:00
|
|
|
this.sendWebrtcSignal(data, user.userId);
|
2020-04-25 17:14:05 +02:00
|
|
|
});
|
2020-04-25 16:05:33 +02:00
|
|
|
|
2020-04-26 19:12:01 +02:00
|
|
|
this.PeerConnexionArray[user.userId].on('stream', (stream: MediaStream) => {
|
2020-04-26 17:42:49 +02:00
|
|
|
this.stream(user.userId, stream);
|
2020-04-25 17:14:05 +02:00
|
|
|
});
|
2020-04-25 16:05:33 +02:00
|
|
|
|
2020-04-26 19:12:01 +02:00
|
|
|
this.PeerConnexionArray[user.userId].on('close', () => {
|
2020-05-01 21:15:00 +02:00
|
|
|
console.info("createPeerConnexion => close", user.userId);
|
2020-04-26 19:12:01 +02:00
|
|
|
this.closeConnexion(user.userId);
|
|
|
|
});
|
|
|
|
|
2020-04-26 17:42:49 +02:00
|
|
|
this.addMedia(user.userId);
|
2020-04-25 16:05:33 +02:00
|
|
|
});
|
2020-04-26 19:12:01 +02:00
|
|
|
}
|
|
|
|
|
2020-05-01 21:15:00 +02:00
|
|
|
private closeConnexion(userId : string){
|
2020-04-26 19:12:01 +02:00
|
|
|
// @ts-ignore
|
|
|
|
this.PeerConnexionArray[userId] = null;
|
|
|
|
this.MediaManager.removeActiveVideo(userId)
|
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-04-29 17:49:40 +02:00
|
|
|
this.Connexion.sendWebrtcSignal(data, this.WebRtcRoomId, null, userId);
|
2020-04-25 16:05:33 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
*
|
|
|
|
* @param message
|
|
|
|
*/
|
2020-05-01 21:15:00 +02:00
|
|
|
private receiveWebrtcSignal(message: string) {
|
2020-04-25 16:05:33 +02:00
|
|
|
let data = JSON.parse(message);
|
2020-05-01 21:15:00 +02:00
|
|
|
console.log("receiveWebrtcSignal", data);
|
|
|
|
console.log("this.PeerConnexionArray[data.userId]", this.PeerConnexionArray[data.userId]);
|
2020-04-25 17:14:05 +02:00
|
|
|
if(!this.PeerConnexionArray[data.userId]){
|
2020-04-25 16:05:33 +02:00
|
|
|
return;
|
|
|
|
}
|
2020-04-25 17:14:05 +02:00
|
|
|
this.PeerConnexionArray[data.userId].signal(data.signal);
|
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-04-25 20:29:03 +02:00
|
|
|
this.MediaManager.remoteVideo[userId].srcObject = 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) {
|
|
|
|
if (!this.MediaManager.localStream || !this.PeerConnexionArray[userId]) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.PeerConnexionArray[userId].addStream(this.MediaManager.localStream) // <- add streams to peer dynamically
|
|
|
|
return;
|
2020-04-25 16:05:33 +02:00
|
|
|
}
|
2020-04-26 20:55:20 +02:00
|
|
|
|
2020-05-01 21:15:00 +02:00
|
|
|
private activePhone(){
|
2020-04-26 20:55:20 +02:00
|
|
|
this.MediaManager.activePhoneOpen();
|
|
|
|
}
|
|
|
|
|
2020-05-01 21:15:00 +02:00
|
|
|
private disablePhone(){
|
2020-04-26 20:55:20 +02:00
|
|
|
this.MediaManager.disablePhoneOpen();
|
|
|
|
}
|
2020-04-25 16:05:33 +02:00
|
|
|
}
|