aiden
/
mirotalksfu
mirror of https://github.com/aiden09/mirotalksfu
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

[mirotalksfu] - UI enhancemetns - minor bug fix

Browse Source
main
Miroslav Pejic 4 years ago
parent 6734d4ce3c
commit d1674ed382
5 changed files with 247 additions and 39 deletions
Show Stats Download Patch File Download Diff File

28
public/css/VideoGrid.css
Unescape Escape View File

@ -27,6 +27,7 @@
display: inline-block;
background: transparent;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0px 12px 22px rgba(0, 0, 0, 0.4);
animation: show 0.4s ease;
}
@ -61,6 +62,33 @@
background: rgba(0, 0, 0, 0.4);
}
#videoMediaContainer button {
position: absolute;
right: 0;
color: white;
display: flex;
align-items: center;
margin: 5px;
width: auto;
height: 25px;
border-radius: 5px;
background: rgba(0, 0, 0, 0.1);
}
#videoMediaContainer img {
position: absolute;
margin-left: auto;
margin-right: auto;
width: 250px;
display: none;
}
#videoMediaContainer video {
position: absolute;
margin-left: auto;
margin-right: auto;
}
video {
width: 100%;
height: 100%;

14
public/js/Room.js
Unescape Escape View File

@ -398,8 +398,6 @@ function joinRoom(peer_name, room_id) {
peer_info,
isAudioAllowed,
isVideoAllowed,
isAudioOn,
isVideoOn,
roomIsReady,
);
handleRoomClientEvents();
@ -589,10 +587,12 @@ function handleButtons() {
};
startAudioButton.onclick = () => {
rc.produce(RoomClient.mediaType.audio, microphoneSelect.value);
rc.updatePeerInfo(peer_name, rc.peer_id, 'audio', true);
// rc.resumeProducer(RoomClient.mediaType.audio);
};
stopAudioButton.onclick = () => {
rc.closeProducer(RoomClient.mediaType.audio);
rc.updatePeerInfo(peer_name, rc.peer_id, 'audio', false);
// rc.pauseProducer(RoomClient.mediaType.audio);
};
startVideoButton.onclick = () => {
@ -1178,7 +1178,7 @@ function wbCanvasSaveImg() {
}
function wbCanvasToJson() {
if (rc.thereIsConsumers()) {
if (rc.thereIsParticipants()) {
let wbCanvasJson = JSON.stringify(wbCanvas.toJSON());
rc.socket.emit('wbCanvasToJson', wbCanvasJson);
}
@ -1200,7 +1200,7 @@ function getWhiteboardAction(action) {
function whiteboardAction(data, emit = true) {
if (emit) {
if (rc.thereIsConsumers()) {
if (rc.thereIsParticipants()) {
rc.socket.emit('whiteboardAction', data);
}
} else {
@ -1300,10 +1300,10 @@ async function getParticipantsTable(peers) {
table += `
<tr id='${peer_id}'>
<td>${peer_name}</td>
<td><button id='${peer_id}__audio' onclick="rc.peerAction('me',this.id,'mute')">${peer_audio}</button></td>
<td><button id='${peer_id}__video' onclick="rc.peerAction('me',this.id,'hide')">${peer_video}</button></td>
<td><button id='${peer_id}___pAudio' onclick="rc.peerAction('me',this.id,'mute')">${peer_audio}</button></td>
<td><button id='${peer_id}___pVideo' onclick="rc.peerAction('me',this.id,'hide')">${peer_video}</button></td>
<td><button>${peer_hand}</button></td>
<td><button id='${peer_id}__eject' onclick="rc.peerAction('me',this.id,'eject')">${peer_eject}</button></td>
<td><button id='${peer_id}___pEject' onclick="rc.peerAction('me',this.id,'eject')">${peer_eject}</button></td>
</tr>
`;
}

208
public/js/RoomClient.js
Unescape Escape View File

@ -6,6 +6,10 @@ const cfg = {
const html = {
newline: '<br />',
audioOn: 'fas fa-microphone',
audioOff: 'fas fa-microphone-slash',
videoOn: 'fas fa-video',
videoOff: 'fas fa-video-slash',
};
const image = {
@ -62,8 +66,6 @@ class RoomClient {
peer_info,
isAudioAllowed,
isVideoAllowed,
isAudioOn,
isVideoOn,
successCallback,
) {
this.remoteAudioEl = remoteAudioEl;
@ -79,8 +81,6 @@ class RoomClient {
this.isAudioAllowed = isAudioAllowed;
this.isVideoAllowed = isVideoAllowed;
this.isAudioOn = isAudioOn;
this.isVideoOn = isVideoOn;
this.producerTransport = null;
this.consumerTransport = null;
this.device = null;
@ -117,7 +117,7 @@ class RoomClient {
this.chunkSize = 1024 * 16; // 16kb/s
this.myVideoEl = null;
this.connectedRoom = null;
this.room_info = null;
this.debug = false;
this.consumers = new Map();
@ -187,8 +187,9 @@ class RoomClient {
this.roomIsLocked();
return;
}
this.connectedRoom = room;
console.log('07 ----> Joined to room', this.connectedRoom);
this.room_info = room;
console.log('07 ----> Joined to room', this.room_info);
await this.handleRoomInfo(this.room_info);
const data = await this.socket.request('getRouterRtpCapabilities');
this.device = await this.loadDevice(data);
console.log('08 ----> Get Router Rtp Capabilities codecs: ', this.device.rtpCapabilities.codecs);
@ -202,6 +203,19 @@ class RoomClient {
});
}
async handleRoomInfo(room_info) {
let peers = new Map(JSON.parse(room_info.peers));
participantsCount = peers.size;
for (let peer of Array.from(peers.keys()).filter((id) => id !== this.peer_id)) {
let peer_info = peers.get(peer).peer_info;
console.log('|| ----> Remote Peer info', peer_info);
if (!peer_info.peer_video) {
await this.setVideoOff(peer_info, true);
}
}
this.refreshParticipantsCount();
}
async loadDevice(routerRtpCapabilities) {
let device;
try {
@ -360,6 +374,31 @@ class RoomClient {
}.bind(this),
);
this.socket.on(
'setVideoOff',
function (data) {
console.log('Video off:', data);
this.setVideoOff(data, true);
}.bind(this),
);
this.socket.on(
'removeMe',
function (data) {
console.log('Remove me:', data);
this.removeVideoOff(data.peer_id);
participantsCount = data.peer_counts;
}.bind(this),
);
this.socket.on(
'refreshParticipantsCount',
function (data) {
console.log('Participants Count:', data);
participantsCount = data.peer_counts;
}.bind(this),
);
this.socket.on(
'newProducers',
async function (data) {
@ -455,14 +494,19 @@ class RoomClient {
// ####################################################
startLocalMedia() {
if (this.isAudioAllowed && this.isAudioOn) {
if (this.isAudioAllowed && this.peer_info.peer_audio) {
console.log('09 ----> Start audio media');
this.produce(mediaType.audio, microphoneSelect.value);
}
if (this.isVideoAllowed && this.isVideoOn) {
if (this.isVideoAllowed && this.peer_info.peer_video) {
console.log('10 ----> Start video media');
this.produce(mediaType.video, videoSelect.value);
}
if (!this.peer_info.peer_video) {
console.log('10 ----> Video is off');
this.setVideoOff(this.peer_info, false);
this.sendVideoOff();
}
}
// ####################################################
@ -567,12 +611,15 @@ class RoomClient {
switch (type) {
case mediaType.audio:
this.setIsAudio(this.peer_id, true);
this.event(_EVENTS.startAudio);
break;
case mediaType.video:
this.setIsVideo(true);
this.event(_EVENTS.startVideo);
break;
case mediaType.screen:
this.setIsScreen(true);
this.event(_EVENTS.startScreen);
break;
default:
@ -664,7 +711,8 @@ class RoomClient {
}
async handleProducer(id, type, stream) {
let elem, d, p, i;
let elem, d, p, i, b;
this.removeVideoOff(this.peer_id);
d = document.createElement('div');
d.className = 'Camera';
d.id = id + '__d';
@ -678,11 +726,15 @@ class RoomClient {
p.id = this.peer_id + '__name';
p.innerHTML = '👤 ' + this.peer_name + ' (me)';
i = document.createElement('i');
i.id = this.peer_id + '__peerHand';
i.id = this.peer_id + '__hand';
i.className = 'fas fa-hand-paper pulsate';
b = document.createElement('button');
b.id = this.peer_id + '__audio';
b.className = this.peer_info.peer_audio ? html.audioOn : html.audioOff;
d.appendChild(elem);
d.appendChild(p);
d.appendChild(i);
d.appendChild(p);
d.appendChild(b);
this.videoMediaContainer.appendChild(d);
this.attachMediaStream(elem, stream, type, 'Producer');
this.myVideoEl = elem;
@ -778,12 +830,15 @@ class RoomClient {
switch (type) {
case mediaType.audio:
this.setIsAudio(this.peer_id, false);
this.event(_EVENTS.stopAudio);
break;
case mediaType.video:
this.setIsVideo(false);
this.event(_EVENTS.stopVideo);
break;
case mediaType.screen:
this.setIsScreen(false);
this.event(_EVENTS.stopScreen);
break;
default:
@ -852,9 +907,10 @@ class RoomClient {
}
handleConsumer(id, type, stream, peer_name, peer_info) {
let elem, d, p, i;
let elem, d, p, i, b;
switch (type) {
case mediaType.video:
this.removeVideoOff(peer_info.peer_id);
d = document.createElement('div');
d.className = 'Camera';
d.id = id + '__d';
@ -868,11 +924,15 @@ class RoomClient {
p.id = peer_info.peer_id + '__name';
p.innerHTML = '👤 ' + peer_name;
i = document.createElement('i');
i.id = peer_info.peer_id + '__peerHand';
i.id = peer_info.peer_id + '__hand';
i.className = 'fas fa-hand-paper pulsate';
b = document.createElement('button');
b.id = peer_info.peer_id + '__audio';
b.className = peer_info.peer_audio ? html.audioOn : html.audioOff;
d.appendChild(elem);
d.appendChild(p);
d.appendChild(i);
d.appendChild(b);
this.videoMediaContainer.appendChild(d);
this.attachMediaStream(elem, stream, type, 'Consumer');
this.handleFS(elem.id);
@ -894,6 +954,8 @@ class RoomClient {
}
removeConsumer(consumer_id) {
console.log('Remove consumer_id:', consumer_id);
let elem = this.getId(consumer_id);
let d = this.getId(consumer_id + '__d');
@ -910,6 +972,45 @@ class RoomClient {
this.sound('left');
}
// ####################################################
// HANDLE VIDEO OFF
// ####################################################
async setVideoOff(peer_info, remotePeer = false) {
let d, i, b, p;
let peer_id = peer_info.peer_id;
let peer_name = peer_info.peer_name;
let peer_audio = peer_info.peer_audio;
d = document.createElement('div');
d.className = 'Camera';
d.id = peer_id + '__videoOff';
i = document.createElement('img');
i.className = 'center pulsate';
i.id = peer_id + '__img';
p = document.createElement('p');
p.id = peer_id + '__name';
p.innerHTML = '👤 ' + peer_name + (remotePeer ? '' : ' (me) ');
b = document.createElement('button');
b.id = peer_id + '__audio';
b.className = peer_audio ? html.audioOn : html.audioOff;
d.appendChild(i);
d.appendChild(p);
d.appendChild(b);
this.videoMediaContainer.appendChild(d);
this.setVideoAvatarImgName(i.id, peer_name);
this.getId(i.id).style.display = 'block';
resizeVideoMedia();
}
removeVideoOff(peer_id) {
let pvOff = this.getId(peer_id + '__videoOff');
if (pvOff) {
pvOff.parentNode.removeChild(pvOff);
resizeVideoMedia();
this.sound('left');
}
}
// ####################################################
// EXIT ROOM
// ####################################################
@ -1005,6 +1106,37 @@ class RoomClient {
});
}
setVideoAvatarImgName(elemId, peer_name) {
let elem = this.getId(elemId);
let avatarImgSize = 250;
elem.setAttribute(
'src',
cfg.msgAvatar + '?name=' + peer_name + '&size=' + avatarImgSize + '&background=random&rounded=true',
);
}
setIsAudio(peer_id, status) {
this.peer_info.peer_audio = status;
let b = this.getPeerAudioBtn(peer_id);
if (b) b.className = this.peer_info.peer_audio ? html.audioOn : html.audioOff;
}
setIsVideo(status) {
this.peer_info.peer_video = status;
if (!this.peer_info.peer_video) {
this.setVideoOff(this.peer_info, false);
this.sendVideoOff();
}
}
setIsScreen(status) {
return status;
}
sendVideoOff() {
this.socket.emit('setVideoOff', this.peer_info);
}
// ####################################################
// GET
// ####################################################
@ -1038,6 +1170,18 @@ class RoomClient {
return room_info;
}
refreshParticipantsCount() {
this.socket.emit('refreshParticipantsCount');
}
getPeerAudioBtn(peer_id) {
return this.getId(peer_id + '__audio');
}
getPeerHandBtn(peer_id) {
return this.getId(peer_id + '__hand');
}
// ####################################################
// UTILITY
// ####################################################
@ -1074,8 +1218,8 @@ class RoomClient {
});
}
thereIsConsumers() {
if (this.consumers.size > 0) {
thereIsParticipants() {
if (this.consumers.size > 0 || participantsCount > 1) {
return true;
}
return false;
@ -1202,7 +1346,7 @@ class RoomClient {
}
sendMessage() {
if (!this.thereIsConsumers()) {
if (!this.thereIsParticipants()) {
chatMessage.value = '';
this.userLog('info', 'No participants in the room', 'top-end');
return;
@ -1495,7 +1639,7 @@ class RoomClient {
if (result.isConfirmed) {
this.fileToSend = result.value;
if (this.fileToSend && this.fileToSend.size > 0) {
if (!this.thereIsConsumers()) {
if (!this.thereIsParticipants()) {
userLog('info', 'No participants detected', 'top-end');
return;
}
@ -1761,27 +1905,28 @@ class RoomClient {
peerAction(from_peer_name, id, action, emit = true, broadcast = false) {
let peer_id = id;
if (emit) {
if (!broadcast) {
if (participantsCount === 1) return;
const words = peer_id.split('__');
const words = peer_id.split('___');
peer_id = words[0];
switch (action) {
case 'eject':
let peer = this.getId(peer_id);
if (peer) peer.parentNode.removeChild(peer);
participantsCount--;
refreshParticipantsCount(participantsCount);
if (peer) {
peer.parentNode.removeChild(peer);
participantsCount--;
refreshParticipantsCount(participantsCount);
}
break;
case 'mute':
let peerAudioButton = this.getId(peer_id + '__audio');
let peerAudioButton = this.getId(peer_id + '___pAudio');
if (peerAudioButton) peerAudioButton.innerHTML = _PEER.audioOff;
break;
case 'hide':
let peerVideoButton = this.getId(peer_id + '__video');
let peerVideoButton = this.getId(peer_id + '___pVideo');
if (peerVideoButton) peerVideoButton.innerHTML = _PEER.videoOff;
}
} else {
@ -1845,6 +1990,7 @@ class RoomClient {
case 'mute':
if (peer_id === this.peer_id || broadcast) {
this.closeProducer(mediaType.audio);
this.updatePeerInfo(this.peer_name, this.peer_id, 'audio', false);
this.userLog(
'warning',
from_peer_name + ' ' + _PEER.audioOff + ' has closed yours audio',
@ -1877,14 +2023,14 @@ class RoomClient {
if (emit) {
switch (type) {
case 'audio':
this.peer_info.peer_audio = status;
this.setIsAudio(peer_id, status);
break;
case 'video':
this.peer_info.peer_video = status;
this.setIsVideo(status);
break;
case 'hand':
this.peer_info.peer_hand = status;
let peer_hand = this.getId(peer_id + '__peerHand');
let peer_hand = this.getPeerHandBtn(peer_id);
if (status) {
if (peer_hand) peer_hand.style.display = 'flex';
this.event(_EVENTS.raiseHand);
@ -1905,11 +2051,13 @@ class RoomClient {
} else {
switch (type) {
case 'audio':
this.setIsAudio(peer_id, status);
break;
case 'video':
this.setIsVideo(status);
break;
case 'hand':
let peer_hand = this.getId(peer_id + '__peerHand');
let peer_hand = this.getPeerHandBtn(peer_id);
if (status) {
if (peer_hand) peer_hand.style.display = 'flex';
this.userLog(
@ -1931,7 +2079,7 @@ class RoomClient {
let peer_id = peer_info.peer_id;
let peer_hand_status = peer_info.peer_hand;
if (peer_hand_status) {
let peer_hand = this.getId(peer_id + '__peerHand');
let peer_hand = this.getPeerHandBtn(peer_id);
if (peer_hand) peer_hand.style.display = 'flex';
}
//...

6
src/Room.js
Unescape Escape View File

@ -216,6 +216,12 @@ module.exports = class Room {
}
}
sendToAll(action, data) {
for (let peer_id of Array.from(this.peers.keys())) {
this.send(peer_id, action, data);
}
}
send(socket_id, action, data) {
this.io.to(socket_id).emit(action, data);
}

30
src/Server.js
Unescape Escape View File

@ -276,6 +276,11 @@ io.on('connection', (socket) => {
roomList.get(socket.room_id).broadCast(socket.id, 'whiteboardAction', data);
});
socket.on('setVideoOff', (data) => {
log.debug('Video off', getPeerName());
roomList.get(socket.room_id).broadCast(socket.id, 'setVideoOff', data);
});
socket.on('join', (data, cb) => {
if (!roomList.has(socket.room_id)) {
return cb({
@ -331,9 +336,9 @@ io.on('connection', (socket) => {
});
socket.on('connectTransport', async ({ transport_id, dtlsParameters }, callback) => {
if (!roomList.has(socket.room_id)) return;
log.debug('Connect transport', getPeerName());
if (!roomList.has(socket.room_id)) return;
await roomList.get(socket.room_id).connectPeerTransport(socket.id, transport_id, dtlsParameters);
callback('success');
@ -401,8 +406,17 @@ io.on('connection', (socket) => {
});
socket.on('getRoomInfo', (_, cb) => {
cb(roomList.get(socket.room_id).toJson());
log.debug('Send Room Info');
cb(roomList.get(socket.room_id).toJson());
});
socket.on('refreshParticipantsCount', () => {
let data = {
room_id: socket.room_id,
peer_counts: roomList.get(socket.room_id).getPeers().size,
};
log.debug('Refresh Participants count', data);
roomList.get(socket.room_id).sendToAll('refreshParticipantsCount', data);
});
socket.on('message', (data) => {
@ -423,6 +437,8 @@ io.on('connection', (socket) => {
if (roomList.get(socket.room_id).getPeers().size === 0 && roomList.get(socket.room_id).isLocked()) {
roomList.get(socket.room_id).setLocked(false);
}
roomList.get(socket.room_id).broadCast(socket.id, 'removeMe', removeMeData());
});
socket.on('exitRoom', async (_, callback) => {
@ -440,6 +456,8 @@ io.on('connection', (socket) => {
roomList.delete(socket.room_id);
}
roomList.get(socket.room_id).broadCast(socket.id, 'removeMe', removeMeData());
socket.room_id = null;
callback('Successfully exited room');
@ -459,6 +477,14 @@ io.on('connection', (socket) => {
);
}
function removeMeData() {
return {
room_id: socket.room_id,
peer_id: socket.id,
peer_counts: roomList.get(socket.room_id).getPeers().size,
};
}
function bytesToSize(bytes) {
let sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
if (bytes == 0) return '0 Byte';

Write Preview
Loading…
Cancel
Save