[mirotalksfu] - add more cmd buttons on peer video element
هذا الالتزام موجود في:
Miroslav Pejic
@@ -229,6 +229,7 @@ module.exports = class Room {
|
||||
// tell client consumer is dead
|
||||
this.io.to(socket_id).emit('consumerClosed', {
|
||||
consumer_id: consumer.id,
|
||||
consumer_kind: consumer.kind,
|
||||
});
|
||||
}.bind(this),
|
||||
);
|
||||
|
||||
@@ -751,7 +751,7 @@ function handleButtons() {
|
||||
rc.closeProducer(RoomClient.mediaType.screen);
|
||||
};
|
||||
fileShareButton.onclick = () => {
|
||||
rc.selectFileToShare(rc.peer_id);
|
||||
rc.selectFileToShare(rc.peer_id, true);
|
||||
};
|
||||
youTubeShareButton.onclick = () => {
|
||||
rc.youTubeShareVideo('all');
|
||||
@@ -1524,7 +1524,7 @@ async function getParticipantsTable(peers) {
|
||||
<td><button id="muteAllButton" onclick="rc.peerAction('me','${rc.peer_id}','mute',true,true)">${_PEER.audioOff}</button></td>
|
||||
<td><button id="hideAllButton" onclick="rc.peerAction('me','${rc.peer_id}','hide',true,true)">${_PEER.videoOff}</button></td>
|
||||
<td></td>
|
||||
<td><button id="sendAllButton" onclick="rc.selectFileToShare('${rc.peer_id}')">${_PEER.sendFile}</button></td>
|
||||
<td><button id="sendAllButton" onclick="rc.selectFileToShare('${rc.peer_id}', true)">${_PEER.sendFile}</button></td>
|
||||
<td><button id="sendMessageToAll" onclick="rc.sendMessageTo('all')">${_PEER.sendMsg}</button></td>
|
||||
<td><button id="sendYouTubeAll" onclick="rc.youTubeShareVideo('all');">${_PEER.sendYouTube}</button></td>
|
||||
<td><button id="ejectAllButton" onclick="rc.peerAction('me','${rc.peer_id}','eject',true,true)">${_PEER.ejectPeer}</button></td>
|
||||
@@ -1562,7 +1562,7 @@ async function getParticipantsTable(peers) {
|
||||
<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}' onclick="rc.selectFileToShare(this.id, false)">${peer_sendFile}</button></td>
|
||||
<td><button id='${peer_id}' onclick="rc.selectFileToShare(this.id)">${peer_sendFile}</button></td>
|
||||
<td><button id="sendMessageTo" onclick="rc.sendMessageTo('${peer_id}')">${peer_sendMsg}</button></td>
|
||||
<td><button id="sendYouTubeTo" onclick="rc.youTubeShareVideo('${peer_id}');">${_PEER.sendYouTube}</button></td>
|
||||
<td><button id='${peer_id}___pEject' onclick="rc.peerAction('me',this.id,'eject')">${peer_eject}</button></td>
|
||||
|
||||
@@ -14,6 +14,9 @@ const html = {
|
||||
userHand: 'fas fa-hand-paper pulsate',
|
||||
fullScreen: 'fas fa-expand',
|
||||
snapshot: 'fas fa-camera-retro',
|
||||
sendFile: 'fas fa-upload',
|
||||
sendYouTube: 'fab fa-youtube',
|
||||
kickOut: 'fas fa-times',
|
||||
};
|
||||
|
||||
const image = {
|
||||
@@ -390,9 +393,9 @@ class RoomClient {
|
||||
initSockets() {
|
||||
this.socket.on(
|
||||
'consumerClosed',
|
||||
function ({ consumer_id }) {
|
||||
console.log('Closing consumer:', consumer_id);
|
||||
this.removeConsumer(consumer_id);
|
||||
function ({ consumer_id, consumer_kind }) {
|
||||
console.log('Closing consumer', { consumer_id: consumer_id, consumer_kind: consumer_kind });
|
||||
this.removeConsumer(consumer_id, consumer_kind);
|
||||
}.bind(this),
|
||||
);
|
||||
|
||||
@@ -770,7 +773,7 @@ class RoomClient {
|
||||
}
|
||||
|
||||
async handleProducer(id, type, stream) {
|
||||
let elem, vb, ts, d, p, i, b, fs, pm, pb;
|
||||
let elem, vb, ts, d, p, i, au, fs, pm, pb;
|
||||
this.removeVideoOff(this.peer_id);
|
||||
d = document.createElement('div');
|
||||
d.className = 'Camera';
|
||||
@@ -790,9 +793,9 @@ class RoomClient {
|
||||
ts = document.createElement('button');
|
||||
ts.id = id + '__snapshot';
|
||||
ts.className = html.snapshot;
|
||||
b = document.createElement('button');
|
||||
b.id = this.peer_id + '__audio';
|
||||
b.className = this.peer_info.peer_audio ? html.audioOn : html.audioOff;
|
||||
au = document.createElement('button');
|
||||
au.id = this.peer_id + '__audio';
|
||||
au.className = this.peer_info.peer_audio ? html.audioOn : html.audioOff;
|
||||
p = document.createElement('p');
|
||||
p.id = this.peer_id + '__name';
|
||||
p.className = html.userName;
|
||||
@@ -808,7 +811,7 @@ class RoomClient {
|
||||
pb.className = 'bar';
|
||||
pb.style.height = '1%';
|
||||
pm.appendChild(pb);
|
||||
vb.appendChild(b);
|
||||
vb.appendChild(au);
|
||||
vb.appendChild(ts);
|
||||
vb.appendChild(fs);
|
||||
d.appendChild(elem);
|
||||
@@ -828,6 +831,7 @@ class RoomClient {
|
||||
if (!this.isMobileDevice) {
|
||||
this.setTippy(elem.id, 'Full Screen', 'top-end');
|
||||
this.setTippy(ts.id, 'Snapshot', 'top-end');
|
||||
this.setTippy(au.id, 'Audio status', 'top-end');
|
||||
}
|
||||
return elem;
|
||||
}
|
||||
@@ -954,14 +958,14 @@ class RoomClient {
|
||||
consumer.on(
|
||||
'trackended',
|
||||
function () {
|
||||
this.removeConsumer(consumer.id);
|
||||
this.removeConsumer(consumer.id, consumer.kind);
|
||||
}.bind(this),
|
||||
);
|
||||
|
||||
consumer.on(
|
||||
'transportclose',
|
||||
function () {
|
||||
this.removeConsumer(consumer.id);
|
||||
this.removeConsumer(consumer.id, consumer.kind);
|
||||
}.bind(this),
|
||||
);
|
||||
}.bind(this),
|
||||
@@ -995,7 +999,7 @@ class RoomClient {
|
||||
}
|
||||
|
||||
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, au, fs, ts, sf, sy, ko, pb, pm;
|
||||
switch (type) {
|
||||
case mediaType.video:
|
||||
let remotePeerId = peer_info.peer_id;
|
||||
@@ -1019,9 +1023,18 @@ class RoomClient {
|
||||
ts = document.createElement('button');
|
||||
ts.id = id + '__snapshot';
|
||||
ts.className = html.snapshot;
|
||||
b = document.createElement('button');
|
||||
b.id = remotePeerId + '__audio';
|
||||
b.className = remotePeerAudio ? html.audioOn : html.audioOff;
|
||||
sf = document.createElement('button');
|
||||
sf.id = id + '___' + remotePeerId + '___sendFile';
|
||||
sf.className = html.sendFile;
|
||||
sy = document.createElement('button');
|
||||
sy.id = id + '___' + remotePeerId + '___sendYouTube';
|
||||
sy.className = html.sendYouTube;
|
||||
au = document.createElement('button');
|
||||
au.id = remotePeerId + '__audio';
|
||||
au.className = remotePeerAudio ? html.audioOn : html.audioOff;
|
||||
ko = document.createElement('button');
|
||||
ko.id = id + '___' + remotePeerId + '___kickOut';
|
||||
ko.className = html.kickOut;
|
||||
i = document.createElement('i');
|
||||
i.id = remotePeerId + '__hand';
|
||||
i.className = html.userHand;
|
||||
@@ -1037,7 +1050,10 @@ class RoomClient {
|
||||
pb.className = 'bar';
|
||||
pb.style.height = '1%';
|
||||
pm.appendChild(pb);
|
||||
vb.appendChild(b);
|
||||
vb.appendChild(ko);
|
||||
vb.appendChild(au);
|
||||
vb.appendChild(sy);
|
||||
vb.appendChild(sf);
|
||||
vb.appendChild(ts);
|
||||
vb.appendChild(fs);
|
||||
d.appendChild(elem);
|
||||
@@ -1049,6 +1065,9 @@ class RoomClient {
|
||||
this.attachMediaStream(elem, stream, type, 'Consumer');
|
||||
this.handleFS(elem.id, fs.id);
|
||||
this.handleTS(elem.id, ts.id);
|
||||
this.handleSF(sf.id);
|
||||
this.handleSY(sy.id);
|
||||
this.handleKO(ko.id);
|
||||
this.popupPeerInfo(p.id, peer_info);
|
||||
this.checkPeerInfoStatus(peer_info);
|
||||
this.sound('joined');
|
||||
@@ -1057,6 +1076,10 @@ class RoomClient {
|
||||
if (!this.isMobileDevice) {
|
||||
this.setTippy(elem.id, 'Full Screen', 'top-end');
|
||||
this.setTippy(ts.id, 'Snapshot', 'top-end');
|
||||
this.setTippy(sf.id, 'Send file', 'top-end');
|
||||
this.setTippy(sy.id, 'Send youTube', 'top-end');
|
||||
this.setTippy(au.id, 'Audio status', 'top-end');
|
||||
this.setTippy(ko.id, 'Eject', 'top-end');
|
||||
}
|
||||
break;
|
||||
case mediaType.audio:
|
||||
@@ -1070,21 +1093,26 @@ class RoomClient {
|
||||
return elem;
|
||||
}
|
||||
|
||||
removeConsumer(consumer_id) {
|
||||
console.log('Remove consumer_id:', consumer_id);
|
||||
removeConsumer(consumer_id, consumer_kind) {
|
||||
console.log('Remove consumer', { consumer_id: consumer_id, consumer_kind: consumer_kind });
|
||||
|
||||
let elem = this.getId(consumer_id);
|
||||
let d = this.getId(consumer_id + '__d');
|
||||
|
||||
elem.srcObject.getTracks().forEach(function (track) {
|
||||
track.stop();
|
||||
});
|
||||
|
||||
if (elem) elem.parentNode.removeChild(elem);
|
||||
if (d) d.parentNode.removeChild(d);
|
||||
|
||||
handleAspectRatio();
|
||||
console.log('[removeConsumer] Video-element-count', this.videoMediaContainer.childElementCount);
|
||||
if (consumer_kind === 'video') {
|
||||
let d = this.getId(consumer_id + '__d');
|
||||
if (d) d.parentNode.removeChild(d);
|
||||
handleAspectRatio();
|
||||
console.log(
|
||||
'[removeConsumer - ' + consumer_kind + '] Video-element-count',
|
||||
this.videoMediaContainer.childElementCount,
|
||||
);
|
||||
}
|
||||
|
||||
this.consumers.delete(consumer_id);
|
||||
this.sound('left');
|
||||
@@ -1095,7 +1123,7 @@ class RoomClient {
|
||||
// ####################################################
|
||||
|
||||
async setVideoOff(peer_info, remotePeer = false) {
|
||||
let d, vb, i, h, b, p, pm, pb;
|
||||
let d, vb, i, h, au, sf, sy, ko, p, pm, pb;
|
||||
let peer_id = peer_info.peer_id;
|
||||
let peer_name = peer_info.peer_name;
|
||||
let peer_audio = peer_info.peer_audio;
|
||||
@@ -1106,9 +1134,20 @@ class RoomClient {
|
||||
vb = document.createElement('div');
|
||||
vb.setAttribute('id', this.peer_id + 'vb');
|
||||
vb.className = 'videoMenuBar fadein';
|
||||
b = document.createElement('button');
|
||||
b.id = peer_id + '__audio';
|
||||
b.className = peer_audio ? html.audioOn : html.audioOff;
|
||||
au = document.createElement('button');
|
||||
au.id = peer_id + '__audio';
|
||||
au.className = peer_audio ? html.audioOn : html.audioOff;
|
||||
if (remotePeer) {
|
||||
sf = document.createElement('button');
|
||||
sf.id = 'remotePeer___' + peer_id + '___sendFile';
|
||||
sf.className = html.sendFile;
|
||||
sy = document.createElement('button');
|
||||
sy.id = 'remotePeer___' + peer_id + '___sendYouTube';
|
||||
sy.className = html.sendYouTube;
|
||||
ko = document.createElement('button');
|
||||
ko.id = 'remotePeer___' + peer_id + '___kickOut';
|
||||
ko.className = html.kickOut;
|
||||
}
|
||||
i = document.createElement('img');
|
||||
i.className = 'center pulsate';
|
||||
i.id = peer_id + '__img';
|
||||
@@ -1127,17 +1166,33 @@ class RoomClient {
|
||||
pb.className = 'bar';
|
||||
pb.style.height = '1%';
|
||||
pm.appendChild(pb);
|
||||
vb.appendChild(b);
|
||||
if (remotePeer) {
|
||||
vb.appendChild(ko);
|
||||
vb.appendChild(sy);
|
||||
vb.appendChild(sf);
|
||||
}
|
||||
vb.appendChild(au);
|
||||
d.appendChild(i);
|
||||
d.appendChild(p);
|
||||
d.appendChild(h);
|
||||
d.appendChild(pm);
|
||||
d.appendChild(vb);
|
||||
this.videoMediaContainer.appendChild(d);
|
||||
if (remotePeer) {
|
||||
this.handleSF(sf.id);
|
||||
this.handleSY(sy.id);
|
||||
this.handleKO(ko.id);
|
||||
}
|
||||
this.setVideoAvatarImgName(i.id, peer_name);
|
||||
this.getId(i.id).style.display = 'block';
|
||||
handleAspectRatio();
|
||||
console.log('[setVideoOff] Video-element-count', this.videoMediaContainer.childElementCount);
|
||||
if (!this.isMobileDevice && remotePeer) {
|
||||
this.setTippy(sf.id, 'Send file', 'top-end');
|
||||
this.setTippy(sy.id, 'Send youTube', 'top-end');
|
||||
this.setTippy(au.id, 'Audio status', 'top-end');
|
||||
this.setTippy(ko.id, 'Eject', 'top-end');
|
||||
}
|
||||
}
|
||||
|
||||
removeVideoOff(peer_id) {
|
||||
@@ -1883,7 +1938,16 @@ class RoomClient {
|
||||
// FILE SHARING
|
||||
// ####################################################
|
||||
|
||||
selectFileToShare(peer_id, broadcast = true) {
|
||||
handleSF(uid) {
|
||||
const words = uid.split('___');
|
||||
let peer_id = words[1];
|
||||
let btnSf = this.getId(uid);
|
||||
btnSf.addEventListener('click', () => {
|
||||
this.selectFileToShare(peer_id);
|
||||
});
|
||||
}
|
||||
|
||||
selectFileToShare(peer_id, broadcast = false) {
|
||||
this.sound('open');
|
||||
|
||||
Swal.fire({
|
||||
@@ -2144,6 +2208,15 @@ class RoomClient {
|
||||
// YOUTUBE SHARE VIDEO
|
||||
// ####################################################
|
||||
|
||||
handleSY(uid) {
|
||||
const words = uid.split('___');
|
||||
let peer_id = words[1];
|
||||
let btnSy = this.getId(uid);
|
||||
btnSy.addEventListener('click', () => {
|
||||
this.youTubeShareVideo(peer_id);
|
||||
});
|
||||
}
|
||||
|
||||
youTubeShareVideo(peer_id = 'all') {
|
||||
this.sound('open');
|
||||
|
||||
@@ -2421,6 +2494,19 @@ class RoomClient {
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// ####################################################
|
||||
// HANDLE KICK-OUT
|
||||
// ###################################################
|
||||
|
||||
handleKO(uid) {
|
||||
const words = uid.split('___');
|
||||
let peer_id = words[1] + '___pEject';
|
||||
let btnKo = this.getId(uid);
|
||||
btnKo.addEventListener('click', () => {
|
||||
this.peerAction('me', peer_id, 'eject');
|
||||
});
|
||||
}
|
||||
|
||||
// ####################################################
|
||||
// PEER ACTION
|
||||
// ####################################################
|
||||
@@ -2526,19 +2612,19 @@ class RoomClient {
|
||||
if (result.isConfirmed) {
|
||||
ejectConfirmed = true;
|
||||
if (!data.broadcast) {
|
||||
this.socket.emit('peerAction', data);
|
||||
let peer = this.getId(data.peer_id);
|
||||
if (peer) {
|
||||
peer.parentNode.removeChild(peer);
|
||||
participantsCount--;
|
||||
refreshParticipantsCount(participantsCount);
|
||||
this.socket.emit('peerAction', data);
|
||||
}
|
||||
} else {
|
||||
this.socket.emit('peerAction', data);
|
||||
let actionButton = this.getId(action + 'AllButton');
|
||||
if (actionButton) actionButton.style.display = 'none';
|
||||
participantsCount = 1;
|
||||
refreshParticipantsCount(participantsCount);
|
||||
this.socket.emit('peerAction', data);
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -2576,6 +2662,7 @@ class RoomClient {
|
||||
if (result.isConfirmed) {
|
||||
muteHideConfirmed = true;
|
||||
if (!data.broadcast) {
|
||||
this.socket.emit('peerAction', data);
|
||||
switch (action) {
|
||||
case 'mute':
|
||||
let peerAudioButton = this.getId(data.peer_id + '___pAudio');
|
||||
@@ -2585,11 +2672,10 @@ class RoomClient {
|
||||
let peerVideoButton = this.getId(data.peer_id + '___pVideo');
|
||||
if (peerVideoButton) peerVideoButton.innerHTML = _PEER.videoOff;
|
||||
}
|
||||
this.socket.emit('peerAction', data);
|
||||
} else {
|
||||
this.socket.emit('peerAction', data);
|
||||
let actionButton = this.getId(action + 'AllButton');
|
||||
if (actionButton) actionButton.style.display = 'none';
|
||||
this.socket.emit('peerAction', data);
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -76,8 +76,8 @@
|
||||
<script src="https://kit.fontawesome.com/d2f1016e6f.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.rawgit.com/muaz-khan/DetectRTC/master/DetectRTC.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/500/fabric.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.4"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/521/fabric.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.8"></script>
|
||||
<script src="https://unpkg.com/emoji-picker-element@1" type="module"></script>
|
||||
<script src="https://unpkg.com/@popperjs/core@2"></script>
|
||||
<script src="https://unpkg.com/tippy.js@6"></script>
|
||||
|
||||
المرجع في مشكلة جديدة
حظر مستخدم