ghaymah_dev/codepill-sfu
1
0
نسخ 0
الشفرة المشكلات طلبات السحب Actions Packages المشاريع الإصدارات الويكي النشاط

[mirotalksfu] - handle peers volume + update dep.

تصفح المصدر
هذا الالتزام موجود في:
Miroslav Pejic
2022-08-16 14:21:47 +02:00
الأصل 1bb58cfdff
التزام 04c45b4b02
4 ملفات معدلة مع 80 إضافات و6 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

6
package.json
عرض الملف

@@ -31,10 +31,10 @@
"httpolyglot": "0.1.2",
"mediasoup": "3.10.5",
"mediasoup-client": "3.6.55",
"ngrok": "4.3.1",
"ngrok": "4.3.2",
"qs": "6.11.0",
"@sentry/node": "7.9.0",
"@sentry/integrations": "7.9.0",
"@sentry/node": "7.10.0",
"@sentry/integrations": "7.10.0",
"socket.io": "4.5.1",
"swagger-ui-express": "4.5.0",
"uuid": "8.3.2",

8
public/css/VideoGrid.css
عرض الملف

@@ -115,6 +115,7 @@
overflow: hidden;
}
.videoMenuBar input,
.videoMenuBar button {
float: right;
margin-right: 3px;
@@ -167,6 +168,13 @@ video:fullscreen {
filter: blur(5px);
}
input[type='range'] {
display: none;
color: #fff;
width: 50px;
cursor: pointer;
}
@keyframes show {
0% {
opacity: 0;

2
public/js/Room.js
عرض الملف

@@ -44,6 +44,7 @@ const BUTTONS = {
sendVideoButton: true,
muteVideoButton: true,
muteAudioButton: true,
audioVolumeInput: true,
ejectButton: true,
},
videoOff: {
@@ -51,6 +52,7 @@ const BUTTONS = {
sendFileButton: true,
sendVideoButton: true,
muteAudioButton: true,
audioVolumeInput: true,
ejectButton: true,
},
//...

70
public/js/RoomClient.js
عرض الملف

@@ -183,6 +183,7 @@ class RoomClient {
this.videoProducerId = null;
this.audioProducerId = null;
this.audioConsumers = new Map();
this.consumers = new Map();
this.producers = new Map();
@@ -1138,10 +1139,12 @@ class RoomClient {
}
handleConsumer(id, type, stream, peer_name, peer_info) {
let elem, vb, d, p, i, cm, au, fs, ts, sf, sm, sv, ko, pb, pm;
let elem, vb, d, p, i, cm, au, fs, ts, sf, sm, sv, ko, pb, pm, pv;
let remotePeerId = peer_info.peer_id;
switch (type) {
case mediaType.video:
let remotePeerId = peer_info.peer_id;
let remotePeerAudio = peer_info.peer_audio;
this.removeVideoOff(remotePeerId);
d = document.createElement('div');
@@ -1157,6 +1160,12 @@ class RoomClient {
vb = document.createElement('div');
vb.setAttribute('id', remotePeerId + '__vb');
vb.className = 'videoMenuBar fadein';
pv = document.createElement('input');
pv.id = remotePeerId + '___pVolume';
pv.type = 'range';
pv.min = 0;
pv.max = 100;
pv.value = 100;
fs = document.createElement('button');
fs.id = id + '__fullScreen';
fs.className = html.fullScreen;
@@ -1197,6 +1206,7 @@ class RoomClient {
pb.style.height = '1%';
pm.appendChild(pb);
BUTTONS.consumerVideo.ejectButton && vb.appendChild(ko);
BUTTONS.consumerVideo.audioVolumeInput && vb.appendChild(pv);
BUTTONS.consumerVideo.muteAudioButton && vb.appendChild(au);
BUTTONS.consumerVideo.muteVideoButton && vb.appendChild(cm);
BUTTONS.consumerVideo.sendVideoButton && vb.appendChild(sv);
@@ -1219,6 +1229,7 @@ class RoomClient {
this.handleSV(sv.id);
this.handleCM(cm.id);
this.handleAU(au.id);
this.handlePV(id + '___' + pv.id);
this.handleKO(ko.id);
this.popupPeerInfo(p.id, peer_info);
this.checkPeerInfoStatus(peer_info);
@@ -1233,6 +1244,7 @@ class RoomClient {
this.setTippy(sv.id, 'Send video', 'top-end');
this.setTippy(cm.id, 'Hide', 'top-end');
this.setTippy(au.id, 'Mute', 'top-end');
this.setTippy(pv.id, '🔊 Volume', 'top-end');
this.setTippy(ko.id, 'Eject', 'top-end');
}
break;
@@ -1240,8 +1252,16 @@ class RoomClient {
elem = document.createElement('audio');
elem.id = id;
elem.autoplay = true;
elem.audio = 1.0;
this.remoteAudioEl.appendChild(elem);
this.attachMediaStream(elem, stream, type, 'Consumer');
let audioConsumerId = remotePeerId + '___pVolume';
this.audioConsumers.set(audioConsumerId, id);
let inputPv = this.getId(audioConsumerId);
if (inputPv) {
this.handlePV(id + '___' + audioConsumerId);
}
console.log('[Add audioConsumers]', this.audioConsumers);
break;
}
return elem;
@@ -1268,6 +1288,16 @@ class RoomClient {
);
}
if (consumer_kind === 'audio') {
let audioConsumerPlayerId = this.getMapKeyByValue(this.audioConsumers, consumer_id);
if (audioConsumerPlayerId) {
let inputPv = this.getId(audioConsumerPlayerId);
if (inputPv) inputPv.style.display = 'none';
this.audioConsumers.delete(audioConsumerPlayerId);
console.log('[Delete audioConsumers] ' + audioConsumerPlayerId, this.audioConsumers);
}
}
this.consumers.delete(consumer_id);
this.sound('left');
}
@@ -1277,7 +1307,7 @@ class RoomClient {
// ####################################################
async setVideoOff(peer_info, remotePeer = false) {
let d, vb, i, h, au, sf, sm, sv, ko, p, pm, pb;
let d, vb, i, h, au, sf, sm, sv, ko, p, pm, pb, pv;
let peer_id = peer_info.peer_id;
let peer_name = peer_info.peer_name;
let peer_audio = peer_info.peer_audio;
@@ -1292,6 +1322,12 @@ class RoomClient {
au.id = peer_id + '__audio';
au.className = peer_audio ? html.audioOn : html.audioOff;
if (remotePeer) {
pv = document.createElement('input');
pv.id = peer_id + '___pVolume';
pv.type = 'range';
pv.min = 0;
pv.max = 100;
pv.value = 100;
sf = document.createElement('button');
sf.id = 'remotePeer___' + peer_id + '___sendFile';
sf.className = html.sendFile;
@@ -1328,6 +1364,7 @@ class RoomClient {
BUTTONS.videoOff.sendVideoButton && vb.appendChild(sv);
BUTTONS.videoOff.sendFileButton && vb.appendChild(sf);
BUTTONS.videoOff.sendMessageButton && vb.appendChild(sm);
BUTTONS.videoOff.audioVolumeInput && vb.appendChild(pv);
}
BUTTONS.videoOff.muteAudioButton && vb.appendChild(au);
d.appendChild(i);
@@ -1338,6 +1375,7 @@ class RoomClient {
this.videoMediaContainer.appendChild(d);
this.handleAU(au.id);
if (remotePeer) {
this.handlePV('remotePeer___' + pv.id);
this.handleSM(sm.id);
this.handleSF(sf.id);
this.handleSV(sv.id);
@@ -1353,6 +1391,7 @@ class RoomClient {
this.setTippy(sf.id, 'Send file', 'top-end');
this.setTippy(sv.id, 'Send video', 'top-end');
this.setTippy(au.id, 'Mute', 'top-end');
this.setTippy(pv.id, '🔊 Volume', 'top-end');
this.setTippy(ko.id, 'Eject', 'top-end');
}
console.log('[setVideoOff] Video-element-count', this.videoMediaContainer.childElementCount);
@@ -1593,6 +1632,12 @@ class RoomClient {
return this.getId(peer_id + '__hand');
}
getMapKeyByValue(map, searchValue) {
for (let [key, value] of map.entries()) {
if (value === searchValue) return key;
}
}
// ####################################################
// UTILITY
// ####################################################
@@ -2873,6 +2918,25 @@ class RoomClient {
}, 2000);
}
// ####################################################
// HANDLE PEER VOLUME
// ###################################################
handlePV(uid) {
const words = uid.split('___');
let peer_id = words[1] + '___pVolume';
let audioConsumerId = this.audioConsumers.get(peer_id);
let audioConsumerPlayer = this.getId(audioConsumerId);
let inputPv = this.getId(peer_id);
if (inputPv && audioConsumerPlayer) {
inputPv.style.display = 'inline';
inputPv.value = 100;
inputPv.addEventListener('input', () => {
audioConsumerPlayer.volume = inputPv.value / 100;
});
}
}
// ####################################################
// HANDLE KICK-OUT
// ###################################################