[mirotalksfu] - #171 refactoring

هذا الالتزام موجود في:
Miroslav Pejic
2024-11-04 01:18:18 +01:00
الأصل 58669ccf8e
التزام a6f4b8b695
4 ملفات معدلة مع 71 إضافات و46 حذوفات

عرض الملف

@@ -11,7 +11,7 @@ if (location.href.substr(0, 5) !== 'https') location.href = 'https' + location.h
* @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
* @version 1.6.19
* @version 1.6.20
*
*/
@@ -4564,7 +4564,7 @@ function showAbout() {
imageUrl: image.about,
customClass: { image: 'img-about' },
position: 'center',
title: 'WebRTC SFU v1.6.19',
title: 'WebRTC SFU v1.6.20',
html: `
<br />
<div id="about">

عرض الملف

@@ -353,6 +353,7 @@ class RoomClient {
this.audioProducerId = null;
this.audioConsumers = new Map();
this.peers = new Map();
this.consumers = new Map();
this.producers = new Map();
this.producerLabel = new Map();
@@ -445,11 +446,11 @@ class RoomClient {
console.log('00-WARNING ----> You are Banned from the Room!');
return this.isBanned();
}
const peers = new Map(JSON.parse(room.peers));
this.peers = new Map(JSON.parse(room.peers));
if (!peer_info.peer_token) {
// hack...
for (let peer of Array.from(peers.keys()).filter((id) => id !== this.peer_id)) {
let peer_info = peers.get(peer).peer_info;
for (let peer of Array.from(this.peers.keys()).filter((id) => id !== this.peer_id)) {
let peer_info = this.peers.get(peer).peer_info;
if (peer_info.peer_name == this.peer_name) {
console.log('00-WARNING ----> Username already in use');
return this.userNameAlreadyInRoom();
@@ -488,11 +489,10 @@ class RoomClient {
survey = room.survey;
console.log('07.0 ----> Room Leave Redirect', room.redirect);
redirect = room.redirect;
let peers = new Map(JSON.parse(room.peers));
participantsCount = peers.size;
participantsCount = this.peers.size;
// ME
for (let peer of Array.from(peers.keys()).filter((id) => id == this.peer_id)) {
let my_peer_info = peers.get(peer).peer_info;
for (let peer of Array.from(this.peers.keys()).filter((id) => id == this.peer_id)) {
let my_peer_info = this.peers.get(peer).peer_info;
console.log('07.1 ----> My Peer info', my_peer_info);
isPresenter = window.localStorage.isReconnected === 'true' ? isPresenter : my_peer_info.peer_presenter;
this.peer_info.peer_presenter = isPresenter;
@@ -601,8 +601,8 @@ class RoomClient {
}
// PARTICIPANTS
for (let peer of Array.from(peers.keys()).filter((id) => id !== this.peer_id)) {
let peer_info = peers.get(peer).peer_info;
for (let peer of Array.from(this.peers.keys()).filter((id) => id !== this.peer_id)) {
let peer_info = this.peers.get(peer).peer_info;
// console.log('07.1 ----> Remote Peer info', peer_info);
const { peer_id, peer_name, peer_presenter, peer_video, peer_recording } = peer_info;
@@ -1882,11 +1882,14 @@ class RoomClient {
case mediaType.screen:
let isScreen = type === mediaType.screen;
this.removeVideoOff(this.peer_id);
d = document.createElement('div');
d.className = 'Camera';
d.id = id + '__video';
elem = document.createElement('video');
elem.setAttribute('id', id);
elem.setAttribute('volume', this.peer_id + '___pVolume');
!isScreen && elem.setAttribute('name', this.peer_id);
elem.setAttribute('playsinline', true);
elem.controls = isVideoControlsOn;
@@ -1896,9 +1899,11 @@ class RoomClient {
elem.poster = image.poster;
elem.style.objectFit = isScreen || isBroadcastingEnabled ? 'contain' : 'var(--videoObjFit)';
elem.className = this.isMobileDevice || isScreen ? '' : 'mirror';
vb = document.createElement('div');
vb.id = id + '__vb';
vb.className = 'videoMenuBar hidden';
pip = this.createButton(id + '__pictureInPicture', html.pip);
fs = this.createButton(id + '__fullScreen', html.fullScreen);
ts = this.createButton(id + '__snapshot', html.snapshot);
@@ -1910,13 +1915,16 @@ class RoomClient {
this.peer_info.peer_audio ? html.audioOn : html.audioOff,
);
au.style.cursor = 'default';
p = document.createElement('p');
p.id = this.peer_id + '__name';
p.className = html.userName;
p.innerText = (isPresenter ? '⭐️ ' : '') + this.peer_name + ' (me)';
i = document.createElement('i');
i.id = this.peer_id + '__hand';
i.className = html.userHand;
pm = document.createElement('div');
pb = document.createElement('div');
pm.setAttribute('id', this.peer_id + '_pitchMeter');
@@ -1965,6 +1973,13 @@ class RoomClient {
this.handleZV(elem.id, d.id, this.peer_id);
this.handlePV(id + '___' + pv.id);
// Use helper function to set audio volume
this.setAV(
this.audioConsumers.get(this.peer_id + '___pVolume'),
this.peer_id + '___pVolume',
this.peer_info.peer_audio_volume,
);
if (!isScreen) this.handleVP(elem.id, vp.id);
this.popupPeerInfo(p.id, this.peer_info);
@@ -1987,7 +2002,8 @@ class RoomClient {
break;
case mediaType.audio:
elem = document.createElement('audio');
elem.id = id + '__localAudio';
elem.setAttribute('id', id);
elem.setAttribute('volume', this.peer_id + '___pVolume');
elem.controls = false;
elem.autoplay = true;
elem.muted = true;
@@ -1995,7 +2011,14 @@ class RoomClient {
this.myAudioEl = elem;
this.localAudioEl.appendChild(elem);
await this.attachMediaStream(elem, stream, type, 'Producer');
this.handlePV(elem.id + '___' + this.peer_id + '___pVolume');
const audioConsumerId = this.peer_id + '___pVolume';
this.audioConsumers.set(audioConsumerId, elem.id);
// Use helper function to set audio volume
this.setAV(elem.id, audioConsumerId, this.peer_info.peer_audio_volume);
this.handlePV(elem.id + '___' + audioConsumerId);
console.log('[addProducer] audio-element-count', this.localAudioEl.childElementCount);
break;
default:
@@ -2114,7 +2137,7 @@ class RoomClient {
}
if (type === mediaType.audio) {
const au = this.getId(producer_id + '__localAudio');
const au = this.getName(producer_id + '__localAudio');
au.srcObject.getTracks().forEach(function (track) {
track.stop();
});
@@ -2288,20 +2311,6 @@ class RoomClient {
const remotePrivacyOn = peer_info.peer_video_privacy;
const remotePeerPresenter = peer_info.peer_presenter;
// Helper function to handle audio volume setup
const setAudioVolume = (audioElementId, volumeElementId, volumeValue) => {
const volumeInput = this.getId(volumeElementId);
const audioPlayer = this.getId(audioElementId);
const volume = volumeValue / 100;
if (volumeInput && audioPlayer) {
console.log('Setting audio volume:', volumeValue);
volumeInput.value = volumeValue;
volumeInput.disabled = volumeValue < 100;
this.setAudioVolume(audioPlayer, volume);
}
};
switch (type) {
case mediaType.video:
case mediaType.screen:
@@ -2313,6 +2322,7 @@ class RoomClient {
elem = document.createElement('video');
elem.setAttribute('id', id);
elem.setAttribute('volumeBar', remotePeerId + '___pVolume');
!remoteIsScreen && elem.setAttribute('name', remotePeerId);
elem.setAttribute('playsinline', true);
elem.controls = isVideoControlsOn;
@@ -2481,7 +2491,7 @@ class RoomClient {
}
// Use helper function to set audio volume
setAudioVolume(
this.setAV(
this.audioConsumers.get(remotePeerId + '___pVolume'),
remotePeerId + '___pVolume',
remotePeerAudioVolume,
@@ -2494,7 +2504,8 @@ class RoomClient {
break;
case mediaType.audio:
elem = document.createElement('audio');
elem.id = id;
elem.setAttribute('id', id);
elem.setAttribute('volumeBar', remotePeerId + '___pVolume');
elem.autoplay = true;
elem.audio = 1.0;
this.remoteAudioEl.appendChild(elem);
@@ -2505,7 +2516,8 @@ class RoomClient {
this.audioConsumers.set(audioConsumerId, id);
// Use helper function to set audio volume
setAudioVolume(id, audioConsumerId, remotePeerAudioVolume);
this.setAV(id, audioConsumerId, remotePeerAudioVolume);
this.handleCV(id + '___' + audioConsumerId);
this.setPeerAudio(remotePeerId, remotePeerAudio);
@@ -2666,7 +2678,7 @@ class RoomClient {
BUTTONS.videoOff.muteAudioButton && this.handleAU(au.id);
if (remotePeer) {
this.handleCV(peer_id + '___' + pv.id);
this.handleCV('remotePeer___' + pv.id);
this.handleSM(sm.id);
this.handleSF(sf.id);
this.handleSV(sv.id);
@@ -6920,18 +6932,31 @@ class RoomClient {
// ####################################################
handleCV(uid) {
this.handleVolumeControl(uid, true);
this.handleVolumeControl(uid, true); // Consumer
}
handlePV(uid) {
this.handleVolumeControl(uid, false);
this.handleVolumeControl(uid, false); // Producer
}
setAV(audioElementId, volumeElementId, volumeValue) {
const volumeInput = this.getId(volumeElementId);
const audioPlayer = this.getId(audioElementId);
const volume = volumeValue / 100;
if (volumeInput && audioPlayer) {
console.log('Setting audio volume:', volumeValue);
volumeInput.value = volumeValue;
volumeInput.disabled = volumeValue < 100;
this.setAudioVolume(audioPlayer, volume);
}
}
handleVolumeControl(uid, isConsumer = true) {
const words = uid.split('___');
const peer_id = `${words[1]}___pVolume`;
const audioPlayer = this.getId(isConsumer ? this.audioConsumers.get(peer_id) : words[0]);
const inputElement = this.getId(peer_id);
const volumeInputId = `${words[1]}___pVolume`;
const audioPlayer = this.getId(isConsumer ? this.audioConsumers.get(volumeInputId) : words[0]);
const inputElement = this.getId(volumeInputId);
if (inputElement && audioPlayer) {
inputElement.style.display = 'inline';
@@ -6958,9 +6983,9 @@ class RoomClient {
type: 'peerAudio',
peer_name: this.peer_name,
[isConsumer ? 'audioConsumerId' : 'audioProducerId']: isConsumer
? this.audioConsumers.get(peer_id)
? this.audioConsumers.get(volumeInputId)
: this.audioProducerId,
peer_id: peer_id,
volumeInputId: volumeInputId,
volume: volume,
broadcast: true,
};
@@ -6990,13 +7015,13 @@ class RoomClient {
handlePeerAudio(cmd) {
console.log('handlePeerAudio', { cmd });
const { peer_id, audioProducerId, audioConsumerId, volume } = cmd;
const { volumeInputId, audioProducerId, audioConsumerId, volume } = cmd;
const inputPV = this.getId(peer_id);
const volumeInput = this.getId(volumeInputId);
if (!inputPV) return;
if (!volumeInput) return;
inputPV.value = volume * 100;
volumeInput.value = volume * 100;
if (audioProducerId) {
this.handleConsumerAudio(audioProducerId, volume);
@@ -7005,7 +7030,7 @@ class RoomClient {
disable the volume input control on the consumer side to prevent further adjustments.
Otherwise, keep the input enabled if the volume is still at 100.
*/
inputPV.disabled = inputPV.value < 100 ? true : false;
volumeInput.disabled = volumeInput.value < 100;
}
if (audioConsumerId) this.handleProducerAudio(audioConsumerId, volume);