Fix multi video
This commit is contained in:
gparant
parent
89db8558f6
commit
575054fe4f
5
front/dist/index.html
vendored
5
front/dist/index.html
vendored
|
|
@ -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
47
front/dist/resources/style/style.css
vendored
|
|
@ -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{
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue