_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki 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">
<script src="bundle.js"></script>
<div id="webRtc" class="webrtc">
<div class="activeCam">
<video id="activeCamVideo" autoplay></video>
<div id="activeCam" class="activeCam">
</div>
<div id="myCam" class="myCam active">
<div id="myCam" class="myCam">
<video id="myCamVideo" autoplay></video>
</div>
<div class="btn-cam-action active">

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

@ -4,12 +4,6 @@
.webrtc.active{
display: block;
}
.myCam{
display: none;
}
.myCam.active{
display: block;
}
.webrtc, .activeCam{
position: absolute;
left: 0;
@ -18,10 +12,48 @@
height: 100%;
background: black;
}
.webrtc video{
.activeCam video{
position: absolute;
width: 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{
height: 200px;
width: 300px;
@ -33,6 +65,7 @@
max-height: 17%;
max-width: 17%;
opacity: 1;
display: block;
transition: opacity 1s;
}
.myCam video{

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

@ -1,7 +1,7 @@
export class MediaManager {
localStream: MediaStream;
remoteStream: MediaStream;
remoteVideo: any;
remoteVideo: Array<any> = new Array<any>();
myCamVideo: any;
cinemaClose: any = null;
cinema: any = null;
@ -11,7 +11,6 @@ export class MediaManager {
getCameraPromise : Promise<any> = null;
constructor() {
this.remoteVideo = document.getElementById('activeCamVideo');
this.myCamVideo = document.getElementById('myCamVideo');
this.microphoneClose = document.getElementById('microphone-close');
@ -112,4 +111,15 @@ export class MediaManager {
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);
//receive message start
this.Connexion.receiveWebrtcStart((message : string) => {
this.Connexion.receiveWebrtcStart((message: string) => {
this.receiveWebrtcStart(message);
});
//receive signal by gemer
this.Connexion.receiveWebrtcSignal((message : string) => {
this.Connexion.receiveWebrtcSignal((message: string) => {
this.receiveWebrtcSignal(message);
});
}).catch((err) => {
console.error(err);
});
@ -60,6 +59,8 @@ export class SimplePeer {
if(this.PeerConnexionArray[userId]){
return;
}
this.MediaManager.addActiveVideo(userId);
this.PeerConnexion = new Peer({initiator: initiator});
this.PeerConnexion.on('signal', (data: any) => {
@ -67,7 +68,7 @@ export class SimplePeer {
});
this.PeerConnexion.on('stream', (stream: MediaStream) => {
this.stream(stream);
this.stream(userId, stream);
});
this.PeerConnexionArray[userId] = this.PeerConnexion;
@ -96,17 +97,17 @@ export class SimplePeer {
}
/**
* permit stream video
*
* @param userId
* @param stream
*/
stream(stream: MediaStream) {
this.MediaManager.remoteStream = stream;
this.MediaManager.remoteVideo.srcObject = this.MediaManager.remoteStream;
stream(userId : any, stream: MediaStream) {
this.MediaManager.remoteVideo[userId].srcObject = stream;
}
/**
* Permit to update stream
* @param stream
*
* @param userId
*/
addMedia (userId : any) {
this.PeerConnexionArray[userId].addStream(this.MediaManager.localStream) // <- add streams to peer dynamically