lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

Web visio, add and remove video element

Browse source
This commit is contained in:
gparant 2020-04-26 19:12:01 +02:00
parent e178712457
commit d7d7be9ed0
4 changed files with 56 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
back/src/Controller/IoSocketController.ts
View file

@ -85,7 +85,6 @@ export class IoSocketController{
(socket as ExSocketInterface).roomId = data.roomId;
//if two persone in room share
console.log("nb user => " + data.roomId, this.Io.sockets.adapter.rooms[data.roomId].length);
if(this.Io.sockets.adapter.rooms[data.roomId].length < 2) {
return;
}
@ -93,25 +92,36 @@ export class IoSocketController{
//send start at one client to initialise offer webrtc
//send all users in room to create PeerConnection in front
let clientsId = clients.reduce((tabs : Array<any>, client: ExtWebSocket) => {
if(!client.userId){
return tabs;
}
tabs.push(client.userId);
return tabs;
}, []);
clients.forEach((client: ExtWebSocket, index : number) => {
client.emit('webrtc-start', JSON.stringify({
usersId: clientsId.filter((userId : any) => userId !== client.userId),
initiator : index === 0
}));
let clientsId = clients.reduce((tabs : Array<any>, clientId: ExtWebSocket, indexClientId: number) => {
if(!clientId.userId || clientId.userId === client.userId){
return tabs;
}
tabs.push({
userId: clientId.userId,
initiator : index <= indexClientId
});
return tabs;
}, []);
client.emit('webrtc-start', JSON.stringify(clientsId));
});
});
socket.on('webrtc-signal', (message : string) => {
let data : any = JSON.parse(message);
console.info('webrtc-signal', message);
socket.to(data.roomId).emit('webrtc-signal', message);
//send only at user
let clients: Array<any> = Object.values(this.Io.sockets.sockets);
for(let i = 0; i < clients.length; i++){
let client : ExtWebSocket = clients[i];
if(client.userId !== data.receiverId){
continue
}
client.emit('webrtc-signal', message);
break;
}
});
});
}

5
front/src/Connexion.ts
View file

@ -129,7 +129,7 @@ export interface ConnexionInterface {
/*webrtc*/
sendWebrtcRomm(roomId: string): void;
sendWebrtcSignal(signal: any, roomId: string, userId?: string): void;
sendWebrtcSignal(signal: any, roomId: string, userId?: string, receiverId?: string): void;
receiveWebrtcSignal(callBack: Function): void;
@ -230,9 +230,10 @@ export class Connexion implements ConnexionInterface {
});
}
sendWebrtcSignal(signal: any, roomId: string, userId? : string ) {
sendWebrtcSignal(signal: any, roomId: string, userId? : string, receiverId? : string) {
this.socket.emit(EventMessage.WEBRTC_SIGNAL, JSON.stringify({
userId: userId ? userId : this.userId,
receiverId: receiverId ? receiverId : this.userId,
roomId: roomId,
signal: signal
}));

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

@ -116,10 +116,22 @@ export class MediaManager {
*
* @param userId
*/
addActiveVideo(userId : any){
addActiveVideo(userId : string){
let elementRemoteVideo = document.getElementById("activeCam");
elementRemoteVideo.insertAdjacentHTML('beforeend', '<video id="'+userId+'" autoplay></video>');
this.remoteVideo[userId] = document.getElementById(userId);
this.remoteVideo[(userId as any)] = document.getElementById(userId);
}
/**
*
* @param userId
*/
removeActiveVideo(userId : string){
let element = document.getElementById(userId);
if(!element){
return;
}
element.remove();
}
}

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

@ -7,7 +7,6 @@ export class SimplePeer {
MediaManager: MediaManager;
RoomId: string;
PeerConnexion: any;
PeerConnexionArray: Array<any> = new Array<any>();
constructor(Connexion: ConnexionInterface, roomId: string = "test-webrtc") {
@ -55,38 +54,35 @@ export class SimplePeer {
* @param users
*/
createPeerConnexion(users : Array<any>) {
console.log("createPeerConnexion", users);
users.forEach((user: any) => {
if(this.PeerConnexionArray[user.userId]){
return;
}
this.MediaManager.addActiveVideo(user.userId);
this.PeerConnexion = new Peer({initiator: user.initiator});
this.PeerConnexionArray[user.userId] = new Peer({initiator: user.initiator});
this.PeerConnexion.on('signal', (data: any) => {
this.sendWebrtcSignal(data);
this.PeerConnexionArray[user.userId].on('signal', (data: any) => {
this.sendWebrtcSignal(data, user.userId);
});
this.PeerConnexion.on('stream', (stream: MediaStream) => {
this.PeerConnexionArray[user.userId].on('stream', (stream: MediaStream) => {
this.stream(user.userId, stream);
});
this.PeerConnexionArray[user.userId] = this.PeerConnexion;
this.PeerConnexionArray[user.userId].on('close', () => {
this.closeConnexion(user.userId);
});
this.addMedia(user.userId);
});
/*let elements = document.getElementById("activeCam");
console.log("element.childNodes", elements.childNodes);
elements.childNodes.forEach((element : any) => {
if(!element.id){
return;
}
if(users.find((user) => user.userId === element.id)){
return;
}
elements.removeChild(element);
});*/
}
closeConnexion(userId : string){
// @ts-ignore
this.PeerConnexionArray[userId] = null;
this.MediaManager.removeActiveVideo(userId)
}
/**
@ -95,7 +91,7 @@ export class SimplePeer {
* @param data
*/
sendWebrtcSignal(data: any, userId : string) {
this.Connexion.sendWebrtcSignal(data, this.RoomId, userId);
this.Connexion.sendWebrtcSignal(data, this.RoomId, null, userId);
}
/**