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

Adding CoWebsiteManager + first working version of flex video

Browse source
This commit is contained in:
David Négrier 2020-08-13 18:21:48 +02:00
parent 83fe024c45
commit 9f6c6e0ce1
6 changed files with 326 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,3 +1,5 @@
import {DivImportance, layoutManager} from "./LayoutManager";
const videoConstraint: boolean|MediaTrackConstraints = {
width: { ideal: 1280 },
height: { ideal: 720 },
@ -73,8 +75,8 @@ export class MediaManager {
}
activeVisio(){
const webRtc = this.getElementByIdOrFail('webRtc');
webRtc.classList.add('active');
const gameOverlay = this.getElementByIdOrFail('game-overlay');
gameOverlay.classList.add('active');
}
enabledCamera() {
@ -184,10 +186,11 @@ export class MediaManager {
*/
addActiveVideo(userId : string, userName: string = ""){
this.webrtcInAudio.play();
const elementRemoteVideo = this.getElementByIdOrFail("activeCam");
//const elementRemoteVideo = this.getElementByIdOrFail("activeCam");
userName = userName.toUpperCase();
const color = this.getColorByString(userName);
elementRemoteVideo.insertAdjacentHTML('beforeend', `
/*elementRemoteVideo.insertAdjacentHTML('beforeend', `
<div id="div-${userId}" class="video-container" style="border-color: ${color};">
<div class="connecting-spinner"></div>
<div class="rtc-error" style="display: none"></div>
@ -195,7 +198,20 @@ export class MediaManager {
<img id="microphone-${userId}" src="resources/logos/microphone-close.svg">
<video id="${userId}" autoplay></video>
</div>
`);
`);*/
const html = `
<div id="div-${userId}" class="video-container">
<div class="connecting-spinner"></div>
<div class="rtc-error" style="display: none"></div>
<i style="background-color: ${color};">${userName}</i>
<img id="microphone-${userId}" src="resources/logos/microphone-close.svg">
<video id="${userId}" autoplay></video>
</div>
`;
layoutManager.add(DivImportance.Normal, userId, html);
this.remoteVideo.set(userId, this.getElementByIdOrFail<HTMLVideoElement>(userId));
}
@ -274,11 +290,12 @@ export class MediaManager {
* @param userId
*/
removeActiveVideo(userId : string){
const element = document.getElementById(`div-${userId}`);
/*const element = document.getElementById(`div-${userId}`);
if(!element){
return;
}
element.remove();
element.remove();*/
layoutManager.remove(userId);
this.remoteVideo.delete(userId);
}