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

[mirotalksfu] - add mic advance options

تصفح المصدر
هذا الالتزام موجود في:
Miroslav Pejic
2023-10-21 22:56:58 +02:00
الأصل 989a9bbde6
التزام 3528dac639
10 ملفات معدلة مع 319 إضافات و25 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

32
public/css/Room.css
عرض الملف

@@ -378,6 +378,13 @@ th {
width: 150px;
}
.microphone-table-width {
width: 180px;
}
.dropdown-menu {
background: var(--body-bg);
}
/*--------------------------------------------------------------
# Style the tab
--------------------------------------------------------------*/
@@ -399,6 +406,9 @@ th {
width: 65%;
background-color: var(--body-bg);
min-height: 480px;
max-height: 550px;
overflow-x: hidden;
overflow-y: auto;
}
@media screen and (max-width: 830px) {
@@ -1406,6 +1416,28 @@ progress {
transition-duration: 1s;
}
/*--------------------------------------------------------------
# Webkit-Scrollbar Styles
--------------------------------------------------------------*/
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-thumb {
background: var(--body-bg);
border-radius: 5px;
cursor: pointer;
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--body-bg);
}
::-webkit-scrollbar-track {
background: #1a1b1f;
}
/*--------------------------------------------------------------
# Pulse class effect
--------------------------------------------------------------*/

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

@@ -213,7 +213,7 @@ video:fullscreen {
}
input[type='range'] {
display: none;
/* display: none; */
color: #fff;
width: 50px;
cursor: pointer;

8
public/js/LocalStorage.js
عرض الملف

@@ -20,6 +20,14 @@ class LocalStorage {
show_chat_on_msg: true, // show chat on new message
show_transcript_on_msg: true, // show transcript on new message
speech_in_msg: false, // speech incoming message
mic_auto_gain_control: false,
mic_echo_cancellations: true,
mic_noise_suppression: true,
mic_sample_rate: 0, // 0: 48000 Hz 1: 44100 Hz
mic_sample_size: 0, // 0: 16 bits 1: 32 bits
mic_channel_count: 0, // 0: 1(mono) 1: 2 (stereo)
mic_latency: 50, // ms
mic_volume: 100, // %
video_fps: 0, // default 1280x768 30fps
screen_fps: 0, // max 30fps
lobby: false, // default false

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

@@ -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.1.1
* @version 1.1.2
*
*/
@@ -59,8 +59,8 @@ const wbHeight = 600;
const swalImageUrl = '../images/pricing-illustration.svg';
const lS = new LocalStorage();
// Get Settings from localStorage
const lS = new LocalStorage();
const localStorageSettings = lS.getObjectLocalStorage('SFU_SETTINGS');
const lsSettings = localStorageSettings ? localStorageSettings : lS.SFU_SETTINGS;
console.log('LS_SETTINGS', lsSettings);
@@ -1166,6 +1166,9 @@ function handleButtons() {
tabLanguagesBtn.onclick = (e) => {
rc.openTab(e, 'tabLanguages');
};
applyAudioOptionsButton.onclick = () => {
rc.closeThenProduce(RoomClient.mediaType.audio, microphoneSelect.value);
};
speakerTestBtn.onclick = () => {
sound('ring', true);
};
@@ -1668,6 +1671,49 @@ function handleSelects() {
lS.setSettings(lsSettings);
e.target.blur();
};
// audio options
switchAutoGainControl.onchange = (e) => {
lsSettings.mic_auto_gain_control = e.currentTarget.checked;
lS.setSettings(lsSettings);
e.target.blur();
};
switchEchoCancellation.onchange = (e) => {
lsSettings.mic_echo_cancellations = e.currentTarget.checked;
lS.setSettings(lsSettings);
e.target.blur();
};
switchNoiseSuppression.onchange = (e) => {
lsSettings.mic_noise_suppression = e.currentTarget.checked;
lS.setSettings(lsSettings);
e.target.blur();
};
sampleRateSelect.onchange = (e) => {
lsSettings.mic_sample_rate = e.currentTarget.selectedIndex;
lS.setSettings(lsSettings);
e.target.blur();
};
sampleSizeSelect.onchange = (e) => {
lsSettings.mic_sample_size = e.currentTarget.selectedIndex;
lS.setSettings(lsSettings);
e.target.blur();
};
channelCountSelect.onchange = (e) => {
lsSettings.mic_channel_count = e.currentTarget.selectedIndex;
lS.setSettings(lsSettings);
e.target.blur();
};
micLatencyRange.oninput = (e) => {
lsSettings.mic_latency = e.currentTarget.value;
lS.setSettings(lsSettings);
micLatencyValue.innerText = e.currentTarget.value;
e.target.blur();
};
micVolumeRange.oninput = (e) => {
lsSettings.mic_volume = e.currentTarget.value;
lS.setSettings(lsSettings);
micVolumeValue.innerText = e.currentTarget.value;
e.target.blur();
};
// recording
switchHostOnlyRecording.onchange = (e) => {
hostOnlyRecording = e.currentTarget.checked;
@@ -1892,6 +1938,18 @@ function loadSettingsFromLocalStorage() {
switchPitchBar.checked = isPitchBarEnabled;
switchSounds.checked = isSoundEnabled;
switchShare.checked = notify;
switchAutoGainControl.checked = lsSettings.mic_auto_gain_control;
switchEchoCancellation.checked = lsSettings.mic_echo_cancellations;
switchNoiseSuppression.checked = lsSettings.mic_noise_suppression;
sampleRateSelect.selectedIndex = lsSettings.mic_sample_rate;
sampleSizeSelect.selectedIndex = lsSettings.mic_sample_size;
channelCountSelect.selectedIndex = lsSettings.mic_channel_count;
micLatencyRange.value = lsSettings.mic_latency || 50;
micLatencyValue.innerText = lsSettings.mic_latency || 50;
micVolumeRange.value = lsSettings.mic_volume || 100;
micVolumeValue.innerText = lsSettings.mic_volume || 100;
videoFps.selectedIndex = lsSettings.video_fps;
screenFps.selectedIndex = lsSettings.screen_fps;
BtnVideoObjectFit.selectedIndex = lsSettings.video_obj_fit;

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

@@ -9,7 +9,7 @@
* @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.1.1
* @version 1.1.2
*
*/
@@ -1028,7 +1028,7 @@ class RoomClient {
// ####################################################
getAudioConstraints(deviceId) {
return {
let constraints = {
audio: {
echoCancellation: true,
noiseSuppression: true,
@@ -1036,6 +1036,23 @@ class RoomClient {
},
video: false,
};
if (isRulesActive && isPresenter) {
constraints = {
audio: {
autoGainControl: switchAutoGainControl.checked,
echoCancellation: switchNoiseSuppression.checked,
noiseSuppression: switchEchoCancellation.checked,
sampleRate: parseInt(sampleRateSelect.value),
sampleSize: parseInt(sampleSizeSelect.value),
channelCount: parseInt(channelCountSelect.value),
latency: parseInt(micLatencyRange.value),
volume: parseInt(micVolumeRange.value / 100),
deviceId: deviceId,
},
video: false,
};
}
return constraints;
}
getCameraConstraints() {

4
public/js/Rules.js
عرض الملف

@@ -29,6 +29,7 @@ const BUTTONS = {
lockRoomButton: true, // presenter
unlockRoomButton: true, // presenter
lobbyButton: true, // presenter
micOptionsButton: true, // presenter
tabRecording: true,
pushToTalk: true,
host_only_recording: true, // presenter
@@ -87,6 +88,7 @@ function handleRules(isPresenter) {
BUTTONS.settings.lockRoomButton = false;
BUTTONS.settings.unlockRoomButton = false;
BUTTONS.settings.lobbyButton = false;
BUTTONS.settings.micOptionsButton = false;
BUTTONS.videoOff.muteAudioButton = false;
BUTTONS.videoOff.ejectButton = false;
BUTTONS.consumerVideo.ejectButton = false;
@@ -99,6 +101,7 @@ function handleRules(isPresenter) {
BUTTONS.settings.lockRoomButton = !isRoomLocked;
BUTTONS.settings.unlockRoomButton = isRoomLocked;
BUTTONS.settings.lobbyButton = true;
BUTTONS.settings.micOptionsButton = true;
BUTTONS.videoOff.muteAudioButton = true;
BUTTONS.videoOff.ejectButton = true;
BUTTONS.consumerVideo.ejectButton = true;
@@ -125,6 +128,7 @@ function handleRules(isPresenter) {
BUTTONS.settings.lockRoomButton ? show(lockRoomButton) : hide(lockRoomButton);
BUTTONS.settings.unlockRoomButton ? show(unlockRoomButton) : hide(unlockRoomButton);
BUTTONS.settings.lobbyButton ? show(lobbyButton) : hide(lobbyButton);
!BUTTONS.settings.micOptionsButton && hide(micOptionsButton);
BUTTONS.participantsList.saveInfoButton ? show(participantsSaveBtn) : hide(participantsSaveBtn);
BUTTONS.whiteboard.whiteboardLockButton
? elemDisplay('whiteboardLockButton', true)

32
public/sfu/MediasoupClient.js
عرض الملف

@@ -1891,24 +1891,25 @@
const uaParser = new ua_parser_js_1.UAParser(ua);
logger.debug('detectDevice() | browser detected [ua:%s, parsed:%o]', ua, uaParser.getResult());
const browser = uaParser.getBrowser();
const browserName = browser.name?.toLowerCase() ?? '';
const browserName = browser.name?.toLowerCase();
const browserVersion = parseInt(browser.major ?? '0');
const engine = uaParser.getEngine();
const engineName = engine.name?.toLowerCase() ?? '';
const engineName = engine.name?.toLowerCase();
const os = uaParser.getOS();
const osName = os.name?.toLowerCase() ?? '';
const osName = os.name?.toLowerCase();
const osVersion = parseFloat(os.version ?? '0');
const isIOS = osName === 'ios';
const isChrome = [
'chrome',
'chromium',
'mobile chrome',
'chrome webview',
'chrome headless',
].includes(browserName);
const isFirefox = ['firefox', 'mobile firefox', 'mobile focus'].includes(browserName);
const isSafari = ['safari', 'mobile safari'].includes(browserName);
const isEdge = ['edge'].includes(browserName);
const device = uaParser.getDevice();
const deviceModel = device.model?.toLowerCase();
const isIOS = osName === 'ios' || deviceModel === 'ipad';
const isChrome =
browserName &&
['chrome', 'chromium', 'mobile chrome', 'chrome webview', 'chrome headless'].includes(
browserName,
);
const isFirefox =
browserName && ['firefox', 'mobile firefox', 'mobile focus'].includes(browserName);
const isSafari = browserName && ['safari', 'mobile safari'].includes(browserName);
const isEdge = browserName && ['edge'].includes(browserName);
// Chrome, Chromium, and Edge.
if ((isChrome || isEdge) && !isIOS && browserVersion >= 111) {
return 'Chrome111';
@@ -1953,7 +1954,6 @@
else if (
engineName === 'webkit' &&
isIOS &&
osVersion >= 14.3 &&
typeof RTCRtpTransceiver !== 'undefined' &&
RTCRtpTransceiver.prototype.hasOwnProperty('currentDirection')
) {
@@ -12794,7 +12794,7 @@
/**
* Expose mediasoup-client version.
*/
exports.version = '3.6.101';
exports.version = '3.6.102';
/**
* Expose parseScalabilityMode() function.
*/

177
public/views/Room.html
عرض الملف

@@ -44,7 +44,7 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<!-- Bootstrap 5 -->
<!-- Bootstrap 5 https://getbootstrap.com/docs/5.0/components/-->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
@@ -373,6 +373,181 @@ access to use this app.
<div class="volume-bar"></div>
</div>
<br />
<div class="dropdown">
<button
class="dropdown-toggle"
type="button"
id="micOptionsButton"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<i class="fas fa-screwdriver-wrench"></i>
<p>Advance options</p>
</button>
<div class="dropdown-menu" aria-labelledby="micOptionsButton">
<!-- onclick="event.stopPropagation()" -->
<table class="settingsTable">
<tr id="autoGainControlButton">
<td class="microphone-table-width">
<div class="title">
<!-- <i class="fas fa-ear-listen"></i> -->
<p>Auto gain control</p>
</div>
</td>
<td>
<div class="form-check form-switch form-switch-md">
<input
id="switchAutoGainControl"
class="form-check-input"
type="checkbox"
/>
</div>
</td>
</tr>
<tr id="echoCancellationButton">
<td class="microphone-table-width">
<div class="title">
<!-- <i class="fas fa-ear-listen"></i> -->
<p>Echo cancellation</p>
</div>
</td>
<td>
<div class="form-check form-switch form-switch-md">
<input
id="switchEchoCancellation"
class="form-check-input"
type="checkbox"
checked
/>
</div>
</td>
</tr>
<tr id="noiseSuppressionButton">
<td class="microphone-table-width">
<div class="title">
<!-- <i class="fas fa-ear-listen"></i> -->
<p>Noise suppression</p>
</div>
</td>
<td>
<div class="form-check form-switch form-switch-md">
<input
id="switchNoiseSuppression"
class="form-check-input"
type="checkbox"
checked
/>
</div>
</td>
</tr>
<tr id="sampleRateButton">
<td class="microphone-table-width">
<div class="title">
<!-- <i class="fas fa-microphone-lines"></i> -->
<p>Sample rate</p>
</div>
</td>
<td>
<select
id="sampleRateSelect"
class="form-select form-select-sm text-light bg-dark"
>
<option value="48000">48000 Hz</option>
<option value="44100">44100 Hz</option>
</select>
</td>
</tr>
<tr id="sampleSizeButton">
<td class="microphone-table-width">
<div class="title">
<!-- <i class="fas fa-microphone-lines"></i> -->
<p>Sample size</p>
</div>
</td>
<td>
<select
id="sampleSizeSelect"
class="form-select form-select-sm text-light bg-dark"
>
<option value="16">16 bits</option>
<option value="32">32 bits</option>
</select>
</td>
</tr>
<tr id="channelCountButton">
<td class="microphone-table-width">
<div class="title">
<!-- <i class="fas fa-microphone-lines"></i> -->
<p>Channel count</p>
</div>
</td>
<td>
<select
id="channelCountSelect"
class="form-select form-select-sm text-light bg-dark"
>
<option value="1">1 (mono)</option>
<option value="2">2 (stereo)</option>
</select>
</td>
</tr>
<tr id="micLatencyButton">
<td class="microphone-table-width">
<div class="title">
<!-- <i class="fab fa-audible"></i> -->
<p>Latency</p>
</div>
</td>
<td>
<div class="title">
<input
type="range"
class="form-range"
id="micLatencyRange"
name="latency"
min="10"
max="1000"
value="50"
step="10"
/>
<p><span id="micLatencyValue">50</span>&nbsp;ms</p>
</div>
</td>
</tr>
<tr id="micVolumeButton">
<td class="microphone-table-width">
<div class="title">
<!-- <i class="fas fa-volume-high"></i> -->
<p>Volume</p>
</div>
</td>
<td>
<div>
<input
type="range"
class="form-range"
id="micVolumeRange"
name="volume"
min="0"
max="100"
value="100"
step="10"
/>
<p><span id="micVolumeValue">100</span>&nbsp;%</p>
</div>
</td>
</tr>
<tr>
<td>
<button class="btn btn-primary" id="applyAudioOptionsButton">
Apply options
</button>
</td>
</tr>
</table>
</div>
<hr style="border: 1px solid grey" />
</div>
<div id="speakerSelectDiv">
<div class="title">
<i class="fas fa-headphones"></i>