Merge from master
This commit is contained in:
David Négrier
commit
b260dc32b5
13 changed files with 409 additions and 390 deletions
13
front/dist/index.html
vendored
13
front/dist/index.html
vendored
|
|
@ -12,11 +12,9 @@
|
|||
<script src="bundle.js"></script>
|
||||
<div id="webRtc" class="webrtc">
|
||||
<div id="activeCam" class="activeCam">
|
||||
<video id="myCamVideo" autoplay muted></video>
|
||||
</div>
|
||||
<div id="myCam" class="myCam">
|
||||
<video id="myCamVideo" autoplay></video>
|
||||
</div>
|
||||
<div class="btn-cam-action active">
|
||||
<div class="btn-cam-action">
|
||||
<div class="btn-micro">
|
||||
<img id="microphone" src="resources/logos/microphone.svg">
|
||||
<img id="microphone-close" src="resources/logos/microphone-close.svg">
|
||||
|
|
@ -25,13 +23,10 @@
|
|||
<img id="cinema" src="resources/logos/cinema.svg">
|
||||
<img id="cinema-close" src="resources/logos/cinema-close.svg">
|
||||
</div>
|
||||
<div class="btn-call">
|
||||
<!--<div class="btn-call">
|
||||
<img src="resources/logos/phone.svg">
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
</div>
|
||||
<div id="phone-open" class="phone-open">
|
||||
<img src="resources/logos/phone-open.svg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
144
front/dist/resources/style/style.css
vendored
144
front/dist/resources/style/style.css
vendored
|
|
@ -1,77 +1,50 @@
|
|||
video{
|
||||
-webkit-transform: scaleX(-1);
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
.webrtc{
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
height: 100%;
|
||||
width: 300px;
|
||||
}
|
||||
.webrtc.active{
|
||||
display: block;
|
||||
}
|
||||
.webrtc, .activeCam{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: black;
|
||||
}
|
||||
.webrtc, .activeCam{}
|
||||
.activeCam video{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 25%;
|
||||
top: 10px;
|
||||
margin: 5px;
|
||||
right: -100px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.webrtc:hover .activeCam video{
|
||||
right: 10px;
|
||||
}
|
||||
.activeCam video#myCamVideo{
|
||||
width: 200px;
|
||||
height: 113px;
|
||||
}
|
||||
|
||||
/*CSS size for 2 - 3 elements*/
|
||||
video:nth-child(1):nth-last-child(3),
|
||||
video:nth-child(2):nth-last-child(2),
|
||||
video:nth-child(3):nth-last-child(1),
|
||||
video:nth-child(1):nth-last-child(2),
|
||||
video:nth-child(2):nth-last-child(1){
|
||||
width: 50%;
|
||||
.activeCam video:nth-child(1){
|
||||
/*this is for camera of user*/
|
||||
top: 75%;
|
||||
}
|
||||
video:nth-child(1):nth-last-child(3),
|
||||
video:nth-child(2):nth-last-child(2),
|
||||
video:nth-child(3):nth-last-child(1){
|
||||
height: 50%;
|
||||
.activeCam video:nth-child(2){
|
||||
top: 0%;
|
||||
}
|
||||
|
||||
/*CSS position for 2 elements*/
|
||||
video:nth-child(1):nth-last-child(2){
|
||||
left: 0;
|
||||
.activeCam video:nth-child(3){
|
||||
top: 25%;
|
||||
}
|
||||
video:nth-child(2):nth-last-child(1){
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
/*CSS position for 3 elements*/
|
||||
video:nth-child(1):nth-last-child(3){
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
video:nth-child(2):nth-last-child(2){
|
||||
top: 0;
|
||||
left: 50%;
|
||||
}
|
||||
video:nth-child(3):nth-last-child(1) {
|
||||
.activeCam video:nth-child(4) {
|
||||
top: 50%;
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.myCam{
|
||||
height: 200px;
|
||||
width: 300px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
background: black;
|
||||
border: none;
|
||||
bottom: 20px;
|
||||
max-height: 17%;
|
||||
max-width: 17%;
|
||||
opacity: 1;
|
||||
display: block;
|
||||
transition: opacity 1s;
|
||||
}
|
||||
.myCam video{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/*btn animation*/
|
||||
.btn-cam-action div{
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
|
|
@ -79,14 +52,14 @@ video:nth-child(3):nth-last-child(1) {
|
|||
width: 64px;
|
||||
height: 64px;
|
||||
background: #666;
|
||||
left: 6vw;
|
||||
box-shadow: 2px 2px 24px #444;
|
||||
border-radius: 48px;
|
||||
transform: translateX(calc(-6vw - 96px));
|
||||
transform: translateY(12vw);
|
||||
transition-timing-function: ease-in-out;
|
||||
bottom: 20px;
|
||||
}
|
||||
.webrtc:hover .btn-cam-action.active div{
|
||||
transform: translateX(0);
|
||||
.webrtc:hover .btn-cam-action div{
|
||||
transform: translateY(0);
|
||||
}
|
||||
.btn-cam-action div:hover{
|
||||
background: #407cf7;
|
||||
|
|
@ -94,60 +67,21 @@ video:nth-child(3):nth-last-child(1) {
|
|||
transition: 280ms;
|
||||
}
|
||||
.btn-micro{
|
||||
bottom: 277px;
|
||||
transition: all .3s;
|
||||
right: 10px;
|
||||
}
|
||||
.btn-video{
|
||||
bottom: 177px;
|
||||
transition: all .2s;
|
||||
right: 114px;
|
||||
}
|
||||
.btn-call{
|
||||
bottom: 77px;
|
||||
/*.btn-call{
|
||||
transition: all .1s;
|
||||
}
|
||||
left: 0px;
|
||||
}*/
|
||||
.btn-cam-action div img{
|
||||
height: 32px;
|
||||
width: 40px;
|
||||
top: calc(48px - 32px);
|
||||
left: calc(48px - 35px);
|
||||
position: relative;
|
||||
}
|
||||
.phone-open{
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
left: calc(50% - 70px);
|
||||
padding: 20px;
|
||||
bottom: 20px;
|
||||
box-shadow: 2px 2px 24px #444;
|
||||
background-color: green;
|
||||
opacity: 0;
|
||||
transition: all .4s ease-in-out;
|
||||
}
|
||||
.phone-open.active{
|
||||
opacity: 1;
|
||||
animation-name: phone-move;
|
||||
animation-duration: 0.4s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
.phone-open:hover{
|
||||
animation: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@keyframes phone-move {
|
||||
0% {
|
||||
left: calc(50% - 70px);
|
||||
bottom: 20px;
|
||||
}
|
||||
25% {
|
||||
left: calc(50% - 65px);
|
||||
bottom: 15px;
|
||||
}
|
||||
25% {
|
||||
left: calc(50% - 75px);
|
||||
bottom: 25px;
|
||||
}
|
||||
}
|
||||
|
|
@ -7,9 +7,11 @@ import {API_URL, ROOM} from "./Enum/EnvironmentVariable";
|
|||
enum EventMessage{
|
||||
WEBRTC_SIGNAL = "webrtc-signal",
|
||||
WEBRTC_START = "webrtc-start",
|
||||
WEBRTC_JOIN_ROOM = "webrtc-join-room",
|
||||
JOIN_ROOM = "join-room",
|
||||
USER_POSITION = "user-position",
|
||||
MESSAGE_ERROR = "message-error"
|
||||
MESSAGE_ERROR = "message-error",
|
||||
WEBRTC_DISCONNECT = "webrtc-disconect"
|
||||
}
|
||||
|
||||
class Message {
|
||||
|
|
@ -131,6 +133,8 @@ export interface ConnexionInterface {
|
|||
receiveWebrtcSignal(callBack: Function): void;
|
||||
|
||||
receiveWebrtcStart(callBack: Function): void;
|
||||
|
||||
disconnectMessage(callBack: Function): void;
|
||||
}
|
||||
|
||||
export class Connexion implements ConnexionInterface {
|
||||
|
|
@ -227,7 +231,7 @@ export class Connexion implements ConnexionInterface {
|
|||
}
|
||||
|
||||
sendWebrtcSignal(signal: any, roomId: string, userId? : string, receiverId? : string) {
|
||||
this.socket.emit(EventMessage.WEBRTC_SIGNAL, JSON.stringify({
|
||||
return this.socket.emit(EventMessage.WEBRTC_SIGNAL, JSON.stringify({
|
||||
userId: userId ? userId : this.userId,
|
||||
receiverId: receiverId ? receiverId : this.userId,
|
||||
roomId: roomId,
|
||||
|
|
@ -240,7 +244,7 @@ export class Connexion implements ConnexionInterface {
|
|||
}
|
||||
|
||||
receiveWebrtcSignal(callback: Function) {
|
||||
this.socket.on(EventMessage.WEBRTC_SIGNAL, callback);
|
||||
return this.socket.on(EventMessage.WEBRTC_SIGNAL, callback);
|
||||
}
|
||||
|
||||
errorMessage(): void {
|
||||
|
|
@ -248,4 +252,8 @@ export class Connexion implements ConnexionInterface {
|
|||
console.error(EventMessage.MESSAGE_ERROR, message);
|
||||
})
|
||||
}
|
||||
|
||||
disconnectMessage(callback: Function): void {
|
||||
this.socket.on(EventMessage.WEBRTC_DISCONNECT, callback);
|
||||
}
|
||||
}
|
||||
|
|
@ -26,8 +26,8 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
|
|||
Layers : Array<Phaser.Tilemaps.StaticTilemapLayer>;
|
||||
Objects : Array<Phaser.Physics.Arcade.Sprite>;
|
||||
map: ITiledMap;
|
||||
startX = (window.innerWidth / 2) / RESOLUTION;
|
||||
startY = (window.innerHeight / 2) / RESOLUTION;
|
||||
startX = 704;// 22 case
|
||||
startY = 32; // 1 case
|
||||
|
||||
|
||||
constructor() {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import {TextInput} from "../Components/TextInput";
|
|||
import {ClickButton} from "../Components/ClickButton";
|
||||
import {GameSceneName} from "../Game/GameScene";
|
||||
import Image = Phaser.GameObjects.Image;
|
||||
import Key = Phaser.Input.Keyboard.Key;
|
||||
|
||||
//todo: put this constants in a dedicated file
|
||||
export const LoginSceneName = "LoginScene";
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G
|
|||
userId: string;
|
||||
PlayerValue: string;
|
||||
userInputManager: UserInputManager;
|
||||
previousMove: string;
|
||||
|
||||
constructor(
|
||||
userId: string,
|
||||
|
|
@ -90,7 +91,7 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G
|
|||
direction = PlayerAnimationNames.None;
|
||||
this.stop();
|
||||
}
|
||||
|
||||
|
||||
this.emit(hasMovedEventName, {direction, x: this.x, y: this.y});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,8 @@
|
|||
const videoConstraint: {width : any, height: any, facingMode : string} = {
|
||||
width: { ideal: 1280 },
|
||||
height: { ideal: 720 },
|
||||
facingMode: "user"
|
||||
};
|
||||
export class MediaManager {
|
||||
localStream: MediaStream;
|
||||
remoteVideo: Array<any> = new Array<any>();
|
||||
|
|
@ -6,13 +11,20 @@ export class MediaManager {
|
|||
cinema: any = null;
|
||||
microphoneClose: any = null;
|
||||
microphone: any = null;
|
||||
constraintsMedia = {audio: false, video: true};
|
||||
constraintsMedia : {audio : any, video : any} = {
|
||||
audio: true,
|
||||
video: videoConstraint
|
||||
};
|
||||
getCameraPromise : Promise<any> = null;
|
||||
updatedLocalStreamCallBack : Function;
|
||||
|
||||
constructor(updatedLocalStreamCallBack : Function) {
|
||||
this.updatedLocalStreamCallBack = updatedLocalStreamCallBack;
|
||||
|
||||
constructor() {
|
||||
this.myCamVideo = document.getElementById('myCamVideo');
|
||||
this.microphoneClose = document.getElementById('microphone-close');
|
||||
|
||||
this.microphoneClose = document.getElementById('microphone-close');
|
||||
this.microphoneClose.style.display = "none";
|
||||
this.microphoneClose.addEventListener('click', (e: any) => {
|
||||
e.preventDefault();
|
||||
this.enabledMicrophone();
|
||||
|
|
@ -26,6 +38,7 @@ export class MediaManager {
|
|||
});
|
||||
|
||||
this.cinemaClose = document.getElementById('cinema-close');
|
||||
this.cinemaClose.style.display = "none";
|
||||
this.cinemaClose.addEventListener('click', (e: any) => {
|
||||
e.preventDefault();
|
||||
this.enabledCamera();
|
||||
|
|
@ -37,9 +50,6 @@ export class MediaManager {
|
|||
this.disabledCamera();
|
||||
//update tracking
|
||||
});
|
||||
|
||||
this.enabledCamera();
|
||||
this.enabledMicrophone();
|
||||
}
|
||||
|
||||
activeVisio(){
|
||||
|
|
@ -50,9 +60,12 @@ export class MediaManager {
|
|||
enabledCamera() {
|
||||
this.cinemaClose.style.display = "none";
|
||||
this.cinema.style.display = "block";
|
||||
this.constraintsMedia.video = true;
|
||||
this.constraintsMedia.video = videoConstraint;
|
||||
this.localStream = null;
|
||||
this.myCamVideo.srcObject = null;
|
||||
this.getCamera().then((stream) => {
|
||||
this.updatedLocalStreamCallBack(stream);
|
||||
});
|
||||
}
|
||||
|
||||
disabledCamera() {
|
||||
|
|
@ -70,12 +83,18 @@ export class MediaManager {
|
|||
}
|
||||
this.localStream = null;
|
||||
this.myCamVideo.srcObject = null;
|
||||
this.getCamera().then((stream) => {
|
||||
this.updatedLocalStreamCallBack(stream);
|
||||
});
|
||||
}
|
||||
|
||||
enabledMicrophone() {
|
||||
this.microphoneClose.style.display = "none";
|
||||
this.microphone.style.display = "block";
|
||||
this.constraintsMedia.audio = true;
|
||||
this.getCamera().then((stream) => {
|
||||
this.updatedLocalStreamCallBack(stream);
|
||||
});
|
||||
}
|
||||
|
||||
disabledMicrophone() {
|
||||
|
|
@ -89,18 +108,9 @@ export class MediaManager {
|
|||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
getElementActivePhone(){
|
||||
return document.getElementById('phone-open');
|
||||
}
|
||||
|
||||
activePhoneOpen(){
|
||||
return this.getElementActivePhone().classList.add("active");
|
||||
}
|
||||
|
||||
disablePhoneOpen(){
|
||||
return this.getElementActivePhone().classList.remove("active");
|
||||
this.getCamera().then((stream) => {
|
||||
this.updatedLocalStreamCallBack(stream);
|
||||
});
|
||||
}
|
||||
|
||||
//get camera
|
||||
|
|
@ -109,6 +119,13 @@ export class MediaManager {
|
|||
.then((stream: MediaStream) => {
|
||||
this.localStream = stream;
|
||||
this.myCamVideo.srcObject = this.localStream;
|
||||
|
||||
//TODO resize remote cam
|
||||
/*console.log(this.localStream.getTracks());
|
||||
let videoMediaStreamTrack = this.localStream.getTracks().find((media : MediaStreamTrack) => media.kind === "video");
|
||||
let {width, height} = videoMediaStreamTrack.getSettings();
|
||||
console.info(`${width}x${height}`); // 6*/
|
||||
|
||||
return stream;
|
||||
}).catch((err) => {
|
||||
console.error(err);
|
||||
|
|
@ -127,6 +144,15 @@ export class MediaManager {
|
|||
this.remoteVideo[(userId as any)] = document.getElementById(userId);
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param userId
|
||||
* @param stream
|
||||
*/
|
||||
addStreamRemoteVideo(userId : string, stream : MediaStream){
|
||||
this.remoteVideo[(userId as any)].srcObject = stream;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param userId
|
||||
|
|
|
|||
|
|
@ -6,53 +6,51 @@ export interface SimplePeerInterface {
|
|||
}
|
||||
|
||||
export class SimplePeer {
|
||||
Connexion: ConnexionInterface;
|
||||
MediaManager: MediaManager;
|
||||
WebRtcRoomId: string;
|
||||
Users: Array<any>;
|
||||
private Connexion: ConnexionInterface;
|
||||
private WebRtcRoomId: string;
|
||||
private Users: Array<any>;
|
||||
|
||||
PeerConnexionArray: Array<any> = new Array<any>();
|
||||
private MediaManager: MediaManager;
|
||||
|
||||
private PeerConnexionArray: Array<any> = new Array<any>();
|
||||
|
||||
constructor(Connexion: ConnexionInterface, WebRtcRoomId: string = "test-webrtc") {
|
||||
this.Connexion = Connexion;
|
||||
this.WebRtcRoomId = WebRtcRoomId;
|
||||
this.MediaManager = new MediaManager();
|
||||
this.MediaManager = new MediaManager((stream : MediaStream) => {
|
||||
this.updatedLocalStream();
|
||||
});
|
||||
this.PeerConnexionArray = new Array<any>();
|
||||
|
||||
this.initialise();
|
||||
}
|
||||
|
||||
/**
|
||||
* permit to listen when user could start visio
|
||||
*/
|
||||
private initialise(){
|
||||
private initialise() {
|
||||
|
||||
//receive message start
|
||||
this.Connexion.receiveWebrtcStart((message: string) => {
|
||||
this.receiveWebrtcStart(message);
|
||||
//receive signal by gemer
|
||||
this.Connexion.receiveWebrtcSignal((message: string) => {
|
||||
this.receiveWebrtcSignal(message);
|
||||
});
|
||||
|
||||
//when button to call is clicked, start video
|
||||
this.MediaManager.getElementActivePhone().addEventListener("click", () => {
|
||||
this.startWebRtc();
|
||||
this.disablePhone();
|
||||
});
|
||||
}
|
||||
/**
|
||||
* server has two person connected, start the meet
|
||||
*/
|
||||
startWebRtc() {
|
||||
this.MediaManager.activeVisio();
|
||||
return this.MediaManager.getCamera().then((stream: MediaStream) => {
|
||||
this.MediaManager.localStream = stream;
|
||||
this.MediaManager.getCamera().then(() => {
|
||||
|
||||
//create pear connexion
|
||||
this.createPeerConnexion();
|
||||
|
||||
//receive signal by gemer
|
||||
this.Connexion.receiveWebrtcSignal((message: string) => {
|
||||
this.receiveWebrtcSignal(message);
|
||||
//receive message start
|
||||
this.Connexion.receiveWebrtcStart((message: string) => {
|
||||
this.receiveWebrtcStart(message);
|
||||
});
|
||||
|
||||
}).catch((err) => {
|
||||
console.error(err);
|
||||
console.error("err", err);
|
||||
});
|
||||
|
||||
//receive signal by gemer
|
||||
this.Connexion.disconnectMessage((message: string) => {
|
||||
let data = JSON.parse(message);
|
||||
this.closeConnexion(data.userId);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -60,46 +58,97 @@ export class SimplePeer {
|
|||
*
|
||||
* @param message
|
||||
*/
|
||||
receiveWebrtcStart(message: string) {
|
||||
private receiveWebrtcStart(message: string) {
|
||||
let data = JSON.parse(message);
|
||||
this.WebRtcRoomId = data.roomId;
|
||||
this.Users = data.clients;
|
||||
|
||||
//active button for player
|
||||
this.activePhone();
|
||||
//start connexion
|
||||
this.startWebRtc();
|
||||
}
|
||||
|
||||
|
||||
createPeerConnexion() {
|
||||
/**
|
||||
* server has two person connected, start the meet
|
||||
*/
|
||||
private startWebRtc() {
|
||||
this.Users.forEach((user: any) => {
|
||||
if(this.PeerConnexionArray[user.userId]){
|
||||
//if it's not an initiator, peer connexion will be created when gamer will receive offer signal
|
||||
if(!user.initiator){
|
||||
return;
|
||||
}
|
||||
this.MediaManager.addActiveVideo(user.userId);
|
||||
|
||||
this.PeerConnexionArray[user.userId] = new Peer({initiator: user.initiator});
|
||||
|
||||
this.PeerConnexionArray[user.userId].on('signal', (data: any) => {
|
||||
this.sendWebrtcSignal(data, user.userId);
|
||||
});
|
||||
|
||||
this.PeerConnexionArray[user.userId].on('stream', (stream: MediaStream) => {
|
||||
this.stream(user.userId, stream);
|
||||
});
|
||||
|
||||
this.PeerConnexionArray[user.userId].on('close', () => {
|
||||
this.closeConnexion(user.userId);
|
||||
});
|
||||
|
||||
this.addMedia(user.userId);
|
||||
this.createPeerConnexion(user);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
closeConnexion(userId : string){
|
||||
// @ts-ignore
|
||||
this.PeerConnexionArray[userId] = null;
|
||||
this.MediaManager.removeActiveVideo(userId)
|
||||
/**
|
||||
* create peer connexion to bind users
|
||||
*/
|
||||
private createPeerConnexion(user : any) {
|
||||
if(this.PeerConnexionArray[user.userId]) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.MediaManager.removeActiveVideo(user.userId);
|
||||
this.MediaManager.addActiveVideo(user.userId);
|
||||
|
||||
this.PeerConnexionArray[user.userId] = new Peer({
|
||||
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',
|
||||
credential: 'itcugcOHxle9Acqi$'
|
||||
},
|
||||
]
|
||||
},
|
||||
});
|
||||
|
||||
//start listen signal for the peer connexion
|
||||
this.PeerConnexionArray[user.userId].on('signal', (data: any) => {
|
||||
this.sendWebrtcSignal(data, user.userId);
|
||||
});
|
||||
|
||||
this.PeerConnexionArray[user.userId].on('stream', (stream: MediaStream) => {
|
||||
this.stream(user.userId, stream);
|
||||
});
|
||||
|
||||
this.PeerConnexionArray[user.userId].on('track', (track: MediaStreamTrack, stream: MediaStream) => {
|
||||
this.stream(user.userId, stream);
|
||||
});
|
||||
|
||||
this.PeerConnexionArray[user.userId].on('close', () => {
|
||||
this.closeConnexion(user.userId);
|
||||
});
|
||||
|
||||
this.PeerConnexionArray[user.userId].on('error', (err: any) => {
|
||||
console.error(`error => ${user.userId} => ${err.code}`, err);
|
||||
});
|
||||
|
||||
this.PeerConnexionArray[user.userId].on('connect', () => {
|
||||
console.info(`connect => ${user.userId}`);
|
||||
});
|
||||
|
||||
this.addMedia(user.userId);
|
||||
}
|
||||
|
||||
private closeConnexion(userId : string) {
|
||||
try {
|
||||
this.MediaManager.removeActiveVideo(userId);
|
||||
if (!this.PeerConnexionArray[(userId as any)]) {
|
||||
return;
|
||||
}
|
||||
// @ts-ignore
|
||||
this.PeerConnexionArray[(userId as any)].destroy();
|
||||
this.PeerConnexionArray[(userId as any)] = null;
|
||||
delete this.PeerConnexionArray[(userId as any)];
|
||||
} catch (err) {
|
||||
console.error("closeConnexion", err)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -107,20 +156,29 @@ export class SimplePeer {
|
|||
* @param userId
|
||||
* @param data
|
||||
*/
|
||||
sendWebrtcSignal(data: any, userId : string) {
|
||||
this.Connexion.sendWebrtcSignal(data, this.WebRtcRoomId, null, userId);
|
||||
private sendWebrtcSignal(data: any, userId : string) {
|
||||
try {
|
||||
this.Connexion.sendWebrtcSignal(data, this.WebRtcRoomId, null, userId);
|
||||
}catch (e) {
|
||||
console.error(`sendWebrtcSignal => ${userId}`, e);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param message
|
||||
*/
|
||||
receiveWebrtcSignal(message: string) {
|
||||
private receiveWebrtcSignal(message: string) {
|
||||
let data = JSON.parse(message);
|
||||
if(!this.PeerConnexionArray[data.userId]){
|
||||
return;
|
||||
try {
|
||||
//if offer type, create peer connexion
|
||||
if(data.signal.type === "offer"){
|
||||
this.createPeerConnexion(data);
|
||||
}
|
||||
this.PeerConnexionArray[data.userId].signal(data.signal);
|
||||
} catch (e) {
|
||||
console.error(`receiveWebrtcSignal => ${data.userId}`, e);
|
||||
}
|
||||
this.PeerConnexionArray[data.userId].signal(data.signal);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -128,23 +186,28 @@ export class SimplePeer {
|
|||
* @param userId
|
||||
* @param stream
|
||||
*/
|
||||
stream(userId : any, stream: MediaStream) {
|
||||
this.MediaManager.remoteVideo[userId].srcObject = stream;
|
||||
private stream(userId : any, stream: MediaStream) {
|
||||
this.MediaManager.addStreamRemoteVideo(userId, stream);
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param userId
|
||||
*/
|
||||
addMedia (userId : any) {
|
||||
this.PeerConnexionArray[userId].addStream(this.MediaManager.localStream) // <- add streams to peer dynamically
|
||||
private addMedia (userId : any = null) {
|
||||
try {
|
||||
let transceiver : any = null;
|
||||
this.MediaManager.localStream.getTracks().forEach(
|
||||
transceiver = (track: MediaStreamTrack) => this.PeerConnexionArray[userId].addTrack(track, this.MediaManager.localStream)
|
||||
)
|
||||
}catch (e) {
|
||||
console.error(`addMedia => addMedia => ${userId}`, e);
|
||||
}
|
||||
}
|
||||
|
||||
activePhone(){
|
||||
this.MediaManager.activePhoneOpen();
|
||||
}
|
||||
|
||||
disablePhone(){
|
||||
this.MediaManager.disablePhoneOpen();
|
||||
updatedLocalStream(){
|
||||
this.Users.forEach((user) => {
|
||||
this.addMedia(user.userId);
|
||||
})
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue