[mirotalksfu] - #171 refactoring
هذا الالتزام موجود في:
@@ -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);
|
||||
|
||||
المرجع في مشكلة جديدة
حظر مستخدم