workadventure/front/src/WebRtc/MediaManager.ts

137 lines
4.1 KiB
TypeScript
Raw Normal View History

export class MediaManager {
localStream: MediaStream;
remoteStream: MediaStream;
2020-04-25 20:29:03 +02:00
remoteVideo: Array<any> = new Array<any>();
myCamVideo: any;
cinemaClose: any = null;
cinema: any = null;
microphoneClose: any = null;
microphone: any = null;
constraintsMedia = {audio: true, video: true};
getCameraPromise : Promise<any> = null;
constructor() {
this.myCamVideo = document.getElementById('myCamVideo');
this.microphoneClose = document.getElementById('microphone-close');
this.microphoneClose.addEventListener('click', (e: any) => {
e.preventDefault();
this.enabledMicrophone();
//update tracking
});
this.microphone = document.getElementById('microphone');
this.microphone.addEventListener('click', (e: any) => {
e.preventDefault();
this.disabledMicrophone();
//update tracking
});
this.cinemaClose = document.getElementById('cinema-close');
this.cinemaClose.addEventListener('click', (e: any) => {
e.preventDefault();
this.enabledCamera();
//update tracking
});
this.cinema = document.getElementById('cinema');
this.cinema.addEventListener('click', (e: any) => {
e.preventDefault();
this.disabledCamera();
//update tracking
});
this.enabledMicrophone();
this.enabledCamera();
let webRtc = document.getElementById('webRtc');
webRtc.classList.add('active');
2020-04-25 16:05:33 +02:00
//this.getCamera();
}
enabledCamera() {
this.cinemaClose.style.display = "none";
this.cinema.style.display = "block";
this.constraintsMedia.video = true;
2020-04-19 22:30:42 +02:00
this.localStream = null;
this.myCamVideo.srcObject = null;
2020-04-25 16:05:33 +02:00
//this.getCamera();
}
disabledCamera() {
this.cinemaClose.style.display = "block";
this.cinema.style.display = "none";
this.constraintsMedia.video = false;
2020-04-19 22:30:42 +02:00
this.myCamVideo.pause();
if(this.localStream) {
this.localStream.getTracks().forEach((MediaStreamTrack: MediaStreamTrack) => {
if (MediaStreamTrack.kind === "video") {
MediaStreamTrack.stop();
}
});
}
this.localStream = null;
this.myCamVideo.srcObject = null;
2020-04-25 16:05:33 +02:00
//this.getCamera();
}
enabledMicrophone() {
this.microphoneClose.style.display = "none";
this.microphone.style.display = "block";
this.constraintsMedia.audio = true;
2020-04-25 16:05:33 +02:00
//this.getCamera();
}
disabledMicrophone() {
this.microphoneClose.style.display = "block";
this.microphone.style.display = "none";
this.constraintsMedia.audio = false;
2020-04-19 22:30:42 +02:00
if(this.localStream) {
this.localStream.getTracks().forEach((MediaStreamTrack: MediaStreamTrack) => {
if (MediaStreamTrack.kind === "audio") {
MediaStreamTrack.stop();
}
});
}
2020-04-25 16:05:33 +02:00
//this.getCamera();
}
//get camera
getCamera() {
2020-04-25 16:05:33 +02:00
return this.getCameraPromise = navigator.mediaDevices.getUserMedia(this.constraintsMedia)
.then((stream: MediaStream) => {
this.localStream = stream;
this.myCamVideo.srcObject = this.localStream;
2020-04-19 22:30:42 +02:00
this.myCamVideo.play();
2020-04-25 16:05:33 +02:00
return stream;
}).catch((err) => {
console.error(err);
this.localStream = null;
throw err;
});
}
2020-04-25 20:29:03 +02:00
/**
*
* @param userId
*/
addActiveVideo(userId : string){
2020-04-25 20:29:03 +02:00
let elementRemoteVideo = document.getElementById("activeCam");
2020-04-26 17:42:49 +02:00
elementRemoteVideo.insertAdjacentHTML('beforeend', '<video id="'+userId+'" autoplay></video>');
2020-04-25 20:29:03 +02:00
this.remoteVideo[(userId as any)] = document.getElementById(userId);
}
/**
*
* @param userId
*/
removeActiveVideo(userId : string){
let element = document.getElementById(userId);
if(!element){
return;
}
element.remove();
2020-04-25 20:29:03 +02:00
}
}