[mirotalksfu] - add video and screen fps

هذا الالتزام موجود في:
Miroslav Pejic
2023-08-25 14:30:52 +02:00
الأصل a656e5ec9b
التزام 7a8d920e46
4 ملفات معدلة مع 63 إضافات و11 حذوفات

عرض الملف

@@ -16,6 +16,8 @@ class LocalStorage {
};
this.SFU_SETTINGS = {
video_fps: 0, // default 1280x768 30fps
screen_fps: 0, // max 30fps
lobby: false,
pitch_bar: true,
sounds: true,

عرض الملف

@@ -1339,6 +1339,16 @@ function handleSelects() {
videoQuality.onchange = () => {
rc.closeThenProduce(RoomClient.mediaType.video, videoSelect.value);
};
videoFps.onchange = () => {
rc.closeThenProduce(RoomClient.mediaType.video, videoSelect.value);
lsSettings.video_fps = videoFps.selectedIndex;
lS.setSettings(lsSettings);
};
screenFps.onchange = () => {
rc.closeThenProduce(RoomClient.mediaType.screen);
lsSettings.screen_fps = screenFps.selectedIndex;
lS.setSettings(lsSettings);
};
microphoneSelect.onchange = () => {
rc.closeThenProduce(RoomClient.mediaType.audio, microphoneSelect.value);
lS.setLocalStorageDevices(lS.MEDIA_TYPE.audio, microphoneSelect.selectedIndex, microphoneSelect.value);
@@ -1478,6 +1488,8 @@ function loadSettingsFromLocalStorage() {
isSoundEnabled = lsSettings.sounds;
switchPitchBar.checked = isPitchBarEnabled;
switchSounds.checked = isSoundEnabled;
videoFps.selectedIndex = lsSettings.video_fps;
screenFps.selectedIndex = lsSettings.screen_fps;
BtnVideoObjectFit.selectedIndex = lsSettings.video_obj_fit;
BtnVideoControls.selectedIndex = lsSettings.video_controls;
BtnsBarPosition.selectedIndex = lsSettings.buttons_bar;

عرض الملف

@@ -1011,11 +1011,15 @@ class RoomClient {
}
getVideoConstraints(deviceId) {
const frameRate = {
const defaultFrameRate = {
min: 5,
ideal: 15,
max: 30,
};
const selectedIndex = videoFps.selectedIndex;
const selectedValue = videoFps.options[selectedIndex].value;
const customFrameRate = { max: parseInt(selectedValue) };
const frameRate = selectedValue == 'max' ? defaultFrameRate : customFrameRate;
let videoConstraints = {
audio: false,
video: {
@@ -1127,12 +1131,15 @@ class RoomClient {
}
getScreenConstraints() {
const selectedIndex = screenFps.selectedIndex;
const selectedValue = screenFps.options[selectedIndex].value;
const frameRate = selectedValue == 'max' ? 30 : parseInt(selectedValue);
return {
audio: true,
video: {
width: { max: 1920 },
height: { max: 1080 },
frameRate: { max: 30 },
frameRate: { max: frameRate },
},
};
}
@@ -1313,7 +1320,7 @@ class RoomClient {
resizeVideoMedia();
}
closeThenProduce(type, deviceId, swapCamera = false) {
closeThenProduce(type, deviceId = null, swapCamera = false) {
this.closeProducer(type);
setTimeout(function () {
rc.produce(type, deviceId, swapCamera);

عرض الملف

@@ -175,12 +175,16 @@ access to use this app.
<div class="tabActions">
<div id="tabVideoDevices" class="tabcontent">
<br />
<i class="fas fa-video"></i>
<p>Video Source:</p>
<div class="title">
<i class="fas fa-video"></i>
<p>Video Source:</p>
</div>
<select id="videoSelect" class="form-select text-light bg-dark"></select>
<br />
<i class="fas fa-palette"></i>
<p>Video Quality:</p>
<div class="title">
<i class="fas fa-palette"></i>
<p>Video Quality:</p>
</div>
<select id="videoQuality" class="form-select text-light bg-dark">
<option value="default">🎥&nbsp;Default</option>
<option value="qvga">🎥&nbsp;QVGA</option>
@@ -191,17 +195,44 @@ access to use this app.
<option value="4k">🎥&nbsp;4K</option>
</select>
<br />
<div class="title">
<i class="fa-solid fa-camera"></i>
<p>Camera FPS:</p>
</div>
<br />
<select id="videoFps" class="form-select text-light bg-dark">
<option value="max">max frame-per-second</option>
<option value="30">30 - frame-per-second</option>
<option value="15">15 - frame-per-second</option>
<option value="5">5 -frame-per-second</option>
</select>
<br />
<div class="title">
<i class="fa-solid fa-desktop"></i>
<p>Screen FPS:</p>
</div>
<br />
<select id="screenFps" class="form-select text-light bg-dark">
<option value="max">max frame-per-second</option>
<option value="30">30 - frame-per-second</option>
<option value="15">15 - frame-per-second</option>
<option value="5">5 -frame-per-second</option>
</select>
</div>
<div id="tabAudioDevices" class="tabcontent">
<br />
<i class="fas fa-microphone"></i>
<p>Microphone:</p>
<div class="title">
<i class="fas fa-microphone"></i>
<p>Microphone:</p>
</div>
<select id="microphoneSelect" class="form-select text-light bg-dark"></select>
<br />
<div id="speakerSelectDiv">
<i class="fas fa-headphones"></i>
<p>Speaker:</p>
<div class="title">
<i class="fas fa-headphones"></i>
<p>Speaker:</p>
</div>
<select id="speakerSelect" class="form-select text-light bg-dark"></select>
<br />
</div>