[mirotalksfu] - add screen sharing track optimization

2025-04-02 21:43:51 +02:00
--- a/app/src/Server.js
+++ b/app/src/Server.js
@@ -64,7 +64,7 @@ dev dependencies: {
 * @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.8.07
+ * @version 1.8.08
 *
 */

--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
    "name": "mirotalksfu",
-    "version": "1.8.07",
+    "version": "1.8.08",
    "description": "WebRTC SFU browser-based video calls",
    "main": "Server.js",
    "scripts": {
--- a/public/js/Brand.js
+++ b/public/js/Brand.js
@@ -64,7 +64,7 @@ let BRAND = {
    },
    about: {
        imageUrl: '../images/mirotalk-logo.gif',
-        title: '<strong>WebRTC SFU v1.8.07</strong>',
+        title: '<strong>WebRTC SFU v1.8.08</strong>',
        html: `
            <button 
                id="support-button" 
--- a/public/js/LocalStorage.js
+++ b/public/js/LocalStorage.js
@@ -39,6 +39,7 @@ class LocalStorage {
            mic_latency: 50, // ms
            mic_volume: 100, // %
            video_fps: 0, // default 1280x768 30fps
+            screen_optimization: 1, // default detail (1): For high fidelity (screen sharing with text/graphics) || motion (2): For high frame rate (video playback, game streaming)
            screen_fps: 3, // default 1920x1080 15fps
            broadcasting: false, // default false (one to many a/v streaming)
            lobby: false, // default false
--- a/public/js/Room.js
+++ b/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.8.07
+ * @version 1.8.08
 *
 */

@@ -329,6 +329,12 @@ function initClient() {
            'right',
        );
        setTippy('initVideoAudioRefreshButton', 'Refresh audio/video devices', 'top');
+        setTippy(
+            'screenOptimizationLabel',
+            'Detail: For high fidelity (screen sharing with text/graphics)<br />Motion: For high frame rate (video playback, game streaming',
+            'right',
+            true,
+        );
        setTippy('switchPitchBar', 'Toggle audio pitch bar', 'right');
        setTippy('switchSounds', 'Toggle the sounds notifications', 'right');
        setTippy('switchShare', "Show 'Share Room' popup on join", 'right');
@@ -2493,6 +2499,11 @@ function handleSelects() {
    screenQuality.onchange = () => {
        rc.closeThenProduce(RoomClient.mediaType.screen);
    };
+    screenOptimization.onchange = () => {
+        rc.closeThenProduce(RoomClient.mediaType.screen);
+        localStorageSettings.screen_optimization = screenOptimization.selectedIndex;
+        lS.setSettings(localStorageSettings);
+    };
    videoFps.onchange = () => {
        rc.closeThenProduce(RoomClient.mediaType.video, videoSelect.value);
        localStorageSettings.video_fps = videoFps.selectedIndex;
@@ -3240,6 +3251,7 @@ function loadSettingsFromLocalStorage() {
    micVolumeRange.value = localStorageSettings.mic_volume || 100;
    micVolumeValue.innerText = localStorageSettings.mic_volume || 100;

+    screenOptimization.selectedIndex = localStorageSettings.screen_optimization;
    videoFps.selectedIndex = localStorageSettings.video_fps;
    screenFps.selectedIndex = localStorageSettings.screen_fps;
    BtnVideoObjectFit.selectedIndex = localStorageSettings.video_obj_fit;
@@ -5292,7 +5304,7 @@ function showAbout() {
        position: 'center',
        imageUrl: BRAND.about?.imageUrl && BRAND.about.imageUrl.trim() !== '' ? BRAND.about.imageUrl : image.about,
        customClass: { image: 'img-about' },
-        title: BRAND.about?.title && BRAND.about.title.trim() !== '' ? BRAND.about.title : 'WebRTC SFU v1.8.07',
+        title: BRAND.about?.title && BRAND.about.title.trim() !== '' ? BRAND.about.title : 'WebRTC SFU v1.8.08',
        html: `
            <br />
            <div id="about">
--- a/public/js/RoomClient.js
+++ b/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.8.07
+ * @version 1.8.08
 *
 */

@@ -1567,14 +1567,20 @@ class RoomClient {

            if (screen) {
                /*
-                    track.contentHint helps optimize media tracks for specific use cases like `motion` or `detail`.
-                        - `motion`: For high frame rate, suitable for dynamic content like video playback or game streaming.
-                        - `detail`: For content requiring high fidelity, such as screen sharing with text, graphics, or fine details, prioritizing resolution over frame rate.
-                */
+                 * track.contentHint helps optimize media tracks for specific use cases:
+                 * - 'motion': For high frame rate (video playback, game streaming)
+                 * - 'detail': For high fidelity (screen sharing with text/graphics)
+                 */
                if ('contentHint' in track) {
-                    track.contentHint = 'detail';
-                    console.info('Optimized video Track for screen sharing!');
+                    show(ScreenOptimizationDiv);
+
+                    const contentHint = screenOptimization.value;
+                    if (contentHint !== 'None') {
+                        track.contentHint = contentHint;
+                        console.info(`Optimized video track for screen sharing: ${contentHint}`);
+                    }
                } else {
+                    hide(ScreenOptimizationDiv);
                    console.warn('contentHint is not supported in this browser');
                }
            }
--- a/public/views/Room.html
+++ b/public/views/Room.html
@@ -458,6 +458,18 @@ access to use this app.
                                <option value="8k">🖥&nbsp;8K</option>
                            </select>
                        </div>
+                        <br />
+                        <div id="ScreenOptimizationDiv" class="hidden">
+                            <div class="title">
+                                <i class="fa-solid fa-rocket"></i>
+                                <p id="screenOptimizationLabel">Screen Optimization:</p>
+                            </div>
+                            <select id="screenOptimization" class="form-select text-light bg-dark">
+                                <option value="default">🖥&nbsp;None</option>
+                                <option value="detail">🖥&nbsp;Detail</option>
+                                <option value="motion">🖥&nbsp;Motion</option>
+                            </select>
+                        </div>
                        <hr />
                        <div class="title">
                            <i class="fa-solid fa-camera"></i>