Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge from master

Browse source
This commit is contained in:
David Négrier 2020-05-03 18:04:01 +02:00
commit b260dc32b5
13 changed files with 409 additions and 390 deletions
Download patch file Download diff file Expand all files Collapse all files

14
front/src/Connexion.ts
View file

@ -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);
}
}

4
front/src/Phaser/Game/GameScene.ts
View file

@ -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() {

1
front/src/Phaser/Login/LogincScene.ts
View file

@ -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";

3
front/src/Phaser/Player/Player.ts
View file

@ -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});
}

64
front/src/WebRtc/MediaManager.ts
View file

@ -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

209
front/src/WebRtc/SimplePeer.ts
View file

@ -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);
})
}
}