workadventure/front/src/WebRtc/MediaManager.ts

250 lines
7.7 KiB
TypeScript
Raw Normal View History

2020-05-03 14:29:45 +02:00
const videoConstraint: {width : any, height: any, facingMode : string} = {
width: { ideal: 1280 },
height: { ideal: 720 },
facingMode: "user"
};
export class MediaManager {
localStream: 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;
webrtcInAudio: any;
2020-05-03 14:29:45 +02:00
constraintsMedia : {audio : any, video : any} = {
audio: true,
video: videoConstraint
};
getCameraPromise : Promise<any> = null;
2020-05-03 17:19:42 +02:00
updatedLocalStreamCallBack : Function;
constructor(updatedLocalStreamCallBack : Function) {
this.updatedLocalStreamCallBack = updatedLocalStreamCallBack;
this.myCamVideo = document.getElementById('myCamVideo');
this.webrtcInAudio = document.getElementById('audio-webrtc-in');
this.webrtcInAudio.volume = 0.2;
2020-04-26 20:55:20 +02:00
2020-05-03 17:19:42 +02:00
this.microphoneClose = document.getElementById('microphone-close');
this.microphoneClose.style.display = "none";
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');
2020-05-03 17:19:42 +02:00
this.cinemaClose.style.display = "none";
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
});
2020-04-26 20:55:20 +02:00
}
2020-04-26 20:55:20 +02:00
activeVisio(){
let webRtc = document.getElementById('webRtc');
webRtc.classList.add('active');
}
enabledCamera() {
this.cinemaClose.style.display = "none";
this.cinema.style.display = "block";
2020-05-03 14:29:45 +02:00
this.constraintsMedia.video = videoConstraint;
2020-05-03 17:19:42 +02:00
this.getCamera().then((stream) => {
this.updatedLocalStreamCallBack(stream);
});
}
disabledCamera() {
this.cinemaClose.style.display = "block";
this.cinema.style.display = "none";
this.constraintsMedia.video = false;
this.myCamVideo.srcObject = null;
if (this.localStream) {
this.localStream.getVideoTracks().forEach((MediaStreamTrack: MediaStreamTrack) => {
MediaStreamTrack.stop();
2020-04-19 22:30:42 +02:00
});
}
2020-05-03 17:19:42 +02:00
this.getCamera().then((stream) => {
this.updatedLocalStreamCallBack(stream);
});
}
enabledMicrophone() {
this.microphoneClose.style.display = "none";
this.microphone.style.display = "block";
this.constraintsMedia.audio = true;
2020-05-03 17:19:42 +02:00
this.getCamera().then((stream) => {
this.updatedLocalStreamCallBack(stream);
});
}
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.getAudioTracks().forEach((MediaStreamTrack: MediaStreamTrack) => {
MediaStreamTrack.stop();
2020-04-19 22:30:42 +02:00
});
}
2020-05-03 17:19:42 +02:00
this.getCamera().then((stream) => {
this.updatedLocalStreamCallBack(stream);
});
2020-04-26 20:55:20 +02:00
}
//get camera
getCamera() {
2020-05-13 16:56:22 +02:00
let promise = null;
try {
promise = navigator.mediaDevices.getUserMedia(this.constraintsMedia)
.then((stream: MediaStream) => {
this.localStream = stream;
this.myCamVideo.srcObject = this.localStream;
//TODO resize remote cam
/*console.log(this.localStream.getTracks());
let videoMediaStreamTrack = this.localStream.getTracks().find((media : MediaStreamTrack) => media.kind === "video");
let {width, height} = videoMediaStreamTrack.getSettings();
console.info(`${width}x${height}`); // 6*/
return stream;
}).catch((err) => {
console.info(`error get media {video: ${this.constraintsMedia.video}},{audio: ${this.constraintsMedia.audio}}`,err);
2020-05-13 16:56:22 +02:00
this.localStream = null;
});
} catch (e) {
promise = Promise.reject(false);
}
return this.getCameraPromise = promise;
}
2020-04-25 20:29:03 +02:00
/**
*
* @param userId
*/
addActiveVideo(userId : string, userName: string = ""){
this.webrtcInAudio.play();
2020-04-25 20:29:03 +02:00
let elementRemoteVideo = document.getElementById("activeCam");
userName = userName.toUpperCase();
let color = this.getColorByString(userName);
elementRemoteVideo.insertAdjacentHTML('beforeend', `
<div id="div-${userId}" class="video-container" style="border-color: ${color};">
<i style="background-color: ${color};">${userName}</i>
<img id="microphone-${userId}" src="resources/logos/microphone-close.svg">
<video id="${userId}" autoplay></video>
</div>
`);
this.remoteVideo[(userId as any)] = document.getElementById(userId);
}
/**
*
* @param userId
*/
disabledMicrophoneByUserId(userId: string){
let element = document.getElementById(`microphone-${userId}`);
if(!element){
return;
}
element.classList.add('active')
}
/**
*
* @param userId
*/
enabledMicrophoneByUserId(userId: string){
let element = document.getElementById(`microphone-${userId}`);
if(!element){
return;
}
element.classList.remove('active')
}
/**
*
* @param userId
*/
2020-05-14 20:54:34 +02:00
disabledVideoByUserId(userId: string) {
let element = document.getElementById(`${userId}`);
2020-05-14 20:54:34 +02:00
if (element) {
element.style.opacity = "0";
}
element = document.getElementById(`div-${userId}`);
if (!element) {
return;
}
2020-05-14 20:54:34 +02:00
element.style.borderStyle = "solid";
}
/**
*
* @param userId
*/
enabledVideoByUserId(userId: string){
let element = document.getElementById(`${userId}`);
2020-05-14 20:54:34 +02:00
if(element){
element.style.opacity = "1";
}
element = document.getElementById(`div-${userId}`);
if(!element){
return;
}
2020-05-14 20:54:34 +02:00
element.style.borderStyle = "none";
}
2020-05-02 20:46:02 +02:00
/**
*
* @param userId
* @param stream
*/
addStreamRemoteVideo(userId : string, stream : MediaStream){
this.remoteVideo[(userId as any)].srcObject = stream;
}
/**
*
* @param userId
*/
removeActiveVideo(userId : string){
let element = document.getElementById(`div-${userId}`);
if(!element){
return;
}
element.remove();
2020-04-25 20:29:03 +02:00
}
/**
*
* @param str
*/
private getColorByString(str: String) : String|null {
let hash = 0;
if (str.length === 0) return null;
for (let i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash);
hash = hash & hash;
}
let color = '#';
for (let i = 0; i < 3; i++) {
let value = (hash >> (i * 8)) & 255;
color += ('00' + value.toString(16)).substr(-2);
}
return color;
}
}