[mirotalksfu] - fix & improvements
هذا الالتزام موجود في:
@@ -171,7 +171,9 @@ app.get(['/newroom'], (req, res) => {
|
|||||||
app.get('/join/', (req, res) => {
|
app.get('/join/', (req, res) => {
|
||||||
if (hostCfg.authenticated && Object.keys(req.query).length > 0) {
|
if (hostCfg.authenticated && Object.keys(req.query).length > 0) {
|
||||||
log.debug('Direct Join', req.query);
|
log.debug('Direct Join', req.query);
|
||||||
// http://localhost:3010/join?room=test&name=mirotalksfu&audio=1&video=1¬ify=1
|
/**
|
||||||
|
* http://localhost:3010/join?room=test&name=mirotalksfu&audio=1&video=1¬ify=1
|
||||||
|
*/
|
||||||
const { room, name, audio, video, notify } = req.query;
|
const { room, name, audio, video, notify } = req.query;
|
||||||
if (room && name && audio && video && notify) {
|
if (room && name && audio && video && notify) {
|
||||||
return res.sendFile(view.room);
|
return res.sendFile(view.room);
|
||||||
@@ -417,7 +419,7 @@ io.on('connection', (socket) => {
|
|||||||
|
|
||||||
socket.on('updatePeerInfo', (data) => {
|
socket.on('updatePeerInfo', (data) => {
|
||||||
log.debug('Peer info update:', data);
|
log.debug('Peer info update:', data);
|
||||||
// peer_info hand raise Or lower
|
// peer_info audio video hand ... status
|
||||||
roomList.get(socket.room_id).getPeers().get(socket.id).updatePeerInfo(data);
|
roomList.get(socket.room_id).getPeers().get(socket.id).updatePeerInfo(data);
|
||||||
roomList.get(socket.room_id).broadCast(socket.id, 'updatePeerInfo', data);
|
roomList.get(socket.room_id).broadCast(socket.id, 'updatePeerInfo', data);
|
||||||
});
|
});
|
||||||
@@ -587,17 +589,11 @@ io.on('connection', (socket) => {
|
|||||||
|
|
||||||
socket.on('producerClosed', (data) => {
|
socket.on('producerClosed', (data) => {
|
||||||
log.debug('Producer close', data);
|
log.debug('Producer close', data);
|
||||||
|
|
||||||
// peer_info audio Or video OFF
|
// peer_info audio Or video OFF
|
||||||
roomList.get(socket.room_id).getPeers().get(socket.id).updatePeerInfo(data);
|
roomList.get(socket.room_id).getPeers().get(socket.id).updatePeerInfo(data);
|
||||||
roomList.get(socket.room_id).closeProducer(socket.id, data.producer_id);
|
roomList.get(socket.room_id).closeProducer(socket.id, data.producer_id);
|
||||||
});
|
});
|
||||||
|
|
||||||
socket.on('resume', async (_, callback) => {
|
|
||||||
await consumer.resume();
|
|
||||||
callback();
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on('getRoomInfo', (_, cb) => {
|
socket.on('getRoomInfo', (_, cb) => {
|
||||||
log.debug('Send Room Info');
|
log.debug('Send Room Info');
|
||||||
cb(roomList.get(socket.room_id).toJson());
|
cb(roomList.get(socket.room_id).toJson());
|
||||||
|
|||||||
@@ -48,6 +48,9 @@ let initAudioButton = null;
|
|||||||
let initVideoButton = null;
|
let initVideoButton = null;
|
||||||
let initAudioVideoButton = null;
|
let initAudioVideoButton = null;
|
||||||
|
|
||||||
|
let isProducerAudioOn = false;
|
||||||
|
let isProducerVideoOn = false;
|
||||||
|
|
||||||
let recTimer = null;
|
let recTimer = null;
|
||||||
let recElapsedTime = null;
|
let recElapsedTime = null;
|
||||||
|
|
||||||
@@ -715,6 +718,7 @@ function handleButtons() {
|
|||||||
};
|
};
|
||||||
swapCameraButton.onclick = () => {
|
swapCameraButton.onclick = () => {
|
||||||
rc.closeThenProduce(RoomClient.mediaType.video, null, true);
|
rc.closeThenProduce(RoomClient.mediaType.video, null, true);
|
||||||
|
rc.updatePeerInfo(peer_name, rc.peer_id, 'video', true);
|
||||||
};
|
};
|
||||||
raiseHandButton.onclick = () => {
|
raiseHandButton.onclick = () => {
|
||||||
rc.updatePeerInfo(peer_name, rc.peer_id, 'hand', true);
|
rc.updatePeerInfo(peer_name, rc.peer_id, 'hand', true);
|
||||||
@@ -723,22 +727,28 @@ function handleButtons() {
|
|||||||
rc.updatePeerInfo(peer_name, rc.peer_id, 'hand', false);
|
rc.updatePeerInfo(peer_name, rc.peer_id, 'hand', false);
|
||||||
};
|
};
|
||||||
startAudioButton.onclick = () => {
|
startAudioButton.onclick = () => {
|
||||||
rc.produce(RoomClient.mediaType.audio, microphoneSelect.value);
|
isProducerAudioOn
|
||||||
|
? rc.resumeProducer(RoomClient.mediaType.audio)
|
||||||
|
: rc.produce(RoomClient.mediaType.audio, microphoneSelect.value);
|
||||||
|
|
||||||
rc.updatePeerInfo(peer_name, rc.peer_id, 'audio', true);
|
rc.updatePeerInfo(peer_name, rc.peer_id, 'audio', true);
|
||||||
// rc.resumeProducer(RoomClient.mediaType.audio);
|
|
||||||
};
|
};
|
||||||
stopAudioButton.onclick = () => {
|
stopAudioButton.onclick = () => {
|
||||||
rc.closeProducer(RoomClient.mediaType.audio);
|
isProducerAudioOn ? rc.pauseProducer(RoomClient.mediaType.audio) : rc.closeProducer(RoomClient.mediaType.audio);
|
||||||
|
|
||||||
rc.updatePeerInfo(peer_name, rc.peer_id, 'audio', false);
|
rc.updatePeerInfo(peer_name, rc.peer_id, 'audio', false);
|
||||||
// rc.pauseProducer(RoomClient.mediaType.audio);
|
|
||||||
};
|
};
|
||||||
startVideoButton.onclick = () => {
|
startVideoButton.onclick = () => {
|
||||||
rc.produce(RoomClient.mediaType.video, videoSelect.value);
|
isProducerVideoOn
|
||||||
// rc.resumeProducer(RoomClient.mediaType.video);
|
? rc.resumeProducer(RoomClient.mediaType.video)
|
||||||
|
: rc.produce(RoomClient.mediaType.video, videoSelect.value);
|
||||||
|
|
||||||
|
rc.updatePeerInfo(peer_name, rc.peer_id, 'video', true);
|
||||||
};
|
};
|
||||||
stopVideoButton.onclick = () => {
|
stopVideoButton.onclick = () => {
|
||||||
rc.closeProducer(RoomClient.mediaType.video);
|
isProducerVideoOn ? rc.pauseProducer(RoomClient.mediaType.video) : rc.closeProducer(RoomClient.mediaType.video);
|
||||||
// rc.pauseProducer(RoomClient.mediaType.video);
|
|
||||||
|
rc.updatePeerInfo(peer_name, rc.peer_id, 'video', false);
|
||||||
};
|
};
|
||||||
startScreenButton.onclick = () => {
|
startScreenButton.onclick = () => {
|
||||||
rc.produce(RoomClient.mediaType.screen);
|
rc.produce(RoomClient.mediaType.screen);
|
||||||
@@ -835,12 +845,14 @@ function handleSelects() {
|
|||||||
// devices options
|
// devices options
|
||||||
microphoneSelect.onchange = () => {
|
microphoneSelect.onchange = () => {
|
||||||
rc.closeThenProduce(RoomClient.mediaType.audio, microphoneSelect.value);
|
rc.closeThenProduce(RoomClient.mediaType.audio, microphoneSelect.value);
|
||||||
|
rc.updatePeerInfo(peer_name, rc.peer_id, 'audio', true);
|
||||||
};
|
};
|
||||||
speakerSelect.onchange = () => {
|
speakerSelect.onchange = () => {
|
||||||
rc.attachSinkId(rc.myVideoEl, speakerSelect.value);
|
rc.attachSinkId(rc.myVideoEl, speakerSelect.value);
|
||||||
};
|
};
|
||||||
videoSelect.onchange = () => {
|
videoSelect.onchange = () => {
|
||||||
rc.closeThenProduce(RoomClient.mediaType.video, videoSelect.value);
|
rc.closeThenProduce(RoomClient.mediaType.video, videoSelect.value);
|
||||||
|
rc.updatePeerInfo(peer_name, rc.peer_id, 'video', true);
|
||||||
};
|
};
|
||||||
// styling
|
// styling
|
||||||
BtnsAspectRatio.onchange = () => {
|
BtnsAspectRatio.onchange = () => {
|
||||||
@@ -956,42 +968,50 @@ function handleRoomClientEvents() {
|
|||||||
hide(startAudioButton);
|
hide(startAudioButton);
|
||||||
show(stopAudioButton);
|
show(stopAudioButton);
|
||||||
setColor(startAudioButton, 'red');
|
setColor(startAudioButton, 'red');
|
||||||
|
isProducerAudioOn = true;
|
||||||
});
|
});
|
||||||
rc.on(RoomClient.EVENTS.pauseAudio, () => {
|
rc.on(RoomClient.EVENTS.pauseAudio, () => {
|
||||||
console.log('Room Client pause audio');
|
console.log('Room Client pause audio');
|
||||||
hide(stopAudioButton);
|
hide(stopAudioButton);
|
||||||
show(startAudioButton);
|
show(startAudioButton);
|
||||||
|
sound('left');
|
||||||
});
|
});
|
||||||
rc.on(RoomClient.EVENTS.resumeAudio, () => {
|
rc.on(RoomClient.EVENTS.resumeAudio, () => {
|
||||||
console.log('Room Client resume audio');
|
console.log('Room Client resume audio');
|
||||||
hide(startAudioButton);
|
hide(startAudioButton);
|
||||||
show(stopAudioButton);
|
show(stopAudioButton);
|
||||||
|
sound('joined');
|
||||||
});
|
});
|
||||||
rc.on(RoomClient.EVENTS.stopAudio, () => {
|
rc.on(RoomClient.EVENTS.stopAudio, () => {
|
||||||
console.log('Room Client stop audio');
|
console.log('Room Client stop audio');
|
||||||
hide(stopAudioButton);
|
hide(stopAudioButton);
|
||||||
show(startAudioButton);
|
show(startAudioButton);
|
||||||
|
isProducerAudioOn = false;
|
||||||
});
|
});
|
||||||
rc.on(RoomClient.EVENTS.startVideo, () => {
|
rc.on(RoomClient.EVENTS.startVideo, () => {
|
||||||
console.log('Room Client start video');
|
console.log('Room Client start video');
|
||||||
hide(startVideoButton);
|
hide(startVideoButton);
|
||||||
show(stopVideoButton);
|
show(stopVideoButton);
|
||||||
setColor(startVideoButton, 'red');
|
setColor(startVideoButton, 'red');
|
||||||
|
isProducerVideoOn = true;
|
||||||
});
|
});
|
||||||
rc.on(RoomClient.EVENTS.pauseVideo, () => {
|
rc.on(RoomClient.EVENTS.pauseVideo, () => {
|
||||||
console.log('Room Client pause video');
|
console.log('Room Client pause video');
|
||||||
hide(stopVideoButton);
|
hide(stopVideoButton);
|
||||||
show(startVideoButton);
|
show(startVideoButton);
|
||||||
|
sound('left');
|
||||||
});
|
});
|
||||||
rc.on(RoomClient.EVENTS.resumeVideo, () => {
|
rc.on(RoomClient.EVENTS.resumeVideo, () => {
|
||||||
console.log('Room Client resume video');
|
console.log('Room Client resume video');
|
||||||
hide(startVideoButton);
|
hide(startVideoButton);
|
||||||
show(stopVideoButton);
|
show(stopVideoButton);
|
||||||
|
sound('joined');
|
||||||
});
|
});
|
||||||
rc.on(RoomClient.EVENTS.stopVideo, () => {
|
rc.on(RoomClient.EVENTS.stopVideo, () => {
|
||||||
console.log('Room Client stop video');
|
console.log('Room Client stop video');
|
||||||
hide(stopVideoButton);
|
hide(stopVideoButton);
|
||||||
show(startVideoButton);
|
show(startVideoButton);
|
||||||
|
isProducerVideoOn = false;
|
||||||
});
|
});
|
||||||
rc.on(RoomClient.EVENTS.startScreen, () => {
|
rc.on(RoomClient.EVENTS.startScreen, () => {
|
||||||
console.log('Room Client start screen');
|
console.log('Room Client start screen');
|
||||||
|
|||||||
@@ -232,7 +232,7 @@ class RoomClient {
|
|||||||
let peer_info = peers.get(peer).peer_info;
|
let peer_info = peers.get(peer).peer_info;
|
||||||
// console.log('07 ----> Remote Peer info', peer_info);
|
// console.log('07 ----> Remote Peer info', peer_info);
|
||||||
if (!peer_info.peer_video) {
|
if (!peer_info.peer_video) {
|
||||||
await this.setVideoOff(peer_info, true);
|
await this.setVideoDivOff(peer_info, true);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.refreshParticipantsCount();
|
this.refreshParticipantsCount();
|
||||||
@@ -400,7 +400,8 @@ class RoomClient {
|
|||||||
'setVideoOff',
|
'setVideoOff',
|
||||||
function (data) {
|
function (data) {
|
||||||
console.log('Video off:', data);
|
console.log('Video off:', data);
|
||||||
this.setVideoOff(data, true);
|
this.setVideoOff(data.peer_id, true);
|
||||||
|
this.setVideoDivOff(data, true);
|
||||||
}.bind(this),
|
}.bind(this),
|
||||||
);
|
);
|
||||||
|
|
||||||
@@ -408,7 +409,7 @@ class RoomClient {
|
|||||||
'removeMe',
|
'removeMe',
|
||||||
function (data) {
|
function (data) {
|
||||||
console.log('Remove me:', data);
|
console.log('Remove me:', data);
|
||||||
this.removeVideoOff(data.peer_id);
|
this.removeVideoDivOff(data.peer_id);
|
||||||
participantsCount = data.peer_counts;
|
participantsCount = data.peer_counts;
|
||||||
adaptAspectRatio(participantsCount);
|
adaptAspectRatio(participantsCount);
|
||||||
}.bind(this),
|
}.bind(this),
|
||||||
@@ -545,6 +546,7 @@ class RoomClient {
|
|||||||
this.produce(mediaType.audio, microphoneSelect.value);
|
this.produce(mediaType.audio, microphoneSelect.value);
|
||||||
} else {
|
} else {
|
||||||
setColor(startAudioButton, 'red');
|
setColor(startAudioButton, 'red');
|
||||||
|
console.log('08 ----> Audio is off');
|
||||||
}
|
}
|
||||||
if (this.isVideoAllowed) {
|
if (this.isVideoAllowed) {
|
||||||
console.log('09 ----> Start video media');
|
console.log('09 ----> Start video media');
|
||||||
@@ -552,7 +554,7 @@ class RoomClient {
|
|||||||
} else {
|
} else {
|
||||||
setColor(startVideoButton, 'red');
|
setColor(startVideoButton, 'red');
|
||||||
console.log('09 ----> Video is off');
|
console.log('09 ----> Video is off');
|
||||||
this.setVideoOff(this.peer_info, false);
|
this.setVideoDivOff(this.peer_info, false);
|
||||||
this.sendVideoOff();
|
this.sendVideoOff();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -668,11 +670,11 @@ class RoomClient {
|
|||||||
this.event(_EVENTS.startAudio);
|
this.event(_EVENTS.startAudio);
|
||||||
break;
|
break;
|
||||||
case mediaType.video:
|
case mediaType.video:
|
||||||
this.setIsVideo(true);
|
this.setIsVideo(this.peer_id, true);
|
||||||
this.event(_EVENTS.startVideo);
|
this.event(_EVENTS.startVideo);
|
||||||
break;
|
break;
|
||||||
case mediaType.screen:
|
case mediaType.screen:
|
||||||
this.setIsScreen(true);
|
this.setIsScreen(this.peer_id, true);
|
||||||
this.event(_EVENTS.startScreen);
|
this.event(_EVENTS.startScreen);
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
@@ -768,8 +770,8 @@ class RoomClient {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async handleProducer(id, type, stream) {
|
async handleProducer(id, type, stream) {
|
||||||
let elem, vb, ts, d, p, i, b, fs, pm, pb;
|
let elem, vb, ts, d, p, i, b, fs, pm, pb, av;
|
||||||
this.removeVideoOff(this.peer_id);
|
this.removeVideoDivOff(this.peer_id);
|
||||||
d = document.createElement('div');
|
d = document.createElement('div');
|
||||||
d.className = 'Camera';
|
d.className = 'Camera';
|
||||||
d.id = id + '__d';
|
d.id = id + '__d';
|
||||||
@@ -779,6 +781,9 @@ class RoomClient {
|
|||||||
elem.autoplay = true;
|
elem.autoplay = true;
|
||||||
elem.poster = image.poster;
|
elem.poster = image.poster;
|
||||||
this.isMobileDevice || type === mediaType.screen ? (elem.className = '') : (elem.className = 'mirror');
|
this.isMobileDevice || type === mediaType.screen ? (elem.className = '') : (elem.className = 'mirror');
|
||||||
|
av = document.createElement('img');
|
||||||
|
av.className = 'center pulsate';
|
||||||
|
av.id = this.peer_id + '__img';
|
||||||
vb = document.createElement('div');
|
vb = document.createElement('div');
|
||||||
vb.setAttribute('id', this.peer_id + '__vb');
|
vb.setAttribute('id', this.peer_id + '__vb');
|
||||||
vb.className = 'videoMenuBar fadein';
|
vb.className = 'videoMenuBar fadein';
|
||||||
@@ -810,6 +815,7 @@ class RoomClient {
|
|||||||
vb.appendChild(ts);
|
vb.appendChild(ts);
|
||||||
vb.appendChild(fs);
|
vb.appendChild(fs);
|
||||||
d.appendChild(elem);
|
d.appendChild(elem);
|
||||||
|
d.appendChild(av);
|
||||||
d.appendChild(pm);
|
d.appendChild(pm);
|
||||||
d.appendChild(i);
|
d.appendChild(i);
|
||||||
d.appendChild(p);
|
d.appendChild(p);
|
||||||
@@ -817,10 +823,12 @@ class RoomClient {
|
|||||||
this.videoMediaContainer.appendChild(d);
|
this.videoMediaContainer.appendChild(d);
|
||||||
this.attachMediaStream(elem, stream, type, 'Producer');
|
this.attachMediaStream(elem, stream, type, 'Producer');
|
||||||
this.myVideoEl = elem;
|
this.myVideoEl = elem;
|
||||||
this.handleFS(elem.id, fs.id);
|
this.handleFS(elem.id, fs.id, av.id);
|
||||||
this.handleTS(elem.id, ts.id);
|
this.handleTS(elem.id, ts.id, av.id);
|
||||||
this.popupPeerInfo(p.id, this.peer_info);
|
this.popupPeerInfo(p.id, this.peer_info);
|
||||||
this.checkPeerInfoStatus(this.peer_info);
|
this.checkPeerInfoStatus(this.peer_info);
|
||||||
|
this.setVideoAvatarImgName(av.id, this.peer_name);
|
||||||
|
this.peer_info.peer_video ? this.setVideoOn(this.peer_id) : this.setVideoOff(this.peer_id);
|
||||||
this.sound('joined');
|
this.sound('joined');
|
||||||
handleAspectRatio();
|
handleAspectRatio();
|
||||||
console.log('[addProducer] Video-element-count', this.videoMediaContainer.childElementCount);
|
console.log('[addProducer] Video-element-count', this.videoMediaContainer.childElementCount);
|
||||||
@@ -919,11 +927,11 @@ class RoomClient {
|
|||||||
this.event(_EVENTS.stopAudio);
|
this.event(_EVENTS.stopAudio);
|
||||||
break;
|
break;
|
||||||
case mediaType.video:
|
case mediaType.video:
|
||||||
this.setIsVideo(false);
|
this.setIsVideo(this.peer_id, false);
|
||||||
this.event(_EVENTS.stopVideo);
|
this.event(_EVENTS.stopVideo);
|
||||||
break;
|
break;
|
||||||
case mediaType.screen:
|
case mediaType.screen:
|
||||||
this.setIsScreen(false);
|
this.setIsScreen(this.peer_id, false);
|
||||||
this.event(_EVENTS.stopScreen);
|
this.event(_EVENTS.stopScreen);
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
@@ -994,12 +1002,14 @@ class RoomClient {
|
|||||||
}
|
}
|
||||||
|
|
||||||
handleConsumer(id, type, stream, peer_name, peer_info) {
|
handleConsumer(id, type, stream, peer_name, peer_info) {
|
||||||
let elem, vb, d, p, i, b, fs, ts, pb, pm;
|
let elem, vb, d, p, i, b, fs, ts, pb, pm, av;
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case mediaType.video:
|
case mediaType.video:
|
||||||
|
let remotePeerName = peer_info.peer_name;
|
||||||
let remotePeerId = peer_info.peer_id;
|
let remotePeerId = peer_info.peer_id;
|
||||||
let remotePeerAudio = peer_info.peer_audio;
|
let remotePeerAudio = peer_info.peer_audio;
|
||||||
this.removeVideoOff(remotePeerId);
|
let remotePeerVideo = peer_info.peer_video;
|
||||||
|
this.removeVideoDivOff(remotePeerId);
|
||||||
d = document.createElement('div');
|
d = document.createElement('div');
|
||||||
d.className = 'Camera';
|
d.className = 'Camera';
|
||||||
d.id = id + '__d';
|
d.id = id + '__d';
|
||||||
@@ -1009,6 +1019,9 @@ class RoomClient {
|
|||||||
elem.autoplay = true;
|
elem.autoplay = true;
|
||||||
elem.className = '';
|
elem.className = '';
|
||||||
elem.poster = image.poster;
|
elem.poster = image.poster;
|
||||||
|
av = document.createElement('img');
|
||||||
|
av.className = 'center pulsate';
|
||||||
|
av.id = remotePeerId + '__img';
|
||||||
vb = document.createElement('div');
|
vb = document.createElement('div');
|
||||||
vb.setAttribute('id', remotePeerId + '__vb');
|
vb.setAttribute('id', remotePeerId + '__vb');
|
||||||
vb.className = 'videoMenuBar fadein';
|
vb.className = 'videoMenuBar fadein';
|
||||||
@@ -1040,16 +1053,19 @@ class RoomClient {
|
|||||||
vb.appendChild(ts);
|
vb.appendChild(ts);
|
||||||
vb.appendChild(fs);
|
vb.appendChild(fs);
|
||||||
d.appendChild(elem);
|
d.appendChild(elem);
|
||||||
|
d.appendChild(av);
|
||||||
d.appendChild(i);
|
d.appendChild(i);
|
||||||
d.appendChild(p);
|
d.appendChild(p);
|
||||||
d.appendChild(pm);
|
d.appendChild(pm);
|
||||||
d.appendChild(vb);
|
d.appendChild(vb);
|
||||||
this.videoMediaContainer.appendChild(d);
|
this.videoMediaContainer.appendChild(d);
|
||||||
this.attachMediaStream(elem, stream, type, 'Consumer');
|
this.attachMediaStream(elem, stream, type, 'Consumer');
|
||||||
this.handleFS(elem.id, fs.id);
|
this.handleFS(elem.id, fs.id, av.id);
|
||||||
this.handleTS(elem.id, ts.id);
|
this.handleTS(elem.id, ts.id, av.id);
|
||||||
this.popupPeerInfo(p.id, peer_info);
|
this.popupPeerInfo(p.id, peer_info);
|
||||||
this.checkPeerInfoStatus(peer_info);
|
this.checkPeerInfoStatus(peer_info);
|
||||||
|
this.setVideoAvatarImgName(av.id, remotePeerName);
|
||||||
|
remotePeerVideo ? this.setVideoOn(remotePeerId) : this.setVideoOff(remotePeerId, true);
|
||||||
this.sound('joined');
|
this.sound('joined');
|
||||||
handleAspectRatio();
|
handleAspectRatio();
|
||||||
console.log('[addConsumer] Video-element-count', this.videoMediaContainer.childElementCount);
|
console.log('[addConsumer] Video-element-count', this.videoMediaContainer.childElementCount);
|
||||||
@@ -1093,12 +1109,26 @@ class RoomClient {
|
|||||||
// HANDLE VIDEO OFF
|
// HANDLE VIDEO OFF
|
||||||
// ####################################################
|
// ####################################################
|
||||||
|
|
||||||
async setVideoOff(peer_info, remotePeer = false) {
|
setVideoOff(peer_id, remotePeer = false) {
|
||||||
|
let avatarImg = this.getId(peer_id + '__img');
|
||||||
|
if (avatarImg) {
|
||||||
|
avatarImg.style.display = 'block';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setVideoOn(peer_id) {
|
||||||
|
let avatarImg = this.getId(peer_id + '__img');
|
||||||
|
if (avatarImg) {
|
||||||
|
avatarImg.style.display = 'none';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async setVideoDivOff(peer_info, remotePeer = false) {
|
||||||
let d, vb, i, h, b, p, pm, pb;
|
let d, vb, i, h, b, p, pm, pb;
|
||||||
let peer_id = peer_info.peer_id;
|
let peer_id = peer_info.peer_id;
|
||||||
let peer_name = peer_info.peer_name;
|
let peer_name = peer_info.peer_name;
|
||||||
let peer_audio = peer_info.peer_audio;
|
let peer_audio = peer_info.peer_audio;
|
||||||
this.removeVideoOff(peer_id);
|
this.removeVideoDivOff(peer_id);
|
||||||
d = document.createElement('div');
|
d = document.createElement('div');
|
||||||
d.className = 'Camera';
|
d.className = 'Camera';
|
||||||
d.id = peer_id + '__videoOff';
|
d.id = peer_id + '__videoOff';
|
||||||
@@ -1136,15 +1166,15 @@ class RoomClient {
|
|||||||
this.setVideoAvatarImgName(i.id, peer_name);
|
this.setVideoAvatarImgName(i.id, peer_name);
|
||||||
this.getId(i.id).style.display = 'block';
|
this.getId(i.id).style.display = 'block';
|
||||||
handleAspectRatio();
|
handleAspectRatio();
|
||||||
console.log('[setVideoOff] Video-element-count', this.videoMediaContainer.childElementCount);
|
console.log('[setVideoDivOff] Video-element-count', this.videoMediaContainer.childElementCount);
|
||||||
}
|
}
|
||||||
|
|
||||||
removeVideoOff(peer_id) {
|
removeVideoDivOff(peer_id) {
|
||||||
let pvOff = this.getId(peer_id + '__videoOff');
|
let pvOff = this.getId(peer_id + '__videoOff');
|
||||||
if (pvOff) {
|
if (pvOff) {
|
||||||
pvOff.parentNode.removeChild(pvOff);
|
pvOff.parentNode.removeChild(pvOff);
|
||||||
handleAspectRatio();
|
handleAspectRatio();
|
||||||
console.log('[removeVideoOff] Video-element-count', this.videoMediaContainer.childElementCount);
|
console.log('[removeVideoDivOff] Video-element-count', this.videoMediaContainer.childElementCount);
|
||||||
this.sound('left');
|
this.sound('left');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1282,20 +1312,17 @@ class RoomClient {
|
|||||||
if (b) b.className = this.peer_info.peer_audio ? html.audioOn : html.audioOff;
|
if (b) b.className = this.peer_info.peer_audio ? html.audioOn : html.audioOff;
|
||||||
}
|
}
|
||||||
|
|
||||||
setIsVideo(status) {
|
setIsVideo(peer_id, status) {
|
||||||
this.peer_info.peer_video = status;
|
if (this.peer_id == peer_id) this.peer_info.peer_video = status;
|
||||||
if (!this.peer_info.peer_video) {
|
if (!status) {
|
||||||
this.setVideoOff(this.peer_info, false);
|
this.setVideoOff(peer_id, false);
|
||||||
this.sendVideoOff();
|
} else {
|
||||||
|
this.setVideoOn(peer_id);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
setIsScreen(status) {
|
setIsScreen(peer_id, status) {
|
||||||
this.peer_info.peer_screen = status;
|
if (this.peer_id == peer_id) this.peer_info.peer_screen = status;
|
||||||
if (!this.peer_info.peer_screen && !this.peer_info.peer_video) {
|
|
||||||
this.setVideoOff(this.peer_info, false);
|
|
||||||
this.sendVideoOff();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
sendVideoOff() {
|
sendVideoOff() {
|
||||||
@@ -1303,7 +1330,7 @@ class RoomClient {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// ####################################################
|
// ####################################################
|
||||||
// GET
|
// IS / GET
|
||||||
// ####################################################
|
// ####################################################
|
||||||
|
|
||||||
isConnected() {
|
isConnected() {
|
||||||
@@ -1314,6 +1341,11 @@ class RoomClient {
|
|||||||
return this._isRecording;
|
return this._isRecording;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
isHidden(elId) {
|
||||||
|
let el = this.getId(elId);
|
||||||
|
return el.style.display == 'none';
|
||||||
|
}
|
||||||
|
|
||||||
static get mediaType() {
|
static get mediaType() {
|
||||||
return mediaType;
|
return mediaType;
|
||||||
}
|
}
|
||||||
@@ -1463,17 +1495,25 @@ class RoomClient {
|
|||||||
if (elem == null) this.isVideoOnFullScreen = document.fullscreenEnabled;
|
if (elem == null) this.isVideoOnFullScreen = document.fullscreenEnabled;
|
||||||
}
|
}
|
||||||
|
|
||||||
handleFS(elemId, fsId) {
|
handleFS(elemId, fsId, avatarId) {
|
||||||
let videoPlayer = this.getId(elemId);
|
let videoPlayer = this.getId(elemId);
|
||||||
let btnFs = this.getId(fsId);
|
let btnFs = this.getId(fsId);
|
||||||
this.setTippy(fsId, 'Full screen', 'top');
|
this.setTippy(fsId, 'Full screen', 'top');
|
||||||
|
|
||||||
btnFs.addEventListener('click', () => {
|
btnFs.addEventListener('click', () => {
|
||||||
|
if (!this.isHidden(avatarId)) {
|
||||||
|
this.userLog('info', 'Full screen mode work when video is on', 'top-end');
|
||||||
|
return;
|
||||||
|
}
|
||||||
videoPlayer.style.pointerEvents = this.isVideoOnFullScreen ? 'auto' : 'none';
|
videoPlayer.style.pointerEvents = this.isVideoOnFullScreen ? 'auto' : 'none';
|
||||||
this.toggleFullScreen(videoPlayer);
|
this.toggleFullScreen(videoPlayer);
|
||||||
this.isVideoOnFullScreen = this.isVideoOnFullScreen ? false : true;
|
this.isVideoOnFullScreen = this.isVideoOnFullScreen ? false : true;
|
||||||
});
|
});
|
||||||
videoPlayer.addEventListener('click', () => {
|
videoPlayer.addEventListener('click', () => {
|
||||||
|
if (!this.isHidden(avatarId)) {
|
||||||
|
this.userLog('info', 'Full screen mode work when video is on', 'top-end');
|
||||||
|
return;
|
||||||
|
}
|
||||||
if ((this.isMobileDevice && this.isVideoOnFullScreen) || !this.isMobileDevice) {
|
if ((this.isMobileDevice && this.isVideoOnFullScreen) || !this.isMobileDevice) {
|
||||||
videoPlayer.style.pointerEvents = this.isVideoOnFullScreen ? 'auto' : 'none';
|
videoPlayer.style.pointerEvents = this.isVideoOnFullScreen ? 'auto' : 'none';
|
||||||
this.toggleFullScreen(videoPlayer);
|
this.toggleFullScreen(videoPlayer);
|
||||||
@@ -1498,10 +1538,14 @@ class RoomClient {
|
|||||||
// TAKE SNAPSHOT
|
// TAKE SNAPSHOT
|
||||||
// ####################################################
|
// ####################################################
|
||||||
|
|
||||||
handleTS(elemId, tsId) {
|
handleTS(elemId, tsId, avatarId) {
|
||||||
let videoPlayer = this.getId(elemId);
|
let videoPlayer = this.getId(elemId);
|
||||||
let btnTs = this.getId(tsId);
|
let btnTs = this.getId(tsId);
|
||||||
btnTs.addEventListener('click', () => {
|
btnTs.addEventListener('click', () => {
|
||||||
|
if (!this.isHidden(avatarId)) {
|
||||||
|
this.userLog('info', 'SnapShot work when video is on', 'top-end');
|
||||||
|
return;
|
||||||
|
}
|
||||||
this.sound('snapshot');
|
this.sound('snapshot');
|
||||||
let context, canvas, width, height, dataURL;
|
let context, canvas, width, height, dataURL;
|
||||||
width = videoPlayer.videoWidth;
|
width = videoPlayer.videoWidth;
|
||||||
@@ -2270,11 +2314,13 @@ class RoomClient {
|
|||||||
Swal.fire({
|
Swal.fire({
|
||||||
allowOutsideClick: false,
|
allowOutsideClick: false,
|
||||||
allowEscapeKey: false,
|
allowEscapeKey: false,
|
||||||
|
showDenyButton: true,
|
||||||
background: swalBackground,
|
background: swalBackground,
|
||||||
imageUrl: image.locked,
|
imageUrl: image.locked,
|
||||||
input: 'text',
|
input: 'text',
|
||||||
inputPlaceholder: 'Set Room password',
|
inputPlaceholder: 'Set Room password',
|
||||||
confirmButtonText: `OK`,
|
confirmButtonText: `OK`,
|
||||||
|
denyButtonText: `Cancel`,
|
||||||
showClass: {
|
showClass: {
|
||||||
popup: 'animate__animated animate__fadeInDown',
|
popup: 'animate__animated animate__fadeInDown',
|
||||||
},
|
},
|
||||||
@@ -2285,10 +2331,12 @@ class RoomClient {
|
|||||||
if (!pwd) return 'Please enter the Room password';
|
if (!pwd) return 'Please enter the Room password';
|
||||||
this.RoomPassword = pwd;
|
this.RoomPassword = pwd;
|
||||||
},
|
},
|
||||||
}).then(() => {
|
}).then((result) => {
|
||||||
data.password = this.RoomPassword;
|
if (result.isConfirmed) {
|
||||||
this.socket.emit('roomAction', data);
|
data.password = this.RoomPassword;
|
||||||
this.roomStatus(action);
|
this.socket.emit('roomAction', data);
|
||||||
|
this.roomStatus(action);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
case 'unlock':
|
case 'unlock':
|
||||||
@@ -2447,7 +2495,7 @@ class RoomClient {
|
|||||||
break;
|
break;
|
||||||
case 'mute':
|
case 'mute':
|
||||||
if (peer_id === this.peer_id || broadcast) {
|
if (peer_id === this.peer_id || broadcast) {
|
||||||
this.closeProducer(mediaType.audio);
|
isProducerAudioOn ? this.pauseProducer(mediaType.audio) : this.closeProducer(mediaType.audio);
|
||||||
this.updatePeerInfo(this.peer_name, this.peer_id, 'audio', false);
|
this.updatePeerInfo(this.peer_name, this.peer_id, 'audio', false);
|
||||||
this.userLog(
|
this.userLog(
|
||||||
'warning',
|
'warning',
|
||||||
@@ -2459,7 +2507,8 @@ class RoomClient {
|
|||||||
break;
|
break;
|
||||||
case 'hide':
|
case 'hide':
|
||||||
if (peer_id === this.peer_id || broadcast) {
|
if (peer_id === this.peer_id || broadcast) {
|
||||||
this.closeProducer(mediaType.video);
|
isProducerVideoOn ? this.pauseProducer(mediaType.video) : this.closeProducer(mediaType.video);
|
||||||
|
this.updatePeerInfo(this.peer_name, this.peer_id, 'video', false);
|
||||||
this.userLog(
|
this.userLog(
|
||||||
'warning',
|
'warning',
|
||||||
from_peer_name + ' ' + _PEER.videoOff + ' has closed yours video',
|
from_peer_name + ' ' + _PEER.videoOff + ' has closed yours video',
|
||||||
@@ -2629,7 +2678,7 @@ class RoomClient {
|
|||||||
this.setIsAudio(peer_id, status);
|
this.setIsAudio(peer_id, status);
|
||||||
break;
|
break;
|
||||||
case 'video':
|
case 'video':
|
||||||
this.setIsVideo(status);
|
this.setIsVideo(peer_id, status);
|
||||||
break;
|
break;
|
||||||
case 'hand':
|
case 'hand':
|
||||||
this.peer_info.peer_hand = status;
|
this.peer_info.peer_hand = status;
|
||||||
@@ -2657,7 +2706,7 @@ class RoomClient {
|
|||||||
this.setIsAudio(peer_id, status);
|
this.setIsAudio(peer_id, status);
|
||||||
break;
|
break;
|
||||||
case 'video':
|
case 'video':
|
||||||
this.setIsVideo(status);
|
this.setIsVideo(peer_id, status);
|
||||||
break;
|
break;
|
||||||
case 'hand':
|
case 'hand':
|
||||||
let peer_hand = this.getPeerHandBtn(peer_id);
|
let peer_hand = this.getPeerHandBtn(peer_id);
|
||||||
|
|||||||
@@ -113,7 +113,6 @@ if (speechRecognition) {
|
|||||||
console.info('Browser supports webkitSpeechRecognition');
|
console.info('Browser supports webkitSpeechRecognition');
|
||||||
} else {
|
} else {
|
||||||
console.warn('This browser not supports webkitSpeechRecognition');
|
console.warn('This browser not supports webkitSpeechRecognition');
|
||||||
hide(chatSpeechStartButton);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function startSpeech(action) {
|
function startSpeech(action) {
|
||||||
|
|||||||
المرجع في مشكلة جديدة
حظر مستخدم