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

Fix multi video

Browse source
This commit is contained in:
gparant 2020-04-25 20:29:03 +02:00
parent 89db8558f6
commit 575054fe4f
4 changed files with 65 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
front/dist/index.html vendored
View file

@ -11,10 +11,9 @@
<body style="margin: 0"> <body style="margin: 0">
<script src="bundle.js"></script> <script src="bundle.js"></script>
<div id="webRtc" class="webrtc"> <div id="webRtc" class="webrtc">
<div class="activeCam"> <div id="activeCam" class="activeCam">
<video id="activeCamVideo" autoplay></video>
</div> </div>
<div id="myCam" class="myCam active"> <div id="myCam" class="myCam">
<video id="myCamVideo" autoplay></video> <video id="myCamVideo" autoplay></video>
</div> </div>
<div class="btn-cam-action active"> <div class="btn-cam-action active">

47
front/dist/resources/style/style.css vendored
View file

@ -4,12 +4,6 @@
.webrtc.active{ .webrtc.active{
display: block; display: block;
} }
.myCam{
display: none;
}
.myCam.active{
display: block;
}
.webrtc, .activeCam{ .webrtc, .activeCam{
position: absolute; position: absolute;
left: 0; left: 0;
@ -18,10 +12,48 @@
height: 100%; height: 100%;
background: black; background: black;
} }
.webrtc video{ .activeCam video{
position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
/*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%;
}
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%;
}
/*CSS position for 2 elements*/
video:nth-child(1):nth-last-child(2){
left: 0;
}
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) {
top: 50%;
left: 25%;
}
.myCam{ .myCam{
height: 200px; height: 200px;
width: 300px; width: 300px;
@ -33,6 +65,7 @@
max-height: 17%; max-height: 17%;
max-width: 17%; max-width: 17%;
opacity: 1; opacity: 1;
display: block;
transition: opacity 1s; transition: opacity 1s;
} }
.myCam video{ .myCam video{

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

@ -1,7 +1,7 @@
export class MediaManager { export class MediaManager {
localStream: MediaStream; localStream: MediaStream;
remoteStream: MediaStream; remoteStream: MediaStream;
remoteVideo: any; remoteVideo: Array<any> = new Array<any>();
myCamVideo: any; myCamVideo: any;
cinemaClose: any = null; cinemaClose: any = null;
cinema: any = null; cinema: any = null;
@ -11,7 +11,6 @@ export class MediaManager {
getCameraPromise : Promise<any> = null; getCameraPromise : Promise<any> = null;
constructor() { constructor() {
this.remoteVideo = document.getElementById('activeCamVideo');
this.myCamVideo = document.getElementById('myCamVideo'); this.myCamVideo = document.getElementById('myCamVideo');
this.microphoneClose = document.getElementById('microphone-close'); this.microphoneClose = document.getElementById('microphone-close');
@ -112,4 +111,15 @@ export class MediaManager {
throw err; throw err;
}); });
} }
/**
*
* @param userId
*/
addActiveVideo(userId : any){
let elementRemoteVideo = document.getElementById("activeCam");
elementRemoteVideo.insertAdjacentHTML('beforeend', '<video id="myCamVideo'+userId+'" autoplay></video>');
this.remoteVideo[userId] = document.getElementById('myCamVideo'+userId);
}
} }

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

@ -26,15 +26,14 @@ export class SimplePeer {
this.Connexion.sendWebrtcRomm(this.RoomId); this.Connexion.sendWebrtcRomm(this.RoomId);
//receive message start //receive message start
this.Connexion.receiveWebrtcStart((message : string) => { this.Connexion.receiveWebrtcStart((message: string) => {
this.receiveWebrtcStart(message); this.receiveWebrtcStart(message);
}); });
//receive signal by gemer //receive signal by gemer
this.Connexion.receiveWebrtcSignal((message : string) => { this.Connexion.receiveWebrtcSignal((message: string) => {
this.receiveWebrtcSignal(message); this.receiveWebrtcSignal(message);
}); });
}).catch((err) => { }).catch((err) => {
console.error(err); console.error(err);
}); });
@ -60,6 +59,8 @@ export class SimplePeer {
if(this.PeerConnexionArray[userId]){ if(this.PeerConnexionArray[userId]){
return; return;
} }
this.MediaManager.addActiveVideo(userId);
this.PeerConnexion = new Peer({initiator: initiator}); this.PeerConnexion = new Peer({initiator: initiator});
this.PeerConnexion.on('signal', (data: any) => { this.PeerConnexion.on('signal', (data: any) => {
@ -67,7 +68,7 @@ export class SimplePeer {
}); });
this.PeerConnexion.on('stream', (stream: MediaStream) => { this.PeerConnexion.on('stream', (stream: MediaStream) => {
this.stream(stream); this.stream(userId, stream);
}); });
this.PeerConnexionArray[userId] = this.PeerConnexion; this.PeerConnexionArray[userId] = this.PeerConnexion;
@ -96,17 +97,17 @@ export class SimplePeer {
} }
/** /**
* permit stream video *
* @param userId
* @param stream * @param stream
*/ */
stream(stream: MediaStream) { stream(userId : any, stream: MediaStream) {
this.MediaManager.remoteStream = stream; this.MediaManager.remoteVideo[userId].srcObject = stream;
this.MediaManager.remoteVideo.srcObject = this.MediaManager.remoteStream;
} }
/** /**
* Permit to update stream *
* @param stream * @param userId
*/ */
addMedia (userId : any) { addMedia (userId : any) {
this.PeerConnexionArray[userId].addStream(this.MediaManager.localStream) // <- add streams to peer dynamically this.PeerConnexionArray[userId].addStream(this.MediaManager.localStream) // <- add streams to peer dynamically