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

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
Download patch file Download diff file Expand all files Collapse all files

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);
}
/**