[mirotalksfu] - add video and screen fps

public/js/LocalStorage.js

@@ -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,

public/js/Room.js

@@ -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;

public/js/RoomClient.js

@@ -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);